From 18f2984bbcc7622108f4a1e8bb53086cc477201a Mon Sep 17 00:00:00 2001 From: Matthias Puchstein Date: Wed, 9 Jul 2025 23:16:23 +0200 Subject: [PATCH] reworked layout and styles, added new overview page and improved theme handling Signed-off-by: Matthias Puchstein --- src/App.css | 3 + src/App.tsx | 53 ++++---- src/components/Navbar.tsx | 11 +- src/components/TopBar.tsx | 165 ++++++++++++------------- src/data/DreamUtils.ts | 10 ++ src/index.css | 11 +- src/pages/Feed.tsx | 3 +- src/pages/Overview.tsx | 252 ++++++++++++++++++++++++++++++++++++++ 8 files changed, 386 insertions(+), 122 deletions(-) create mode 100644 src/data/DreamUtils.ts create mode 100644 src/pages/Overview.tsx diff --git a/src/App.css b/src/App.css index 757e7e3..cb0bc4a 100644 --- a/src/App.css +++ b/src/App.css @@ -65,6 +65,9 @@ -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; + text-rendering: geometricPrecision; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } .dreamy-border { diff --git a/src/App.tsx b/src/App.tsx index a8dab00..cd1d8b2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,11 +3,12 @@ import {useState} from 'react'; import Navbar from './components/Navbar'; import TopBar from './components/TopBar'; import SplashScreen from './components/SplashScreen'; -import {BrowserRouter, Route, Routes} from 'react-router-dom'; +import {BrowserRouter, Route, Routes, useLocation} from 'react-router-dom'; import Feed from "./pages/Feed.tsx"; import DreamPage from "./pages/DreamPage.tsx"; import ProfilePage from "./pages/ProfilePage.tsx"; import Home from "./pages/Home.tsx"; +import Overview from "./pages/Overview.tsx"; function Record() { return ( @@ -116,16 +117,9 @@ function Archive() { export default function App() { const [isLoading, setIsLoading] = useState(true); - const [isLoggedIn, setIsLoggedIn] = useState(localStorage.getItem('loggedIn') === 'true' || false); - const handleLogin = () => { - setIsLoggedIn(true); - localStorage.setItem('loggedIn', 'true'); - } const handleSplashFinished = () => { setIsLoading(false); - setIsLoggedIn(false); - localStorage.setItem('loggedIn', 'false'); }; if (isLoading) { @@ -135,23 +129,34 @@ export default function App() { return (
-
- -
- -
- - }/> - }/> - }/> - }/> - }/> - }/> - -
-
-
+
); } + +// Separate component to use useLocation hook +function AppContent() { + const location = useLocation(); + const isOverviewPage = location.pathname === '/'; + + return ( +
+ +
+ {!isOverviewPage && } +
+ + }/> + }/> + }/> + }/> + }/> + }/> + }/> + +
+
+
+ ); +} diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 2800934..38879c5 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,19 +1,12 @@ import {NavLink} from 'react-router-dom'; import {FaArchive, FaHome, FaList, FaMicrophone, FaUser} from "react-icons/fa"; -interface NavbarProps { - isLoggedIn: boolean; -} - -export default function Navbar({isLoggedIn}: NavbarProps) { - if (!isLoggedIn && localStorage.getItem('loggedIn') !== 'true') return ( - <> - ) +export default function Navbar() { return (<>