chore: color changes

Author: asuzuki-jumptrading

src/features/Overview/ShredsProgression/ShredsSlotLabels.tsx

@@ -11,6 +11,8 @@ import PeerIcon from "../../../components/PeerIcon";
 import { skippedClusterSlotsAtom } from "../../../atoms";
 import { isStartupProgressVisibleAtom } from "../../StartupProgress/atoms";
 
+const height = 30;
+
 /**
  * Labels for shreds slots.
  * Don't render during startup, because there will be multiple overlapping slots
@@ -23,7 +25,12 @@ export default function ShredsSlotLabels() {
   if (isStartup) return;
 
   return (
-    <Flex overflow="hidden" position="relative" style={{ height: "25px" }}>
+    <Flex
+      overflow="hidden"
+      position="relative"
+      // extra space for borders
+      height={`${height + 2}px`}
+    >
       {groupLeaderSlots.map((slot) => (
         <SlotGroupLabel key={slot} firstSlot={slot} />
       ))}
@@ -53,36 +60,41 @@ function SlotGroupLabel({ firstSlot }: SlotGroupLabelProps) {
 
   return (
     <Flex
-      height="100%"
+      height={`${height}px`}
       direction="column"
       gap="2px"
       position="absolute"
-      justify="center"
       align="center"
       overflow="hidden"
       id={getSlotGroupLabelId(firstSlot)}
       className={clsx(styles.slotGroupLabel, {
         [styles.you]: isLeader,
-        [styles.skipped]: skippedSlots.size > 0,
       })}
     >
       <Flex
-        justify="center"
         align="center"
-        width="100%"
-        gap="4px"
-        p="1px 2px"
-        wrap="nowrap"
         flexGrow="1"
-        className={styles.slotGroupNameContainer}
+        px="2px"
+        className={clsx(styles.slotGroupTopContainer, {
+          [styles.skipped]: skippedSlots.size > 0,
+        })}
       >
-        <PeerIcon
-          url={peer?.info?.icon_url}
-          size={17}
-          isYou={isLeader}
-          hideTooltip
-        />
-        <Text className={styles.name}>{name}</Text>
+        <Flex
+          justify="center"
+          align="center"
+          width="100%"
+          gap="4px"
+          wrap="nowrap"
+          className={styles.slotGroupNameContainer}
+        >
+          <PeerIcon
+            url={peer?.info?.icon_url}
+            size={17}
+            isYou={isLeader}
+            hideTooltip
+          />
+          <Text className={styles.name}>{name}</Text>
+        </Flex>
       </Flex>
 
       <Flex

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

@@ -1,59 +1,63 @@
 .slot-group-label {
-  --group-x: 0;
-  --group-y: -150%;
+  --group-x: -100000px;
   --group-name-opacity: 0;
 
-  background-color: #15181e;
+  background-color: #080b13;
   border-radius: 2px;
   border: 1px solid #3c4652;
   will-change: transform, width;
-  transform: translate(var(--group-x), var(--group-y));
+  transform: translate(var(--group-x));
 
   &.you {
     border: 1px solid #2a7edf;
   }
 
-  &.skipped {
-    background-color: var(--red-2);
-  }
+  .slot-group-top-container {
+    width: 100%;
+    background-color: #15181e;
+
+    &.skipped {
+      background-color: var(--red-2);
+    }
 
-  .slot-group-name-container {
-    opacity: var(--group-name-opacity);
-    transition: opacity 1s;
-    will-change: opacity;
+    .slot-group-name-container {
+      opacity: var(--group-name-opacity);
+      transition: opacity 0.8s;
+      will-change: opacity;
 
-    .name {
-      font-size: 14px;
-      line-height: normal;
-      color: #ccc;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      .name {
+        font-size: 14px;
+        line-height: normal;
+        color: #ccc;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
   }
 
   .slot-bars-container {
+    flex-shrink: 0;
     .slot-bar {
       --slot-x: 0;
-      --slot-opacity: -150%;
 
       position: absolute;
       will-change: transform, width;
-      transform: translate(var(--slot-x), var(--slot-y));
+      transform: translate(var(--slot-x));
 
       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 {

src/features/Overview/ShredsProgression/shredsProgressionPlugin.ts

@@ -689,13 +689,15 @@ function moveLabelPosition(
   const prevPositions = prevLabelPositions?.[key];
   const prevVisible = !!prevPositions?.[slotNumber];
 
-  if (forceUpdates || isVisible !== prevVisible) {
-    // hide / show
-    const prop = isGroup ? "--group-y" : "--slot-y";
-    el.style.setProperty(prop, isVisible ? "0" : "-150%");
+  if (!isVisible) {
+    if (forceUpdates || prevVisible) {
+      // hide
+      const prop = isGroup ? "--group-x" : "--slot-x";
+      el.style.setProperty(prop, isVisible ? "0" : "-100000px");
+    }
+    return;
   }
 
-  if (!isVisible) return;
   positionsToMutate[slotNumber] = position;
 
   const xPos = position[0];
@@ -709,7 +711,8 @@ function moveLabelPosition(
   // no width data -- extend to max width
   const width = position[1];
   const isExtended = position[1] == null;
-  const extendedWidth = width ?? maxXPos - xPos;
+  // extend past maxXPos to hide right border
+  const extendedWidth = width ?? maxXPos + 1 - xPos;
   const prevWidth = prevPositions?.[slotNumber]?.[1];
 
   if (forceUpdates || extendedWidth !== prevWidth) {