From a112734b944daab3e12c2308026a8cc2b4a650e8 Mon Sep 17 00:00:00 2001
From: LucianoMariotti <luciano.mariotti99@gmail.com>
Date: Thu, 8 Sep 2022 15:22:45 -0300
Subject: [PATCH 1/2] fix Text variants

---
 modules/shared/components/Menu/Menu.tsx | 60 ++++++++++++-------------
 modules/shared/theme/index.ts           | 19 +++-----
 pages/index.tsx                         |  9 +---
 3 files changed, 39 insertions(+), 49 deletions(-)

diff --git a/modules/shared/components/Menu/Menu.tsx b/modules/shared/components/Menu/Menu.tsx
index 9347995..564a6fc 100644
--- a/modules/shared/components/Menu/Menu.tsx
+++ b/modules/shared/components/Menu/Menu.tsx
@@ -26,37 +26,37 @@ export default function Menu() {
 
   return (
     <>
-        <Flex justify="space-between" p={5}>
-          <Box>
-            <MenuLogo fill="white" width={18} height={23} borderColor="primary.100" borderWidth={7} />
-          </Box>
-          <Box onClick={onOpen} cursor="pointer">
-            <Hamburguer />
-          </Box>
-        </Flex>
+      <Flex justify="space-between" p={5}>
+        <Box>
+          <MenuLogo fill="white" width={18} height={23} borderColor="primary.100" borderWidth={7} />
+        </Box>
+        <Box onClick={onOpen} cursor="pointer">
+          <Hamburguer />
+        </Box>
+      </Flex>
 
-        <Drawer onClose={onClose} isOpen={isOpen} size={{ base: "full", md: "sm" }}>
-          <DrawerOverlay />
-          <DrawerContent bg="primary.100">
-            <DrawerCloseButton color="white" />
-            <DrawerBody display="flex" flexDirection="column" marginTop="120px" alignItems="center">
-              <MenuLogo
-                fill="white"
-                width={63}
-                height={83}
-                borderColor="primary.100"
-                borderWidth={2}
-              />
-              {Links.map((link) => (
-                <Text variant="menu">
-                  <Link href={link.href}>
-                    <a>{link.title}</a>
-                  </Link>
-                </Text>
-              ))}
-            </DrawerBody>
-          </DrawerContent>
-        </Drawer>
+      <Drawer onClose={onClose} isOpen={isOpen} size={{ base: "full", md: "sm" }}>
+        <DrawerOverlay />
+        <DrawerContent bg="primary.100">
+          <DrawerCloseButton color="white" />
+          <DrawerBody display="flex" flexDirection="column" marginTop="120px" alignItems="center">
+            <MenuLogo
+              fill="white"
+              width={63}
+              height={83}
+              borderColor="primary.100"
+              borderWidth={2}
+            />
+            {Links.map((link) => (
+              <Text variant="menu">
+                <Link href={link.href}>
+                  <a>{link.title}</a>
+                </Link>
+              </Text>
+            ))}
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
     </>
   );
 }
