feat: enhance BlockTab component with dynamic color configuration

- Introduced a color configuration for the BlockTab component, allowing for customizable background and bevel colors based on the selected color prop.
- Updated the Header component to utilize the new color prop for BlockTab instances, improving code readability and maintainability.
- Adjusted the RandomSongButton component's background color for better visual consistency.

Author: tomast1337

apps/frontend/src/app/globals.css

@@ -153,11 +153,12 @@ body {
 
 .bevel {
   position: relative;
+  --bevel-after-bg: rgb(63 63 70); /* zinc-800 default */
+  --bevel-before-bg: rgb(24 24 27); /* zinc-900 default */
 }
 .bevel:after,
 .bevel:before {
   content: '';
-  background: grey;
   position: absolute;
 }
 .bevel:after {
@@ -166,13 +167,15 @@ body {
   left: 4px;
   top: 0;
   transform: translatey(-100%) skewx(-45deg);
+  background: var(--bevel-after-bg);
 }
 .bevel:before {
   width: 8px;
   height: 100%;
   right: 0;
   transform: translatex(100%) skewy(-45deg);
   top: -4px;
+  background: var(--bevel-before-bg);
 }
 
 /************** Google AdSense **************/

apps/frontend/src/modules/shared/components/layout/BlockTab.tsx

@@ -6,24 +6,65 @@ import { cn } from '@web/lib/utils';
 
 import { MusicalNote } from './MusicalNote';
 
+type BlockTabColor = 'purple' | 'blue' | 'green' | 'cyan' | 'zinc';
+
+const colorConfig: Record<
+  BlockTabColor,
+  { bg: string; afterBg: string; beforeBg: string }
+> = {
+  purple: {
+    bg: 'bg-purple-700',
+    afterBg: 'rgb(88 28 135)', // purple-900
+    beforeBg: 'rgb(59 7 100)', // purple-950
+  },
+  blue: {
+    bg: 'bg-blue-700',
+    afterBg: 'rgb(30 58 138)', // blue-900
+    beforeBg: 'rgb(23 37 84)', // blue-950
+  },
+  green: {
+    bg: 'bg-green-700',
+    afterBg: 'rgb(20 83 45)', // green-900
+    beforeBg: 'rgb(5 46 22)', // green-950
+  },
+  cyan: {
+    bg: 'bg-cyan-700',
+    afterBg: 'rgb(22 78 99)', // cyan-900
+    beforeBg: 'rgb(8 51 68)', // cyan-950
+  },
+  zinc: {
+    bg: 'bg-zinc-600',
+    afterBg: 'rgb(63 63 70)', // zinc-800
+    beforeBg: 'rgb(24 24 27)', // zinc-900
+  },
+};
+
 export const BlockTab = ({
   href,
   icon,
   label,
-  className,
+  color = 'zinc',
 }: {
   href: string;
   icon: IconDefinition;
   label: string;
-  className?: string;
+  color?: BlockTabColor;
 }) => {
+  const colors = colorConfig[color];
+
   return (
     <Link
       href={href}
       className={cn(
-        'bevel p-2 flex-1 w-8 md:min-w-20 max-w-28 flex items-center justify-center gap-2 bg-zinc-600 after:bg-zinc-800 before:bg-zinc-900 translate-y-[11px] hover:translate-y-1.5 transition-all duration-150 hover:brightness-125',
-        className,
+        'bevel p-2 flex-1 w-8 md:min-w-20 max-w-28 flex items-center justify-center gap-2 translate-y-[11px] hover:translate-y-1.5 transition-all duration-150 hover:brightness-125',
+        colors.bg,
       )}
+      style={
+        {
+          '--bevel-after-bg': colors.afterBg,
+          '--bevel-before-bg': colors.beforeBg,
+        } as React.CSSProperties
+      }
     >
       <FontAwesomeIcon icon={icon} />
       <span className='hidden sm:block'>{label}</span>

apps/frontend/src/modules/shared/components/layout/Header.tsx

@@ -59,30 +59,20 @@ export async function Header() {
 
         {/* Info pages */}
         <div className='flex flex-1 justify-center gap-1 h-8 text-center'>
-          <BlockTab
-            href='/'
-            icon={faMusic}
-            label='Songs'
-            className='bg-purple-700 after:bg-purple-900 before:bg-purple-950'
-          />
+          <BlockTab href='/' icon={faMusic} label='Songs' color='purple' />
           <BlockTab
             href='/help'
             icon={faQuestionCircle}
             label='Help'
-            className='bg-blue-700 after:bg-blue-900 before:bg-blue-950'
+            color='blue'
           />
           <BlockTab
             href='/blog'
             icon={faNewspaper}
             label='Blog'
-            className='bg-green-700 after:bg-green-900 before:bg-green-950'
-          />
-          <BlockTab
-            href='/about'
-            icon={faUser}
-            label='About'
-            className='bg-cyan-700 after:bg-cyan-900 before:bg-cyan-950'
+            color='green'
           />
+          <BlockTab href='/about' icon={faUser} label='About' color='cyan' />
           <RandomSongButton />
         </div>
 

apps/frontend/src/modules/shared/components/layout/RandomSongButton.tsx

@@ -36,7 +36,7 @@ export const RandomSongButton = () => {
 
   return (
     <button
-      className='bevel p-2 flex-0 w-min flex items-center justify-center gap-2 bg-zinc-600 after:bg-zinc-700 before:bg-zinc-800 translate-y-[11px] hover:translate-y-1.5 transition-all duration-150 hover:brightness-125'
+      className='bevel p-2 flex-0 w-min flex items-center justify-center gap-2 bg-zinc-500 after:bg-zinc-700 before:bg-zinc-800 translate-y-[11px] hover:translate-y-1.5 transition-all duration-150 hover:brightness-125'
       onClick={randomSong}
     >
       <FontAwesomeIcon icon={faDice} />