Vistas-MostrarDatos-Terminado

XDPVD · Jun 27, 2021 · d81ef8a · d81ef8a
1 parent ff7ad56
commit d81ef8a
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 38 deletions.
diff --git a/pages/mostrar-datos.tsx b/pages/mostrar-datos.tsx
@@ -1,10 +1,12 @@
 import ShowD from "../sections/ShowData/Show"
 import Layout from "../components/Layout"
+import Profile from "../sections/ShowData/ProfilePicture"
 
 export default function Show() {
   return (
     <div>
       <Layout withNav withFooter>
+        <Profile></Profile>
         <ShowD></ShowD>
       </Layout>
     </div>

diff --git a/sections/ShowData/Data.tsx b/sections/ShowData/Data.tsx
@@ -1,34 +1,36 @@
 import styles from "../../styles/sections/Show.module.css"
-import { FormLabel, Input, Button, Text } from "@chakra-ui/react"
+import { FormLabel, Input, Button, Text, FormControl } from "@chakra-ui/react"
 
 export default function Show() {
   return (
     <div>
-      <Text className={styles.labelPrincipal}>Datos personales</Text>
-      <p className={styles.labelsub}>
+      <Text color="primary" className={styles.labelPrincipal}>
+        Datos personales
+      </Text>
+      <p color="primary" className={styles.labelsub}>
         Puedes cambiar los datos de tu perfil cuantas veces lo consideres
         necesario.
       </p>
-      <div className={styles.Entrada}>
-        <div>
+      <div color="primary" className={styles.Input}>
+        <FormControl>
           <FormLabel className={styles.label}>Nombres</FormLabel>
           <Input
             borderColor="black.100"
             type="text"
-            className={styles.Entrada}
+            className={styles.Input}
             placeholder="Escribe tus nombres aquí"
           />
-        </div>
-        <div>
+        </FormControl>
+        <FormControl>
           <FormLabel className={styles.label}>Apellidos</FormLabel>
           <Input
             borderColor="black.100"
             type="text"
-            className={styles.Entrada}
+            className={styles.Input}
             placeholder="Escribe tus apellidos aquí"
           />
-        </div>
-        <div className={styles.Boton}>
+        </FormControl>
+        <div className={styles.Button}>
           <Button variant="primary">Guardar Cambios</Button>
         </div>
       </div>

diff --git a/sections/ShowData/History.tsx b/sections/ShowData/History.tsx
@@ -5,8 +5,10 @@ import ZIcon from "../../components/Icon/ZIcon"
 export default function Show() {
   return (
     <div>
-      <Text className={styles.labelPrincipal}>Historial</Text>
-      <p className={styles.labelsub}>
+      <Text color="primary" className={styles.labelPrincipal}>
+        Historial
+      </Text>
+      <p color="primary" className={styles.labelsub}>
         Puedes ver tu lista de pendientes de pago aquí.
       </p>
       <div>
@@ -16,7 +18,7 @@ export default function Show() {
             <Text size="md">Monto:</Text>
           </Box>
           <Spacer />
-          <Box flex="">
+          <Box p="2">
             <Link>
               <ZIcon name="search" />
             </Link>
@@ -32,7 +34,7 @@ export default function Show() {
             <Text size="md">Monto:</Text>
           </Box>
           <Spacer />
-          <Box>
+          <Box p="2">
             <Link>
               <ZIcon name="search" />
             </Link>

diff --git a/sections/ShowData/Password.tsx b/sections/ShowData/Password.tsx
@@ -1,34 +1,36 @@
 import styles from "../../styles/sections/Show.module.css"
-import { FormLabel, Input, Button, Text } from "@chakra-ui/react"
+import { FormLabel, Input, Button, Text, FormControl } from "@chakra-ui/react"
 
 export default function Show() {
   return (
     <div>
-      <Text className={styles.labelPrincipal}>Contraseña</Text>
-      <p className={styles.labelsub}>
+      <Text color="primary" className={styles.labelPrincipal}>
+        Contraseña
+      </Text>
+      <p color="primary" className={styles.labelsub}>
         Puedes cambiar tu contraseña cuantas veces lo necesites. Te recomendamos
         utilizar numeros y letras.
       </p>
-      <div className={styles.Entrada}>
-        <div>
+      <div className={styles.Input}>
+        <FormControl>
           <FormLabel className={styles.label}>Contraseña actual</FormLabel>
           <Input
             borderColor="black.100"
             type={"password"}
             placeholder="Ingrese contraseña actual"
-            className={styles.Entrada}
+            className={styles.Input}
           />
-        </div>
-        <div>
+        </FormControl>
+        <FormControl>
           <FormLabel className={styles.label}>Nueva contraseña</FormLabel>
           <Input
             borderColor="black.100"
             type={"password"}
             placeholder="Ingrese contraseña nueva"
-            className={styles.Entrada}
+            className={styles.Input}
           />
-        </div>
-        <div className={styles.Boton}>
+        </FormControl>
+        <div className={styles.Button}>
           <Button variant="primary">Guardar Cambios</Button>
         </div>
       </div>

diff --git a/sections/ShowData/Pay.tsx b/sections/ShowData/Pay.tsx
@@ -1,14 +1,16 @@
 import styles from "../../styles/sections/Show.module.css"
-import { Box, Text, Button, Flex, Spacer } from "@chakra-ui/react"
+import { Box, Text, Button, Flex, Spacer, FormControl } from "@chakra-ui/react"
 
 export default function Show() {
   return (
     <div>
-      <Text className={styles.labelPrincipal}>Realizar Pago</Text>
-      <p className={styles.labelsub}>
+      <Text color="primary" className={styles.labelPrincipal}>
+        Realizar Pago
+      </Text>
+      <p color="primary" className={styles.labelsub}>
         Puedes revisar tu lista de pendientes de pago aquí.
       </p>
-      <div>
+      <FormControl>
         <Flex backgroundColor="gray.200" padding="2" marginBottom="20px">
           <Box p="2">
             <Text size="md">Nombre del servicio:</Text>
@@ -34,7 +36,7 @@ export default function Show() {
             </Button>
           </Box>
         </Flex>
-      </div>
+      </FormControl>
     </div>
   )
 }
diff --git a/sections/ShowData/ProfilePicture.tsx b/sections/ShowData/ProfilePicture.tsx
@@ -0,0 +1,50 @@
+import styles from "../../styles/sections/Show.module.css"
+import { Box, Grid, Flex, Avatar, Text, Link, Circle } from "@chakra-ui/react"
+import ZIcon from "../../components/Icon/ZIcon"
+
+export default function CategoryTittle() {
+  return (
+    <div className={styles.conteinerConFondo}>
+      <Box mt="250px" ml="100" pos="absolute">
+        <div className="generalWrapper">
+          <Grid>
+            <Box>
+              <Flex align="center" w="1000px">
+                <Link>
+                  <Avatar
+                    size="2xl"
+                    name="Oshigaki Kisame"
+                    src="https://bit.ly/broken-link"
+                    mx="1"
+                  />
+                </Link>
+                <Link>
+                  <Circle
+                    pos="absolute"
+                    ml="-3"
+                    w="45px"
+                    h="45px"
+                    bg="circleicons"
+                  >
+                    <ZIcon name="pencil" color="primary" />
+                  </Circle>
+                </Link>
+                <Grid>
+                  <Text
+                    fontFamily="Poppins"
+                    color="primary"
+                    ml="10"
+                    className="bold500"
+                    fontSize="35px"
+                  >
+                    Lucy León Raskov
+                  </Text>
+                </Grid>
+              </Flex>
+            </Box>
+          </Grid>
+        </div>
+      </Box>
+    </div>
+  )
+}
diff --git a/sections/ShowData/Show.tsx b/sections/ShowData/Show.tsx
@@ -14,8 +14,10 @@ export default function Show() {
         <Tabs align="center" orientation="vertical" variant="unstyled" isLazy>
           <div className={styles.conteinerList}>
             <TabList>
-              <Text className={styles.titlesub}>Mi panel</Text>
-              <div className={styles.linksub}>
+              <Text color="primary" className={styles.titlesub}>
+                Mi panel
+              </Text>
+              <div color="primary" className={styles.linksub}>
                 <Tab>Datos Personales</Tab>
                 <Tab>Contraseña</Tab>
                 <Tab>Realizar Pagos</Tab>

diff --git a/styles/sections/Show.module.css b/styles/sections/Show.module.css
@@ -11,11 +11,11 @@
 
 .conteinerConFondo{
   background: #FBD76D;
-  height: 150px;
+  height: 100px;
   width: 100%;
   display: flex;
-  justify-content: center;
-  align-items: center;
+  justify-content:left;
+  align-items:center;
 }
 
 .conteinerForm{
@@ -99,13 +99,13 @@
   color: #525252;
 }
 
-.Boton{
+.Button{
   border-radius: 5px;
   float:left;
   margin-right: auto;
 }
 
-.Entrada{
+.Input{
   width: 60%;
   flex-direction:row;
   display: grid;