diff --git a/apps/frontend/src/app/UIContext.tsx b/apps/frontend/src/app/UIContext.tsx new file mode 100644 index 0000000..329182f --- /dev/null +++ b/apps/frontend/src/app/UIContext.tsx @@ -0,0 +1,25 @@ +import React, { createContext, useState, ReactNode } from 'react'; + +interface UIContextType { + displaySideBar: boolean; + toggleSideBar: () => void; +} + +export const UIContext = createContext({ + displaySideBar: false, + toggleSideBar: () => {} +}); + + + +export const UIProvider = ({ children }: { children: ReactNode }) => { + const [displaySideBar, setDisplaySideBar] = useState(false); + + const toggleSideBar = () => setDisplaySideBar(prev => !prev); + + return ( + + {children} + + ); +}; diff --git a/apps/frontend/src/app/app.module.scss b/apps/frontend/src/app/app.module.scss index b97e6c0..d70bca4 100644 --- a/apps/frontend/src/app/app.module.scss +++ b/apps/frontend/src/app/app.module.scss @@ -1,135 +1,13 @@ /* Your styles goes here. */ -body { - min-height: 100vh; - display: flex; - flex-direction: column; -} +// body { +// min-height: 100vh; +// display: flex; +// flex-direction: column; +// } + +// .page { +// height: 100vh; +// display: grid; +// grid-template-rows: 40px 137px 98px 66px 116px 66px 96px 106px; +// } -.page { - height: 100vh; - display: grid; - grid-template-rows: 40px 137px 98px 66px 116px 66px 96px 106px; -} - -.dashboard-root { - width: 100%; - height: auto; - background-color: white; - display: flex; - flex-direction: column; - justify-content: space-between; - gap: 0; - padding: 0; - border-radius: 0; -} - -.dashboard-content { - padding-top: 5vh; - display: grid; - grid-template-rows: auto 1fr 1fr 1fr; - grid-template-columns: 1fr; - height: 100vh; - grid-row: 3 / span 10; - grid-column: 1 / span 1; - display: flex; - flex-direction: column; - align-items: center; - gap: 5vh; -} - -.hamburger-menu-section { - padding-top: 8vh; - grid-row: 1 / span 1; - grid-column: 1 / span 1; - width: 80%; - align-items: center; -} - -.profile-image { - width: 2rem; - border-radius: 0.75rem; -} - -.greeting-text { - font-size: 2rem; - margin-top: 1rem; - text-align: center; - font-weight: 500; -} - -.net-worth-section { - display: flex; - flex-direction: column; - margin-left: 20px; - gap: 6px; - justify-content: center; - font-family: 'Raleway', sans-serif; -} - -.net-worth-value { - font-size: 2rem; - font-weight: 800; - text-align: center; -} - -.net-worth-label { - font-family: 'Raleway', sans-serif; - width: 100%; - font-size: 1.5rem; - font-weight: 300; - justify-content: center; - text-align: center; -} - -.buttons-section { - display: flex; - flex-direction: column; - justify-content: center; - gap: 1.5rem; - width: 75%; - align-items: center; - text-align: center; -} - -.dashboard-button { - font-size: 1rem; - font-weight: bold; - font-family: 'Sofia Pro', sans-serif; - color: white; - background-color: #148cfb; - display: flex; - flex-direction: column; - justify-content: center; - width: 100%; - height: 3rem; - cursor: pointer; - align-items: center; - text-align: center; - border-radius: 100px; -} - -.dashboard-button:hover { - font-size: 1.5rem; -} - -.first-time-user-text { - padding: 50px; - margin-top: 10vh; - font-family: 'Sofia Pro', sans-serif; - font-size: 1rem; - font-weight: 800; - letter-spacing: 0px; - text-align: center; - display: flex; - justify-content: center; - align-items: center; - border-width: 2px; - padding: 0.5rem 1rem; - height: 2rem; - border-color: black; - border-radius: 20px; -} - -.first-time-user-text:hover { - text-decoration: underline; -} \ No newline at end of file diff --git a/apps/frontend/src/app/app.tsx b/apps/frontend/src/app/app.tsx index 490b35d..7540873 100644 --- a/apps/frontend/src/app/app.tsx +++ b/apps/frontend/src/app/app.tsx @@ -1,7 +1,8 @@ import React, { useEffect } from 'react'; import { BrowserRouter } from 'react-router-dom'; +import { UIProvider } from './UIContext'; import Footer from './components/footer/footer'; -// import Header from './components/header/header'; +import Header from './components/header/header'; import Router from './views/router/router'; import './app.module.scss'; @@ -14,7 +15,6 @@ export function App() { const [user, setUser] = React.useState({firstName: null, lastName: null, id: null, joinDate: null, email: null, userType: 'Reader', picture: null, name: null, roles: ['None']}); - useEffect(() => { const user = localStorage.getItem('user'); if(user){ @@ -38,15 +38,17 @@ export function App() { return ( - -
-
- {/*
*/} - -
-
-
-
+ + +
+
+
+ +
+ {/*
*/} +
+
+
); } diff --git a/apps/frontend/src/app/components/authlayout/AuthLayout.tsx b/apps/frontend/src/app/components/authlayout/AuthLayout.tsx index a90970f..36ea910 100644 --- a/apps/frontend/src/app/components/authlayout/AuthLayout.tsx +++ b/apps/frontend/src/app/components/authlayout/AuthLayout.tsx @@ -4,21 +4,19 @@ import backgroundImage from './background-auth.jpg' export function AuthLayout({ children }: any) { return ( -
-
-
-
- {children} -
-
-
- blue background +
+
+
+ {children}
+
+ blue background +
) } \ No newline at end of file diff --git a/apps/frontend/src/app/components/hamburger-nav/HamburgerNav.tsx b/apps/frontend/src/app/components/hamburger-nav/HamburgerNav.tsx index e1f0d8b..fcefe01 100644 --- a/apps/frontend/src/app/components/hamburger-nav/HamburgerNav.tsx +++ b/apps/frontend/src/app/components/hamburger-nav/HamburgerNav.tsx @@ -1,127 +1,59 @@ -// import './hamburger.css'; -// import hamburgerMenu from '../../images/dash/hamburger_menu.svg'; -import crystalBall from '../../images/dash/crystal-ball.svg' -import lineList from '../../images/dash/line-md_list-3-filled.svg' -import image103 from '../../images/logos/loginGroup103.svg' -import hamburger_menu from '../../images/dash/hamburger_menu.svg' -import hankHill from '../../images/dash/Hank_Hill.webp' -import { Link } from "react-router-dom"; -import path from 'path' - -export default function HamburgerNav() { - return ( -
-
-
-
-
-
-
-
-
- Linemdlistfilled -
-
- L{" "} -
-
- CrystalBall -
-
-
- Dashboard -
-
- Cash Flow -
-
- Assets -
-
- Liabilities -
-
- Logout -
-
- Settings -
-
-
- -
- -
- -
-
-
- top_image - -
- - - Frame2 -
- - -
-
Hi, Bsmith
-
-
-
###.##
-
Net worth
-
-
- - -
-
-
-
- First Time User ? -
-
+import React, { useContext } from 'react'; +import crystalBall from '../../images/dash/crystal-ball.svg'; +import lineList from '../../images/dash/line-md_list-3-filled.svg'; +import { Link } from 'react-router-dom'; +import { UIContext } from '../../UIContext'; +import './hamburger.css'; + +interface HamburgerNavProps { + show: boolean; + } + +const HamburgerNav: React.FC = ({ show }) => { + return ( +
+ + +
+ ); +}; +export default HamburgerNav; diff --git a/apps/frontend/src/app/components/hamburger-nav/hamburger.css b/apps/frontend/src/app/components/hamburger-nav/hamburger.css index 80cbfb2..ee62029 100644 --- a/apps/frontend/src/app/components/hamburger-nav/hamburger.css +++ b/apps/frontend/src/app/components/hamburger-nav/hamburger.css @@ -1,86 +1,134 @@ -.nav { +.sidebar { position: fixed; - z-index: 200px; + top: 0; + left: -50%; + width: 50%; + height: 100vh; + background-color: #15171c; + transition: left 0.5s ease-in-out; } -.navbar { - background: #ff0000; - position: relative; - top: 85px; +.sidebar.show { left: 0; - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - padding: -2em; } -.menu-toggle { - cursor: pointer; +.nav-container { + position: absolute; + top: 0; + left: 0; + width: 50%; + height: 100%; + background-color: black; + transition: transform 1s ease; } -.nav-overlay { - position: fixed; - background: #18181c; - z-index: -2; - top: -100%; +.showSideBar { + transform: translateX(0); +} + +.hideSideBar { + transform: translateX(-250px); +} + +.opaque-container { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + background-color: #333333; + opacity: 0.5; +} + +.fly-out-menu-root { + background-color: black; + position: absolute; left: 0; + top: 0; + display: flex; + flex-direction: column; + gap: 5%; width: 100%; - height: 100vh; - overflow: hidden; - padding: 4em; - transition: all 2s cubic-bezier(0.16, 1, 0, 0.3, 1); + height: 100%; } -.hamBox { - position: relative; - top: -10px; - width: 44px; - height: 44px; - cursor: pointer; - border-radius: 50%; - transition: 1s ease; - padding: 2.4em; +.ham-trademark-container { + padding-top: 25%; + padding-bottom: 15%; + display: flex; + align-items: center; + width: 100%; + justify-content: center; + gap: 1rem; + height: 10rem; } -.hambox:hover { - background: 2a2a2f; +.ham-trademark-letter { + font-size: 1.5rem; + color: white; + padding: 0px; + margin: 0px; + bottom: 0px; } -.hamBoxOpen { - background: 2a2a2f; +.ham-trademark-symbol { + width: 1.55rem; + height: 1.55rem; + padding: 0px; + margin: 0px; + } -.lineTop, -.lineBottom { - margin: 0 auto; - position: absolute; - display: block; - width: 24px; - height: 2px; - border-radius: 10px; - background: #ff0000; - left: 0; - right: 0; - transform: rotate(0deg); - transition: all 0.4s; +.ham-vertical-line { + position: relative; + display: flex; + } -.lineTop { - top: 2.2em; +.ham-vertical-line::before { + content: ''; + position: absolute; + top: 0rem; + bottom: 0rem; + left: 0.02rem; + width: 1px; + background-color: rgb(255, 255, 255); } -.lineBottom { - bottom: 2.2em; +.ham-crystalball { + width: 1.95rem; + height: 1.95rem; + padding: 0px; + margin: 0px; + + padding-left: 0.5rem; } -.lineTop .spin { - top: 2.35em; - transform: rotate(135deg); - background: black; +.link-container { + position: relative; + display: flex; + flex-direction: column; + width: 100%; + font-family: 'Sofia_Pro', sans-serif; + align-items: center; + justify-content: center; } -.lineBottom .spin { - top: 2.35em; - transform: rotate(225deg); - background: black; + +.hamburger-link { + font-weight: bold; + color: white; + border-top: 1px solid #6F6F6F; + width: 100%; + height: 2.5rem; + display: flex; + align-items: center; + justify-content: center; } + +.hamburger-link:hover { + text-decoration: underline; +} + +.profile-image { + margin-right: 5%; +} + diff --git a/apps/frontend/src/app/components/header/header.css b/apps/frontend/src/app/components/header/header.css new file mode 100644 index 0000000..631155a --- /dev/null +++ b/apps/frontend/src/app/components/header/header.css @@ -0,0 +1,185 @@ +.SidebarNav { + background: #15171c; + width: 250px; + height: 100vh; + display: flex; + justify-content: center; + position: fixed; + top: 0; + left: 0; + transition: 650ms; + z-index: 999; + color: black; +} + +.HideSidebarNav { + background: #15171c; + width: 250px; + height: 100vh; + display: flex; + justify-content: center; + position: fixed; + top: 0; + left: -100%; + transition: 650ms; + z-index: 10; +} + +.SidebarWrap { + width: 100%; +} + +.header-container { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + flex-basis: auto; +} + +.header-sub-container { + justify-content: space-around; + margin-left: 1.75rem; + width: 100%; + align-items: center; + width: 100%; + flex-basis: auto; + flex-grow: 1; +} + + +.trademark-image, +.trademark-letter { + font-size: large; + color: white; +} + +.trademark-letter { + margin-top: 0.25rem; + padding-left: 1rem; + padding-right: 1rem; +} + +.vertical-line { + position: relative; + display: flex; +} + +.vertical-line::before { + content: ' '; + position: absolute; + top: 0.5rem; + bottom: 0.25rem; + left: 0.02rem; + width: 1px; + background-color: rgb(255, 255, 255); +} + +.head-trademark-lineList { + margin-top: 0.40rem; + width: 1.25rem; +} + +.navLink-list { + display: flex; + justify-content: space-around; +} + + +.head-trademark-container { + padding-top: 25%; + padding-bottom: 15%; + display: flex; + align-items: center; + width: 100%; + justify-content: center; + gap: 1rem; + height: 10rem; +} + +.head-trademark-letter { + font-size: 1.5rem; + color: white; + padding: 0; + margin: 0; + bottom: 0; +} + +.head-trademark-symbol { + width: 1.55rem; + height: 1.55rem; + padding: 0; + margin: 0; +} + +.head-vertical-line { + position: relative; + display: flex; +} + +.head-vertical-line::before { + content: ''; + position: absolute; + top: 0.35rem; + bottom: 0.25rem; + left: 0.02rem; + width: 1px; + background-color: rgb(255, 255, 255); +} + +.head-crystalball { + width: 1.95rem; + height: 1.95rem; + padding: 0; + margin: 0; + padding-left: 0.5rem; +} + +.unordered-list { + justify-content: space-around; + width: 100%; + display: flex; + flex-direction: row; + margin-right: auto; + padding: 0; +} + +.li-navlink { + color: white; + font-weight: bold; + margin-bottom: 0; + padding-right: 0.5rem; +} + +.li-navlink:hover { + text-decoration: underline; +} + +.header-first-time-user-text { + font-family: 'Sofia Pro', sans-serif; + font-size: 1rem; + font-weight: 800; + letter-spacing: 0px; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + border-width: 3px; + padding: 1rem 2.5rem 1rem 2.5rem; + height: 2rem; + border-color: white; + border-radius: 30px; + color: white; +} + +.header-first-time-user-text:hover { + text-decoration: underline; +} + + + +.header-profile-image { + height: 2rem; + width: 2rem; + border-radius: 10rem; +} diff --git a/apps/frontend/src/app/components/header/header.tsx b/apps/frontend/src/app/components/header/header.tsx index 03240e0..d17e25e 100644 --- a/apps/frontend/src/app/components/header/header.tsx +++ b/apps/frontend/src/app/components/header/header.tsx @@ -1,13 +1,24 @@ import React, { useEffect, useRef, useState } from 'react'; import { NavLink } from 'react-router-dom'; import { UserContext } from '../../app'; -import { Logo } from './Logo'; -import { Transition } from '@headlessui/react'; +import hamburger_menu from '../../images/dash/hamburger_menu.svg'; +import HamburgerNav from '../hamburger-nav/HamburgerNav'; +import crystalBall from '../../images/dash/crystal-ball.svg'; +import lineList from '../../images/dash/line-md_list-3-filled.svg'; +import hankHill from '../../images/dash/Hank_Hill.webp'; + + +import './header.css' export default function Header() { const { user, setUser } = React.useContext(UserContext); + const [showSidebar, setShowSidebar] = useState(false); + const toggleSidebar = () => { + setShowSidebar(!showSidebar); + }; + const container: any = useRef(null); const adminContainer: any = useRef(null); @@ -70,224 +81,105 @@ export default function Header() { return classes.filter(Boolean).join(' '); } - return ( -
-
- - -
-
- ) - } \ No newline at end of file + + ); +} \ No newline at end of file diff --git a/apps/frontend/src/app/views/assets/Assets.tsx b/apps/frontend/src/app/views/assets/Assets.tsx index f22b5be..b8a1f81 100644 --- a/apps/frontend/src/app/views/assets/Assets.tsx +++ b/apps/frontend/src/app/views/assets/Assets.tsx @@ -44,28 +44,6 @@ export const Assets = () => { }, [inputs]); return ( - {!isOpen ? ( -
- -
- Frame2 -
-
- ) : ( -
setIsOpen(!isOpen)}> - -
- )}

