Feat: new categories and mobile

src/components/TierModalCategory.tsx

@@ -1,5 +1,5 @@
 import { useDroppable } from '@dnd-kit/core';
-import { useEffect } from 'react';
+import { darkenRgbColor } from '../tools/colors';
 
 interface TierModalCategoryProps {
   color: string;
@@ -12,24 +12,8 @@ export const TierModalCategory = ({ color, textColor, name }: TierModalCategoryP
     id: 'droppable:' + name,
     data: { name },
   });
-  const getColorCode = (color: string) => {
-    let color_code = '';
-    // TODO: color on hover
-    switch (color) {
-      case 'green':
-        color_code = isOver ? '#55efc4' : '#00b894';
-        break;
-      case 'red':
-        color_code = isOver ? '#d63031' : '#ff7675';
-        break;
-      case 'yellow':
-        color_code = isOver ? '#fdcb6e' : '#ffeaa7';
-        break;
-      default:
-        color_code = color;
-    }
-    return color_code;
-  };
+  const darkRGB = darkenRgbColor(color, 40);
+
   const getTextColorCode = (textColor: string) => {
     let text_color_code = '';
     switch (textColor) {
@@ -45,18 +29,14 @@ export const TierModalCategory = ({ color, textColor, name }: TierModalCategoryP
     return text_color_code;
   };
 
-  useEffect(() => {
-    console.log(isOver);
-  }, [isOver]);
-
   const style = {
-    backgroundColor: getColorCode(color),
+    backgroundColor: isOver ? darkRGB : color,
     color: getTextColorCode(textColor),
   };
 
   return (
     <div
-      className={`w-32 h-32 flex justify-center items-center font-bold text-2xl rounded-lg`}
+      className={`md:w-32 md:min-h-32 w-16 min-h-16 flex justify-center items-center font-bold text-sm md:text-xl rounded-lg text-center`}
       style={style}
       key={name}
       ref={setNodeRef}