Closes #7936

- Swimlane style refinements.
- New theme constants for swimlane colors.
- Time Strip label column buttons aligned right.

src/styles/_constants-darkmatter.scss

@@ -523,6 +523,8 @@ $colorInProgressFgEm: $colorTimeRealtimeFg;
 $colorGanttSelectedBorder: rgba(#fff, 0.3);
 $colorEventLine: $colorBodyFg;
 $colorEventLineExtended: rgba($colorEventLine, 0.3);
+$colorTimeStripDraftBg: rgba(#a57748, 0.2);
+$colorTimeStripLabelBg: rgba($colorBodyFg, 0.15);
 $eventLineW: 1px;
 
 // Tree

src/styles/_constants-espresso.scss

@@ -488,6 +488,8 @@ $colorInProgressFgEm: $colorTimeRealtimeFg;
 $colorGanttSelectedBorder: rgba(#fff, 0.3);
 $colorEventLine: $colorBodyFg;
 $colorEventLineExtended: rgba($colorEventLine, 0.3);
+$colorTimeStripDraftBg: rgba(#a57748, 0.2);
+$colorTimeStripLabelBg: rgba($colorBodyFg, 0.15);
 $eventLineW: 1px;
 
 // Tree

src/styles/_constants-maelstrom.scss

@@ -504,6 +504,8 @@ $colorInProgressFgEm: $colorTimeRealtimeFg;
 $colorGanttSelectedBorder: rgba(#fff, 0.3);
 $colorEventLine: $colorBodyFg;
 $colorEventLineExtended: rgba($colorEventLine, 0.3);
+$colorTimeStripDraftBg: rgba(#a57748, 0.2);
+$colorTimeStripLabelBg: rgba($colorBodyFg, 0.15);
 $eventLineW: 1px;
 
 // Tree

src/styles/_constants-snow.scss

@@ -487,6 +487,8 @@ $colorInProgressFgEm: $colorCurrentFgEm;
 $colorGanttSelectedBorder: #fff;
 $colorEventLine: $colorBodyFg;
 $colorEventLineExtended: rgba($colorEventLine, 0.3);
+$colorTimeStripDraftBg: rgba(#a57748, 0.2);
+$colorTimeStripLabelBg: rgba($colorBodyFg, 0.15);
 $eventLineW: 1px;
 
 // Tree

src/ui/components/swim-lane/SwimLane.vue

@@ -45,14 +45,16 @@
       <div class="c-object-label__name">
         <slot name="label"></slot>
       </div>
-      <button
+      <div class="c-swimlane__lane-label-button-h">
-        v-if="!hideButton"
+        <button
-        class="c-button"
+          v-if="!hideButton"
-        :class="[buttonIcon, buttonPressed ? 'is-active' : '']"
+          class="c-button"
-        :title="buttonTitle"
+          :class="[buttonIcon, buttonPressed ? 'is-active' : '']"
-        :aria-label="buttonTitle"
+          :title="buttonTitle"
-        @click="pressOnButton"
+          :aria-label="buttonTitle"
-      />
+          @click="pressOnButton"
+        />
+      </div>
     </div>
     <div
       class="c-swimlane__lane-object"
@@ -170,7 +172,7 @@ export default {
 
     swimlaneClass() {
       if (!this.spanRowsCount && !this.isNested) {
-        return 'c-swimlane__lane-label--span-cols';
+        return 'c-swimlane__lane-label --span-cols';
       }
 
       return '';

src/ui/components/swim-lane/swimlane.scss

@@ -28,17 +28,13 @@
   width: 100%;
 
   &.is-status--draft {
-    background: rgba($colorAlert, 0.2);
+    background: $colorTimeStripDraftBg;
   }
 
-  [class*='__lane-label'] {
+  &__lane-label {
-    background: rgba($colorBodyFg, 0.2);
+    background: $colorTimeStripLabelBg;
     color: $colorBodyFg;
-    padding: $interiorMarginSm;
+    padding: $interiorMarginSm $interiorMargin;
-  }
-
-  [class*='--span-cols'] {
-    grid-column: span 2;
   }
 
   &__lane-object {
@@ -52,6 +48,16 @@
     @include smallerControlButtons;
   }
 
+  &__lane-label-button-h {
+    // Holds swimlane button(s)
+    flex: 1 1 auto;
+    text-align: right;
+  }
+
+  .--span-cols {
+    grid-column: span 2;
+  }
+
   // Yet more brittle special case selecting...
   .is-object-type-plan,
   .is-object-type-gantt-chart {