From 4c77d26a71c475dbae65e641faf60616be60c25e Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Sun, 28 Jan 2024 22:42:19 +0100
Subject: [PATCH] style: tweaks to editor (#738)

---
 .../colour-input/SwatchSelect.module.scss     |  1 +
 .../TimeInputWithButton.module.scss           |  4 +-
 .../input/time-input/TimeInputWithButton.tsx  |  2 +-
 .../src/features/editors/Editor.module.scss   | 38 +++++++++----------
 apps/client/src/features/editors/Editor.tsx   |  6 ++-
 .../features/overview/Overview.module.scss    |  1 +
 .../src/features/rundown/Rundown.module.scss  |  3 +-
 .../rundown/RundownExport.module.scss         | 25 +++++++-----
 .../src/features/rundown/_blockMixins.scss    |  6 ++-
 .../delay-block/DelayBlock.module.scss        |  1 -
 .../event-block/EventBlock.module.scss        | 11 ++----
 .../rundown/event-block/RundownIndicators.tsx |  2 +-
 .../event-editor/EventEditor.module.scss      |  9 +++--
 apps/client/src/index.scss                    | 13 +++++--
 14 files changed, 66 insertions(+), 56 deletions(-)

diff --git a/apps/client/src/common/components/input/colour-input/SwatchSelect.module.scss b/apps/client/src/common/components/input/colour-input/SwatchSelect.module.scss
index f6a78e140..20f682d7d 100644
--- a/apps/client/src/common/components/input/colour-input/SwatchSelect.module.scss
+++ b/apps/client/src/common/components/input/colour-input/SwatchSelect.module.scss
@@ -1,5 +1,6 @@
 .list {
   display: flex;
+  flex-wrap: wrap;
   gap: 0.5rem
 }
 
diff --git a/apps/client/src/common/components/input/time-input/TimeInputWithButton.module.scss b/apps/client/src/common/components/input/time-input/TimeInputWithButton.module.scss
index 789ce7457..0fb27173f 100644
--- a/apps/client/src/common/components/input/time-input/TimeInputWithButton.module.scss
+++ b/apps/client/src/common/components/input/time-input/TimeInputWithButton.module.scss
@@ -1,9 +1,7 @@
-$input-font-size: 15px;
+$input-font-size: 1rem;
 $input-delayed-border-color: $ontime-delay-text;
 
 .timeInput {
-  width: fit-content;
-
   &.delayed {
     border: 1px solid $input-delayed-border-color;
   }
diff --git a/apps/client/src/common/components/input/time-input/TimeInputWithButton.tsx b/apps/client/src/common/components/input/time-input/TimeInputWithButton.tsx
index 2ec6cbddf..d87ab32a9 100644
--- a/apps/client/src/common/components/input/time-input/TimeInputWithButton.tsx
+++ b/apps/client/src/common/components/input/time-input/TimeInputWithButton.tsx
@@ -21,7 +21,7 @@ export default function TimeInputWithButton<T extends string>(props: TimeInputWi
   const inputClasses = cx([style.timeInput, hasDelay ? style.delayed : null]);
 
   return (
-    <InputGroup size='sm' className={inputClasses}>
+    <InputGroup size='sm' className={inputClasses} width='fit-content'>
       <InputLeftElement className={style.inputLeft}>
         <Tooltip label={placeholder} openDelay={tooltipDelayFast} variant='ontime-ondark'>
           <Button size='sm' variant='ontime-subtle-white' className={style.inputButton} tabIndex={-1}>
diff --git a/apps/client/src/features/editors/Editor.module.scss b/apps/client/src/features/editors/Editor.module.scss
index 4733c1c6e..ebe5581b6 100644
--- a/apps/client/src/features/editors/Editor.module.scss
+++ b/apps/client/src/features/editors/Editor.module.scss
@@ -1,7 +1,9 @@
 @use './EditorMixin' as editor;
 
 $menu-width: 2.75rem;
-$playback-width: 30rem;
+$min-playback-width: 27rem;
+$max-playback-width: 35rem;
+$panel-gap: 0.5rem;
 
 .corner {
   @include editor.corner;
@@ -13,29 +15,23 @@ $playback-width: 30rem;
   height: 100%;
   color: $ui-white;
   padding: 1rem 0.5rem;
-  
+
   display: grid;
   grid-template-columns: $menu-width auto;
   grid-template-rows: 3rem 1fr;
-  grid-template-areas: 
+  grid-template-areas:
     'menu overview'
     'menu main';
-  gap: 0.5rem;
+  gap: $panel-gap;
 }
 
 .panelContainer {
   grid-area: main;
 
-  display: grid;
-  grid-template-rows: auto 1fr;
-  grid-template-columns: 1fr $playback-width;
-  grid-template-areas:
-    'rundown play'
-    'rundown mess';
-  gap: 0.5rem;
+  display: flex;
+  gap: $panel-gap;
   overflow: hidden;
 
-
   .corner {
     /* we show this if the component hasnt been extracted */
     display: inline;
@@ -46,21 +42,23 @@ $playback-width: 30rem;
   .messages {
     position: relative;
     border-radius: 8px;
-    height: 100%;
     background-color: $bg-container-l2;
     padding: 1rem;
   }
 }
 
-.messages {
-  grid-area: mess;
-  min-width: 24rem;
+.left {
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-width: $min-playback-width;
+  max-width: $max-playback-width;
+  display: flex;
+  flex-direction: column;
+  gap: $panel-gap;
 }
 
-.playback {
-  grid-area: play;
-  max-height: 380px;
-  min-width: 26rem;
+.messages {
+  flex: 1;
 }
 
 .content {
diff --git a/apps/client/src/features/editors/Editor.tsx b/apps/client/src/features/editors/Editor.tsx
index 771c5778d..d8230e2b0 100644
--- a/apps/client/src/features/editors/Editor.tsx
+++ b/apps/client/src/features/editors/Editor.tsx
@@ -80,9 +80,11 @@ export default function Editor() {
           <AppSettings />
         ) : (
           <div id='panels' className={styles.panelContainer}>
+            <div className={styles.left}>
+              <TimerControl />
+              <MessageControl />
+            </div>
             <Rundown />
-            <MessageControl />
-            <TimerControl />
           </div>
         )}
         <Overview />
diff --git a/apps/client/src/features/overview/Overview.module.scss b/apps/client/src/features/overview/Overview.module.scss
index 88d5ce2d6..a9d7c95f0 100644
--- a/apps/client/src/features/overview/Overview.module.scss
+++ b/apps/client/src/features/overview/Overview.module.scss
@@ -5,6 +5,7 @@
   justify-content: start;
   font-size: $inner-section-text-size;
   gap: 2rem;
+  padding-left: 1rem;
   padding-right: 0.5rem;
 }
 
diff --git a/apps/client/src/features/rundown/Rundown.module.scss b/apps/client/src/features/rundown/Rundown.module.scss
index 534ee39ce..bb0a1eb9d 100644
--- a/apps/client/src/features/rundown/Rundown.module.scss
+++ b/apps/client/src/features/rundown/Rundown.module.scss
@@ -7,9 +7,8 @@
   margin-top: 1em;
   display: flex;
   flex-direction: column;
-  padding: 0 4px;
+  padding-right: 4px; // size of scrollbar
   overflow-y: scroll;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
   height: 100%;
 }
 
diff --git a/apps/client/src/features/rundown/RundownExport.module.scss b/apps/client/src/features/rundown/RundownExport.module.scss
index 826b11254..f6de36b78 100644
--- a/apps/client/src/features/rundown/RundownExport.module.scss
+++ b/apps/client/src/features/rundown/RundownExport.module.scss
@@ -1,12 +1,8 @@
 @use '../editors//EditorMixin' as editor;
 
-$rundown-width: 44.5rem;
-$editor-width: 25rem;
-
 .rundownExport {
-  grid-area: rundown;
-  max-height: 100%;
   height: 100%;
+  flex: 1;
 }
 
 .rundown {
@@ -24,17 +20,26 @@ $editor-width: 25rem;
 .list {
   @include editor.panel;
   height: inherit;
+  padding-left: 0;
   box-shadow: $box-shadow-right;
-  min-width: $rundown-width;
+
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-width: 38rem;
+  max-width: 45rem;
 }
 
 .side {
+  max-height: 100%;
+  max-width: 45rem;
   margin: 2rem 0;
   padding: 1rem;
+  padding-right: 0;
   background-color: $gray-1325;
   border-radius: 0 8px 8px 0;
-  min-width: $editor-width;
-  flex: 1;
-  max-height: 100%;
-  overflow: auto;
+
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-width: 30rem;
+  max-width: 45rem;
 }
diff --git a/apps/client/src/features/rundown/_blockMixins.scss b/apps/client/src/features/rundown/_blockMixins.scss
index 7c2957e59..6787fc285 100644
--- a/apps/client/src/features/rundown/_blockMixins.scss
+++ b/apps/client/src/features/rundown/_blockMixins.scss
@@ -1,11 +1,13 @@
 @use '../../theme/ontimeColours' as *;
 @use '../../theme/ontimeStyles' as *;
 
+$block-width: 33rem;
+
 $block-gap: 0.25rem;
 $block-element-spacing: 0.25rem;
 $block-binder-width: 2rem;
 $block-clearance: 0.5rem;
-$block-border-radius: 0.5rem;
+$block-border-radius: 3px;
 $block-text-color: $gray-50;
 $block-bg: $gray-1250;
 $block-bg2: $gray-1050; // for delay and blocks
@@ -21,6 +23,8 @@ $block-cursor-color: $blue-400;
   margin: 0.25rem 0.125rem;
   position: relative;
   color: $block-text-color;
+
+  min-width: $block-width;
 }
 
 @mixin block-spacing() {
diff --git a/apps/client/src/features/rundown/delay-block/DelayBlock.module.scss b/apps/client/src/features/rundown/delay-block/DelayBlock.module.scss
index f0c218a03..053b531f9 100644
--- a/apps/client/src/features/rundown/delay-block/DelayBlock.module.scss
+++ b/apps/client/src/features/rundown/delay-block/DelayBlock.module.scss
@@ -6,7 +6,6 @@
 
   background-color: $block-bg2;
 
-  min-width: 34rem;
   display: grid;
   grid-template-columns: 2rem 1fr auto;
   grid-template-areas: 'drag inpt btns';
diff --git a/apps/client/src/features/rundown/event-block/EventBlock.module.scss b/apps/client/src/features/rundown/event-block/EventBlock.module.scss
index 592923630..1968f3d8a 100644
--- a/apps/client/src/features/rundown/event-block/EventBlock.module.scss
+++ b/apps/client/src/features/rundown/event-block/EventBlock.module.scss
@@ -29,7 +29,7 @@ $skip-opacity: 0.1;
   }
 
   &.selected {
-    background-color: $gray-1350;
+    background-color: $gray-1325;
   }
 
   &.play {
@@ -123,15 +123,12 @@ $skip-opacity: 0.1;
 .eventTimers {
   grid-area: times;
   display: flex;
-  align-items: center;
   gap: $block-clearance;
   height: 100%;
 
   .timerNote {
-    display: grid;
-    place-content: center;
     color: $blue-500;
-    margin-right: 0.5em;
+    margin-right: $block-clearance;
     font-size: 1.5em;
   }
 }
@@ -145,9 +142,7 @@ $skip-opacity: 0.1;
 
 .eventActions {
   grid-area: actions;
-  display: flex;
-  gap: $block-clearance;
-  justify-content: flex-end;
+  height: 100%;
 }
 
 .progressBg {
diff --git a/apps/client/src/features/rundown/event-block/RundownIndicators.tsx b/apps/client/src/features/rundown/event-block/RundownIndicators.tsx
index cbf954d00..e87e9f379 100644
--- a/apps/client/src/features/rundown/event-block/RundownIndicators.tsx
+++ b/apps/client/src/features/rundown/event-block/RundownIndicators.tsx
@@ -24,7 +24,7 @@ function formatOverlap(previousEnd: number | null, timeStart: number): string |
 
   const overlapString = removeLeadingZero(millisToString(Math.abs(overlap)));
 
-  return `${overlap > 0 ? 'Overlap' : 'Gap'}: ${overlapString}`;
+  return `${overlap > 0 ? 'Overlap' : 'Gap'} ${overlapString}`;
 }
 
 export default function RundownIndicators(props: RundownIndicatorProps) {
diff --git a/apps/client/src/features/rundown/event-editor/EventEditor.module.scss b/apps/client/src/features/rundown/event-editor/EventEditor.module.scss
index 2dd635228..6d7bcb9f1 100644
--- a/apps/client/src/features/rundown/event-editor/EventEditor.module.scss
+++ b/apps/client/src/features/rundown/event-editor/EventEditor.module.scss
@@ -1,20 +1,23 @@
 .eventEditor {
+  color: $label-gray;
   max-height: 100%;
   overflow-y: auto;
-  flex: 1;
+  padding: 0.5rem;
 
   display: flex;
   flex-direction: column;
+  overflow-x: auto;
 }
 
 .content {
-  padding: 1rem;
+  padding-right: 4px;
 
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 2rem;
   overflow-y: auto;
+
 }
 
 .footer {
@@ -53,7 +56,7 @@
   color: $label-gray;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.25rem;
   max-width: max-content;
   cursor: pointer;
 }
diff --git a/apps/client/src/index.scss b/apps/client/src/index.scss
index fc743fd78..766d6ea08 100644
--- a/apps/client/src/index.scss
+++ b/apps/client/src/index.scss
@@ -1,9 +1,13 @@
 @use './theme/ontimeStyles' as *;
 
+$track-color: $white-1;
+$thumb-color: $gray-1100;
+$thumb-color-hover: $gray-900;
+
 * {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  scrollbar-color: #2b2b2b rgba(255, 255, 255, 0.01);
+  scrollbar-color: $track-color $thumb-color;
   scrollbar-width: thin;
 }
 
@@ -39,21 +43,22 @@ option {
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
 }
 
 /* Track */
 ::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.01);
+  background: $track-color;
   border-radius: 2px;
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  background: #2d2d2d;
+  background: $thumb-color;
   border-radius: 2px;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  background: #404040;
+  background: $thumb-color-hover;
 }