Update light theme for mobile first design

frontend/app/page.tsx

@@ -16,7 +16,7 @@ export default function App() {
   return userAuth ? (
     <div className="container-fluid">
       <div className="row">
-        <div className={`col-md-4 col-lg-3 ${tagStyles.scroller} ${tagStyles.tagList}`}>
+        <div className={`col-md-4 col-lg-3 ${tagStyles.scroller} ${tagStyles.tagList}`} style={{ borderRadius: '0', backgroundColor: '#29b5bf' }}>
           <TagList />
         </div>
         <div className="col-md-8 col-lg-9">

frontend/components/Bookmark/bookmarkCard.scss

@@ -1,6 +1,6 @@
 [data-bs-theme="light"] {
   --tag-list-bg: #d6e6f2;
-  --card-bg: #d9e9e6;
+  --card-bg: #fff;
 }
 
 [data-bs-theme="dark"] {
@@ -38,6 +38,7 @@
   color: mintcream;
   border-color: aliceblue;
 }
+
 .container {
   flex-wrap: wrap;
   align-items: center;

frontend/components/Import/ImportModal.tsx

@@ -76,9 +76,9 @@ export default function ImportModal({
   const handleShow = () => setModalShow(true);
 
   return (
-    <div className="float-left mr-4" data-testid={dataTestId}>
+    <div data-testid={dataTestId}>
       <button className="btn" data-testid="import-btn" onClick={handleShow}>
-        <i className="bi bi-file-earmark-arrow-up-fill"></i>
+        <i className="bi bi-file-earmark-arrow-up-fill" style={{ border: "solid", borderRadius: "10px", padding: "10px", color: "#717a83" }}></i>
       </button>
 
       <Modal

frontend/components/Navbar/Export.tsx

@@ -7,13 +7,13 @@ export default function Export({ 'data-testid': dataTestId }: { 'data-testid'?:
 
   return (
     <button
-      className="btn float-left mr-4"
+      className="btn"
       data-testid={dataTestId}
       data-bs-placement="bottom"
       title="Export Bookmarks"
       onClick={exportAllBookmarks}
     >
-      <i className="bi bi-download"></i>
+      <i className="bi bi-download" style={{ border: "solid", borderRadius: "10px", padding: "10px", color: "#717a83" }}></i>
     </button>
   );
 }

frontend/components/Navbar/LightDarkToggle.tsx

@@ -28,9 +28,9 @@ export default function LightDarkToggle() {
   }, [theme]);
 
   return (
-    <div className="float-left text-center items-center mr-5 ">
+    <div className="text-center items-center mr-5 ">
       <button className="btn" data-testid="light-dark" onClick={changeTheme}>
-        <i className="bi bi-lamp-fill"></i>
+        <i className="bi bi-lamp-fill" style={{ border: "solid", borderRadius: "10px", padding: "10px", color: "#717a83" }}></i>
       </button>
     </div>
   );

frontend/components/Navbar/Navbar.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { Navbar, Button, ButtonGroup, Container } from "react-bootstrap";
+import { Nav, Navbar, Button, ButtonGroup, Container } from "react-bootstrap";
 import { useRouter } from "next/navigation";
 import authService, { AuthStatus } from "@services/auth.service";
 import useAuth from "@components/UseAuth";
@@ -47,7 +47,7 @@ const GlobalNavbar: React.FC = () => {
   return (
     <Navbar
       expand="lg"
-      style={{ borderBottom: "1px solid", height: "60px" }}
+      style={{ borderBottom: "1px solid", height: "60px", zIndex: "1030" }}
       className="bg-body-tertiary"
     >
       <Container>
@@ -64,12 +64,15 @@ const GlobalNavbar: React.FC = () => {
           />
           FindFirst
         </Navbar.Brand>
-        <div className="mx-3">
-          {userAuth === AuthStatus.Authorized ? <ImportModal file={undefined} show={false} data-testid="import-modal" /> : null}
-          {userAuth === AuthStatus.Authorized ? <Export data-testid="export-component" /> : null}
-          <LightDarkToggle />
-          {authButton()}
-        </div>
+        <Navbar.Toggle aria-controls="basic-navbar-nav" />
+        <Navbar.Collapse>
+          <Nav style={{ background: '#ffffff' }} className="float-right">
+            {userAuth === AuthStatus.Authorized ? <Nav.Link><ImportModal file={undefined} show={false} data-testid="import-modal" /></Nav.Link> : null}
+            {userAuth === AuthStatus.Authorized ? <Nav.Link><Export data-testid="export-component" /></Nav.Link> : null}
+            <Nav.Link><LightDarkToggle /></Nav.Link>
+            <Nav.Link>{authButton()}</Nav.Link>
+          </Nav>
+        </Navbar.Collapse>
       </Container>
     </Navbar>
   );

frontend/components/Tags/TagList.tsx

@@ -1,6 +1,7 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import { Badge, ListGroup } from "react-bootstrap";
+import { ArrowsCollapseVertical } from 'react-bootstrap-icons';
+import { Badge, Button, ListGroup } from "react-bootstrap";
 import { useTags } from "@/contexts/TagContext";
 import useAuth from "@components/UseAuth";
 import api from "@/api/Api";
@@ -61,7 +62,7 @@ const TagList = () => {
           className={`d-flex m-0 w-full btn ${styles.btn} justify-content-between align-items-start`}
         >
           {tagCnt.tagTitle}
-          <Badge bg="primary" pill>
+          <Badge pill bg="" style={{ backgroundColor: '#717a83', color: 'white' }}>
             <div
               data-testid={`${tagCnt.tagTitle}-list-item-cnt`}
               key={`${tagCnt.tagTitle}-list-item-badge`}
@@ -91,7 +92,7 @@ const TagList = () => {
   return (
     <div>
       {!loading ? (
-        <ListGroup className="pt-3 w-full">{groupItems}</ListGroup>
+        <><ListGroup className="pt-3 w-full">{groupItems}</ListGroup></>
       ) : (
         <div></div>
       )}

frontend/components/Tags/tag-pill.module.scss

@@ -2,13 +2,11 @@
 
  &:hover 
   {
-   background-color: #5cb85c; 
+   background-color: #717a83; 
   }
 }
 
 .on {
    background-color: #29b5bf; 
    color: white;
 }
-
-

frontend/package.json

@@ -36,6 +36,7 @@
     "postcss": "^8.4.41",
     "react": "18.3.1",
     "react-bootstrap": "^2.10.4",
+    "react-bootstrap-icons": "^1.11.4",
     "react-dom": "18.3.1",
     "rxjs": "^7.8.1",
     "sass": "^1.77.8",

frontend/styles/tag.module.scss

@@ -1,10 +1,7 @@
 .tagList {
-  min-height: calc(100vh - 70px);
-  margin-top: 5px;
-  padding-bottom: 5px;
+  min-height: calc(100vh);
   border-radius: 10px;
 
-  background-color: var(--tag-list-bg);
   overflow: auto;
 
   @media screen and (max-width: 800px) {
@@ -22,7 +19,7 @@
   }
 
   @media screen and (min-width: 760px) {
-    max-height: calc(100vh - 70px);
+    max-height: calc(100vh);
   }
 }