From b0f02e726dc604a49e5d8651e9ca4ecf2fdfc629 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Sun, 21 Dec 2025 12:52:09 +0100
Subject: [PATCH] refactor(css): migrate use of deprecated import in cuesheet

---
 .../cuesheet-table/CuesheetTable.module.scss  | 25 +++----------------
 .../cuesheet-table/_cuesheetRows.scss         | 24 ++++++++++++++++++
 .../DelayRow.module.scss                      |  3 ++-
 .../EventRow.module.scss                      |  3 ++-
 .../GroupRow.module.scss                      |  3 ++-
 .../MilestoneRow.module.scss                  |  3 ++-
 6 files changed, 36 insertions(+), 25 deletions(-)
 create mode 100644 apps/client/src/views/cuesheet/cuesheet-table/_cuesheetRows.scss

diff --git a/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.module.scss b/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.module.scss
index b5236faa9..fc3282ce2 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.module.scss
+++ b/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.module.scss
@@ -1,6 +1,10 @@
+@use './cuesheetRows' as rows;
+
 $table-font-size: 1rem;
 $table-header-font-size: calc(1rem - 2px);
 
+@include rows.cuesheet-row-columns($table-header-font-size);
+
 .cuesheet {
   font-size: $table-font-size;
   font-weight: 400;
@@ -49,27 +53,6 @@ $table-header-font-size: calc(1rem - 2px);
   }
 }
 
-.actionColumn {
-  padding-inline: 0.5rem;
-  padding-top: 0.5rem !important; // fighting the table styles
-  background-color: transparent;
-  display: flex;
-  align-items: start;
-  justify-content: center;
-}
-
-.indexColumn {
-  display: flex;
-  align-items: start;
-  justify-content: end;
-
-  min-width: 3em; // allow for 3-digit numbers
-  font-size: $table-header-font-size;
-  line-height: 2rem; // match input height
-  background-color: $gray-1300; // will be overridden inline
-  font-weight: 600;
-}
-
 .tableHeader {
   line-height: 2rem;
   position: sticky;
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/_cuesheetRows.scss b/apps/client/src/views/cuesheet/cuesheet-table/_cuesheetRows.scss
new file mode 100644
index 000000000..1de2525e3
--- /dev/null
+++ b/apps/client/src/views/cuesheet/cuesheet-table/_cuesheetRows.scss
@@ -0,0 +1,24 @@
+@use '@/theme/themeTokens' as *;
+
+@mixin cuesheet-row-columns($header-font-size: calc(1rem - 2px)) {
+  .actionColumn {
+    padding-inline: 0.5rem;
+    padding-top: 0.5rem !important; // fighting the table styles
+    background-color: transparent;
+    display: flex;
+    align-items: start;
+    justify-content: center;
+  }
+
+  .indexColumn {
+    display: flex;
+    align-items: start;
+    justify-content: end;
+
+    min-width: 3em; // allow for 3-digit numbers
+    font-size: $header-font-size;
+    line-height: 2rem; // match input height
+    background-color: $gray-1300; // will be overridden inline
+    font-weight: 600;
+  }
+}
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/DelayRow.module.scss b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/DelayRow.module.scss
index 691cffbfc..aebd947b0 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/DelayRow.module.scss
+++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/DelayRow.module.scss
@@ -1,4 +1,5 @@
-@import '../CuesheetTable.module.scss';
+@use '../cuesheetRows' as rows;
+@include rows.cuesheet-row-columns;
 
 .delayRow {
   color: $ontime-delay-text;
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.module.scss b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.module.scss
index de06f12d3..ea2fc8382 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.module.scss
+++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.module.scss
@@ -1,4 +1,5 @@
-@import "../CuesheetTable.module.scss";
+@use '../cuesheetRows' as rows;
+@include rows.cuesheet-row-columns;
 
 .eventRow {
   background: color-mix(in srgb, transparent 92%, var(--user-bg, $gray-500) 8%);
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/GroupRow.module.scss b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/GroupRow.module.scss
index 52841b021..d58e9a38b 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/GroupRow.module.scss
+++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/GroupRow.module.scss
@@ -1,4 +1,5 @@
-@import '../CuesheetTable.module.scss';
+@use '../cuesheetRows' as rows;
+@include rows.cuesheet-row-columns;
 
 .groupRow {
   margin-top: 2em;
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MilestoneRow.module.scss b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MilestoneRow.module.scss
index d79a08ae2..03fc85917 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MilestoneRow.module.scss
+++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MilestoneRow.module.scss
@@ -1,4 +1,5 @@
-@import "../CuesheetTable.module.scss";
+@use '../cuesheetRows' as rows;
+@include rows.cuesheet-row-columns;
 
 .milestoneRow {
   background: color-mix(in srgb, transparent 98%, var(--user-bg, $gray-500) 2%);