V2 osc (#313)

* chore: upgrade relevant deps

* fix: electron app to tray

* chore: cleanup dictionary

* feat: handle several messages in a event

* ux: disable irrelevant buttons in browser

* feat: parse and validate subscriptions

* feat: create UI for OSC Integration

* fix: cleanup logger behaviour

* feat: allow OSC settings to be changed at runtime

apps/client/src/theme/ontimeButton.ts

@@ -70,4 +70,5 @@ export const ontimeGhostOnLight = {
 export const ontimeButtonSubtleWhite = {
   ...ontimeButtonSubtle,
   color: '#f6f6f6', // $gray-50
+  fontWeight: 600,
 };

apps/client/src/theme/ontimeModal.ts

@@ -13,6 +13,8 @@ export const ontimeModal = {
   },
   body: {
     padding: 0,
+    display: 'flex',
+    flexDirection: 'column',
   },
   closeButton: {
     color: '#202020', // $gray-50

apps/client/src/theme/ontimeTextInputs.ts

@@ -1,7 +1,6 @@
 const commonStyles = {
-  borderRadius: '3px',
   fontWeight: '400',
-  backgroundColor: '#262626',  // $gray-1250
+  backgroundColor: '#262626', // $gray-1250
   color: '#e2e2e2', // $gray-200
   border: '1px solid transparent',
   _hover: {
@@ -21,6 +20,21 @@ export const ontimeInputFilled = {
   },
 };
 
+export const ontimeInputFilledOnLight = {
+  field: {
+    backgroundColor: 'white',
+    border: '2px solid transparent',
+    _hover: {
+      backgroundColor: 'white',
+      border: '2px solid #D2DDFF', // $blue-200
+    },
+    _focus: {
+      backgroundColor: 'white',
+      border: '2px solid #578AF4', // $blue-500
+    },
+  },
+};
+
 export const ontimeTextAreaFilled = {
   ...commonStyles,
 };
@@ -28,7 +42,7 @@ export const ontimeTextAreaFilled = {
 export const ontimeTextAreaFilledOnLight = {
   borderRadius: '3px',
   fontWeight: '400',
-  backgroundColor: '#ececec',  // $gray-100
+  backgroundColor: '#ececec', // $gray-100
   color: '#202020', // $gray-1200
   border: '1px solid transparent',
   _hover: {
@@ -40,4 +54,4 @@ export const ontimeTextAreaFilledOnLight = {
     border: '1px solid #578AF4', // $blue-500
   },
   _placeholder: { color: '#9d9d9d' }, // $gray-500
-}
+};

apps/client/src/theme/theme.ts

@@ -15,7 +15,12 @@ import { ontimeModal } from './ontimeModal';
 import { ontimeSelect } from './ontimeSelect';
 import { lightSwitch, ontimeSwitch } from './ontimeSwitch';
 import { ontimeTab } from './ontimeTab';
-import { ontimeInputFilled, ontimeTextAreaFilled, ontimeTextAreaFilledOnLight } from './ontimeTextInputs';
+import {
+  ontimeInputFilled,
+  ontimeInputFilledOnLight,
+  ontimeTextAreaFilled,
+  ontimeTextAreaFilledOnLight,
+} from './ontimeTextInputs';
 import { ontimeTooltip } from './ontimeTooltip';
 
 const theme = extendTheme({
@@ -52,6 +57,7 @@ const theme = extendTheme({
       },
       variants: {
         'ontime-filled': { ...ontimeInputFilled },
+        'ontime-filled-on-light': { ...ontimeInputFilledOnLight },
       },
     },
     Modal: {