feat: change style a little more

src/App.css

@@ -25,6 +25,11 @@ footer {
   left: 8px;
 }
 
+dialog {
+  border-radius: 1em;
+}
+
+
 /*=========Network Controls=========*/
 
 .infobutton {
@@ -190,6 +195,8 @@ h3 {
 .box {
   position: relative;
   flex: 1;
+  border-width: 3px;
+  border-style: solid;
   border-radius: 16px;
 
   &.one {
@@ -199,8 +206,6 @@ h3 {
 
   padding: 4px;
   margin: 4px 0.5%;
-  border-style: solid;
-  border-color: black;
 }
 
 .reservoir {
@@ -210,24 +215,13 @@ h3 {
   width: 100%;
 }
 
-.user {
-  max-width: 240px;
-  min-width: 100px;
-  margin: 4px auto;
-
-  .item {
-    font-weight: bold;
-    border-style: solid;
-  }
-}
-
 .item {
   cursor: pointer;
-  font-size: small;
+  font-size: medium;
-  border: 3px dashed black;
+  border: 2px solid;
-  border-radius: 1.2em;
+  border-radius: 1em;
-  margin: 8px auto;
+  margin: 3px auto;
-  padding: 4px 16px;
+  padding: 5px 0.8em;
 }
 
 .extra-margin {
@@ -413,16 +407,14 @@ button {
 }
 
 .avatar {
-  background-color: lightsteelblue;
+  font-weight: bold;
-  padding: 3px 8px;
+  font-size: 110%;
+  padding: 3px 1em;
   width: fit-content;
-  border: 3px solid black;
+  border: 3px solid;
-  border-radius: 16px;
+  border-radius: 1em;
   margin: 0 auto 16px auto;
 
-  ul {
-    min-width: 100px;
-  }
 }
 
 .user-info {
@@ -438,6 +430,7 @@ button {
 /*=======CONTEXT MENU=======*/
 .context-menu {
   z-index: 3;
+  min-width: 8em;
   position: absolute;
   background: aliceblue;
   box-shadow: 4px 4px black;
@@ -449,7 +442,7 @@ button {
   list-style: none;
 
   li {
-    padding: 8px;
+    padding: 4px 0.5em;
     border-bottom: 2px solid #0008;
     border-radius: 0;
     cursor: pointer;
@@ -471,12 +464,12 @@ button {
 @keyframes blink {
 
   0% {
-    background-color: #36c8;
+    background-color: #8888;
   }
 
 
   13% {
-    background-color: #36c8;
+    background-color: #8888;
   }
 
   15% {
@@ -484,12 +477,12 @@ button {
   }
 
   17% {
-    background-color: #36c8;
+    background-color: #8888;
   }
 
 
   38% {
-    background-color: #36c8;
+    background-color: #8888;
   }
 
   40% {
@@ -497,11 +490,11 @@ button {
   }
 
   42% {
-    background-color: #36c8;
+    background-color: #8888;
   }
 
   63% {
-    background-color: #36c8;
+    background-color: #8888;
   }
 
   65% {
@@ -509,11 +502,11 @@ button {
   }
 
   67% {
-    background-color: #36c8;
+    background-color: #8888;
   }
 
   88% {
-    background-color: #36c8;
+    background-color: #8888;
   }
 
   90% {
@@ -521,11 +514,11 @@ button {
   }
 
   92% {
-    background-color: #36c8;
+    background-color: #8888;
   }
 
   100% {
-    background-color: #36c8;
+    background-color: #8888;
   }
 }
 
@@ -533,6 +526,7 @@ button {
 
 .loader {
   display: block;
+  border-radius: 16px;
   position: relative;
   height: 12px;
   width: 96%;

src/Rankings.tsx

@@ -10,7 +10,7 @@ type PlayerListProps = Partial<ReactSortableProps<any>> & {
 
 function PlayerList(props: PlayerListProps) {
   return (
-    <ReactSortable {...props} animation={200}>
+    <ReactSortable {...props} animation={200} swapThreshold={0.4}>
       {props.list?.map((item, index) => (
         <div key={item.id} className="item">
           {props.orderedList
@@ -278,7 +278,7 @@ export default function Rankings() {
 
   useEffect(() => {
     loadPlayers();
-  }, []);
+  }, [user]);
 
   const tabs = [
     { id: "Chemistry", label: "🧪 Chemistry" },
@@ -287,7 +287,7 @@ export default function Rankings() {
 
   return (
     <>
-      {user && players && (
+      {user && players ? (
         <div>
           <div className="container navbar">
             {tabs.map((tab) => (
@@ -314,6 +314,8 @@ export default function Rankings() {
             }
           })}
         </div>
+      ) : (
+        <span className="loader" />
       )}
     </>
   );

src/ThemeProvider.tsx

@@ -32,6 +32,7 @@ const ThemeProvider = ({ children }: ThemeContextProps) => {
       document.body.style.backgroundImage = theme.backgroundImage;
     }
     document.body.style.color = theme.textColor;
+    document.body.style.borderColor = theme.textColor;
   }, [theme]);
 
   return (