bottom navbar primary color

src/app/globals.css

@@ -300,6 +300,10 @@ html[data-theme="light"] {
   /* #292D32 */
 }
 
+* {
+  outline: none !important;
+}
+
 html[data-theme="dark"] {
   /* --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);

src/components/icons/HomeIcon.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 
-type Props = React.SVGProps<SVGSVGElement>;
+type Props = React.SVGProps<SVGSVGElement> & {
+    variant?: 'Outline' | 'Bold';
+};
 
-const HomeIcon: React.FC<Props> = ({ ...props }) => {
+const HomeIcon: React.FC<Props> = ({ variant = 'Outline', ...props }) => {
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -10,6 +12,7 @@ const HomeIcon: React.FC<Props> = ({ ...props }) => {
             height='24'
             viewBox="0 0 24 24"
             fill="none"
+            className={variant === 'Bold' ? 'fill-current text-primary' : 'stroke-current text-primary'}
             {...props}
         >
             <path d="M17.79 22.75H6.21c-2.74 0-4.96-2.23-4.96-4.97v-7.41c0-1.36.84-3.07 1.92-3.91l5.39-4.2C10.18 1 12.77.94 14.45 2.12l6.18 4.33c1.19.83 2.12 2.61 2.12 4.06v7.28c0 2.73-2.22 4.96-4.96 4.96Z" />

src/components/navigation/BottomNavBar.tsx

@@ -69,10 +69,10 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
               {onPagerClick ? (
                 <button
                   onClick={onPagerClick}
-                  className="flex flex-col justify-arround items-center gap-[5px] text-disabled2 pointer-events-auto dark:**:stroke-neutral-500"
+                  className="flex flex-col justify-arround items-center gap-[5px] text-primary pointer-events-auto **:stroke-primary"
                 >
                   <PagerIcon width={20} height={20} />
-                  <span className="text-xs2 text-disabled-text">
+                  <span className="text-xs2">
                     {t('Pager')}
                   </span>
                 </button>
@@ -82,33 +82,31 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
               <BottomNavHighlightLink
                 href={`/${name}`}
                 icon={
-                  <HomeIcon className='transition-all duration-200'
+                  <HomeIcon
-                    fill={isHomeRoute ? 'white' : 'transparent'}
+                    className={clsx(
-                    stroke={isHomeRoute ? 'black' : 'white'}
+                      'transition-all duration-200 stroke-primary'
-                    strokeWidth={1}
+                    )}
+                    fill="white"
+                    stroke="currentColor"
+                    variant={isHomeRoute ? 'Bold' : 'Outline'}
                     width={20}
                     height={20} />}
                 value={t('Menu')} />
               <Link
                 href={`/${name}/about`}
                 className={clsx(
-                  'flex flex-col justify-arround items-center gap-[5px] text-disabled2 pointer-events-auto dark:**:stroke-neutral-500 min-w-0',
+                  'flex flex-col justify-arround items-center gap-[5px] text-primary pointer-events-auto **:stroke-primary min-w-0'
-                  isAboutRoute && 'text-foreground **:stroke-foreground'
                 )}
               >
-                <div className="shrink-0">
+                <div className="shrink-0 text-primary">
                   <Building
                     key={`building-${buildingVariant}-${isAboutRoute}`}
                     size={20}
                     variant={buildingVariant as 'Bold' | 'Outline'}
-                    color={isAboutRoute ? undefined : "#8C90A3"}
+                    color="currentColor"
-                    style={isAboutRoute ? { fill: 'currentColor' } : undefined}
                   />
                 </div>
-                <span className={clsx(
+                <span className="text-xs2 text-center truncate w-full">
-                  'text-xs2 text-disabled-text text-center truncate w-full',
-                  isAboutRoute && 'text-foreground'
-                )}>
                   {t('about')}
                 </span>
               </Link>

src/components/navigation/BottomNavLink.tsx

@@ -17,16 +17,15 @@ function BottomNavLink({ icon, value, href, ...restProps }: Props) {
 
   return (
     <Link {...restProps} href={href} className={clsx(
-      'flex flex-col justify-arround items-center gap-[5px] text-disabled2 pointer-events-auto dark:**:stroke-neutral-500 min-w-0',
+      'flex flex-col justify-arround items-center gap-[5px] text-primary pointer-events-auto **:stroke-primary min-w-0',
-      isActive && 'text-foreground **:stroke-foreground',
+      isActive && 'text-primary-foreground **:stroke-primary-foreground',
       restProps.className ?? '',
     )}>
       <div className="shrink-0">
         {icon}
       </div>
       <span className={clsx(
-        'text-xs2 text-disabled-text text-center truncate w-full',
+        'text-xs2 text-center truncate w-full',
-        isActive && 'text-foreground'
       )}>
         {value}
       </span>

src/components/navigation/BottomNavLinkBig.tsx

@@ -17,19 +17,15 @@ function BottomNavHighlightLink({ icon, value, href, ...restProps }: Props) {
 
   return (
     <Link {...restProps} href={href} className={clsx(
-      'flex flex-col justify-arround items-center gap-[5px] text-disabled2 pointer-events-auto',
+      'flex flex-col justify-arround items-center gap-[5px] text-primary pointer-events-auto',
-      isActive && 'text-foreground',
       restProps.className ?? '',
     )}>
       <div className={clsx(
-        'bg-primary text-white p-3.5 rounded-full',
+        'bg-primary text-primary-foreground p-3.5 rounded-full',
       )}>
         {icon}
       </div>
-      <span className={clsx(
+      <span className="text-xs2">
-              'text-xs2 text-disabled-text',
-              isActive && 'text-foreground'
-            )}>
         {value}
       </span>
     </Link>

src/components/overlays/SplashScreen.tsx

@@ -140,7 +140,7 @@ export default function SplashScreen({
                   repeat: Infinity,
                   ease: "easeInOut"
                 }}
-              // className="w-3 h-3 rounded-full bg-primary shadow-lg shadow-primary/50"
+                className="w-3 h-3 rounded-full bg-primary shadow-lg shadow-primary/50"
               />
               <motion.div
                 animate={{
@@ -153,7 +153,7 @@ export default function SplashScreen({
                   repeat: Infinity,
                   ease: "easeInOut"
                 }}
-              // className="w-3 h-3 rounded-full bg-primary shadow-lg shadow-primary/50"
+                className="w-3 h-3 rounded-full bg-primary shadow-lg shadow-primary/50"
               />
               <motion.div
                 animate={{
@@ -166,7 +166,7 @@ export default function SplashScreen({
                   repeat: Infinity,
                   ease: "easeInOut"
                 }}
-              // className="w-3 h-3 rounded-full bg-primary shadow-lg shadow-primary/50"
+                className="w-3 h-3 rounded-full bg-primary shadow-lg shadow-primary/50"
               />
             </motion.div>
           </motion.div>