style: go dark

client/src/features/control/MessageControl.jsx

@@ -1,5 +1,4 @@
-import { FormControl } from '@chakra-ui/form-control';
-import { Input } from '@chakra-ui/input';
+import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
 import { useEffect, useState } from 'react';
 import { useSocket } from '../../app/context/socketContext';
 import VisibleIconBtn from '../../common/components/buttons/VisibleIconBtn';
@@ -80,60 +79,70 @@ export default function MessageControl() {
   };
 
   return (
-    <>
+    <div className={style.messageContainer}>
       <div className={style.inputContainer}>
-        <FormControl id='presenterMessage'>
-          <span className={style.label}>Presenter screen message</span>
-          <Input
-            placeholder='only the presenter screens see this'
+        <span className={style.label}>Presenter screen message</span>
+        <div className={style.inputItems}>
+          <Editable
             onChange={(event) =>
               messageControl('pres-text', event.target.value)
             }
+            placeholder='only the presenter screens see this'
+            className={style.inline}
+          >
+            <EditablePreview />
+            <EditableInput className={style.editable13} />
+          </Editable>
+          <VisibleIconBtn
+            active={pres.visible}
+            clickHandler={() => messageControl('toggle-pres-visible')}
             {...inputProps}
           />
-        </FormControl>
-        <VisibleIconBtn
-          active={pres.visible}
-          clickHandler={() => messageControl('toggle-pres-visible')}
-          {...inputProps}
-        />
+        </div>
       </div>
 
       <div className={style.inputContainerWGap}>
-        <FormControl id='generalMessage'>
-          <span className={style.label}>Public screen message</span>
-          <Input
-            placeholder='all screens will render this'
+        <span className={style.label}>Public screen message</span>
+        <div className={style.inputItems}>
+          <Editable
             onChange={(event) =>
               messageControl('publ-text', event.target.value)
             }
+            placeholder='all screens will render this'
+            className={style.inline}
+          >
+            <EditablePreview />
+            <EditableInput className={style.editable13} />
+          </Editable>
+          <VisibleIconBtn
+            active={publ.visible}
+            clickHandler={() => messageControl('toggle-publ-visible')}
             {...inputProps}
           />
-        </FormControl>
-        <VisibleIconBtn
-          active={publ.visible}
-          clickHandler={() => messageControl('toggle-publ-visible')}
-          {...inputProps}
-        />
+        </div>
       </div>
 
       <div className={style.inputContainerWGap}>
-        <FormControl id='lowerMessage'>
-          <span className={style.label}>Lower third message</span>
-          <Input
-            placeholder='visible in lower third screen'
+        <span className={style.label}>Lower third message</span>
+        <div className={style.inputItems}>
+          <Editable
             onChange={(event) =>
               messageControl('lower-text', event.target.value)
             }
+            placeholder='visible in lower third screen'
+            className={style.inline}
+          >
+            <EditablePreview />
+            <EditableInput />
+          </Editable>
+
+          <VisibleIconBtn
+            active={lower.visible}
+            clickHandler={() => messageControl('toggle-lower-visible')}
             {...inputProps}
           />
-        </FormControl>
-        <VisibleIconBtn
-          active={lower.visible}
-          clickHandler={() => messageControl('toggle-lower-visible')}
-          {...inputProps}
-        />
+        </div>
       </div>
-    </>
+    </div>
   );
 }

client/src/features/control/MessageControl.module.css

@@ -1,16 +1,34 @@
+.messageContainer {
+  background-color: rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+}
+
 .inputContainer,
 .inputContainerWGap {
-  display: flex;
-  align-items: flex-end;
-  gap: 1em;
+  padding: 0.5em;
 }
 
 .inputContainerWGap {
   padding-top: 0.5em;
 }
 
+.inputItems {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 1em;
+}
+
 .label {
   padding: 0;
   margin: 0;
-  font-size: 14px;
+  font-size: 0.9em;
+  color: #ccc;
+}
+
+.inline {
+  padding-left: 0.5em;
+  border-radius: 4px;
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.05);
 }

client/src/features/control/PlaybackControl.module.css

@@ -8,8 +8,9 @@
 
 .timeContainer,
 .playbackContainer {
-  border: 1px solid rgb(226, 232, 240);
-  border-radius: 8px;
+  background-color: rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
   padding: 0.5em;
 }
 
@@ -37,12 +38,12 @@
 }
 
 .time {
-  color: #333;
+  color: #ccc;
   font-size: 1.1em;
 }
 
 .tag {
-  color: #666;
+  color: #aaa;
   font-size: 0.9em;
 }