Refactor/styles (#202)

* style: general micro improvements in editor
* version bump

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime-ui",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "private": true,
   "dependencies": {
     "@chakra-ui/react": "^2.3.2",

client/src/features/control/playback/PlaybackControl.module.scss

@@ -5,7 +5,7 @@
   width: 100%;
   display: grid;
   margin: 0 auto;
-  gap: 5px;
+  gap: 4px;
 }
 
 .timeContainer,
@@ -20,8 +20,8 @@
     'ind clk clk btn'
     '... sta fin btn';
   grid-template-rows: 1fr auto;
-  grid-template-columns: 1.5em 2fr 2fr 6em;
+  grid-template-columns: 1.5em 1fr 1fr 5em;
-  gap: 5px;
+  gap: 4px;
   justify-items: start;
 }
 

client/src/features/control/playback/PlaybackTimer.jsx

@@ -20,9 +20,10 @@ const areEqual = (prevProps, nextProps) => {
 
 const incrementProps = {
   size: 'sm',
-  width: '2.9em',
+  width: '2em',
   colorScheme: 'white',
   variant: 'outline',
+  fontSize: '12px',
 };
 
 const PlaybackTimer = (props) => {

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

@@ -1,18 +1,16 @@
 @use '../../theme/main' as *;
 
-.corner {
+@mixin absolute-top-right($distance) {
-  display: none;
   position: absolute;
-  top: 8px;
+  top: $distance;
-  right: 8px;
+  right: $distance;
   cursor: pointer;
   color: $ontime-pink;
 }
 
-h1 {
+.corner {
-  font-size: max(1.5em, 16px);
+  display: none;
-  color: $bg-gray-100;
+  @include absolute-top-right(8px);
-  padding-bottom: 0.25em;
 }
 
 .mainContainer {
@@ -21,15 +19,15 @@ h1 {
   height: 100%;
   margin: auto;
   color: $title-white;
-  padding: max(16px, 2vh);
+  padding: max(16px, 2vh) max(8px, 1vh);
 
   display: grid;
   grid-template-rows: auto 1fr;
-  grid-template-columns: 40px 48em 31em auto;
+  grid-template-columns: 48px 46em 30em auto;
   grid-template-areas:
     'sett even play info'
     'sett even mess info';
-  gap: max(16px, 2vh);
+  gap: 8px;
 
   .editor,
   .playback,
@@ -44,76 +42,12 @@ h1 {
   }
 }
 
-.mainContainer > div {
-  border-radius: 0.5em;
-  height: 100%;
-  background-color: $bg-gray-1000;
-  padding: 0.8em 1.5em;
-
-  display: flex;
-  flex-direction: column;
-}
-
-.editor {
-  grid-area: even;
-  height: calc(100% - 3em);
-
-  .content {
-    height: calc(100% - 3em);
-    overflow: hidden;
-  }
-}
-
-.info {
-  grid-area: info;
-  min-width: 17em;
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    height: calc(100% - 3em);
-    overflow: hidden;
-  }
-}
-
-.messages {
-  grid-area: mess;
-}
-
-.playback {
-  grid-area: play;
-  min-height: 320px;
-  max-height: 320px;
-}
-
-.messages,
-.playback {
-  min-width: 31em;
-}
-
-.mainContainer > .settings {
-  grid-area: sett;
-  background-color: transparent;
-  padding: 0;
-  margin: 0;
-  width: fit-content;
-
-  display: flex;
-  flex-direction: column;
-  gap: 1em;
-}
-
-.content {
-  padding-top: 0.5em;
-}
-
-
 /* 2/3 window, hide info */
-@media (max-width: 1450px) and (min-width: 1101px) {
+@media (max-width: 1450px) and (min-height: 700px) {
   .mainContainer {
     height: 100%;
     grid-template-rows: auto 1fr;
-    grid-template-columns: 40px 48em auto;
+    grid-template-columns: 48px 48em auto;
 
     .info {
       visibility: hidden;
@@ -122,11 +56,13 @@ h1 {
 }
 
 /* 1/2 window, event list only */
-@media (max-width: 1100px) and (min-width: 851px){
+@media (max-width: 1100px) {
   .mainContainer {
     height: 100%;
-    grid-template-rows: 1fr auto;
+    grid-template-rows: 100%;
-    grid-template-columns: 40px 48em;
+    grid-template-columns: 48px 48em;
+    grid-template-areas:
+      'sett even';
 
     .info,
     .messages,
@@ -141,7 +77,6 @@ h1 {
   .mainContainer {
     grid-template-rows: auto 1fr;
     grid-template-columns: 100%;
-    column-gap: 0;
     grid-template-areas:
       'play'
       'mess';
@@ -178,3 +113,92 @@ h1 {
     }
   }
 }
+
+h1 {
+  font-size: max(1.5em, 16px);
+  color: $bg-gray-100;
+  padding-bottom: 0.25em;
+}
+
+.mainContainer {
+  .settings,
+  .editor,
+  .messages,
+  .playback,
+  .info {
+    border-radius: 8px;
+    height: 100%;
+    background-color: $bg-gray-1000;
+    padding: 0.8em 1.5em;
+
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.eventEditor {
+  border-radius: 3px 3px 0 0;
+  background-color: $bg-gray-950;
+  border-top: 1px solid $bg-gray-900;
+  padding: 0.8em 1.5em;
+  position: absolute;
+  bottom: 0;
+  width: 100vw;
+  max-height: 40vh;
+  left: 0;
+  z-index: 10;
+  color: white;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+.editor {
+  grid-area: even;
+  height: calc(100% - 3em);
+
+  .content {
+    height: calc(100% - 3em);
+    overflow: hidden;
+  }
+}
+
+.info {
+  grid-area: info;
+  min-width: 17em;
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    height: calc(100% - 3em);
+    overflow: hidden;
+  }
+}
+
+.messages {
+  grid-area: mess;
+}
+
+.playback {
+  grid-area: play;
+  min-height: 320px;
+  max-height: 320px;
+  min-width: 480px;
+}
+
+.mainContainer > .settings {
+  grid-area: sett;
+  background-color: transparent;
+  margin: 0;
+  padding: 0 8px 0 0;
+  width: fit-content;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.content {
+  padding-top: 0.5em;
+}

client/src/features/editors/EntryBlock/EntryBlock.module.scss

@@ -7,34 +7,18 @@
   align-items: center;
   justify-content: center;
   gap: 5%;
-  transition: height 0.15s ease;
   margin: 2px 0;
-
-  * {
-    display: flex;
-  }
 }
 
 .create {
-  padding: 0 0.5em;
+  background-color: rgba($bg-gray-1100, 0.85);
   box-sizing: border-box;
 
   width: 100%;
-  border-radius: 8px;
   font-size: 12px;
 
   position: relative;
-  height: 20px;
+  display: none;
-  margin: -8px 0;
-  transition: height 0.1s ease;
-
-  * {
-    display: none;
-  }
-
-  &:hover {
-    @include when-visible;
-  }
 
   .createEvent,
   .createDelay,
@@ -46,7 +30,7 @@
     vertical-align: center;
     font-weight: 600;
     line-height: 21px;
-    border-radius: 4px;
+    border-radius: 2px;
     opacity: 0.6;
     cursor: pointer;
 
@@ -91,8 +75,18 @@
   }
 
   .options {
+    display: flex;
     flex-direction: column;
-    opacity: 0.65;
+
+    label {
+      opacity: 0.65;
+      transition: opacity 0.15s;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
   }
 
   .disabled {
@@ -104,4 +98,4 @@
 
 .create.visible {
   @include when-visible;
-}
+}

client/src/features/modals/Modals.module.scss

@@ -53,13 +53,13 @@
   /* Track */
   ::-webkit-scrollbar-track {
     background: rgba($light-bg, 0.15);
-    border-radius: 4px;
+    border-radius: 3px;
   }
 
   /* Handle */
   ::-webkit-scrollbar-thumb {
     background: rgba($light-bg, 0.35);
-    border-radius: 4px;
+    border-radius: 3px;
   }
 
   /* Handle on hover */

client/src/index.scss

@@ -32,16 +32,16 @@ option {
 /* Track */
 ::-webkit-scrollbar-track {
   background: rgba(255, 255, 255, 0.01);
-  border-radius: 4px;
+  border-radius: 2px;
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.15);
-  border-radius: 4px;
+  border-radius: 2px;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.35);
+  background: rgba(255, 255, 255, 0.23);
 }

client/src/theme/_main.scss

@@ -24,7 +24,7 @@ $ontime-pink-variant: #ff6969;
 $ontime-roll: #2b6cb0;
 $ontime-delay: #dd6b20;
 $action-blue: #3182ce;
-
+$opacity-disabled: 0.4;
 
 //rgba(255, 255, 255, 0.39); - $bg-gray-700
 //rgba(255, 255, 255, 0.13); - $bg-gray-900

client/src/theme/theme.js

@@ -4,7 +4,44 @@ const theme = extendTheme({
   components: {
     Button: {
       baseStyle: {
-        borderRadius: '4px',
+        borderRadius: '3px',
+      },
+    },
+    Input: {
+      baseStyle: {
+        field: {
+          borderRadius: 3,
+        },
+      },
+      sizes: {},
+      variants: {
+        filled: {
+          field: {
+            backgroundColor: 'rgba(255, 255, 255, 0.03)',
+            _hover: {
+              backgroundColor: 'rgba(255, 255, 255, 0.13)',
+            },
+          },
+        },
+      },
+      defaultProps: {
+        variant: null, // null here
+      },
+    },
+    Textarea: {
+      baseStyle: {
+        borderRadius: 4,
+      },
+      variants: {
+        filled: {
+          backgroundColor: 'rgba(255, 255, 255, 0.03)',
+          _hover: {
+            backgroundColor: 'rgba(255, 255, 255, 0.13)',
+          },
+        },
+      },
+      defaultProps: {
+        variant: null, // null here
       },
     },
   },

server/main.js

@@ -91,7 +91,7 @@ function createWindow() {
   win = new BrowserWindow({
     width: 1920,
     height: 1000,
-    minWidth: 575,
+    minWidth: 525,
     minHeight: 405,
     maxWidth: 1920,
     maxHeight: 1440,

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "author": "Carlos Valente",
   "description": "Time keeping for live events",
   "repository": "https://github.com/cpvalente/ontime",