From 83c9f84445e764b67c1763b4e2de07c7deeca604 Mon Sep 17 00:00:00 2001
From: Alex Zhang <acz001@ucsd.edu>
Date: Sat, 13 Apr 2024 13:19:33 -0700
Subject: [PATCH] Leaderboard: Fix animation, edit styling of buttons (#227)

* Fix animation, edit styling of buttons

* Fix heights
---
 .../LeaderboardRow/style.module.scss          | 15 ++--------
 .../LeaderboardRow/style.module.scss.d.ts     |  1 +
 src/styles/pages/leaderboard.module.scss      | 29 ++++++++++++-------
 3 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/src/components/leaderboard/LeaderboardRow/style.module.scss b/src/components/leaderboard/LeaderboardRow/style.module.scss
index 66e2e859..3ec8bc53 100644
--- a/src/components/leaderboard/LeaderboardRow/style.module.scss
+++ b/src/components/leaderboard/LeaderboardRow/style.module.scss
@@ -23,18 +23,8 @@
   }
 
   &.flash {
-    animation: flash 2s;
-    @keyframes flash {
-      0%,
-      20%,
-      40%,
-      60% {
-        background-color: var(--theme-background);
-        color: var(--theme-text-on-background-1);
-      }
-
-      10%,
-      30%,
+    animation: blinker 2s;
+    @keyframes blinker {
       50% {
         background-color: var(--theme-primary-2);
         color: var(--theme-background);
@@ -78,7 +68,6 @@
     }
 
     .rank {
-      color: var(--theme-text-on-surface-1);
       opacity: 0.5;
       text-align: center;
 
diff --git a/src/components/leaderboard/LeaderboardRow/style.module.scss.d.ts b/src/components/leaderboard/LeaderboardRow/style.module.scss.d.ts
index 0fde0f5d..2ef7150d 100644
--- a/src/components/leaderboard/LeaderboardRow/style.module.scss.d.ts
+++ b/src/components/leaderboard/LeaderboardRow/style.module.scss.d.ts
@@ -1,4 +1,5 @@
 export type Styles = {
+  blinker: string;
   flash: string;
   match: string;
   name: string;
diff --git a/src/styles/pages/leaderboard.module.scss b/src/styles/pages/leaderboard.module.scss
index b8d91917..50e3fc34 100644
--- a/src/styles/pages/leaderboard.module.scss
+++ b/src/styles/pages/leaderboard.module.scss
@@ -8,9 +8,8 @@
   max-width: 60rem;
 
   .header {
-    align-items: center;
     display: flex;
-    gap: 0 2rem;
+    gap: 1rem 2rem;
 
     @media (max-width: vars.$breakpoint-lg) {
       display: grid;
@@ -22,6 +21,7 @@
     }
 
     .heading {
+      align-self: center;
       font-size: 1.5rem;
       justify-self: start;
       letter-spacing: 1%;
@@ -32,13 +32,13 @@
     .myPosition {
       align-items: center;
       background-color: var(--theme-primary-2);
-      border-radius: 1rem;
+      border: 1px solid var(--theme-elevated-stroke);
+      border-radius: 2rem;
       color: var(--theme-background);
       display: flex;
       font-size: 1rem;
       font-weight: bold;
       gap: 0.5rem;
-      height: 2rem;
       justify-self: start;
       padding: 0 1rem;
 
@@ -52,13 +52,13 @@
       background: none;
       background-color: var(--theme-elevated-background);
       border: 1px solid var(--theme-elevated-stroke);
-      border-radius: 1rem;
+      border-radius: 2rem;
       color: inherit;
-      font-size: 14px;
-      height: 2rem;
+      font-size: 1rem;
       max-width: 18rem;
-      padding-left: 1.5rem;
+      padding-left: 1rem;
       padding-right: 0.5rem;
+
       width: 100%;
 
       &::placeholder {
@@ -66,8 +66,17 @@
       }
     }
 
-    .timeDropdown select {
-      text-align: right;
+    .timeDropdown {
+      background-color: var(--theme-elevated-background);
+      border: 1px solid var(--theme-elevated-stroke);
+      border-radius: 2rem;
+      padding: 0.5rem 1rem;
+
+      > select {
+        font-size: 1rem;
+        font-weight: normal;
+        line-height: 1.25rem;
+      }
     }
   }