feat: operator view

apps/client/src/theme/_ontimeColours.scss

@@ -24,8 +24,8 @@ $gray-900: #4c4c4c;
 $gray-1000: #404040;
 $gray-1050: #303030;
 $gray-1100: #2d2d2d;
-$gray-1250: #262626;
-$gray-1200: #202020;
+$gray-1200: #262626;
+$gray-1250: #202020;
 $gray-1300: #1a1a1a;
 $gray-1350: #101010;
 $pure-white: #fff;

apps/client/src/theme/_v2Styles.scss

@@ -36,6 +36,7 @@ $bg-container-onlight: $gray-100;
 
 $box-shadow-l1: rgba(0, 0, 0, 0.15) 0 3px 3px 0;
 $box-shadow-l2: rgba(0, 0, 0, 0.15) 0 3px 3px 0;
+$large-bottom-drawer-shadow: rgba(0, 0, 0, 0.35) 0 3px 6px 6px;
 
 $modal-note-color: $gray-700;
 
@@ -54,6 +55,9 @@ $section-white: $ui-white;
 $inner-section-text-size: calc(1rem - 2px);
 $text-body-size: calc(1rem - 1px);
 
+// media queries
+$min-tablet: 500px;
+
 .blink {
   animation: blink $blinking-time linear infinite;
 }
@@ -62,4 +66,4 @@ $text-body-size: calc(1rem - 1px);
   50% {
     opacity: 20%;
   }
-}
+}

apps/client/src/theme/ontimeButton.ts

@@ -27,7 +27,7 @@ export const ontimeButtonOutlined = {
   },
   _active: {
     backgroundColor: '#2d2d2d', // $gray-1100
-    borderColor: '#202020', // $gray-12000
+    borderColor: '#202020', // $gray-1250
   },
 };
 
@@ -43,7 +43,7 @@ export const ontimeButtonSubtle = {
   },
   _active: {
     backgroundColor: '#2d2d2d', // $gray-1100
-    borderColor: '#202020', // $gray-12000
+    borderColor: '#202020', // $gray-1250
   },
 };
 

apps/client/src/theme/ontimeRadio.ts

@@ -1,9 +1,9 @@
 export const ontimeBlockRadio = {
   control: {
-    borderColor: '#262626', // $gray-1250
-    backgroundColor: '#262626', // $gray-1250
+    borderColor: '#262626', // $gray-1200
+    backgroundColor: '#262626', // $gray-1200
     _checked: {
-      borderColor: '#262626', // $gray-1250
+      borderColor: '#262626', // $gray-1200
       color: '#3182ce', // $action-blue
       backgroundColor: '#3182ce', // $action-blue
     },

apps/client/src/theme/ontimeTextInputs.ts

@@ -1,6 +1,6 @@
 const commonStyles = {
   fontWeight: '400',
-  backgroundColor: '#262626', // $gray-1250
+  backgroundColor: '#262626', // $gray-1200
   color: '#e2e2e2', // $gray-200
   border: '1px solid transparent',
   _hover: {