hola

fullstacktf · Dec 22, 2021 · 00d70a7 · 00d70a7
1 parent d3fef9a
commit 00d70a7
Show file tree

Hide file tree

Showing 52 changed files with 1,870 additions and 914 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,6 +24,8 @@
     "md5": "^2.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-private-public-route": "^1.1.1",
+    "react-private-route": "^1.1.2",
     "react-responsive-carousel": "^3.2.22",
     "react-router-dom": "^6.1.1",
     "react-scripts": "4.0.3",

diff --git a/src/App.css b/src/App.css
@@ -1,5 +1,6 @@
 body{
-  background-color: rgb(195, 211, 241);
+  background-image: url("https://i.imgur.com/xwNFy3D.jpg");
+  background-size: 2500px 1200px;
 }
 
 .App {

diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,115 @@
+import React, { Fragment } from 'react'
+import './App.css'
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
+import { Invite } from './components/Invite/Invite'
+import Login from './components/login/login'
+import { EnterInvitation } from './components/EnterInvitation/EnterInvitation'
+import { CreateIncidents } from './components/Incidents/CreateIncidents'
+import { CreateNotification } from './components/Notifications/CreateNotification'
+import { Navbar } from './components/Navbar/Navbar'
+import { SignUp } from './components/registro/registro'
+/* import {Payment} from './components/Payment/Payment'; */
+import { Footer } from './components/Footer/Footer'
+import { Payment } from './components/Payments/payments'
+import { Myaccount } from './components/Myaccount/MyAccount'
+import { MainContextProvider } from './components/context/Main.context'
+import { ChooseRol } from './components/ChooseRol/ChooseRol'
+import { CreateCommunity } from './components/CreateCommunity/CreateCommunity'
+import { UserProfile } from './components/UserProfile/UserProfile'
+import { GeneralPayment } from './components/Payments/GeneralPayments'
+import { CommunityServicePayment } from './components/Payments/CommunityServicePayments'
+import { ExtraPayment } from './components/Payments/ExtraPayments'
+import { MasterProfile } from './components/MasterProfile/MasterProfile'
+import { CheckIncidents } from './components/Incidents/CheckIncidents'
+import { CheckNotification } from './components/Notifications/CheckNotification'
+
+
+function App() {
+    return (
+        <MainContextProvider>
+            <Router>
+                <Fragment>
+                    <Navbar />
+                    <Routes>
+                        <Route path="/" element={<Login />}></Route>
+
+                        <Route path="/sign-in" element={<Login />}></Route>
+
+                        <Route path="/sign-up" element={<SignUp />}></Route>
+
+                        {/*  PRIVATE ROUTE */}
+
+                        <Route
+                            path="/create-incidents"
+                            element={<CreateIncidents />}
+                        ></Route>
+                        <Route
+                            path="/create-notifications"
+                            element={<CreateNotification />}
+                        ></Route>
+
+                        <Route path="/profile" element={<Myaccount />}></Route>
+                        <Route
+                            path="/choose-rol"
+                            element={<ChooseRol />}
+                        ></Route>
+
+                        <Route
+                            path="/user-profile"
+                            element={<UserProfile />}
+                        ></Route>
+
+                        <Route
+                            path="/master-profile"
+                            element={<MasterProfile />}
+                        ></Route>
+
+                        <Route
+                            path="/check-incidents"
+                            element={<CheckIncidents />}
+                        ></Route>
+
+                        <Route
+                            path="/check-notifications"
+                            element={<CheckNotification />}
+                        ></Route>
+
+                        <Route
+                            path="/generate-invitation"
+                            element={<Invite />}
+                        ></Route>
+
+                        <Route
+                            exact
+                            path="/enter-invitation"
+                            element={<EnterInvitation />}
+                        ></Route>
+
+                        <Route
+                            path="/create-community"
+                            element={<CreateCommunity />}
+                        ></Route>
+
+                        <Route path="/payments" element={<Payment />} />
+                        <Route
+                            path="/general-payments"
+                            element={<GeneralPayment />}
+                        />
+                        <Route
+                            path="/community-service-payments"
+                            element={<CommunityServicePayment />}
+                        />
+                        <Route
+                            path="/extra-payments"
+                            element={<ExtraPayment />}
+                        />
+                    </Routes>
+
+                    <Footer />
+                </Fragment>
+            </Router>
+        </MainContextProvider>
+    )
+}
+
+export default App
diff --git a/src/App.tsx b/src/App.tsx
diff --git a/src/components/ChooseRol/ChooseRol.jsx b/src/components/ChooseRol/ChooseRol.jsx
@@ -8,34 +8,34 @@ export const ChooseRol = () => {
         <div className={styles.container}>
             <div className={styles.containerLeft}>
                 <div className={styles.containerLeftText}>
-                    <h3>Sé el presidente de una comunidad</h3>
-                    <p>
+                    <h3 className={styles.title}>Sé el presidente de una comunidad</h3>
+                    <p className={styles.title}>
                         Crea y gestiona tu propia comunidad de vecinos, crea
                         códigos invitacionales para agregar a tus vecinos
                     </p>
                     <Link to="/create-community">
                         {' '}
-                        <Button>Crear una comunidad</Button>
+                        <Button className={styles.buttonGenerateInvitation}>Crear una comunidad</Button>
                     </Link>
                 </div>
             </div>
 
             <div className={styles.containerMid}>
                 <div className={styles.containerMidText}>
-                    <h1>¡Elige tu rol!</h1>
+                    <h1 className={styles.title}>¡Elige tu rol!</h1>
                 </div>
             </div>
 
             <div className={styles.containerRight}>
                 <div className={styles.containerLeftText}>
-                    <h2>¿Tienes código de invitación?</h2>
-                    <h2>Únete una comunidad</h2>
-                    <p>
+                    <h2 className={styles.title}>¿Tienes código de invitación?</h2>
+                    <h2 className={styles.title}>Únete una comunidad</h2>
+                    <p className={styles.title}>
                         Únete a tu comunidad de vecinos y entérate de los pagos,
                         las notificaciones e incidencias al momento
                     </p>
                     <Link to="/enter-invitation">
-                        <Button>Unirse una comunidad</Button>
+                        <Button className={styles.buttonGenerateInvitation}>Unirse una comunidad</Button>
                     </Link>
                 </div>
             </div>

diff --git a/src/components/ChooseRol/ChooseRol.module.css b/src/components/ChooseRol/ChooseRol.module.css
@@ -1,24 +1,26 @@
 .container{
     width: 100vw;
     height: 100vh;
-    border: 1px solid red;
     display: flex;
     flex-direction: row;
     align-items: space-around;
     justify-content: space-around;
+
 }
 
 .containerTop{
     width: 100%;
     height: 100px;
     border: 1px solid black;
+
 }
 
 .containerLeft{
     margin-top: 50px;
     width: 400px;
     height: 600px;
-    border: 1px solid blue;
+    background: rgb(2,0,36);
+    background: radial-gradient(circle, rgba(2, 0, 36, 0.226) 0%, rgba(74, 84, 126, 0.397) 35%, rgba(37, 70, 130, 0.747) 96%);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -39,7 +41,8 @@
     margin-top: 100px;
     width: 200px;
     height: 200px;
-    border: 1px solid blue;
+    background: rgb(2,0,36);
+    background: radial-gradient(circle, rgba(2, 0, 36, 0.034) 0%, rgba(74, 84, 126, 0.397) 35%, rgba(37,69,130,1) 96%);
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -51,11 +54,29 @@
     margin-top: 50px;
     width: 400px;
     height: 600px;
-    border: 1px solid blue;
+    background: rgb(2,0,36);
+    background: radial-gradient(circle, rgba(2, 0, 36, 0.24) 0%, rgba(74, 84, 126, 0.397) 35%, rgba(37, 70, 130, 0.699) 96%);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: row;
     padding: 10px;
 
 }
+
+.title{
+    color: #ffffff;
+    font-family: 'Raleway', sans-serif;
+    font-size: 24px;
+  }
+
+  .buttonGenerateInvitation{
+    font-family: 'Raleway', sans-serif;
+    color: #6969e9;
+    font-size: 15px;
+    font-weight: bolder;
+    border-radius: 20px;
+    margin-top: 25px;
+
+
+}
diff --git a/src/components/CreateCommunity/CreateCommunity.jsx b/src/components/CreateCommunity/CreateCommunity.jsx
@@ -39,8 +39,8 @@ export const CreateCommunity = () => {
     return (
         <div className={styles.container}>
             <div className={styles.containerCreateCommunity}>
-                <h1>Rellena los datos de tu comunidad</h1>
-                <p>Nombre de la comunidad</p>
+                <h1 className={styles.title}>Rellena los datos de tu comunidad</h1>
+                <p className={styles.title}>Nombre de la comunidad</p>
 
                 <input
                     type="text"
@@ -49,32 +49,32 @@ export const CreateCommunity = () => {
                     placeholder="Nombre de la comunidad"
                     onChange={handleInput}
                 />
-                <p>Dirección</p>
+                <p className={styles.title}>Dirección</p>
                 <input
                     type="text"
                     className={styles.inputs}
                     name="address"
                     placeholder="Dirección"
                     onChange={handleInput}
                 />
-                <p>Ciudad</p>
+                <p className={styles.title}>Ciudad</p>
                 <input
                     type="text"
                     className={styles.inputs}
                     name="city"
                     placeholder="Ciudad"
                     onChange={handleInput}
                 />
-                <p>Nº de apartamentos</p>
-                <input
+                <p className={styles.title}>Nº de apartamentos</p>
+                <input 
                     type="number"
                     className={styles.inputs}
                     name="appartments"
                     placeholder="Nº de apartamentos"
                     onChange={handleInput}
                 />
 
-                <Button onClick={handleSubmit}>Crear comunidad</Button>
+                <Button className={styles.buttonGenerateInvitation} onClick={handleSubmit}>Crear comunidad</Button>
             </div>
         </div>
     )