feat: make chemistry and MVP buttons more button-like

src/App.css

@@ -1,5 +1,5 @@
 * {
-  border-radius: 8px;
+  border-radius: 16px;
 }
 
 body {
@@ -154,15 +154,20 @@ button {
 }
 
 .tablink {
-  background-color: unset;
-  font-weight: unset;
-  color: black;
-  border: 2px solid black;
-  border-radius: unset;
-  outline: black;
+  color: white;
   cursor: pointer;
   padding: 8px 16px;
-  width: 50%;
+  width: 48%;
+}
+
+.navbar {
+  button {
+    opacity: 50%;
+    &:hover {
+      opacity: 75%;
+    }
+  }
+  padding: 16px;
 }
 
 /* Style the tab content (and add height:100% for full page content) */

src/Rankings.tsx

@@ -279,10 +279,7 @@ function openPage(pageName: string, color: string) {
   tablinks = document.getElementsByClassName("tablink");
   for (i = 0; i < tablinks.length; i++) {
     let button = tablinks[i] as HTMLElement;
-    button.style.backgroundColor = "unset";
-    button.style.textDecoration = "unset";
-    button.style.fontWeight = "unset";
-    button.style.color = "unset";
+    button.style.opacity = "50%";
   }
   // Show the specific tab content
   (document.getElementById(pageName) as HTMLElement).style.display = "block";
@@ -290,10 +287,8 @@ function openPage(pageName: string, color: string) {
   let activeButton = document.getElementById(
     pageName + "Button"
   ) as HTMLElement;
-  activeButton.style.textDecoration = "underline";
   activeButton.style.fontWeight = "bold";
-  activeButton.style.backgroundColor = "#3366cc";
-  activeButton.style.color = "white";
+  activeButton.style.opacity = "100%";
   document.body.style.backgroundColor = color;
 }
 
@@ -318,20 +313,20 @@ export default function Rankings() {
       <SelectUser {...{ user, setUser, players, setPlayers }} />
       {user.length === 1 && (
         <>
-          <div className="container">
+          <div className="container navbar">
             <button
               className="tablink"
               id="ChemistryButton"
               onClick={() => openPage("Chemistry", "aliceblue")}
             >
-              Chemistry
+              🧪 Chemistry
             </button>
             <button
               className="tablink"
               id="MVPButton"
               onClick={() => openPage("MVP", "aliceblue")}
             >
-              MVP
+              🏆 MVP
             </button>
           </div>