From 87a9248cd404dcc734278b00dda54a8acc7a5e36 Mon Sep 17 00:00:00 2001 From: Lucas Ramage Date: Wed, 2 Oct 2024 21:26:33 -0500 Subject: [PATCH] Update light theme for mobile first design --- frontend/app/page.tsx | 2 +- .../components/Bookmark/bookmarkCard.scss | 3 ++- frontend/components/Import/ImportModal.tsx | 4 ++-- frontend/components/Navbar/Export.tsx | 4 ++-- .../components/Navbar/LightDarkToggle.tsx | 4 ++-- frontend/components/Navbar/Navbar.tsx | 19 +++++++++++-------- frontend/components/Tags/TagList.tsx | 7 ++++--- frontend/components/Tags/tag-pill.module.scss | 4 +--- frontend/package.json | 1 + frontend/pnpm-lock.yaml | 19 ++++++++++++++++--- frontend/styles/tag.module.scss | 7 ++----- 11 files changed, 44 insertions(+), 30 deletions(-) diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx index 34bdc221..0cdae8bd 100644 --- a/frontend/app/page.tsx +++ b/frontend/app/page.tsx @@ -16,7 +16,7 @@ export default function App() { return userAuth ? (
-
+
diff --git a/frontend/components/Bookmark/bookmarkCard.scss b/frontend/components/Bookmark/bookmarkCard.scss index c45ed9ac..d7e18647 100644 --- a/frontend/components/Bookmark/bookmarkCard.scss +++ b/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; diff --git a/frontend/components/Import/ImportModal.tsx b/frontend/components/Import/ImportModal.tsx index 17ad23ec..1750832b 100644 --- a/frontend/components/Import/ImportModal.tsx +++ b/frontend/components/Import/ImportModal.tsx @@ -76,9 +76,9 @@ export default function ImportModal({ const handleShow = () => setModalShow(true); return ( -
+
- + ); } diff --git a/frontend/components/Navbar/LightDarkToggle.tsx b/frontend/components/Navbar/LightDarkToggle.tsx index 28fb0f7b..e60543b3 100644 --- a/frontend/components/Navbar/LightDarkToggle.tsx +++ b/frontend/components/Navbar/LightDarkToggle.tsx @@ -28,9 +28,9 @@ export default function LightDarkToggle() { }, [theme]); return ( -
+
); diff --git a/frontend/components/Navbar/Navbar.tsx b/frontend/components/Navbar/Navbar.tsx index bb6bfe3a..3455dcfb 100644 --- a/frontend/components/Navbar/Navbar.tsx +++ b/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 ( @@ -64,12 +64,15 @@ const GlobalNavbar: React.FC = () => { /> FindFirst -
- {userAuth === AuthStatus.Authorized ? : null} - {userAuth === AuthStatus.Authorized ? : null} - - {authButton()} -
+ + + + ); diff --git a/frontend/components/Tags/TagList.tsx b/frontend/components/Tags/TagList.tsx index 97d4327d..6ae09227 100644 --- a/frontend/components/Tags/TagList.tsx +++ b/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} - +
{ return (
{!loading ? ( - {groupItems} + <>{groupItems} ) : (
)} diff --git a/frontend/components/Tags/tag-pill.module.scss b/frontend/components/Tags/tag-pill.module.scss index ce96181a..df34d216 100644 --- a/frontend/components/Tags/tag-pill.module.scss +++ b/frontend/components/Tags/tag-pill.module.scss @@ -2,7 +2,7 @@ &:hover { - background-color: #5cb85c; + background-color: #717a83; } } @@ -10,5 +10,3 @@ background-color: #29b5bf; color: white; } - - diff --git a/frontend/package.json b/frontend/package.json index b8b4b33d..4620e061 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 67a6546a..73f1f9f3 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -81,6 +81,9 @@ importers: react-bootstrap: specifier: ^2.10.4 version: 2.10.4(@types/react@18.2.14)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-bootstrap-icons: + specifier: ^1.11.4 + version: 1.11.4(react@18.3.1) react-dom: specifier: 18.3.1 version: 18.3.1(react@18.3.1) @@ -3283,6 +3286,11 @@ packages: resolution: {integrity: sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==} engines: {node: '>= 0.8'} + react-bootstrap-icons@1.11.4: + resolution: {integrity: sha512-lnkOpNEZ/Zr7mNxvjA9efuarCPSgtOuGA55XiRj7ASJnBjb1wEAdtJOd2Aiv9t07r7FLI1IgyZPg9P6jqWD/IA==} + peerDependencies: + react: '>=16.8.6' + react-bootstrap@2.10.4: resolution: {integrity: sha512-W3398nBM2CBfmGP2evneEO3ZZwEMPtHs72q++eNw60uDGDAdiGn0f9yNys91eo7/y8CTF5Ke1C0QO8JFVPU40Q==} peerDependencies: @@ -6091,7 +6099,7 @@ snapshots: eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) eslint-plugin-jsx-a11y: 6.9.0(eslint@8.57.0) eslint-plugin-react: 7.35.0(eslint@8.57.0) eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0) @@ -6115,7 +6123,7 @@ snapshots: enhanced-resolve: 5.17.1 eslint: 8.57.0 eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) fast-glob: 3.3.2 get-tsconfig: 4.7.6 is-core-module: 2.15.0 @@ -6137,7 +6145,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0): + eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.1.6))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.1.6))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): dependencies: array-includes: 3.1.8 array.prototype.findlastindex: 1.2.5 @@ -7852,6 +7860,11 @@ snapshots: iconv-lite: 0.4.24 unpipe: 1.0.0 + react-bootstrap-icons@1.11.4(react@18.3.1): + dependencies: + prop-types: 15.8.1 + react: 18.3.1 + react-bootstrap@2.10.4(@types/react@18.2.14)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: '@babel/runtime': 7.25.0 diff --git a/frontend/styles/tag.module.scss b/frontend/styles/tag.module.scss index 14acc927..af76242f 100644 --- a/frontend/styles/tag.module.scss +++ b/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); } }