Refactor achievement and counter styles to separate CSS files

Moved styles for AchievementItem and ItemWithCounter components from App.css and Cooking.css into dedicated CSS files under common/styles. Updated component imports to use the new CSS files, improving modularity and maintainability of styles.

Author: JorchCortez

src/App.css

@@ -529,56 +529,3 @@ section.sv-container{
   } 
 
 } 
-
-.item-with-counter {
-    display: block;
-    position: relative;
-}
-
-.item-with-counter p {
-    text-decoration: none;
-    color: white;
-    font-weight: bold;
-    text-shadow: 2px 2px 2px #000;
-
-  &.item-times {
-    position: absolute;
-    bottom: 5px;
-    right: 0;
-  }
-  &.item-unknown {
-    position: absolute;
-    bottom: 50%;
-    right: 50%;
-    transform: translateX(50%) translateY(40%);
-
-  }
-}
-
-.item-with-counter img {
-  width: 2rem !important;
-  height: 2rem !important;
-
-  &.done {
-      filter: grayscale(0) brightness(1) !important;
-  }
-  &.known {
-      filter: grayscale(1) opacity(0.3) !important;
-  }
-  &.unknown {
-      filter: grayscale(1) brightness(0) opacity(0.3) !important;
-  }
-}
-
-.section-achievements img {
-    width: 3rem !important;
-    height: 3rem !important;
-}
-
-.section-achievements img.achieved {
-    filter: grayscale(0) brightness(1) !important;
-}
-
-.section-achievements img.pending {
-    filter: grayscale(1) brightness(0.5) !important;
-}

src/Components/AchieveTabs/Cooking/Cooking.css

@@ -24,25 +24,4 @@
     position: absolute;
     bottom: 5px;
     right: 0;
-}
-
-.achievement-item {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-weight: bold;
-    max-width: 30%;
-}
-
-.section-achievements img {
-    width: 3rem !important;
-    height: 3rem !important;
-}
-
-.section-achievements img.achieved {
-    filter: grayscale(0) brightness(1) !important;
-}
-
-.section-achievements img.pending {
-    filter: grayscale(1) brightness(0.5) !important;
 }

src/Components/common/AchievementItem.tsx

@@ -1,3 +1,5 @@
+import "./styles/AchievementIte.css";
+
 type AchievementItemProps = {
     done: boolean;
     image: string;

src/Components/common/ItemWithCounter.tsx

@@ -1,4 +1,4 @@
-
+import './styles/ItemWithCounter.css';
 type ItemWithCounterProps = {
     link: string;
     src: string;

src/Components/common/styles/AchievementIte.css

@@ -0,0 +1,20 @@
+.achievement-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: bold;
+    max-width: 30%;
+}
+
+.achievement-item img {
+    width: 3rem !important;
+    height: 3rem !important;
+}
+
+.achievement-item img.achieved {
+    filter: grayscale(0) brightness(1) !important;
+}
+
+.achievement-item img.pending {
+    filter: grayscale(1) brightness(0.5) !important;
+}

src/Components/common/styles/ItemWithCounter.css

@@ -0,0 +1,41 @@
+
+
+.item-with-counter {
+    display: block;
+    position: relative;
+}
+
+.item-with-counter p {
+    text-decoration: none;
+    color: white;
+    font-weight: bold;
+    text-shadow: 2px 2px 2px #000;
+
+    &.item-times {
+        position: absolute;
+        bottom: 5px;
+        right: 0;
+    }
+    &.item-unknown {
+        position: absolute;
+        bottom: 50%;
+        right: 50%;
+        transform: translateX(50%) translateY(40%);
+
+    }
+}
+
+.item-with-counter img {
+    width: 2.5rem !important;
+    height: 2.5rem !important;
+
+    &.done {
+        filter: grayscale(0) brightness(1) !important;
+    }
+    &.known {
+        filter: grayscale(1) opacity(0.3) !important;
+    }
+    &.unknown {
+        filter: grayscale(1) brightness(0) opacity(0.3) !important;
+    }
+}