fixed profile dropdown position and styling

MuNuChapterHKN · Jan 3, 2024 · 0b5ded9 · 0b5ded9
1 parent 0478baa
commit 0b5ded9
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -1,3 +1,4 @@
+/* Generic styling */
 :root {
   --hkblue: #061e33;
   --hkwhite: #ffffff;
@@ -11,3 +12,23 @@ body {
 a {
   color: var(--hkwhite);
 }
+
+/* Profile dropdown on HKNavbar */
+#profile-nav-dropdown .dropdown-menu {
+  position: absolute;
+  right: 0;
+  left: auto;
+  padding: 0.5rem 1rem;
+  margin-top: 0.5rem;
+  background-color: rgba(6, 30, 51, 0.7);
+  backdrop-filter: blur(4px);
+  border: 1px solid white;
+}
+
+#profile-nav-dropdown .dropdown-menu .dropdown-item-text {
+  color: var(--hkwhite);
+}
+
+#profile-nav-dropdown .dropdown-menu .dropdown-divider {
+  border-top: 1px solid white;
+}
diff --git a/frontend/src/components/HKNavbar.jsx b/frontend/src/components/HKNavbar.jsx
@@ -45,10 +45,10 @@ const HKNavbar = () => {
             ) : !isAuthenticated ? (
               <LoginButton />
             ) : (
-              <>
+              <div id="profile-nav-dropdown">
                 <NavDropdown
                   title={
-                    <Image
+                    <Image className="me-2 border"
                       fluid
                       alt="Picture"
                       src={user.picture}
@@ -57,12 +57,13 @@ const HKNavbar = () => {
                       roundedCircle
                     />
                   }
+
                 >
-                  <NavDropdown.ItemText>{user.name}</NavDropdown.ItemText>
+                  <NavDropdown.ItemText>{user.name ? user.name : user.email}</NavDropdown.ItemText>
                   <NavDropdown.Divider />
                   <LogoutButton />
                 </NavDropdown>
-              </>
+              </div>
             )}
           </Col>
         </Navbar>

diff --git a/frontend/src/components/LogoutButton.jsx b/frontend/src/components/LogoutButton.jsx
@@ -13,7 +13,7 @@ const LogoutButton = () => {
     });
   };
 
-  return <Button onClick={handleLogout}>Log Out</Button>;
+  return <Button variant="outline-light" onClick={handleLogout}>Log Out</Button>;
 };
 
 export default LogoutButton;