From 417f884501b835a23ab43e211a63ef0060a7dbfb Mon Sep 17 00:00:00 2001 From: timmi Date: Tue, 1 Apr 2025 20:53:14 -0700 Subject: [PATCH 1/4] Added icons, needs further refactoring. --- frontend/react-app/src/components/Header.jsx | 33 ++++++++++-------- frontend/react-app/src/css/Header.css | 35 ++++++++++++++++---- 2 files changed, 48 insertions(+), 20 deletions(-) diff --git a/frontend/react-app/src/components/Header.jsx b/frontend/react-app/src/components/Header.jsx index c31818a..85feaea 100644 --- a/frontend/react-app/src/components/Header.jsx +++ b/frontend/react-app/src/components/Header.jsx @@ -1,20 +1,25 @@ -import {useCookies} from 'react-cookie' +import { useCookies } from 'react-cookie' +import { Home, ListTodo, UserCircle, Settings, ListCheck, ListChecks, ShieldAlert, ShieldUser } from "lucide-react"; + function Header(){ const [cookies] = useCookies(['userInfo']) return( - -
-

- -

-
- +
+

+
+ Taskly +
+ +
    +
    • +
    • +
    • + + {cookies.userInfo.role === 'admin' && ( +
    • )} +
+

+
); } export default Header \ No newline at end of file diff --git a/frontend/react-app/src/css/Header.css b/frontend/react-app/src/css/Header.css index 3c4f186..a14d19a 100644 --- a/frontend/react-app/src/css/Header.css +++ b/frontend/react-app/src/css/Header.css @@ -2,31 +2,54 @@ text-decoration: none; } -h1.inner-header{ +h1.inner-header { align-self: start; margin: 0; font-family: Calibri; width: 100%; padding: 1% 5%;; - height: auto; - min-height: 10%; background-color: #2d2644; display: flex; align-items: center; justify-content: space-between; } -li{ +.logo { + color: #fefcfd; + font-weight: bold; +} + +ul.icon-nav { + display: flex; + align-items: center; + justify-content: space-between; + padding-right: 30px; +} + +ul.icon-nave li { + list-style: none; + margin-left: 24px; +} + +ul.icon-nav svg { + width: 24px; + height: 24px; + stroke-width: 2.5; +} + +li { list-style: none; display: inline-block; } -li a{ + +li a { color: #bfcde0; font-size: calc(20%+2vw); font-weight: bold; margin-right: 25px; } -li.logo a{ + +li.logo a { margin-right: 60px; font-size: calc(30%+2vw); color: #fefcfd; From f0719374d9e7c580e2c5acf43bac381230c3e9af Mon Sep 17 00:00:00 2001 From: timmi Date: Tue, 1 Apr 2025 21:22:59 -0700 Subject: [PATCH 2/4] Fixed header positioning. --- frontend/react-app/src/components/Header.jsx | 1 + frontend/react-app/src/css/Header.css | 12 ++++++++++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/frontend/react-app/src/components/Header.jsx b/frontend/react-app/src/components/Header.jsx index 85feaea..09b6bd7 100644 --- a/frontend/react-app/src/components/Header.jsx +++ b/frontend/react-app/src/components/Header.jsx @@ -22,4 +22,5 @@ function Header(){ ); } + export default Header \ No newline at end of file diff --git a/frontend/react-app/src/css/Header.css b/frontend/react-app/src/css/Header.css index a14d19a..a9ca9a6 100644 --- a/frontend/react-app/src/css/Header.css +++ b/frontend/react-app/src/css/Header.css @@ -7,7 +7,10 @@ h1.inner-header { margin: 0; font-family: Calibri; width: 100%; - padding: 1% 5%;; + height: auto; + overflow: visible; + padding-top: 1%; + padding-bottom: 1%; background-color: #2d2644; display: flex; align-items: center; @@ -17,13 +20,18 @@ h1.inner-header { .logo { color: #fefcfd; font-weight: bold; + margin-left: 30px; +} + +.logo a { + color: #fefcfd; } ul.icon-nav { display: flex; align-items: center; justify-content: space-between; - padding-right: 30px; + padding-right: 10px; } ul.icon-nave li { From 97069d9108e05c88eb2c24004301793ce5ddf78f Mon Sep 17 00:00:00 2001 From: timmi Date: Tue, 1 Apr 2025 21:25:55 -0700 Subject: [PATCH 3/4] Added hover text on icons. --- frontend/react-app/src/components/Header.jsx | 8 ++++---- frontend/react-app/src/css/Header.css | 1 - 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/frontend/react-app/src/components/Header.jsx b/frontend/react-app/src/components/Header.jsx index 09b6bd7..9623674 100644 --- a/frontend/react-app/src/components/Header.jsx +++ b/frontend/react-app/src/components/Header.jsx @@ -11,12 +11,12 @@ function Header(){
    -
    • -
    • -
    • +
    • +
    • +
    • {cookies.userInfo.role === 'admin' && ( -
    • )} +
    • )}
diff --git a/frontend/react-app/src/css/Header.css b/frontend/react-app/src/css/Header.css index a9ca9a6..ad60d89 100644 --- a/frontend/react-app/src/css/Header.css +++ b/frontend/react-app/src/css/Header.css @@ -62,4 +62,3 @@ li.logo a { font-size: calc(30%+2vw); color: #fefcfd; } - From e24b045d867e568b2b84760f4001c99208965e2d Mon Sep 17 00:00:00 2001 From: timmi Date: Tue, 1 Apr 2025 21:42:14 -0700 Subject: [PATCH 4/4] Adding package files for new import. --- frontend/react-app/package-lock.json | 10 ++++++++++ frontend/react-app/package.json | 1 + 2 files changed, 11 insertions(+) diff --git a/frontend/react-app/package-lock.json b/frontend/react-app/package-lock.json index c6b0fc3..2b6c9c6 100644 --- a/frontend/react-app/package-lock.json +++ b/frontend/react-app/package-lock.json @@ -14,6 +14,7 @@ "ajv": "^8.17.1", "ajv-keywords": "^5.1.0", "jquery": "^3.7.1", + "lucide-react": "^0.486.0", "react": "^18.3.1", "react-cookie": "^7.2.2", "react-dom": "^18.3.1", @@ -12865,6 +12866,15 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.486.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.486.0.tgz", + "integrity": "sha512-xWop/wMsC1ikiEVLZrxXjPKw4vU/eAip33G2mZHgbWnr4Nr5Rt4Vx4s/q1D3B/rQVbxjOuqASkEZcUxDEKzecw==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/lz-string": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", diff --git a/frontend/react-app/package.json b/frontend/react-app/package.json index 2136c88..41607bb 100644 --- a/frontend/react-app/package.json +++ b/frontend/react-app/package.json @@ -9,6 +9,7 @@ "ajv": "^8.17.1", "ajv-keywords": "^5.1.0", "jquery": "^3.7.1", + "lucide-react": "^0.486.0", "react": "^18.3.1", "react-cookie": "^7.2.2", "react-dom": "^18.3.1",