Redoing styling for GuessPane to be more straightforward

client/src/components/screens/GamePanel/GuessPane/GuessPane.jsx

@@ -28,20 +28,18 @@ export default () => {
   };
 
   return (
-    <div className={bigMap ? styles['pane--big'] : styles.pane}>
+    <div className={`${styles.pane} ${bigMap ? styles['pane--big'] : styles['pane--small']}`}>
+      <button
+        className={styles.submit}
+        onClick={handleSubmitGuess}
+        disabled={submitted || selectedPoint === null}
+      >
+        Submit Guess
+      </button>
       <ClickMarkerMap onMarkerMoved={setSelectedPoint} />
-      <div className={styles.submit}>
-        <RoundTimer onTimeout={handleSubmitGuess} />
-        <div className={styles.resizeButton} onClick={() => setBigMap(b => !b)}>
-          {bigMap ? '↙️' : '↗️'}
-        </div>
-        <button
-          className={styles.submitButton}
-          onClick={handleSubmitGuess}
-          disabled={submitted || selectedPoint === null}
-        >
-          Submit Guess
-        </button>
+      <RoundTimer onTimeout={handleSubmitGuess} />
+      <div className={styles.resize} onClick={() => setBigMap(b => !b)}>
+        {bigMap ? '↙️' : '↗️'}
       </div>
     </div>
   );

client/src/components/screens/GamePanel/GuessPane/GuessPane.module.css

@@ -2,136 +2,117 @@
   height: 100%;
   width: 100%;
   flex: 1;
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: space-around;
+  display: grid;
+  justify-items: center;
+  align-items: center;
+  grid-template-rows: 1fr 5fr;
+  grid-template-areas: 
+    "timer submit"
+    "map map";
 }
 
 .map {
-  flex: 3;
   height: 100%;
   width: 100%;
+  grid-area: map;
 }
 
 .submit {
-  flex: 1;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  text-align: center;
-}
-
-.submitButton {
-  flex: 1;
-  margin: 2px;
+  width: 100%;
+  grid-area: submit;
 }
 
 .timer {
   padding: 1px;
   display: inline;
+  grid-area: timer;
 }
 
 .timer--timeout {
   color: red;
 }
 
-.resizeButton {
+.resize {
   display: none;
-  position: absolute;
-  left: 4px;
-  bottom: 25px;
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
 }
 
 @media only screen and (min-width: 600px) and (min-height: 600px) {
+  :root {
+    --margin: 10px;
+    --small: 200px;
+    --hovered: 400px;
+    --transition-time: 400ms;
+  }
+
   .pane {
     position: absolute;
-    left: 10px;
-    bottom: 10px;
-    height: 200px;
-    width: 200px;
-    flex-flow: column-reverse nowrap;
+    left: var(--margin);
+    bottom: var(--margin);
     z-index: 1;
-    opacity: .75;
-    transition: all 0.5s ease-in;
-  }
-
-  .pane:hover {
-    height: 400px;
-    width: 400px;
-    opacity: 1;
-    transition: 0.5s;
-  }
-
-  .map {
-    opacity: .75;
-    transition: 1s;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    align-items: center;
   }
 
-  .map:hover {
-    opacity: 1;
+  .pane>* {
+    width: 100%;
+    background-color: #333;
+    text-align: center;
   }
 
   .submit {
-    flex: 0.25;
-    flex-flow: column-reverse nowrap;
-    margin-top: 4px;
-    color: #fff;
+    margin-bottom: 5px;
+    opacity: 0;
+    transition: opacity var(--transition-time) ease-in;
   }
 
-  .submit>* {
-    background-color: #333;
+  .map {
+    flex: 3;
+    opacity: .5;
+    transition: opacity var(--transition-time) ease-in;
   }
 
-  .submitButton {
-    margin: 0px;
-    margin-bottom: 5px;
+  .timer {
+    margin-top: 5px;
   }
 
-  .pane .submitButton {
-    visibility: hidden;
-    opacity: 0;
-    transition: 1s;
+  .pane--small {
+    height: var(--small);
+    width: var(--small);
+    transition: height var(--transition-time) ease-out, width var(--transition-time) ease-out;
   }
 
-  .pane:hover .submitButton {
-    visibility: visible;
-    opacity: 1;
-    transition: 0.5s;
+  .pane--small:hover {
+    height: var(--hovered);
+    width: var(--hovered);
+    transition: height var(--transition-time) ease-in, width var(--transition-time) ease-in;
   }
 
-  .pane:hover .map {
+  .pane--small:hover>* {
     opacity: 1;
-  }
-
-  .resizeButton {
-    display: block;
+    transition: opacity var(--transition-time) ease-out;
   }
 
   .pane--big {
-    flex: 1;
-    display: flex;
-    position: absolute;
-    left: 10px;
-    bottom: 10px;
-    height: calc(100vh - 20px);
-    width: calc(100vw - 20px);
-    flex-flow: column-reverse nowrap;
-    justify-content: space-around;
-    z-index: 1;
-    opacity: 1;
-    transition: all 0.5s ease-out;
+    height: calc(100vh - 2 * var(--margin));
+    width: calc(100vw - 2 * var(--margin));
+    transition: height var(--transition-time) ease-out, width var(--transition-time) ease-out;
   }
 
-  .pane--big .submitButton {
+  .pane--big>* {
     visibility: visible;
     opacity: 1;
-    transition: 0.5s;
+    transition: opacity var(--transition-time) ease-out;
   }
 
-  .pane--big .map {
-    opacity: 1;
+  .resize {
+    display: block;
+    position: absolute;
+    left: 0px;
+    bottom: 0px;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
   }
 }