style: remove extra colors

src/components/categories/categories.tsx

@@ -19,11 +19,6 @@ interface CategoriesProps {
 
 export function Categories({ sounds }: CategoriesProps) {
   const categories = useMemo(() => {
-    const idToColor: { [id: string]: string } = {
-      nature: 'green',
-      urban: 'indigo',
-    };
-
     const idToIcon: { [id: string]: React.ReactNode } = {
       nature: <BiSolidTree />,
       urban: <FaCity />,
@@ -31,7 +26,6 @@ export function Categories({ sounds }: CategoriesProps) {
 
     const ids = Object.keys(sounds);
     const categories: Array<{
-      color: string;
       icon: React.ReactNode;
       title: string;
       id: string;
@@ -42,7 +36,6 @@ export function Categories({ sounds }: CategoriesProps) {
       const category = sounds[id];
 
       categories.push({
-        color: idToColor[id] || 'green',
         icon: idToIcon[id] || '-',
         id: id,
         ...category,

src/components/category/category.module.css

@@ -9,14 +9,6 @@
       width: 1px;
       height: 75px;
       background: linear-gradient(transparent, var(--color-neutral-300));
-
-      &.green {
-        background: linear-gradient(transparent, #16a34a);
-      }
-
-      &.indigo {
-        background: linear-gradient(transparent, #4f46e5);
-      }
     }
 
     & .icon {
@@ -27,17 +19,8 @@
       justify-content: center;
       border: 1px solid var(--color-neutral-300);
       border-radius: 50%;
+      background-color: var(--color-neutral-100);
       font-size: var(--font-md);
-
-      &.green {
-        border-color: #16a34a;
-        background-color: rgb(22 163 74 / 20%);
-      }
-
-      &.indigo {
-        border-color: #4f46e5;
-        background-color: rgb(79 70 229 / 20%);
-      }
     }
   }
 

src/components/category/category.tsx

@@ -1,38 +1,25 @@
-import { useMemo } from 'react';
-
 import { Sounds } from '@/components/sounds';
-import { cn } from '@/helpers/styles';
 
 import styles from './category.module.css';
 
 interface CategoryProps {
-  color: string;
   icon: React.ReactNode;
   title: string;
   id: string;
   sounds: Array<{ label: string; src: string }>;
 }
 
-export function Category({ color, icon, sounds, title }: CategoryProps) {
+export function Category({ icon, sounds, title }: CategoryProps) {
-  const colorStyle = useMemo(() => {
-    const colorToStyle: { [color: string]: string } = {
-      green: styles.green,
-      indigo: styles.indigo,
-    };
-
-    return colorToStyle[color];
-  }, [color]);
-
   return (
     <div className={styles.category}>
       <div className={styles.iconContainer}>
-        <div className={cn(styles.tail, colorStyle)} />
+        <div className={styles.tail} />
-        <div className={cn(styles.icon, colorStyle)}>{icon}</div>
+        <div className={styles.icon}>{icon}</div>
       </div>
 
       <h2 className={styles.title}>{title}</h2>
 
-      <Sounds color={color} sounds={sounds} />
+      <Sounds sounds={sounds} />
     </div>
   );
 }

src/components/hero/hero.module.css

@@ -53,10 +53,10 @@
     align-items: center;
     justify-content: center;
     padding: 6px 16px;
-    border: 1px solid #2563eb;
+    border: 1px solid var(--color-neutral-200);
     border-radius: 100px;
     margin: 20px auto 0;
-    background-color: rgb(37 99 235 / 30%);
+    background-color: var(--color-neutral-100);
     font-size: var(--font-xsm);
 
     &::before {
@@ -65,7 +65,12 @@
       left: 50%;
       width: 70%;
       height: 1px;
-      background: linear-gradient(90deg, transparent, #60a5fa, transparent);
+      background: linear-gradient(
+        90deg,
+        transparent,
+        var(--color-neutral-400),
+        transparent
+      );
       content: '';
       transform: translateX(-50%);
     }

src/components/sound/sound.module.css

@@ -6,7 +6,7 @@
   justify-content: center;
   padding: 30px 20px;
   border: 1px solid var(--color-neutral-200);
-  border-radius: 10px;
+  border-radius: 8px;
   background: linear-gradient(var(--color-neutral-100), transparent);
   text-align: center;
 
@@ -19,22 +19,15 @@
     background: linear-gradient(
       90deg,
       transparent,
-      var(--color-neutral-300),
+      var(--color-neutral-400),
       transparent
     );
     content: '';
   }
 
   &.selected {
-    &.green {
+    border: 2px solid #818cf8;
-      border: 2px solid #4ade80;
+    box-shadow: 0 10px 20px #818cf833;
-      box-shadow: 0 10px 20px #4ade8033;
-    }
-
-    &.indigo {
-      border: 2px solid #818cf8;
-      box-shadow: 0 10px 20px #818cf833;
-    }
   }
 
   & h3 {

src/components/sound/sound.tsx

@@ -1,34 +1,24 @@
-import { useState, useMemo, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
 import { cn } from '@/helpers/styles';
 
 import styles from './sound.module.css';
 
 interface SoundProps {
-  color: string;
   sound: { label: string; src: string };
 }
 
-export function Sound({ color, sound }: SoundProps) {
+export function Sound({ sound }: SoundProps) {
   const [isSelected, setIsSelected] = useState(false);
   const [volume, setVolume] = useState(0.5);
 
-  const colorStyle = useMemo(() => {
-    const colorToStyle: { [color: string]: string } = {
-      green: styles.green,
-      indigo: styles.indigo,
-    };
-
-    return colorToStyle[color];
-  }, [color]);
-
   useEffect(() => {
     if (!isSelected) setVolume(0.5);
   }, [isSelected]);
 
   return (
     <div
-      className={cn(styles.sound, isSelected && styles.selected, colorStyle)}
+      className={cn(styles.sound, isSelected && styles.selected)}
       onClick={() => setIsSelected(prev => !prev)}
       onKeyDown={() => setIsSelected(prev => !prev)}
     >

src/components/sounds/sounds.tsx

@@ -3,15 +3,14 @@ import { Sound } from '@/components/sound';
 import styles from './sounds.module.css';
 
 interface SoundsProps {
-  color: string;
   sounds: Array<{ label: string; src: string }>;
 }
 
-export function Sounds({ color, sounds }: SoundsProps) {
+export function Sounds({ sounds }: SoundsProps) {
   return (
     <div className={styles.sounds}>
       {sounds.map(sound => (
-        <Sound color={color} key={sound.label} sound={sound} />
+        <Sound key={sound.label} sound={sound} />
       ))}
     </div>
   );