style v2 tweaks (#415)

* fix: reset rundown on upload

* style: facilitate reaching event id

* fix: show rundown on half screens

* style: prevent tab overflow

* style: remove redundant information

* style: improve editor in small screens

* style: small tweaks to editor sizes

apps/client/src/common/components/timer-display/TimerDisplay.scss

@@ -7,7 +7,7 @@
   text-align: center;
   letter-spacing: 0.1em;
   font-weight: 600;
-  font-size: 3.75em;
+  font-size: 3.5rem;
   
   &--finished {
     color: $timer-finished-color;

apps/client/src/features/control/playback/playback-buttons/PlaybackButtons.module.scss

@@ -7,13 +7,13 @@
           "go playback"
           "go transport"
           "extra extra";
-  grid-template-rows: repeat(3, 32px);
+  grid-template-rows: repeat(3, 2rem);
   gap: $element-spacing;
 }
 
 .go {
   grid-area: go;
-  font-size: 5em;
+  font-size: 5rem;
 }
 
 @mixin spaced-flex {

apps/client/src/features/control/playback/playback-timer/PlaybackTimer.module.scss

@@ -7,7 +7,7 @@
     'ind clk clk btn'
     '... sta fin btn';
   grid-template-rows: 1fr auto;
-  grid-template-columns: 1.5em 1fr 1fr 5em;
+  grid-template-columns: 1.25rem 1fr 1fr 5rem;
   gap: $element-inner-spacing;
   justify-items: start;
 }
@@ -15,7 +15,7 @@
 .timer {
   grid-area: clk;
   white-space: nowrap;
-  max-width: 300px;
+  max-width: 18.75rem;
 }
 
 .indicators {
@@ -51,7 +51,7 @@
 .indNegativeActive {
   margin: 0 auto;
   width: 90%;
-  height: 4px;
+  height: 0.25rem;
 }
 
 .indNegativeActive {
@@ -80,7 +80,7 @@
 .start,
 .finish,
 .roll {
-  height: 24px;
+  height: 1.5rem;
 }
 
 .start {

apps/client/src/features/control/playback/tap-button/TapButton.module.scss

@@ -6,7 +6,7 @@ $button-color-white: $gray-50;
 
 @mixin tap-factory($theme-color) {
   font-family: $ontime-font-family;
-  font-size: 18px;
+  font-size: calc(1rem + 2px);
   border-radius: $component-border-radius-md;
   width: 100%;
   transition-property: color, background-color;
@@ -77,17 +77,13 @@ $button-color-white: $gray-50;
   @include tap-factory($ontime-stop);
 }
 
-.tapButton.normal {
-  aspect-ratio: 3/1;
-}
-
 .tapButton.square {
   aspect-ratio: 1;
-  font-size: 14px;
+  font-size: calc(1rem - 2px);
 }
 
 .tapButton.fill {
   aspect-ratio: unset;
   height: 100%;
-  font-size: 1.5em;
+  font-size: 1.5rem;
 }

apps/client/src/features/editors/Editor.module.scss

@@ -1,9 +1,9 @@
 @use '../../theme/ontimeColours' as *;
 @use '../../theme/v2Styles' as *;
 
-$menu-width: 48px;
-$rundown-width: 46em;
-$playback-width: 450px;
+$menu-width: 2.75rem;
+$rundown-width: 44.5rem;
+$playback-width: 26rem;
 
 @mixin absolute-top-right($distance) {
   position: absolute;
@@ -20,7 +20,7 @@ $playback-width: 450px;
 
 .corner {
   display: none;
-  @include absolute-top-right(8px);
+  @include absolute-top-right(0.5rem);
   transform: rotate(45deg);
 }
 
@@ -30,7 +30,7 @@ $playback-width: 450px;
   height: 100%;
   margin: auto;
   color: $ui-white;
-  padding: 16px 8px;
+  padding: 1rem 0.5rem;
   font-family: $ontime-font-family;
 
   display: grid;
@@ -39,7 +39,7 @@ $playback-width: 450px;
   grid-template-areas:
     'sett rundown play info'
     'sett rundown mess info';
-  gap: 8px;
+  gap: 0.5rem;
 
   .rundown,
   .playback,
@@ -59,7 +59,8 @@ $playback-width: 450px;
   .mainContainer {
     height: 100%;
     grid-template-rows: auto 1fr;
-    grid-template-columns: $menu-width $rundown-width auto;
+    grid-template-columns: $menu-width 1fr $playback-width;
+      background-color: pink;
 
     .info {
       visibility: hidden;
@@ -74,7 +75,7 @@ $playback-width: 450px;
     grid-template-rows: 100%;
     grid-template-columns: $menu-width $rundown-width;
     grid-template-areas:
-      'sett even';
+      'sett rundown';
 
     .info,
     .messages,
@@ -135,7 +136,7 @@ $playback-width: 450px;
     border-radius: 8px;
     height: 100%;
     background-color: $bg-container-l2;
-    padding: 0.8em 1.5em;
+    padding: 1rem;
     display: flex;
     flex-direction: column;
   }
@@ -165,7 +166,7 @@ $playback-width: 450px;
 
   .header {
     background-color: $gray-1200;
-    padding: 8px;
+    padding: 0.5rem;
     border-left: 1px solid $white-10;
     border-radius: 0 8px 0 0;
   }
@@ -176,14 +177,14 @@ $playback-width: 450px;
   height: 100%;
 
   .content {
-    height: calc(100% - 24px);
+    height: calc(100% - 1.5rem);
     overflow: hidden;
   }
 }
 
 .info {
   grid-area: info;
-  min-width: 17em;
+  min-width: 17rem;
   max-width: 800px;
 
   .content {
@@ -199,16 +200,14 @@ $playback-width: 450px;
 
 .playback {
   grid-area: play;
-  min-height: 250px;
   max-height: 380px;
-  min-width: 450px;
 }
 
 .mainContainer > .settings {
   grid-area: sett;
   background-color: transparent;
   margin: 0;
-  padding: 0 8px 0 0;
+  padding: 0 0.5rem 0 0;
   width: fit-content;
 
   display: flex;
@@ -216,5 +215,11 @@ $playback-width: 450px;
 }
 
 .content {
-  padding-top: 24px;
+  padding-top: 1.5rem;
+}
+
+.rundown {
+  .content {
+    padding-top: 0.5rem;
+  }
 }

apps/client/src/features/event-editor/EventEditor.module.scss

@@ -1,9 +1,9 @@
 @use '../../theme/v2Styles' as *;
 
 .eventEditor {
-  padding: 16px 32px 32px 32px;
+  padding: 1rem 2rem 2rem 2rem;
   width: 100%;
-  gap: max(16px, 2vh);
+  gap: max(1rem, 2vh);
 
   display: grid;
   grid-template-areas:
@@ -15,15 +15,17 @@
   .timeSettings {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 0.5rem;
   }
 }
 
 .eventInfo {
   grid-area: eventInfo;
-  .eventId {
-    margin-left: $element-inner-spacing;
-    user-select: text;
+  display: flex;
+  align-items: center;
+
+  .eventId {  
+    margin-left:$element-spacing;
   }
 }
 
@@ -35,7 +37,7 @@
 .timeOptions {
   grid-area: timeOptions;
   display: flex;
-  gap: 24px;
+  gap: 1.5rem;
 }
 
 .titles {
@@ -53,19 +55,19 @@
 
   .left {
     grid-area: left;
-    padding: 0 16px;
+    padding: 0 1rem;
     border-left: 1px solid $border-color-ondark;
   }
 
   .right {
-    padding-left: 16px;
+    padding-left: 1rem;
     grid-area: right;
     border-left: 1px solid $border-color-ondark;
   }
 }
 
 @mixin input-label() {
-  font-size: 13px;
+  font-size: calc(1rem - 3px);
   color: $label-gray;
 }
 
@@ -84,32 +86,32 @@
   }
 
   &.publicToggle {
-    height: 32px;
+    height: 2rem;
     display: flex;
     align-items: center;
     justify-items: center;
-    gap: 8px;
+    gap: 0.5rem;
   }
 }
 
 .spacer {
-  height: 20px;
+  height: 1.25rem;
 }
 
 .inline {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 1rem;
 }
 
 .column {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 0.5rem;
 }
 
 .padTop {
-  margin-top: 8px;
+  margin-top: 0.5rem;
 }
 
 .fullHeight {

apps/client/src/features/event-editor/EventEditor.tsx

@@ -42,7 +42,9 @@ export default function EventEditor() {
     <div className={style.eventEditor}>
       <div className={style.eventInfo}>
         Event ID
-        <span className={style.eventId}>{event.id}</span>
+        <span className={style.eventId}>
+          <CopyTag label={event.id}>{event.id}</CopyTag>
+        </span>
       </div>
       <div className={style.eventActions}>
         <CopyTag label='OSC trigger'>{`/ontime/gotoid/${event.id}`}</CopyTag>

apps/client/src/features/info/Info.module.scss

@@ -6,7 +6,7 @@
   font-family: $ontime-font-family;
   color: $label-gray;
   display: flex;
-  justify-content: space-between;
+  justify-content: end;
 }
 
 .labels {

apps/client/src/features/info/Info.tsx

@@ -33,7 +33,6 @@ export default function Info() {
   return (
     <>
       <div className={style.panelHeader}>
-        <span>Ontime running on port 4001</span>
         <span>{selected}</span>
       </div>
       <CollapsableInfo title='Network Info'>

apps/client/src/features/menu/MenuBar.tsx

@@ -102,7 +102,7 @@ const MenuBar = (props: MenuBarProps) => {
 
   return (
     <VStack>
-      <QuitIconBtn disabled={!isElectron} clickHandler={sendShutdown} />
+      <QuitIconBtn disabled={!isElectron} clickHandler={sendShutdown} size='md' />
 
       <div className={style.gap} />
       <TooltipActionBtn
@@ -120,6 +120,7 @@ const MenuBar = (props: MenuBarProps) => {
         clickHandler={onUploadOpen}
         tooltip='Import project file'
         aria-label='Import project file'
+        size='sm'
       />
       <TooltipActionBtn
         {...buttonStyle}
@@ -127,6 +128,7 @@ const MenuBar = (props: MenuBarProps) => {
         clickHandler={downloadRundown}
         tooltip='Export project file'
         aria-label='Export project file'
+        size='sm'
       />
 
       <div className={style.gap} />
@@ -137,6 +139,7 @@ const MenuBar = (props: MenuBarProps) => {
         clickHandler={setRunMode}
         tooltip='Run mode'
         aria-label='Run mode'
+        size='sm'
       />
       <TooltipActionBtn
         {...buttonStyle}
@@ -145,6 +148,7 @@ const MenuBar = (props: MenuBarProps) => {
         clickHandler={setEditMode}
         tooltip='Edit mode'
         aria-label='Edit mode'
+        size='sm'
       />
 
       <div className={style.gap} />
@@ -155,6 +159,7 @@ const MenuBar = (props: MenuBarProps) => {
         clickHandler={onIntegrationOpen}
         tooltip='Integrations'
         aria-label='Integrations'
+        size='sm'
       />
       <TooltipActionBtn
         {...buttonStyle}
@@ -163,6 +168,7 @@ const MenuBar = (props: MenuBarProps) => {
         clickHandler={onSettingsOpen}
         tooltip='Settings'
         aria-label='Settings'
+        size='sm'
       />
       <div className={style.gap} />
       <TooltipActionBtn
@@ -172,6 +178,7 @@ const MenuBar = (props: MenuBarProps) => {
         clickHandler={onAboutOpen}
         tooltip='About'
         aria-label='About'
+        size='sm'
       />
     </VStack>
   );

apps/client/src/features/modals/settings-modal/SettingsModal.tsx

@@ -21,7 +21,7 @@ export default function SettingsModal(props: ModalManagerProps) {
       <ModalBody>
         <Tabs variant='ontime' size='sm' isLazy>
           <TabList>
-            <Tab>App Settings</Tab>
+            <Tab>App</Tab>
             <Tab>Event Data</Tab>
             <Tab>Editor</Tab>
             <Tab>Cuesheet</Tab>

apps/client/src/features/rundown/_blockMixins.scss

@@ -1,16 +1,16 @@
 @use '../../theme/ontimeColours' as *;
 @use '../../theme/v2Styles' as *;
 
-$block-gap: 4px;
-$block-element-spacing: 4px;
-$block-binder-width: 32px;
-$block-clearance: 8px;
-$block-border-radius: 8px;
+$block-gap: 0.25rem;
+$block-element-spacing: 0.25rem;
+$block-binder-width: 2rem;
+$block-clearance: 0.5rem;
+$block-border-radius: 0.5rem;
 $block-text-color: $gray-50;
 $block-bg: $gray-1200;
 $block-bg2: $gray-1050; // for delay and blocks
 $block-box-shadow: rgba(0, 0, 0, 0.5) 0 0 3px 2px;
-$secondary-block-height: 40px;
+$secondary-block-height: 2.5rem;
 $block-cursor-color: $blue-400;
 
 @mixin block-styling() {
@@ -18,13 +18,13 @@ $block-cursor-color: $blue-400;
   border: 1px solid $white-10;
   font-family: $ontime-font-family;
   border-radius: $block-border-radius;
-  margin: 4px 2px;
+  margin: 0.25rem 0.125rem;
   position: relative;
   color: $block-text-color;
 }
 
 @mixin block-spacing() {
-  padding-right: 8px;
+  padding-right: 0.5rem;
   gap: 2px;
 }
 

apps/client/src/features/rundown/common/TitleEditor.module.scss

@@ -2,7 +2,7 @@
 
 .titleEditor {
   display: block;
-  font-size: 18px;
+  font-size: calc(1rem + 2px);
   max-width: 100%;
   white-space: nowrap;
   overflow: hidden;

apps/client/src/features/rundown/event-block/EventBlock.module.scss

@@ -17,7 +17,7 @@ $skip-opacity: 0.1;
           "binder ...        ...     ...";
 
   grid-template-columns: $block-binder-width auto 1fr auto;
-  grid-template-rows: 4px 36px 36px 36px 4px;
+  grid-template-rows: 0.25rem 2.25rem 2.25rem 2.25rem 0.25rem;
   align-items: center;
   padding-right: $block-clearance;
   gap: 2px;
@@ -83,12 +83,12 @@ $skip-opacity: 0.1;
 
   background-color: $gray-1050; // to override inline
   color: $section-white;
-  font-size: 17px;
+  font-size: 1rem;
 
   .drag {
     @include drag-style;
     position: absolute;
-    margin-top: 4px;
+    margin-top: 0.25rem;
   }
 }
 
@@ -96,8 +96,8 @@ $skip-opacity: 0.1;
   grid-area: pb-actions;
   display: flex;
   flex-direction: column;
-  margin: 0 8px;
-  gap: 6px;
+  margin: 0 0.5rem;
+  gap: 0.5rem;
 }
 
 .eventTimers {
@@ -108,8 +108,8 @@ $skip-opacity: 0.1;
   height: 100%;
 
   .delayNote {
-    font-size: 12px;
-    line-height: 14px;
+    font-size: 0.75rem;
+    line-height: 0.8rem;
     color: $ontime-delay-text;
   }
 }
@@ -125,10 +125,6 @@ $skip-opacity: 0.1;
   justify-content: flex-end;
 }
 
-.eventOptions {
-  margin: $element-spacing 16px $element-spacing 0;
-}
-
 .progressBg {
   grid-area: progb;
   border-radius: 2px;
@@ -152,7 +148,7 @@ $skip-opacity: 0.1;
           "notes status"
           "progb progb";
   gap: 2px;
-  grid-template-rows: auto 4px;
+  grid-template-rows: auto 0.25rem;
   align-items: center;
   height: 100%;
   padding: 2px 0;
@@ -161,15 +157,15 @@ $skip-opacity: 0.1;
 .eventNote {
   grid-area: notes;
   display: block;
-  font-size: 13px;
+  font-size: calc(1rem - 3px);
   color: $block-text-color;
-  line-height: 13px;
+  line-height: calc(1rem - 3px);
 }
 
 
 .nextTag {
   grid-area: next;
-  font-size: 1em;
+  font-size: 1rem;
   color: $orange-500;
   letter-spacing: 0.03px;
   font-weight: 600;
@@ -181,13 +177,13 @@ $skip-opacity: 0.1;
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  gap: 8px;
+  gap: 0.5rem;
   color: var(--status-color-override, $gray-500);
 
 
   .statusIcon {
-    width: 16px;
-    height: 16px;
+    width: 1rem;
+    height: 1rem;
   }
 
   .statusIcon.active {

apps/client/src/index.scss

@@ -17,6 +17,7 @@
 body,
 html,
 .App {
+  font-size: 16px;
   font-family: $ontime-font-family;
   margin: 0 auto;
   overflow: hidden;
@@ -28,6 +29,14 @@ html,
   background-color: $bg-container-l1;
 }
 
+@media (min-width: 1450px) and (max-width: 1666px) {
+
+  body,
+  html,
+  .App {
+    font-size: 15px;
+  }
+}
 // workaround for chakra
 // // https://github.com/chakra-ui/chakra-ui/issues/417
 option {

apps/client/src/theme/_mixins.scss

@@ -24,7 +24,6 @@
   display: flex;
   align-items: center;
   cursor: pointer;
-  font-size: 16px;
   transition-property: color;
   transition-duration: $transition-time-action;
 

apps/client/src/theme/_v2Styles.scss

@@ -39,10 +39,10 @@ $modal-note-color: $gray-700;
 
 // interface elements
 $border-color-ondark: $white-10;
-$element-inner-spacing: 4px;
-$element-spacing: 8px;
-$section-spacing: 16px;
-$main-spacing: 32px;
+$element-inner-spacing: 0.25rem;
+$element-spacing: 0.5rem;
+$section-spacing: 1rem;
+$main-spacing: 2rem;
 
 // interface text
 $ontime-font-family: "Open Sans", "Segoe UI", sans-serif;