refactor(css): migrate use of deprecated import in messagecontrol

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

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

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

@@ -42,7 +42,7 @@ export default function InputRow(props: PropsWithChildren<InputRowProps>) {
   };
 
   return (
-    <div className={style.inputRow}>
+    <div>
       <label className={cx([style.label, visible ?? style.active])} htmlFor={label}>
         {label}
       </label>

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

@@ -1,4 +1,4 @@
-.flexPanel {
+.growPanel {
   flex: 1;
 }
 

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

@@ -17,7 +17,7 @@ function MessageControlExport() {
 
   return (
     <ProtectRoute permission='editor'>
-      <Editor.Panel className={style.flexPanel} data-testid='panel-messages-control'>
+      <Editor.Panel className={style.growPanel} data-testid='panel-messages-control'>
         {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('messagecontrol', event)} />}
         {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}
 

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

@@ -1,18 +1,3 @@
-.label {
-  font-size: $inner-section-text-size;
-  color: $label-gray;
-
-  &.active {
-    color: $action-text-color;
-  }
-}
-
-.previewContainer {
-  display: grid;
-  gap: $element-spacing;
-  grid-template-columns: 3fr 2fr;
-}
-
 .preview {
   background-color: $ui-black;
   display: grid;
@@ -21,21 +6,6 @@
   position: relative;
 }
 
-.options {
-  display: flex;
-  flex-direction: column;
-  gap: $element-spacing;
-}
-
-.eventStatus {
-  position: absolute;
-  left: 0;
-  margin: 0.5rem 0.25rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
 .mainContent {
   font-size: 1rem;
   font-weight: 600;
@@ -61,9 +31,13 @@
   display: none;
 }
 
-.timerIndicators {
+.eventStatus {
+  position: absolute;
+  left: 0;
+  margin: 0.5rem 0.25rem;
   display: flex;
   flex-direction: column;
+  gap: 0.25rem;
 }
 
 .statusIcon {
@@ -73,3 +47,4 @@
     color: $active-indicator;
   }
 }
+

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

@@ -10,7 +10,7 @@ import { handleLinks } from '../../../common/utils/linkUtils';
 import { cx, timerPlaceholder } from '../../../common/utils/styleUtils';
 import PipRoot from '../../../views/editor/pip-timer/PipRoot';
 
-import style from './MessageControl.module.scss';
+import style from './TimerPreview.module.scss';
 
 const secondarySourceLabels: Record<string, string> = {
   aux1: 'Aux 1',

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

@@ -0,0 +1,12 @@
+.previewContainer {
+  display: grid;
+  gap: $element-spacing;
+  grid-template-columns: 3fr 2fr;
+}
+
+
+.options {
+  display: flex;
+  flex-direction: column;
+  gap: $element-spacing;
+}

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

@@ -8,7 +8,7 @@ import { setMessage, useTimerViewControl } from '../../../common/hooks/useSocket
 
 import TimerPreview from './TimerPreview';
 
-import style from './MessageControl.module.scss';
+import style from './TimerViewControl.module.scss';
 
 export default function TimerControlsPreview() {
   const { blackout, blink } = useTimerViewControl();