External field (#580)

* feat: add external endpoint

* add external to messagecontrol

---------

Co-authored-by: Carlos Valente <carlosvalente@pm.me>

apps/client/src/theme/_viewerDefs.scss

@@ -5,7 +5,6 @@
 // General
 $viewer-transition-time: 0.5s;
 
-
 // Text
 $viewer-font-family: "Open Sans", "Segoe UI", sans-serif; // --font-family-override
 $viewer-opacity-disabled: 0.6;
@@ -28,3 +27,4 @@ $timer-color: rgba(white, 80%); // --timer-color-override
 $timer-finished-color: $playback-negative;
 $timer-bold-font-family: "Arial Black", sans-serif; // --card-background-color-override
 
+$external-color: rgba(white, 70%); // --external-color-override

apps/client/src/theme/ontimeTextInputs.ts

@@ -12,6 +12,11 @@ const commonStyles = {
     border: '1px solid #578AF4', // $blue-500
   },
   _placeholder: { color: '#9d9d9d' }, // $gray-500
+  _disabled: {
+    _hover: {
+      backgroundColor: '#262626', // $gray-1200
+    },
+  },
 };
 
 export const ontimeInputFilled = {
@@ -30,6 +35,11 @@ export const ontimeInputFilledOnLight = {
     _focus: {
       border: '2px solid #578AF4', // $blue-500
     },
+    _disabled: {
+      _hover: {
+        backgroundColor: 'white',
+      },
+    },
   },
 };
 
@@ -58,4 +68,9 @@ export const ontimeTextAreaFilledOnLight = {
     border: '2px solid #578AF4', // $blue-500
   },
   _placeholder: { color: '#9d9d9d' }, // $gray-500
+  _disabled: {
+    _hover: {
+      backgroundColor: 'white',
+    },
+  },
 };