chore: color changes

Author: asuzuki-jumptrading

src/features/Overview/ShredsProgression/ShredsSlotLabels.tsx

@@ -23,7 +23,7 @@ export default function ShredsSlotLabels() {
   if (isStartup) return;
 
   return (
-    <Flex overflow="hidden" position="relative" style={{ height: "25px" }}>
+    <Flex overflow="hidden" position="relative" style={{ height: "27px" }}>
       {groupLeaderSlots.map((slot) => (
         <SlotGroupLabel key={slot} firstSlot={slot} />
       ))}
@@ -66,24 +66,26 @@ function SlotGroupLabel({ firstSlot }: SlotGroupLabelProps) {
         [styles.skipped]: skippedSlots.size > 0,
       })}
     >
-      <Flex
-        justify="center"
-        align="center"
-        width="100%"
-        gap="4px"
-        p="1px 2px"
-        wrap="nowrap"
-        flexGrow="1"
-        className={styles.slotGroupNameContainer}
-      >
-        <PeerIcon
-          url={peer?.info?.icon_url}
-          size={17}
-          isYou={isLeader}
-          hideTooltip
-        />
-        <Text className={styles.name}>{name}</Text>
-      </Flex>
+      <div className={styles.slotGroupTopContainer}>
+        <Flex
+          justify="center"
+          align="center"
+          width="100%"
+          gap="4px"
+          p="1px 2px"
+          wrap="nowrap"
+          flexGrow="1"
+          className={styles.slotGroupNameContainer}
+        >
+          <PeerIcon
+            url={peer?.info?.icon_url}
+            size={17}
+            isYou={isLeader}
+            hideTooltip
+          />
+          <Text className={styles.name}>{name}</Text>
+        </Flex>
+      </div>
 
       <Flex
         width="100%"

src/features/Overview/ShredsProgression/shreds.module.css

@@ -3,7 +3,7 @@
   --group-y: -150%;
   --group-name-opacity: 0;
 
-  background-color: #15181e;
+  background-color: #080b13;
   border-radius: 2px;
   border: 1px solid #3c4652;
   will-change: transform, width;
@@ -17,6 +17,11 @@
     background-color: var(--red-2);
   }
 
+  .slot-group-top-container {
+    width: 100%;
+    background-color: #15181e;
+  }
+
   .slot-group-name-container {
     opacity: var(--group-name-opacity);
     transition: opacity 1s;
@@ -44,16 +49,16 @@
       height: 100%;
       border-radius: 3px;
       &:nth-child(1) {
-        background-color: var(--blue-9);
+        background-color: var(--blue-7);
       }
       &:nth-child(2) {
-        background-color: var(--blue-7);
+        background-color: var(--blue-6);
       }
       &:nth-child(3) {
         background-color: var(--blue-5);
       }
       &:nth-child(4) {
-        background-color: var(--blue-3);
+        background-color: var(--blue-4);
       }
 
       &.skipped {