feat(staking): minor improvements to the median score drawer

- Highlight selected score more clearly
- Show name of selected score instead of "Score History"
- Move documentation button to the right and make it outline

Author: cprussin

apps/insights/src/components/Publisher/layout.module.scss

@@ -129,8 +129,16 @@
   }
 }
 
-.medianScoreDrawerBody {
-  display: flex;
-  flex-flow: column nowrap;
-  gap: theme.spacing(6);
+.medianScoreDrawer {
+  .medianScoreDrawerFooter {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-end;
+  }
+
+  .medianScoreDrawerBody {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: theme.spacing(6);
+  }
 }

apps/insights/src/components/Publisher/layout.tsx

@@ -191,10 +191,12 @@ export const PublishersLayout = async ({ children, params }: Props) => {
             />
             <Drawer
               title="Median Score"
+              className={styles.medianScoreDrawer ?? ""}
               bodyClassName={styles.medianScoreDrawerBody}
+              footerClassName={styles.medianScoreDrawerFooter}
               footer={
                 <Button
-                  variant="solid"
+                  variant="outline"
                   size="sm"
                   href="https://docs.pyth.network/home/oracle-integrity-staking/publisher-quality-ranking"
                   target="_blank"

apps/insights/src/components/Publisher/median-score-history.module.scss

@@ -49,7 +49,7 @@
       .medianDeviationScore,
       .medianStalledScore {
         transition: opacity 100ms linear;
-        opacity: 0.1;
+        opacity: 0.2;
       }
 
       .medianScore {
@@ -78,48 +78,28 @@
       }
     }
 
-    &[data-hovered-score="uptime"] {
-      .medianUptimeScore {
-        opacity: 0.7;
-      }
-    }
-
+    &[data-hovered-score="uptime"],
     &[data-focused-score="uptime"] {
       .medianUptimeScore {
         opacity: 1;
       }
     }
 
-    &[data-hovered-score="deviation"] {
-      .medianDeviationScore {
-        opacity: 0.7;
-      }
-    }
-
+    &[data-hovered-score="deviation"],
     &[data-focused-score="deviation"] {
       .medianDeviationScore {
         opacity: 1;
       }
     }
 
-    &[data-hovered-score="stalled"] {
-      .medianStalledScore {
-        opacity: 0.7;
-      }
-    }
-
+    &[data-hovered-score="stalled"],
     &[data-focused-score="stalled"] {
       .medianStalledScore {
         opacity: 1;
       }
     }
 
-    &[data-hovered-score="final"] {
-      .medianScore {
-        opacity: 0.7;
-      }
-    }
-
+    &[data-hovered-score="final"],
     &[data-focused-score="final"] {
       .medianScore {
         opacity: 1;

apps/insights/src/components/Publisher/median-score-history.tsx

@@ -97,7 +97,12 @@ export const MedianScoreHistory = ({ medianScoreHistory }: Props) => {
       >
         <div className={styles.top}>
           <div className={styles.left}>
-            <h3 className={styles.header}>Score History</h3>
+            <h3 className={styles.header}>
+              <HeaderText
+                hoveredScore={hoveredScore}
+                focusedScore={focusedScore}
+              />
+            </h3>
             <div className={styles.subheader}>
               {selectedPoint
                 ? dateFormatter.format(selectedPoint.time)
@@ -127,27 +132,31 @@ export const MedianScoreHistory = ({ medianScoreHistory }: Props) => {
                 dot={false}
                 className={styles.medianScore ?? ""}
                 stroke="currentColor"
+                strokeWidth={focusedScore === "final" ? 3 : 1}
               />
               <Line
                 type="monotone"
                 dataKey="medianUptimeScore"
                 dot={false}
                 className={styles.medianUptimeScore ?? ""}
                 stroke="currentColor"
+                strokeWidth={focusedScore === "uptime" ? 3 : 1}
               />
               <Line
                 type="monotone"
                 dataKey="medianDeviationScore"
                 dot={false}
                 className={styles.medianDeviationScore ?? ""}
                 stroke="currentColor"
+                strokeWidth={focusedScore === "deviation" ? 3 : 1}
               />
               <Line
                 type="monotone"
                 dataKey="medianStalledScore"
                 dot={false}
                 className={styles.medianStalledScore ?? ""}
                 stroke="currentColor"
+                strokeWidth={focusedScore === "stalled" ? 3 : 1}
               />
               <XAxis dataKey="time" hide />
               <YAxis hide />
@@ -263,6 +272,28 @@ export const MedianScoreHistory = ({ medianScoreHistory }: Props) => {
   );
 };
 
+type HeaderTextProps = {
+  focusedScore: FocusedScore;
+  hoveredScore: FocusedScore;
+};
+
+const HeaderText = ({ hoveredScore, focusedScore }: HeaderTextProps) => {
+  switch (focusedScore ?? hoveredScore) {
+    case "uptime": {
+      return "Median Uptime Score History";
+    }
+    case "deviation": {
+      return "Median Deviation Score History";
+    }
+    case "stalled": {
+      return "Median Stalled Score History";
+    }
+    default: {
+      return "Median Score History";
+    }
+  }
+};
+
 type FocusedScore = "uptime" | "deviation" | "stalled" | "final" | undefined;
 
 type CurrentValueProps = {