mpuchstein/REMind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

nav needs some fixes but looks good for now

Browse Source
This commit is contained in:
Matthias Puchstein
2025-07-03 18:40:19 +02:00
parent 04e12ac605
commit fe4b616d27
2 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Navbar.tsx
View File

@@ -2,36 +2,31 @@ import {NavLink} from 'react-router-dom';
import {FaArchive, FaHome, FaList, FaMicrophone, FaUser} from "react-icons/fa"; import {FaArchive, FaHome, FaList, FaMicrophone, FaUser} from "react-icons/fa";
export default function Navbar() { export default function Navbar() {
const linkClasses = ({isActive}: { isActive: boolean }) =>
isActive ? 'text-fuchsia-50 font-semibold' : 'text-fuchsia-50';
return ( return (
<div className="relative"> <div className="relative">
{/* The fixed bottom navbar */}
<nav <nav
className="fixed bottom-0 left-0 right-0 flex justify-around bg-violet-800 border-t border-violet-950 py-2 z-10"> className="fixed bottom-0 left-0 right-0 flex justify-around bg-violet-900 py-2 z-10">
<NavLink to="/" className={linkClasses}> <NavLink to="/">
<FaHome className="w-6 h-6"/> <FaHome className="w-6 h-6 text-fuchsia-400"/>
</NavLink> </NavLink>
<NavLink to="/feed" className={linkClasses}> <NavLink to="/feed">
<FaList className="w-6 h-6"/> <FaList className="w-6 h-6 text-fuchsia-400"/>
</NavLink> </NavLink>
{/* Placeholder for spacing */}
<div className="w-16"></div> <div className="w-16"></div>
<NavLink to="/archive" className={linkClasses}> <NavLink to="/archive">
<FaArchive className="w-6 h-6"/> <FaArchive className="w-6 h-6 text-fuchsia-400"/>
</NavLink> </NavLink>
<NavLink to="/profile" className={linkClasses}> <NavLink to="/profile">
<FaUser className="w-6 h-6"/> <FaUser className="w-6 h-6 text-fuchsia-400"/>
</NavLink> </NavLink>
</nav> </nav>
{/* The record button lifted up */}
<NavLink <NavLink
to="/record" to="/record"
className="fixed bottom-1 left-1/2 transform -translate-x-1/2 bg-violet-500 p-4 rounded-full z-20" className="fixed bottom-2 left-1/2 transform -translate-x-1/2 bg-violet-700 p-4 rounded-full border-6 border-background z-20"
> >
<FaMicrophone className="w-8 h-8 text-white"/> <FaMicrophone className="w-8 h-8 text-fuchsia-400"/>
</NavLink> </NavLink>
</div> </div>
); );

9
src/index.css
View File

@@ -1,13 +1,14 @@
@import "tailwindcss"; @import "tailwindcss";
:root { :root {
--background-color: var(--color-pink-900);
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5; line-height: 1.5;
font-weight: 400; font-weight: 400;
color-scheme: light dark; color-scheme: light dark;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
background-color: #242424; background-color: var(--background-color);
font-synthesis: none; font-synthesis: none;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
@@ -15,6 +16,10 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.border-background {
border-color: var(--background-color);
}
a { a {
font-weight: 500; font-weight: 500;
color: #646cff; color: #646cff;
@@ -59,7 +64,7 @@ button:focus-visible {
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
color: #213547; color: #213547;
background-color: #ffffff; --background-color: #ffffff;
} }
a:hover { a:hover {
color: #747bff; color: #747bff;