refactor: simplify l3

apps/client/src/features/control/message/InputRow.module.scss

@@ -1,3 +1,5 @@
+@import "./MessageControl.module.scss";
+
 .inputItems {
   display: grid;
   grid-template-columns: 1fr auto;
@@ -6,10 +8,5 @@
 }
 
 .label {
-  font-size: $inner-section-text-size;
-  color: $label-gray;
-
-  &.active {
-    color: $action-text-color;
-  }
+  @extend .label;
 }

apps/client/src/features/control/message/MessageControl.module.scss

@@ -10,3 +10,19 @@
   gap: $element-spacing;
   margin-top: -0.5rem;
 }
+
+.singleAction {
+  display: flex;
+  flex-direction: column;
+  gap: $element-spacing;
+  margin-top: $element-inner-spacing;
+}
+
+.label {
+  font-size: $inner-section-text-size;
+  color: $label-gray;
+
+  &.active {
+    color: $action-text-color;
+  }
+}

apps/client/src/features/control/message/MessageControl.tsx

@@ -17,21 +17,14 @@ export default function MessageControl() {
   const message = useMessageControl();
   const blink = message.timer.blink;
   const blackout = message.timer.blackout;
+
   return (
     <div className={style.messageContainer}>
-      <InputRow
-        label='Lower third message'
-        placeholder='Shown in lower third'
-        text={message.lower.text || ''}
-        visible={message.lower.visible || false}
-        changeHandler={(newValue) => setMessage.lowerText(newValue)}
-        actionHandler={() => setMessage.lowerVisible(!message.lower.visible)}
-      />
       <InputRow
         label='Timer'
         placeholder='Message shown in stage timer'
-        text={message.timer.text || ''}
-        visible={message.timer.visible || false}
+        text={message.timer.text}
+        visible={message.timer.visible}
         changeHandler={(newValue) => setMessage.timerText(newValue)}
         actionHandler={() => setMessage.timerVisible(!message.timer.visible)}
       />
@@ -61,8 +54,8 @@ export default function MessageControl() {
         label='External Message (read only)'
         placeholder={enDash}
         readonly
-        text={message.external.text || ''}
-        visible={message.external.visible || false}
+        text={message.external.text}
+        visible={message.external.visible}
         changeHandler={noop}
         actionHandler={noop}
       />