Closes #7420

- Styling and markup for mission status control panel.
- Tweaks and additions to some common style elements.

src/plugins/userIndicator/components/MissionStatusPopup.vue

@@ -1,17 +1,25 @@
 <template>
-  <div class="control-panel">
-    <div class="header">
-      <span>CONTROL PANEL</span>
-      <button class="close-btn" @click.stop="onDismiss">X</button>
+  <div class="c-user-control-panel__component">
+    <div class="c-user-control-panel__header">
+      <div class="c-user-control-panel__title">Mission Status</div>
+      <button
+        aria-label="Close"
+        class="c-icon-button c-icon-button--sm t-close-btn icon-x"
+        @click.stop="onDismiss"
+      ></button>
     </div>
-    <div v-for="status in missionStatuses" :key="status" class="status-item">
-      <label :for="status">{{ status }}</label>
-      <button class="status-btn go">GO</button>
-      <select :id="status.label">
-        <option v-for="option in missionStatusOptions" :key="option.key">
-          {{ option.label }}
-        </option>
-      </select>
+    <div class="c-ucp-mission-status">
+      <template v-for="status in missionStatuses" :key="status">
+        <label class="c-ucp-mission-status__label" :for="status">{{ status }}</label>
+        <div class="c-ucp-mission-status__widget --is-no-go">NO GO</div>
+        <div class="c-ucp-mission-status__select">
+          <select :id="status.label">
+            <option v-for="option in missionStatusOptions" :key="option.key">
+              {{ option.label }}
+            </option>
+          </select>
+        </div>
+      </template>
     </div>
   </div>
 </template>

src/plugins/userIndicator/user-indicator.scss

@@ -1,13 +1,35 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
 .c-indicator {
     &:before {
       // Indicator icon
       color: $colorKey;
     }
-  
+
     &--clickable {
       cursor: pointer;
       max-width: 250px;
-  
+
       @include hover() {
         background: $colorIndicatorBgHov;
       }
@@ -21,7 +43,7 @@
   display: flex;
   flex-direction: column;
   padding: $interiorMarginLg;
-  min-width: 350px;
+  min-width: max-content;
   max-width: 35%;
 
   > * + * {
@@ -30,7 +52,7 @@
 
   *:before {
     font-size: 0.8em;
-    margin-right: $interiorMarginSm;
+    margin-right: $interiorMarginSm; // WTF - this is BAD!
   }
 
   &__section {
@@ -43,6 +65,32 @@
     }
   }
 
+  &__header {
+    align-items: center;
+    display: flex;
+    column-gap: $interiorMargin;
+    text-transform: uppercase;
+
+    > * { flex: 0 0 auto; }
+
+    [class*='title'] {
+      flex: 1 1 auto;
+    }
+  }
+
+  .t-close-btn {
+    &:before {
+      margin-right: 0;
+    }
+  }
+
+  &__component {
+    // General classes for new control panel component
+    display: flex;
+    flex-direction: column;
+    gap: $interiorMargin;
+  }
+
   &__top {
     text-transform: uppercase;
   }
@@ -70,7 +118,7 @@
     }
   }
 
-  /****** Admin interface */
+  /*************************************************** ADMIN INTERFACE */
   &__content {
     $m: $interiorMargin;
     display: grid;
@@ -108,4 +156,35 @@
       }
     }
   }
-}
+}
+
+/**************** STYLES FOR THE MISSION STATUS USER CONTROL PANEL */
+.c-ucp-mission-status {
+  $bg: rgba(black, 0.7);
+  display: grid;
+  grid-template-columns: max-content max-content 1fr;
+  align-items: center;
+  grid-column-gap: $interiorMarginLg;
+  grid-row-gap: $interiorMargin;
+
+  &__widget {
+    border-radius: $basicCr;
+    background: $bg;
+    border: 1px solid transparent;
+    padding: $interiorMarginSm $interiorMarginLg;
+    text-align: center;
+
+    &.--is-go {
+      $c: #2C7527;
+      background: $c;
+      color: white;
+    }
+
+    &.--is-no-go {
+      $c: #FBC147;
+      background: $bg;
+      border: 1px solid $c;
+      color: $c;
+    }
+  }
+}

src/styles/_controls.scss

@@ -222,6 +222,10 @@ button {
       font-size: 1.1em;
     }
   }
+
+  &--sm {
+    padding: $interiorMarginSm $interiorMargin;
+  }
 }
 
 .c-list-button {

src/styles/_global.scss

@@ -98,6 +98,7 @@ body.desktop {
   }
 
   div,
+  ul,
   span {
     // Firefox
     scrollbar-color: $scrollbarThumbColor $scrollbarTrackColorBg;