diff --git a/modules/shared/theme/index.ts b/modules/shared/theme/index.ts
index 1bf768e..9de11ad 100644
--- a/modules/shared/theme/index.ts
+++ b/modules/shared/theme/index.ts
@@ -39,18 +39,6 @@ const colors: CustomColors = {
 };
 
 const components: Theme["components"] = {
-  Text: {
-    variants: {
-      menu: {
-        textAlign: "center",
-        color: "white",
-        fontWeight: 500,
-        fontSize: "1.5rem",
-        marginTop: "45px",
-      },
-    },
-  },
-
   Button: {
     baseStyle: {
       height: "auto",
@@ -105,6 +93,13 @@ const components: Theme["components"] = {
         fontWeight: 600,
         fontSize: "18px",
       },
+      menu: {
+        textAlign: "center",
+        color: "white",
+        fontWeight: 500,
+        fontSize: "1.5rem",
+        marginTop: "45px",
+      },
     },
   },
 
diff --git a/pages/index.tsx b/pages/index.tsx
index d88d437..6582c4e 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -3,12 +3,9 @@ import Head from "next/head";
 import nookies from "nookies";
 
 import { verifyIdToken } from "@/firebaseAdminConfig";
-
 import LogoutButton from "@/modules/Auth/components/LogoutButton";
-import Menu from "@/modules/shared/components/Menu/Menu";
-=======
 import MyCollectionsPage from "@/modules/Collections/MyCollectionsPage";
-
+import Menu from "@/modules/shared/components/Menu/Menu";
 
 const Home: NextPage & { requiresAuthentication: boolean } = () => {
   return (
@@ -18,15 +15,13 @@ const Home: NextPage & { requiresAuthentication: boolean } = () => {
         <meta name="description" content="Flashcards study app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-
       <div>
         <Menu />
         <h1>Welcome to Flashcards!</h1>
       </div>
       <LogoutButton />
-=======
+      =======
       <MyCollectionsPage />
-
     </div>
   );
 };

From 281424cca923204f4cec76c17a86e8320ddfe68b Mon Sep 17 00:00:00 2001
From: LucianoMariotti <luciano.mariotti99@gmail.com>
Date: Thu, 8 Sep 2022 16:08:53 -0300
Subject: [PATCH 2/2] add menu for desktop size

---
 modules/shared/components/Menu/Menu.tsx | 17 +++++++++++++----
 modules/shared/theme/index.ts           | 16 ++++++++++++++--
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/modules/shared/components/Menu/Menu.tsx b/modules/shared/components/Menu/Menu.tsx
index 564a6fc..d8fc5d8 100644
--- a/modules/shared/components/Menu/Menu.tsx
+++ b/modules/shared/components/Menu/Menu.tsx
@@ -15,8 +15,8 @@ import Hamburguer from "../Icons/Hamburguer";
 import Link from "next/link";
 
 const Links = [
-  { title: "Colecciones", href: "/Collection" },
-  { title: "Sesión de estudio", href: "/SesiónEstudio" },
+  { title: "Colecciones", href: "/collections" },
+  { title: "Sesión de estudio", href: "/study-sessions" },
   { title: "Tienda", href: "/Tienda" },
   { title: "Perfil", href: "/Perfil" },
 ];
@@ -30,9 +30,18 @@ export default function Menu() {
         <Box>
           <MenuLogo fill="white" width={18} height={23} borderColor="primary.100" borderWidth={7} />
         </Box>
-        <Box onClick={onOpen} cursor="pointer">
+        <Box onClick={onOpen} cursor="pointer" display={{ lg: "none" }}>
           <Hamburguer />
         </Box>
+        <Box display={{ base: "none", lg: "flex" }}>
+          {Links.map((link) => (
+            <Text variant="navbar">
+              <Link href={link.href}>
+                <a>{link.title}</a>
+              </Link>
+            </Text>
+          ))}
+        </Box>
       </Flex>
 
       <Drawer onClose={onClose} isOpen={isOpen} size={{ base: "full", md: "sm" }}>
@@ -48,7 +57,7 @@ export default function Menu() {
               borderWidth={2}
             />
             {Links.map((link) => (
-              <Text variant="menu">
+              <Text variant="drawer">
                 <Link href={link.href}>
                   <a>{link.title}</a>
                 </Link>
diff --git a/modules/shared/theme/index.ts b/modules/shared/theme/index.ts
index 9de11ad..2a2d336 100644
--- a/modules/shared/theme/index.ts
+++ b/modules/shared/theme/index.ts
@@ -93,13 +93,25 @@ const components: Theme["components"] = {
         fontWeight: 600,
         fontSize: "18px",
       },
-      menu: {
+      drawer: {
         textAlign: "center",
         color: "white",
         fontWeight: 500,
-        fontSize: "1.5rem",
+        fontSize: "20px",
         marginTop: "45px",
       },
+      navbar: {
+        textAlign: "center",
+        color: "gray.300",
+        fontWeight: 400,
+        fontSize: "19px",
+        borderBottom: "3px solid white",
+        ml: "60px",
+        _hover: {
+          color: "primary.100",
+          borderBottom: "3px solid",
+        },
+      },
     },
   },