refactor: tweaks to styles

- cuesheet action is ghosted
- mute index in cuesheet milestones
- clarify mirrored state in navigation menu
- align overview contents

apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss

@@ -64,3 +64,8 @@
   flex: 1;
   overflow-y: auto;
 }
+
+.note {
+  margin-left: auto;
+  color: $white-20;
+}

apps/client/src/common/components/navigation-menu/NavigationMenu.tsx

@@ -60,6 +60,7 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
             <NavigationMenuItem active={mirror} onClick={toggleMirror}>
               Flip Screen
               <IoSwapVertical />
+              {mirror && <span className={style.note}>Active</span>}
             </NavigationMenuItem>
             <NavigationMenuItem onClick={handlers.open}>Rename Client</NavigationMenuItem>
 

apps/client/src/features/overview/composite/TimeElements.module.scss

@@ -1,7 +1,10 @@
 .column {
+  height: 100%;
+  justify-content: center;
   display: flex;
   flex-direction: column;
   align-items: end;
+  gap: 2px;
 }
 
 .row {

apps/client/src/features/overview/composite/TimeElements.tsx

@@ -194,7 +194,7 @@ export function ProgressOverview() {
   const current = selectedEventIndex !== null ? selectedEventIndex + 1 : enDash;
   const progressText = numEvents ? `${current} of ${numEvents || enDash}` : enDash;
 
-  return <TimeColumn label='Progress' value={progressText} />;
+  return <TimeColumn label='Progress' value={progressText} muted={selectedEventIndex === null} />;
 }
 
 export function OffsetOverview() {

apps/client/src/features/overview/composite/TimeLayout.module.scss

@@ -13,11 +13,17 @@
   &::after {
     content: '\200b';
   }
+
+  &.muted {
+    color: $muted-gray;
+  }
 }
 
 .column {
   display: flex;
   flex-direction: column;
+  height: 100%;
+  justify-content: end;
 
   .label {
     line-height: 0.9em;

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/BlockRow.tsx

@@ -40,7 +40,7 @@ export default function BlockRow({ blockId, colour, hidePast, rowId, rowIndex, t
         <td className={style.actionColumn} tabIndex={-1} role='cell'>
           <IconButton
             aria-label='Options'
-            variant='subtle-white'
+            variant='ghosted-white'
             size='small'
             onClick={(e) => {
               const rect = e.currentTarget.getBoundingClientRect();

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx

@@ -93,7 +93,7 @@ export default function EventRow({
         <td className={style.actionColumn} tabIndex={-1} role='cell'>
           <IconButton
             aria-label='Options'
-            variant='subtle-white'
+            variant='ghosted-white'
             size='small'
             onClick={(e) => {
               const rect = e.currentTarget.getBoundingClientRect();

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MilestoneRow.module.scss

@@ -16,4 +16,8 @@
     background-color: $gray-1250;
     border-radius: 2px;
   }
+
+  .indexColumn {
+    color: $label-gray;
+  }
 }

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MilestoneRow.tsx

@@ -52,7 +52,7 @@ export default function MilestoneRow({
         <td className={style.actionColumn} tabIndex={-1} role='cell'>
           <IconButton
             aria-label='Options'
-            variant='subtle-white'
+            variant='ghosted-white'
             size='small'
             onClick={(e) => {
               const rect = e.currentTarget.getBoundingClientRect();