From 37304cbeecdf05ff1c790d3007e42598a566536e Mon Sep 17 00:00:00 2001
From: Baylee Schmeisser <github.mx@baylee.dev>
Date: Sat, 6 Jul 2024 15:56:29 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Improve=20manageability=20of=20s?=
 =?UTF-8?q?etting=20screens.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* The titles is sticky when scrolling.
* Close "x" is always clickable.
---
 src/components/Card.tsx              |  1 -
 src/components/InfoPanel.tsx         |  1 +
 src/components/css/Help.css          | 16 +++++++++++++++-
 src/components/css/InfoPanel.css     | 18 ++++++++++++++++++
 src/components/css/SettingsPanel.css |  1 +
 5 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 src/components/css/InfoPanel.css

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 9113538..3cc22de 100644
--- a/src/components/Card.tsx
+++ b/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 () => {
diff --git a/src/components/InfoPanel.tsx b/src/components/InfoPanel.tsx
index 416ec92..d03a944 100644
--- a/src/components/InfoPanel.tsx
+++ b/src/components/InfoPanel.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import './css/InfoPanel.css'
 
 export interface InfoPanelProps {
   hideInfo: () => void
diff --git a/src/components/css/Help.css b/src/components/css/Help.css
index 0a4403d..1b775ef 100644
--- a/src/components/css/Help.css
+++ b/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;
diff --git a/src/components/css/InfoPanel.css b/src/components/css/InfoPanel.css
new file mode 100644
index 0000000..1c1a851
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/css/SettingsPanel.css b/src/components/css/SettingsPanel.css
index d3e9bf5..9bc5cd9 100644
--- a/src/components/css/SettingsPanel.css
+++ b/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;