diff --git a/apps/frontend/src/app/views/assets/AssetsInput.tsx b/apps/frontend/src/app/views/assets/AssetsInput.tsx index 502606d..67bce86 100644 --- a/apps/frontend/src/app/views/assets/AssetsInput.tsx +++ b/apps/frontend/src/app/views/assets/AssetsInput.tsx @@ -17,28 +17,6 @@ export const AssetsInput = () => { } return ( - {!isOpen ? ( -

- -
- Frame2 -
-
- ) : ( -
setIsOpen(!isOpen)}> - -
- )}

diff --git a/apps/frontend/src/app/views/dashboard/Dashboard.tsx b/apps/frontend/src/app/views/dashboard/Dashboard.tsx index 3acd79a..22bd3d6 100644 --- a/apps/frontend/src/app/views/dashboard/Dashboard.tsx +++ b/apps/frontend/src/app/views/dashboard/Dashboard.tsx @@ -1,68 +1,50 @@ -import { useState } from "react"; +// Dashboard.js +import React from 'react'; import { AuthLayout } from '../../components/authlayout/AuthLayout'; -import hamburger_menu from '../../images/dash/hamburger_menu.svg'; import hankHill from '../../images/dash/Hank_Hill.webp'; -import image103 from '../../images/logos/loginGroup103.svg'; -import HamburgerNav from "../../components/hamburger-nav/HamburgerNav"; -import styles from '../../app.module.scss'; +import './dashboard.css'; export const Dashboard = () => { - const [isOpen, setIsOpen] = useState(false); return ( - {!isOpen ? ( -

