feat: order players by name

main.py

@@ -46,7 +46,7 @@ def add_players(players: list[Player]):
 
 def list_players():
     with Session(engine) as session:
-        statement = select(Player)
+        statement = select(Player).order_by(Player.name)
         return session.exec(statement).fetchall()
 
 

src/App.css

@@ -1,5 +1,5 @@
 * {
-  border-radius: 8px;
+  border-radius: 16px;
 }
 
 body {
@@ -7,6 +7,7 @@ body {
   position: relative;
   z-index: 0;
   color: black;
+  text-align: center;
   overflow-wrap: anywhere;
   height: 100%;
 }
@@ -19,7 +20,6 @@ footer {
   max-width: 1280px;
   margin: 0 auto;
   padding: 8px;
-  text-align: center;
 }
 
 .grey {
@@ -29,7 +29,7 @@ footer {
 .hint {
   position: absolute;
   font-size: 80%;
-  padding: 4px;
+  padding: 8px;
   top: auto;
   left: 4px;
   bottom: auto;
@@ -42,14 +42,13 @@ h2,
 h3 {
   margin-top: 0px;
   margin-bottom: 0px;
-  padding: 4px 16px;
+  padding: 8px 16px;
 }
 
 .container {
   display: flex;
   flex-wrap: nowrap;
-  justify-content: space-evenly;
-  min-width: 737px;
+  width: min(96vw, 900px);
 }
 
 .dragbox {
@@ -59,6 +58,19 @@ h3 {
   height: 92%;
 }
 
+.box {
+  position: relative;
+  flex: 1;
+  &.one {
+    max-width: min(96%, 768px);
+    margin: 4px auto;
+  }
+  padding: 4px;
+  margin: 4px 0.5%;
+  border-style: solid;
+  border-color: black;
+}
+
 .reservoir {
   flex-direction: unset;
   flex-wrap: wrap;
@@ -66,28 +78,9 @@ h3 {
   width: 100%;
 }
 
-.box {
-  position: relative;
-  &.one {
-    max-width: min(80vw, 500px);
-  }
-  &.two {
-    min-width: 43%;
-    max-width: 20vw;
-  }
-  &.three {
-    min-width: 27%;
-    max-width: 10vw;
-  }
-  padding: 4px;
-  margin: 4px auto;
-  border-style: solid;
-  border-color: black;
-}
-
 .user {
-  max-width: 400px;
-  min-width: 200px;
+  max-width: 240px;
+  min-width: 100px;
   margin: 4px auto;
   .item {
     font-weight: bold;
@@ -99,33 +92,26 @@ h3 {
   cursor: pointer;
   font-size: small;
   border: 3px dashed black;
-  border-radius: 4px;
+  border-radius: 1.2em;
   margin: 8px auto;
-  padding: 4px 8px;
+  padding: 4px 16px;
 }
 
 .extra-margin {
   padding: 0px 8px;
+  margin: auto;
 }
 
 button {
   font-weight: bold;
   font-size: large;
-  color: ghostwhite;
+  color: aliceblue;
   background-color: black;
+  border-radius: 1.2em;
   z-index: 1;
-  &:focus {
-    outline: black;
-  }
-  &:hover {
-    border-color: black;
-  }
 }
 
 @media only screen and (max-width: 768px) {
-  .container {
-    min-width: 96vw;
-  }
   .submit_text {
     display: none;
   }
@@ -153,15 +139,23 @@ 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%;
+  flex: 1;
+  margin: 4px auto;
+}
+
+.navbar {
+  button {
+    font-size: medium;
+    margin: 4px 0.5%;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    opacity: 50%;
+    &:hover {
+      opacity: 75%;
+    }
+  }
 }
 
 /* Style the tab content (and add height:100% for full page content) */
@@ -182,8 +176,7 @@ button {
 .logo {
   position: relative;
   text-align: center;
-  height: 196px;
-  margin: auto;
+  height: 160px;
   img {
     display: block;
     margin: auto;

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>