From e0a7e5f3a55be5309d3250bc4de042fe700c9b35 Mon Sep 17 00:00:00 2001
From: Connor Prussin <connor@prussin.net>
Date: Sat, 28 Dec 2024 23:01:16 -0800
Subject: [PATCH] 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
---
 .../components/Publisher/layout.module.scss   | 16 ++++++---
 .../src/components/Publisher/layout.tsx       |  4 ++-
 .../median-score-history.module.scss          | 30 +++--------------
 .../Publisher/median-score-history.tsx        | 33 ++++++++++++++++++-
 4 files changed, 52 insertions(+), 31 deletions(-)

diff --git a/apps/insights/src/components/Publisher/layout.module.scss b/apps/insights/src/components/Publisher/layout.module.scss
index 67f56604e..81697a4ec 100644
--- a/apps/insights/src/components/Publisher/layout.module.scss
+++ b/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);
+  }
 }
diff --git a/apps/insights/src/components/Publisher/layout.tsx b/apps/insights/src/components/Publisher/layout.tsx
index 8d09303c8..74719366d 100644
--- a/apps/insights/src/components/Publisher/layout.tsx
+++ b/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"
diff --git a/apps/insights/src/components/Publisher/median-score-history.module.scss b/apps/insights/src/components/Publisher/median-score-history.module.scss
index 72d0baa7b..338e2603f 100644
--- a/apps/insights/src/components/Publisher/median-score-history.module.scss
+++ b/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;
diff --git a/apps/insights/src/components/Publisher/median-score-history.tsx b/apps/insights/src/components/Publisher/median-score-history.tsx
index 2ac0edabb..2bf53acf9 100644
--- a/apps/insights/src/components/Publisher/median-score-history.tsx
+++ b/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,6 +132,7 @@ export const MedianScoreHistory = ({ medianScoreHistory }: Props) => {
                 dot={false}
                 className={styles.medianScore ?? ""}
                 stroke="currentColor"
+                strokeWidth={focusedScore === "final" ? 3 : 1}
               />
               <Line
                 type="monotone"
@@ -134,6 +140,7 @@ export const MedianScoreHistory = ({ medianScoreHistory }: Props) => {
                 dot={false}
                 className={styles.medianUptimeScore ?? ""}
                 stroke="currentColor"
+                strokeWidth={focusedScore === "uptime" ? 3 : 1}
               />
               <Line
                 type="monotone"
@@ -141,6 +148,7 @@ export const MedianScoreHistory = ({ medianScoreHistory }: Props) => {
                 dot={false}
                 className={styles.medianDeviationScore ?? ""}
                 stroke="currentColor"
+                strokeWidth={focusedScore === "deviation" ? 3 : 1}
               />
               <Line
                 type="monotone"
@@ -148,6 +156,7 @@ export const MedianScoreHistory = ({ medianScoreHistory }: Props) => {
                 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 = {