Ux/54 help (#88)

* ux/54-help tooltips
* ux/54-help refetch after mutation
* ux/54-help broadcast event index
* ux/54-help prevent multiple keypresses when key held
* ux/54-help fat clock
* ux/54-help progress bar user defined
* ux/54-help onAir is button
* ux/54-help OSC: add missing presenter message
* ux/54-help OSC: enable / disable OSC
* ux/54-help handle timezone in excel date import
* ux/54-help tray left click to show app
* ux/54-help create queriable endpoint
* ux/54-help fix memoisation in lower thirds
* ux/54-help revise icons
* ux/54-help clarify text
* ux/54-help forgiving text parsing
* ux/54-help add smart keywords
* ux/54-help version bump

client/src/features/control/MessageControl.module.scss

@@ -1,12 +1,12 @@
+@use '../../styles/main' as *;
+@use '../../styles/mixins' as *;
+
 .messageContainer,
 .onAirToggle {
-  background-color: rgba(0, 0, 0, 0.05);
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  border-radius: 4px;
+  @include main-container;
   display: flex;
   gap: 0.5em;
   padding: 0.5em;
-
 }
 
 .messageContainer {
@@ -17,17 +17,20 @@
     grid-template-columns: 1fr auto;
     gap: 1em;
   }
+
   .label {
     padding: 0;
     margin: 0;
     font-size: 0.9em;
     color: #ccc;
   }
+
   .inline {
     border-radius: 4px;
     background-color: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.05);
   }
+
   .padleft {
     padding-left: 0.5em;
   }
@@ -35,20 +38,25 @@
 
 .onAirToggle {
   margin-top: 1em;
-  display: flex;
-  gap: 1em;
   align-items: center;
-  line-height: 3em;
+  display: grid;
+  grid-template-areas:
+    'btn label'
+    'btn osc';
+  grid-template-columns: 2.5em 1fr;
+  grid-template-rows: 1.2em 0.8em;
+
+  .btn {
+    grid-area: btn;
+  }
 
   .onAirLabel {
+    grid-area: label;
     font-size: 1.2em;
   }
+
   .oscLabel {
-    color: #4bffabcc;
-    font-size: 0.8em;
-    float: right;
-    padding-right: 1em;
-    -webkit-user-select: text;
-    user-select: text;
+    @include osc-label;
+    grid-area: osc;
   }
 }