-
- -
-
- Frame2 + e.preventDefault()}> +
+ Frame2 -
Hi, Bsmith
+
Hi, Bsmith
-
-
###.##
-
Net worth
-
+
+
###.##
+
Net worth
+
-
- - - -
+
+ + +
- - ) : ( -
setIsOpen(!isOpen)}> -
- )} + ); }; diff --git a/apps/frontend/src/app/views/dashboard/dashboard.css b/apps/frontend/src/app/views/dashboard/dashboard.css index 3ce6c39..8f9ce0c 100644 --- a/apps/frontend/src/app/views/dashboard/dashboard.css +++ b/apps/frontend/src/app/views/dashboard/dashboard.css @@ -1,136 +1,139 @@ -/* .page { - display: grid; - grid-template-rows: 40px 137px 98px 66px 116px 66px 96px 106px; -} -.burger { +.dashboard-root { + width: 100%; + height: auto; + background-color: white; display: flex; - align-items: left; + flex-direction: column; + justify-content: space-between; + gap: 0; + padding: 0; + border-radius: 0; } -.bsmith { +.dashboard-content { + padding-top: 5vh; + display: grid; + grid-template-rows: auto 1fr 1fr 1fr; + grid-template-columns: 1fr; + height: 100vh; + grid-row: 3 / span 10; + grid-column: 1 / span 1; display: flex; + flex-direction: column; align-items: center; + gap: 5vh; } -.text { - display: flex; - justify-content: center; + +.hamburger-menu-section { + padding-top: 8vh; + grid-row: 1 / span 1; + grid-column: 1 / span 1; + width: 80%; align-items: center; } -.networth { - display: flex; - justify-content: center; - align-items: center; - display: inline-flex; - padding: 17px 106px 16px 105px; + +.profile-image { + width: 2rem; + border-radius: 0.75rem; } -.profile_dash { - flex-shrink: 0; - border-radius: 100px; - width: 50px; - height: 50px; +.greeting-text { + font-size: 2rem; + margin-top: 1rem; + text-align: center; + font-weight: 500; } -.profile-dash-div { - position: relative; +.net-worth-section { display: flex; + flex-direction: column; + margin-left: 20px; + gap: 6px; justify-content: center; + font-family: 'Raleway', sans-serif; } -.greeting-text { - color: #000; - font-feature-settings: "clig" off, "liga" off; - font-family: FONTSPRING DEMO - Capitana Medium; - font-size: 35px; - font-style: normal; - font-weight: 500; - line-height: normal; - display: flex; +.net-worth-value { + font-size: 2rem; + font-weight: 800; + text-align: center; +} + +.net-worth-label { + font-family: 'Raleway', sans-serif; + width: 100%; + font-size: 1.5rem; + font-weight: 300; justify-content: center; - padding: 20px; + text-align: center; } -.balance { +.buttons-section { display: flex; - padding: 17px 106px 16px 105px; + flex-direction: column; justify-content: center; + gap: 1.5rem; + width: 75%; align-items: center; - border-radius: 100px; - background: var(--Primary-Blue, #148cfb); - border-radius: 100px; - background: var(--Primary-Blue, #148cfb); - width: 345px; + text-align: center; } -.cash-flow { +.dashboard-button { + font-size: 1rem; + font-weight: bold; + font-family: 'Sofia Pro', sans-serif; + color: white; + background-color: #148cfb; display: flex; - width: 345px; - padding: 17px 0px 16px 10px; + flex-direction: column; justify-content: center; + width: 100%; + height: 3rem; + cursor: pointer; align-items: center; + text-align: center; border-radius: 100px; - background: var(--Primary-Blue, #148cfb); } -.page-font { - display: flex; - justify-content: center; - align-items: center; - color: #000; - font-feature-settings: "clig" off, "liga" off; - font-family: Sofia Pro; - font-size: 35px; - font-style: normal; - font-weight: 300; - line-height: normal; +.dashboard-button:hover { + font-size: 1.5rem; } -.numbers-font { +.first-time-user-text { + padding: 50px; + margin-top: 10vh; + font-family: 'Sofia Pro', sans-serif; + font-size: 1rem; + font-weight: 800; + letter-spacing: 0px; + text-align: center; display: flex; justify-content: center; align-items: center; - color: #000; - font-feature-settings: "clig" off, "liga" off; - font-family: Sofia Pro; - font-size: 48px; - font-style: normal; - font-weight: 800; - line-height: normal; + border-width: 2px; + padding: 0.5rem 1rem; + height: 2rem; + border-color: black; + border-radius: 20px; } -.btn-font { - color: #fff; - font-feature-settings: "clig" off, "liga" off; - font-family: Sofia Pro; - font-size: 20px; - font-style: normal; - font-weight: 800; - line-height: normal; +.first-time-user-text { + @apply lg:hidden } - -.userBtn { - display: inline-flex; - justify-content: center; - align-items: center; - gap: 10px; +.first-time-user-text:hover { + @apply underline; } -.image-103 { +.dashboard-root { display: flex; - justify-content: center; -} */ - -@media only screen and (min-width: 834px min-height: 1192px) { - /* Tablet */ - #HomePageDashboardRoot { - color: green; - padding: 1000px; - } - - #hello { - width: 179px; - height: 52px; - top: 104px; - left: 83px; - } + position: relative; } + +.hamburger-button { + position: absolute; + top: 20px; + left: 20px; + z-index: 100; +} + +