🎨 Improve manageability of setting screens.

* The titles is sticky when scrolling.
* Close "x" is always clickable.

Author: mxbaylee

src/components/Card.tsx

@@ -51,7 +51,6 @@ export const Card = (props: CardProps) => {
   const [{volume}] = useSettings()
   const [playSound] = useSound(volume)
 
-  // TODO maybe put in useSound
   // Generic function to wrap other fn's
   const wrapSound = useCallback((fn: () => void): () => void => {
     return () => {

src/components/InfoPanel.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import './css/InfoPanel.css'
 
 export interface InfoPanelProps {
   hideInfo: () => void

src/components/css/Help.css

@@ -2,15 +2,28 @@
   background: rgba(255, 255, 255, 0.9);
   color: black; border-radius: 0.5em;
   width: calc(var(--card-width) * 1.2 * var(--card-ratio));
-  height: calc(var(--card-height) * 1.2 * var(--card-ratio));
+  height: calc((var(--card-height) * 1.2 * var(--card-ratio)) * 0.88);
   overflow: auto;
   cursor: default;
+  padding-top: calc(0.12 * (var(--card-height) * 1.2 * var(--card-ratio)));
 }
 .help .title {
   border-radius: 0.5em 0.5em 0 0;
   background: rgba(255, 255, 255, 0.8);
   padding: 3px;
   cursor: grab;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc((var(--card-width) * 1.2 * var(--card-ratio)) - (3px * 2));
+  height: calc(0.12 * (var(--card-height) * 1.2 * var(--card-ratio)));
+  line-height: calc(0.12 * (var(--card-height) * 1.2 * var(--card-ratio)));
+}
+.help .title h3 {
+  line-height: calc(0.12 * (var(--card-height) * 1.2 * var(--card-ratio)));
+  height: calc(0.12 * (var(--card-height) * 1.2 * var(--card-ratio)));
+  margin: 0;
+  padding: 0;
 }
 .help .content {
   text-align: left;
@@ -27,6 +40,7 @@
   font-weight: normal;
 }
 .help .close {
+  z-index: 2;
   cursor: pointer;
   position: absolute;
   top: 0;

src/components/css/InfoPanel.css

@@ -0,0 +1,18 @@
+.settings {
+  width: calc(var(--card-width) * 1.2 * var(--card-ratio));
+  height: calc((var(--card-height) * 1.2 * var(--card-ratio)) * 0.88);
+  padding-top: calc(0.12 * (var(--card-height) * 1.2 * var(--card-ratio)));
+}
+.settings .title {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: grab;
+  width: calc((var(--card-width) * 1.2 * var(--card-ratio)) - (3px * 2));
+  height: calc(0.12 * (var(--card-height) * 1.2 * var(--card-ratio)));
+  line-height: calc(0.12 * (var(--card-height) * 1.2 * var(--card-ratio)));
+}
+.settings .title h3 {
+  margin: 0;
+}

src/components/css/SettingsPanel.css

@@ -77,6 +77,7 @@
   text-shadow: 0 1px 10px #FFD700, 0 2px 10px #FFAB00;
 }
 .settings .close {
+  z-index: 2;
   cursor: pointer;
   position: absolute;
   top: 0;