ag/gymflow
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases 1 Wiki Activity

Massive Material 3 re-styling

Browse Source
This commit is contained in:
AG
2025-12-12 01:06:09 +02:00
parent 55d414da19
commit bc1b747ef4
13 changed files with 374 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Navbar.tsx
View File

@@ -36,11 +36,15 @@ const Navbar: React.FC<NavbarProps> = ({ lang }) => {
onClick={() => navigate(item.path)}
className="flex flex-col items-center justify-center w-full h-full gap-1 group min-w-0"
>
<div className={`px-4 py-1 rounded-full transition-all duration-200 ${isActive ? 'bg-primary-container text-on-primary-container' : 'text-on-surface-variant group-hover:bg-surface-container-high'
<div className={`w-[64px] h-[32px] rounded-full flex items-center justify-center transition-all duration-200 ${isActive ? 'bg-primary-container text-on-primary-container' : 'text-on-surface-variant group-hover:bg-surface-container-high'
}`}>
<item.icon size={22} strokeWidth={isActive ? 2.5 : 2} />
<item.icon
size={24}
strokeWidth={isActive ? 2.5 : 2}
fill="none"
/>
</div>
<span className={`text-[10px] font-medium transition-colors truncate w-full text-center ${isActive ? 'text-on-surface' : 'text-on-surface-variant'
<span className={`text-label-md font-medium transition-colors truncate w-full text-center ${isActive ? 'text-on-surface' : 'text-on-surface-variant'
}`}>
{item.label}
</span>
@@ -61,11 +65,15 @@ const Navbar: React.FC<NavbarProps> = ({ lang }) => {
onClick={() => navigate(item.path)}
className="flex flex-col items-center gap-1 group w-full"
>
<div className={`w-14 h-8 rounded-full flex items-center justify-center transition-colors duration-200 ${isActive ? 'bg-primary-container text-on-primary-container' : 'text-on-surface-variant group-hover:bg-surface-container-high'
<div className={`w-[56px] h-[32px] rounded-full flex items-center justify-center transition-colors duration-200 ${isActive ? 'bg-primary-container text-on-primary-container' : 'text-on-surface-variant group-hover:bg-surface-container-high'
}`}>
<item.icon size={24} />
<item.icon
size={24}
strokeWidth={isActive ? 2.5 : 2}
fill="none"
/>
</div>
<span className={`text-[11px] font-medium text-center ${isActive ? 'text-on-surface' : 'text-on-surface-variant'
<span className={`text-label-md font-medium text-center ${isActive ? 'text-on-surface' : 'text-on-surface-variant'
}`}>
{item.label}
</span>