UI improvements

src/Rankings.tsx

@@ -104,7 +104,7 @@ export function Chemistry() {
         />
       </div>
       <div className="container">
-        <div className="box">
+        <div className="box three">
           <h2>😬</h2>
           {playersLeft.length < 1 && (
             <span className="grey hint">
@@ -120,7 +120,7 @@ export function Chemistry() {
             orderedList
           />
         </div>
-        <div className="box">
+        <div className="box three">
           <h2>🤷</h2>
           <PlayerList
             list={playersMiddle}
@@ -129,7 +129,7 @@ export function Chemistry() {
             className="middle dragbox"
           />
         </div>
-        <div className="box">
+        <div className="box three">
           <h2>😍</h2>
           {playersRight.length < 1 && (
             <span className="grey hint">
@@ -216,8 +216,8 @@ export function MVP() {
         />
       </div>
       <div className="container">
-        <div className="box">
-          <h1>🥏🏃</h1>
+        <div className="box two">
+          <h2>🥏🏃</h2>
           {availablePlayers.length < 1 && (
             <span className="grey hint">all sorted 👍</span>
           )}
@@ -230,18 +230,15 @@ export function MVP() {
                 return to.el.classList.contains("putclone") ? "clone" : true;
               },
             }}
-            className="dragbox reservoir"
+            className="dragbox"
           />
         </div>
-        <div className="box">
+        <div className="box two">
           <h1>🏆</h1>
           {rankedPlayers.length < 1 && (
             <span className="grey hint">
-              carefully place the{" "}
-              <b>
-                <i>Most Valued Player</i>
-              </b>{" "}
-              (according to your humble opinion) in this box
+              carefully place the <i>Most Valuable Player</i> (according to your
+              humble opinion) in this box
             </span>
           )}
           <PlayerList