From ccbdb30a879b5b8e4bbde6bc2c2f8fbc6fee0209 Mon Sep 17 00:00:00 2001
From: Alejandra <90076947+alejsdev@users.noreply.github.com>
Date: Fri, 21 Feb 2025 20:10:51 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Add=20minor=20UI=20tweaks=20(#15?=
 =?UTF-8?q?06)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Common/Navbar.tsx          |  2 +-
 frontend/src/components/Common/Sidebar.tsx         | 14 ++++++--------
 .../src/components/UserSettings/ChangePassword.tsx |  3 +--
 .../components/UserSettings/UserInformation.tsx    |  8 +++-----
 frontend/src/routes/_layout/index.tsx              |  2 +-
 5 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/Common/Navbar.tsx b/frontend/src/components/Common/Navbar.tsx
index 6177c36..7e952e0 100644
--- a/frontend/src/components/Common/Navbar.tsx
+++ b/frontend/src/components/Common/Navbar.tsx
@@ -20,7 +20,7 @@ function Navbar() {
       p={4}
     >
       <Link to="/">
-        <Image src={Logo} alt="Logo" w="180px" maxW="2xs" px={2} />
+        <Image src={Logo} alt="Logo" maxW="3xs" p={2} />
       </Link>
       <Flex gap={2} alignItems="center">
         <UserMenu />
diff --git a/frontend/src/components/Common/Sidebar.tsx b/frontend/src/components/Common/Sidebar.tsx
index f8bc472..1d630f9 100644
--- a/frontend/src/components/Common/Sidebar.tsx
+++ b/frontend/src/components/Common/Sidebar.tsx
@@ -22,10 +22,6 @@ const Sidebar = () => {
   const { logout } = useAuth()
   const [open, setOpen] = useState(false)
 
-  const handleLogout = async () => {
-    logout()
-  }
-
   return (
     <>
       {/* Mobile */}
@@ -48,7 +44,7 @@ const Sidebar = () => {
             <FaBars />
           </IconButton>
         </DrawerTrigger>
-        <DrawerContent maxW="280px">
+        <DrawerContent maxW="xs">
           <DrawerCloseTrigger />
           <DrawerBody>
             <Flex flexDir="column" justify="space-between">
@@ -56,7 +52,9 @@ const Sidebar = () => {
                 <SidebarItems />
                 <Flex
                   as="button"
-                  onClick={handleLogout}
+                  onClick={() => {
+                    logout()
+                  }}
                   alignItems="center"
                   gap={4}
                   px={4}
@@ -67,7 +65,7 @@ const Sidebar = () => {
                 </Flex>
               </Box>
               {currentUser?.email && (
-                <Text fontSize="sm" p={2}>
+                <Text fontSize="sm" p={2} truncate maxW="sm">
                   Logged in as: {currentUser.email}
                 </Text>
               )}
@@ -84,7 +82,7 @@ const Sidebar = () => {
         position="sticky"
         bg="bg.subtle"
         top={0}
-        minW="280px"
+        minW="xs"
         h="100vh"
         p={4}
       >
diff --git a/frontend/src/components/UserSettings/ChangePassword.tsx b/frontend/src/components/UserSettings/ChangePassword.tsx
index 5404a78..c94f970 100644
--- a/frontend/src/components/UserSettings/ChangePassword.tsx
+++ b/frontend/src/components/UserSettings/ChangePassword.tsx
@@ -48,11 +48,10 @@ const ChangePassword = () => {
           Change Password
         </Heading>
         <Box
-          w={{ sm: "full", md: "300px" }}
           as="form"
           onSubmit={handleSubmit(onSubmit)}
         >
-          <VStack gap={4}>
+          <VStack gap={4} w={{ base: "100%", md: "sm" }}>
             <PasswordInput
               type="current_password"
               startElement={<FiLock />}
diff --git a/frontend/src/components/UserSettings/UserInformation.tsx b/frontend/src/components/UserSettings/UserInformation.tsx
index 2438778..a7b7c83 100644
--- a/frontend/src/components/UserSettings/UserInformation.tsx
+++ b/frontend/src/components/UserSettings/UserInformation.tsx
@@ -76,7 +76,7 @@ const UserInformation = () => {
           User Information
         </Heading>
         <Box
-          w={{ sm: "full", md: "50%" }}
+          w={{ sm: "full", md: "sm" }}
           as="form"
           onSubmit={handleSubmit(onSubmit)}
         >
@@ -86,7 +86,6 @@ const UserInformation = () => {
                 {...register("full_name", { maxLength: 30 })}
                 type="text"
                 size="md"
-                w="auto"
               />
             ) : (
               <Text
@@ -94,7 +93,7 @@ const UserInformation = () => {
                 py={2}
                 color={!currentUser?.full_name ? "gray" : "inherit"}
                 truncate
-                maxWidth="250px"
+                maxW="sm"
               >
                 {currentUser?.full_name || "N/A"}
               </Text>
@@ -114,10 +113,9 @@ const UserInformation = () => {
                 })}
                 type="email"
                 size="md"
-                w="auto"
               />
             ) : (
-              <Text fontSize="md" py={2} truncate maxWidth="250px">
+              <Text fontSize="md" py={2} truncate maxW="sm">
                 {currentUser?.email}
               </Text>
             )}
diff --git a/frontend/src/routes/_layout/index.tsx b/frontend/src/routes/_layout/index.tsx
index b32eb4c..0313854 100644
--- a/frontend/src/routes/_layout/index.tsx
+++ b/frontend/src/routes/_layout/index.tsx
@@ -14,7 +14,7 @@ function Dashboard() {
     <>
       <Container maxW="full">
         <Box pt={12} m={4}>
-          <Text fontSize="2xl">
+          <Text fontSize="2xl" truncate maxW="sm">
             Hi, {currentUser?.full_name || currentUser?.email} 👋🏼
           </Text>
           <Text>Welcome back, nice to see you again!</Text>