From 8c363ee0e3fe3b10f902c086e6ed0bbe63edc275 Mon Sep 17 00:00:00 2001
From: nayan <khanalnayan123@gmail.com>
Date: Sat, 26 Jul 2025 12:10:30 +0545
Subject: [PATCH 1/2] feat: add toggle to switch between UTC and local time in
 ClockIndicator

Added a toggle button to the ClockIndicator component in the topbar to allow users to switch between UTC and local time (LT) display formats. This improves usability for users in different time zones and enhances time visibility across the interface.
---
 .../clock/components/ClockIndicator.vue       |  60 +-
 src/styles/_constants.scss                    |  57 +-
 src/styles/_glyphs.scss                       | 711 ++++++++++++------
 3 files changed, 558 insertions(+), 270 deletions(-)

diff --git a/src/plugins/clock/components/ClockIndicator.vue b/src/plugins/clock/components/ClockIndicator.vue
index 8521934b5ce..d904d5522a4 100644
--- a/src/plugins/clock/components/ClockIndicator.vue
+++ b/src/plugins/clock/components/ClockIndicator.vue
@@ -1,25 +1,3 @@
-<!--
- 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.
--->
-
 <template>
   <div
     aria-label="Clock Indicator"
@@ -31,6 +9,20 @@
       {{ timeTextValue }}
     </span>
   </div>
+
+  <div
+    aria-label="Toggle Clock Format"
+    class="c-indicator t-indicator-timer icon-timer no-minify c-indicator--clickable c-icon-button"
+    role="button"
+    aria-live="off"
+    tabindex="0"
+    @click="toggleTimeStandard"
+    @keydown.enter="toggleTimeStandard"
+  >
+    <span class="label c-indicator__label">
+      {{ timeStandard === 'UTC' ? 'LT' : 'UTC' }}
+    </span>
+  </div>
 </template>
 
 <script>
@@ -46,28 +38,38 @@ export default {
     }
   },
   data() {
+    const clock = this.openmct.time.getClock();
     return {
-      timestamp: this.openmct.time.getClock() ? this.openmct.time.now() : undefined
+      timestamp: clock ? this.openmct.time.now() : undefined,
+      timeStandard: 'UTC' // default to UTC, can start with LT if preferred
     };
   },
   computed: {
     timeTextValue() {
-      return `${moment.utc(this.timestamp).format(this.indicatorFormat)} ${
-        this.openmct.time.getTimeSystem().name
-      }`;
+      const format = this.indicatorFormat;
+      const timeSystemName = this.timeStandard === 'LT' ? 'LT' : 'UTC';
+
+      if (this.timeStandard === 'LT') {
+        return `${moment(this.timestamp).format(format)} ${timeSystemName}`;
+      } else {
+        return `${moment.utc(this.timestamp).format(format)} ${timeSystemName}`;
+      }
     }
   },
   mounted() {
     this.tick = raf(this.tick);
     this.openmct.time.on('tick', this.tick);
-    this.tick(this.timestamp);
+    this.tick(this.openmct.time.now());
   },
   beforeUnmount() {
     this.openmct.time.off('tick', this.tick);
   },
   methods: {
-    tick(timestamp) {
-      this.timestamp = timestamp;
+    tick(now) {
+      this.timestamp = now;
+    },
+    toggleTimeStandard() {
+      this.timeStandard = this.timeStandard === 'UTC' ? 'LT' : 'UTC';
     }
   }
 };
diff --git a/src/styles/_constants.scss b/src/styles/_constants.scss
index f8e00420d06..8e63eabf775 100755
--- a/src/styles/_constants.scss
+++ b/src/styles/_constants.scss
@@ -20,17 +20,21 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+
 /************************** PATHS */
+
 // Paths need to be relative to /platform/commonUI/theme/<theme-name>/css/ directory
 $dirImgs: 'images/';
 
 /************************** TIMINGS */
+
 $controlFadeMs: 100ms;
 $browseToEditAnimMs: 400ms;
 $editBorderPulseMs: 500ms;
 $moveBarOutDelay: 500ms;
 
 /************************** SPATIAL */
+
 $interiorMarginSm: 3px;
 $interiorMargin: 5px;
 $interiorMarginLg: 10px;
@@ -51,15 +55,21 @@ $shellMainBrowseBarH: 22px;
 $shellTimeConductorH: 25px;
 $shellToolBarH: 29px;
 $fadeTruncateW: 7px;
+
 /*************** Items */
+
 $itemPadLR: 5px;
 $gridItemDesk: 175px;
 $gridItemMobile: 32px;
+
 /*************** Tabular */
+
 $tabularHeaderH: 22px;
 $tabularTdPadLR: $itemPadLR;
 $tabularTdPadTB: 2px;
+
 /*************** Plots */
+
 $plotYBarW: 60px;
 $plotYLabelMinH: 20px;
 $plotYLabelW: 10px;
@@ -71,48 +81,90 @@ $plotSwatchD: 12px;
 $plotDisplayArea: (0, 0, $plotXBarH, $plotYBarW); // 1: Top, 2: right, 3: bottom, 4: left
 $plotMinH: 95px;
 $controlBarH: 25px;
+
 /*************** Imagery */
+
 $imageMainControlBarH: 25px;
 $imageThumbsD: 100px;
 $imageThumbsWrapperH: 155px;
 $imageThumbPad: 1px;
+
 /*************** Bubbles */
+
 $bubbleArwSize: 10px;
 $bubblePad: $interiorMargin;
 $bubbleMinW: 100px;
 $bubbleMaxW: 300px;
+
 /*************** Menus */
+
 $paletteMenuMinW: 128px; // Min-width of palettes when in a dropdown menu
+
 /*************** Forms */
+
 $formLabelMinW: 120px;
 $formLabelW: 30%;
+
 /*************** Wait Spinner */
+
 $waitSpinnerD: 32px;
 $waitSpinnerBorderW: 5px;
 $waitSpinnerTreeD: 20px;
 $waitSpinnerTreeBorderW: 3px;
+
 /*************** Messages */
+
 $messageIconD: 80px;
 $messageListIconD: 32px;
+
 /*************** Tables */
+
 $tableResizeColHitareaD: 6px;
+
 /*************** Misc */
+
 $drawingObjBorderW: 3px;
 $tagBorderRadius: 3px;
+
 /************************** MOBILE */
+
 $mobileMenuIconD: 24px; // Used
 $mobileTreeItemH: 35px; // Used
 
 /************************** UI ELEMENTS */
+
+
 /*************** Progress Bar */
+
 $colorProgressBarHolder: rgba(black, 0.2);
 $colorProgressBar: #0085ad;
 $progressAnimW: 500px;
 $progressBarMinH: 4px;
+
 /************************** FONT STYLING */
-$listFontSizes: 8, 9, 10, 11, 12, 13, 14, 16, 18, 20, 24, 28, 32, 36, 42, 48, 72, 96, 128;
+
+$listFontSizes: 8,
+9,
+10,
+11,
+12,
+13,
+14,
+16,
+18,
+20,
+24,
+28,
+32,
+36,
+42,
+48,
+72,
+96,
+128;
 
 /************************** GLYPH CHAR UNICODES */
+
 $glyph-icon-alert-rect: '\e900';
 $glyph-icon-alert-triangle: '\e901';
 $glyph-icon-arrow-up: '\e902';
@@ -281,6 +333,7 @@ $glyph-icon-notebook-shift-log: '\eb31';
 $glyph-icon-plot-scatter: '\eb30';
 
 /************************** GLYPHS AS DATA URI */
+
 // Only objects have been converted, for use in Create menu and folder views
 $bg-icon-alert-rect: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M448 0H64C28.7.1.1 28.7 0 64v384c.1 35.3 28.7 63.9 64 64h384c35.3-.1 63.9-28.7 64-64V64c-.1-35.3-28.7-63.9-64-64zM288 448h-64v-64h64v64zm10.9-192L280 352h-48l-18.9-96V64H299v192z' fill='%23000000'/%3e%3c/svg%3e");
 $bg-icon-alert-triangle: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M499.1 424.4L287.8 54.6c-17.5-30.6-46-30.6-63.5 0L12.9 424.4C-4.6 455 9.9 480 45.1 480h421.7c35.3 0 49.8-25 32.3-55.6zM288 448h-64v-64h64v64zm10.9-192L280 352h-48l-18.9-96V128H299v128z' fill='%23000000'/%3e%3c/svg%3e");
@@ -334,4 +387,4 @@ $bg-icon-notebook-shift-log: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns=
 $bg-icon-telemetry-aggregate: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cg data-name='Layer 2'%3e%3cg data-name='Layer 3'%3e%3cpath d='M39 197.72c7-20.72 18.74-50.4 34.6-74.18C92.91 94.65 114.79 80 138.67 80s45.75 14.65 65 43.54c15.86 23.78 27.57 53.46 34.6 74.18 15.44 45.48 31.56 67.49 39 73.27 7.47-5.78 23.6-27.79 39-73.27 7-20.72 18.74-50.4 34.61-74.18q13.9-20.85 29.56-31.75A207.78 207.78 0 0 0 208 0C93.12 0 0 93.12 0 208a208.14 208.14 0 0 0 7.39 55.09c8.39-10.87 20.2-31.67 31.61-65.37Z'/%3e%3cpath d='M377 218.28c-7 20.72-18.74 50.4-34.6 74.18-19.28 28.89-41.16 43.54-65 43.54s-45.75-14.65-65-43.54c-15.86-23.78-27.57-53.46-34.6-74.18-15.44-45.48-31.57-67.49-39-73.27-7.47 5.78-23.6 27.79-39 73.27-7.19 20.72-18.9 50.4-34.8 74.18q-13.9 20.85-29.56 31.75A207.78 207.78 0 0 0 208 416c114.88 0 208-93.12 208-208a208.14 208.14 0 0 0-7.39-55.09c-8.39 10.87-20.2 31.67-31.61 65.37Z'/%3e%3cpath d='M460.78 167.31A258.4 258.4 0 0 1 464 208a255.84 255.84 0 0 1-256 256 258.4 258.4 0 0 1-40.69-3.22A207.23 207.23 0 0 0 304 512c114.88 0 208-93.12 208-208a207.23 207.23 0 0 0-51.22-136.69Z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
 $bg-icon-trash: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='512px' height='512px' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'%3e%3cpath d='M416,64h-96.18V32c0-17.6-14.4-32-32-32h-64c-17.6,0-32,14.4-32,32v32H96c-52.8,0-96,36-96,80s0,80,0,80h32v192 c0,52.8,43.2,96,96,96h256c52.8,0,96-43.2,96-96V224h32c0,0,0-36,0-80S468.8,64,416,64z M160,416H96V224h64V416z M288,416h-64V224 h64V416z M416,416h-64V224h64V416z'/%3e%3c/svg%3e");
 $bg-icon-eye-open: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:%2300A14B;%7d %3c/style%3e%3ctitle%3eicon-eye-open-v2%3c/title%3e%3cg%3e%3cpath class='st0' d='M256,58.2c-122.9,0-226.1,84-255.4,197.8C29.9,369.7,133.1,453.8,256,453.8s226.1-84,255.4-197.8 C482.1,142.3,378.9,58.2,256,58.2z M414.6,294.2c-11.3,17.2-25.3,32.4-41.5,45.2c-16.4,12.9-34.5,22.8-54,29.7 c-20.2,7.1-41.4,10.7-63,10.7s-42.9-3.6-63-10.7c-19.5-6.9-37.7-16.9-54-29.7c-16.2-12.8-30.2-27.9-41.5-45.2 c-7.9-12-14.4-24.8-19.3-38.2c5-13.4,11.5-26.2,19.3-38.2c11.3-17.2,25.3-32.4,41.5-45.2c16.4-12.9,34.5-22.8,54-29.7 c20.2-7.1,41.4-10.7,63-10.7s42.9,3.6,63,10.7c19.5,6.9,37.7,16.9,54,29.7c16.2,12.8,30.2,27.9,41.5,45.2 c7.9,12,14.4,24.8,19.3,38.2C429,269.4,422.5,282.2,414.6,294.2z'/%3e%3ccircle class='st0' cx='256' cy='256' r='96'/%3e%3c/g%3e%3c/svg%3e");
-$bg-icon-camera: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3ctitle%3eicon-camera-v2%3c/title%3e%3cpath d='M448,128H384L320,0H192L128,128H64A64.2,64.2,0,0,0,0,192V448a64.2,64.2,0,0,0,64,64H448a64.2,64.2,0,0,0,64-64V192A64.2,64.2,0,0,0,448,128ZM256,432A128,128,0,1,1,384,304,128,128,0,0,1,256,432Z'/%3e%3c/svg%3e");
+$bg-icon-camera: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3ctitle%3eicon-camera-v2%3c/title%3e%3cpath d='M448,128H384L320,0H192L128,128H64A64.2,64.2,0,0,0,0,192V448a64.2,64.2,0,0,0,64,64H448a64.2,64.2,0,0,0,64-64V192A64.2,64.2,0,0,0,448,128ZM256,432A128,128,0,1,1,384,304,128,128,0,0,1,256,432Z'/%3e%3c/svg%3e");
\ No newline at end of file
diff --git a/src/styles/_glyphs.scss b/src/styles/_glyphs.scss
index 750eba7e292..6b5331f9c13 100755
--- a/src/styles/_glyphs.scss
+++ b/src/styles/_glyphs.scss
@@ -21,704 +21,937 @@
  *****************************************************************************/
 
 @font-face {
-  // Use https://icomoon.io/app with `Icomoon.Open MCT Symbols 2018.json` to generate font files
-  font-family: 'symbolsfont';
-  src: url('./fonts/Open-MCT-Symbols-16px.woff') format('woff'),
-    url('./fonts/Open-MCT-Symbols-16px.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
+    // Use https://icomoon.io/app with `Icomoon.Open MCT Symbols 2018.json` to generate font files
+    font-family: 'symbolsfont';
+    src: url('./fonts/Open-MCT-Symbols-16px.woff') format('woff'), url('./fonts/Open-MCT-Symbols-16px.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
 }
 
 @font-face {
-  // Use https://icomoon.io/app with icomoon-project-Open-MCT-Symbols-12px.json to generate font files
-  font-family: 'symbolsfont-12px';
-  src: url('./fonts/Open-MCT-Symbols-12px.woff') format('woff'),
-    url('./fonts/Open-MCT-Symbols-12px.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
+    // Use https://icomoon.io/app with icomoon-project-Open-MCT-Symbols-12px.json to generate font files
+    font-family: 'symbolsfont-12px';
+    src: url('./fonts/Open-MCT-Symbols-12px.woff') format('woff'), url('./fonts/Open-MCT-Symbols-12px.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
 }
 
+
 /************************** 16 PX CLASSES */
+
 .icon-alert-rect {
-  @include glyphBefore($glyph-icon-alert-rect);
+    @include glyphBefore($glyph-icon-alert-rect);
 }
+
 .icon-alert-triangle {
-  @include glyphBefore($glyph-icon-alert-triangle);
+    @include glyphBefore($glyph-icon-alert-triangle);
 }
+
 .icon-arrow-up {
-  @include glyphBefore($glyph-icon-arrow-up);
+    @include glyphBefore($glyph-icon-arrow-up);
 }
+
 .icon-arrow-double-up {
-  @include glyphBefore($glyph-icon-arrow-double-up);
+    @include glyphBefore($glyph-icon-arrow-double-up);
 }
+
 .icon-arrow-tall-up {
-  @include glyphBefore($glyph-icon-arrow-tall-up);
+    @include glyphBefore($glyph-icon-arrow-tall-up);
 }
+
 .icon-arrow-right {
-  @include glyphBefore($glyph-icon-arrow-right);
+    @include glyphBefore($glyph-icon-arrow-right);
 }
+
 .icon-arrow-right-equilateral {
-  @include glyphBefore($glyph-icon-arrow-right-equilateral);
+    @include glyphBefore($glyph-icon-arrow-right-equilateral);
 }
+
 .icon-arrow-down {
-  @include glyphBefore($glyph-icon-arrow-down);
+    @include glyphBefore($glyph-icon-arrow-down);
 }
+
 .icon-arrow-double-down {
-  @include glyphBefore($glyph-icon-arrow-double-down);
+    @include glyphBefore($glyph-icon-arrow-double-down);
 }
+
 .icon-arrow-tall-down {
-  @include glyphBefore($glyph-icon-arrow-tall-down);
+    @include glyphBefore($glyph-icon-arrow-tall-down);
 }
+
 .icon-arrow-left {
-  @include glyphBefore($glyph-icon-arrow-left);
+    @include glyphBefore($glyph-icon-arrow-left);
 }
+
 .icon-asterisk {
-  @include glyphBefore($glyph-icon-asterisk);
+    @include glyphBefore($glyph-icon-asterisk);
 }
+
 .icon-bell {
-  @include glyphBefore($glyph-icon-bell);
+    @include glyphBefore($glyph-icon-bell);
 }
+
 .icon-box-round-corners {
-  @include glyphBefore($glyph-icon-box-round-corners);
+    @include glyphBefore($glyph-icon-box-round-corners);
 }
+
 .icon-box-with-arrow {
-  @include glyphBefore($glyph-icon-box-with-arrow);
+    @include glyphBefore($glyph-icon-box-with-arrow);
 }
+
 .icon-check {
-  @include glyphBefore($glyph-icon-check);
+    @include glyphBefore($glyph-icon-check);
 }
+
 .icon-connectivity {
-  @include glyphBefore($glyph-icon-connectivity);
+    @include glyphBefore($glyph-icon-connectivity);
 }
+
 .icon-database-in-brackets {
-  @include glyphBefore($glyph-icon-database-in-brackets);
+    @include glyphBefore($glyph-icon-database-in-brackets);
 }
+
 .icon-eye-open {
-  @include glyphBefore($glyph-icon-eye-open);
+    @include glyphBefore($glyph-icon-eye-open);
 }
+
 .icon-gear {
-  @include glyphBefore($glyph-icon-gear);
+    @include glyphBefore($glyph-icon-gear);
 }
+
 .icon-gear-after {
-  @include glyphAfter($glyph-icon-gear);
+    @include glyphAfter($glyph-icon-gear);
 }
+
 .icon-hourglass {
-  @include glyphBefore($glyph-icon-hourglass);
+    @include glyphBefore($glyph-icon-hourglass);
 }
+
 .icon-info {
-  @include glyphBefore($glyph-icon-info);
+    @include glyphBefore($glyph-icon-info);
 }
+
 .icon-link {
-  @include glyphBefore($glyph-icon-link);
+    @include glyphBefore($glyph-icon-link);
 }
+
 .icon-lock {
-  @include glyphBefore($glyph-icon-lock);
+    @include glyphBefore($glyph-icon-lock);
 }
+
 .icon-minus {
-  @include glyphBefore($glyph-icon-minus);
+    @include glyphBefore($glyph-icon-minus);
 }
+
 .icon-people {
-  @include glyphBefore($glyph-icon-people);
+    @include glyphBefore($glyph-icon-people);
 }
+
 .icon-person {
-  @include glyphBefore($glyph-icon-person);
+    @include glyphBefore($glyph-icon-person);
 }
+
 .icon-plus {
-  @include glyphBefore($glyph-icon-plus);
+    @include glyphBefore($glyph-icon-plus);
 }
+
 .icon-plus-in-rect {
-  @include glyphBefore($glyph-icon-plus-in-rect);
+    @include glyphBefore($glyph-icon-plus-in-rect);
 }
+
 .icon-trash {
-  @include glyphBefore($glyph-icon-trash);
+    @include glyphBefore($glyph-icon-trash);
 }
+
 .icon-x {
-  @include glyphBefore($glyph-icon-x);
+    @include glyphBefore($glyph-icon-x);
 }
+
 .icon-brackets {
-  @include glyphBefore($glyph-icon-brackets);
+    @include glyphBefore($glyph-icon-brackets);
 }
+
 .icon-crosshair {
-  @include glyphBefore($glyph-icon-crosshair);
+    @include glyphBefore($glyph-icon-crosshair);
 }
+
 .icon-grippy {
-  @include glyphBefore($glyph-icon-grippy);
+    @include glyphBefore($glyph-icon-grippy);
 }
+
 .icon-grid {
-  @include glyphBefore($glyph-icon-grid);
+    @include glyphBefore($glyph-icon-grid);
 }
+
 .icon-grippy-ew {
-  @include glyphBefore($glyph-icon-grippy-ew);
+    @include glyphBefore($glyph-icon-grippy-ew);
 }
+
 .icon-columns {
-  @include glyphBefore($glyph-icon-columns);
+    @include glyphBefore($glyph-icon-columns);
 }
+
 .icon-rows {
-  @include glyphBefore($glyph-icon-rows);
+    @include glyphBefore($glyph-icon-rows);
 }
+
 .icon-filter {
-  @include glyphBefore($glyph-icon-filter);
+    @include glyphBefore($glyph-icon-filter);
 }
+
 .icon-filter-outline {
-  @include glyphBefore($glyph-icon-filter-outline);
+    @include glyphBefore($glyph-icon-filter-outline);
 }
+
 .icon-suitcase {
-  @include glyphBefore($glyph-icon-suitcase);
+    @include glyphBefore($glyph-icon-suitcase);
 }
+
 .icon-cursor-lock {
-  @include glyphBefore($glyph-icon-cursor-lock);
+    @include glyphBefore($glyph-icon-cursor-lock);
 }
+
 .icon-flag {
-  @include glyphBefore($glyph-icon-flag);
+    @include glyphBefore($glyph-icon-flag);
 }
+
 .icon-eye-disabled {
-  @include glyphBefore($glyph-icon-eye-disabled);
+    @include glyphBefore($glyph-icon-eye-disabled);
 }
+
 .icon-notebook-page {
-  @include glyphBefore($glyph-icon-notebook-page);
+    @include glyphBefore($glyph-icon-notebook-page);
 }
+
 .icon-unlocked {
-  @include glyphBefore($glyph-icon-unlocked);
+    @include glyphBefore($glyph-icon-unlocked);
 }
+
 .icon-circle {
-  @include glyphBefore($glyph-icon-circle);
+    @include glyphBefore($glyph-icon-circle);
 }
+
 .icon-draft {
-  @include glyphBefore($glyph-icon-draft);
+    @include glyphBefore($glyph-icon-draft);
 }
+
 .icon-question-mark {
-  @include glyphBefore($glyph-icon-question-mark);
+    @include glyphBefore($glyph-icon-question-mark);
 }
+
 .icon-circle-slash {
-  @include glyphBefore($glyph-icon-circle-slash);
+    @include glyphBefore($glyph-icon-circle-slash);
 }
+
 .icon-status-poll-check {
-  @include glyphBefore($glyph-icon-status-poll-check);
+    @include glyphBefore($glyph-icon-status-poll-check);
 }
+
 .icon-status-poll-caution {
-  @include glyphBefore($glyph-icon-status-poll-caution);
+    @include glyphBefore($glyph-icon-status-poll-caution);
 }
+
 .icon-status-poll-circle-slash {
-  @include glyphBefore($glyph-icon-status-poll-circle-slash);
+    @include glyphBefore($glyph-icon-status-poll-circle-slash);
 }
+
 .icon-status-poll-question-mark {
-  @include glyphBefore($glyph-icon-status-poll-question-mark);
+    @include glyphBefore($glyph-icon-status-poll-question-mark);
 }
+
 .icon-status-poll-edit {
-  @include glyphBefore($glyph-icon-status-poll-edit);
+    @include glyphBefore($glyph-icon-status-poll-edit);
 }
+
 .icon-stale {
-  @include glyphBefore($glyph-icon-stale);
+    @include glyphBefore($glyph-icon-stale);
 }
+
 .icon-arrows-right-left {
-  @include glyphBefore($glyph-icon-arrows-right-left);
+    @include glyphBefore($glyph-icon-arrows-right-left);
 }
+
 .icon-arrows-up-down {
-  @include glyphBefore($glyph-icon-arrows-up-down);
+    @include glyphBefore($glyph-icon-arrows-up-down);
 }
+
 .icon-bullet {
-  @include glyphBefore($glyph-icon-bullet);
+    @include glyphBefore($glyph-icon-bullet);
 }
+
 .icon-calendar {
-  @include glyphBefore($glyph-icon-calendar);
+    @include glyphBefore($glyph-icon-calendar);
 }
+
 .icon-chain-links {
-  @include glyphBefore($glyph-icon-chain-links);
+    @include glyphBefore($glyph-icon-chain-links);
 }
+
 .icon-download {
-  @include glyphBefore($glyph-icon-download);
+    @include glyphBefore($glyph-icon-download);
 }
+
 .icon-duplicate {
-  @include glyphBefore($glyph-icon-duplicate);
+    @include glyphBefore($glyph-icon-duplicate);
 }
+
 .icon-folder-new {
-  @include glyphBefore($glyph-icon-folder-new);
+    @include glyphBefore($glyph-icon-folder-new);
 }
+
 .icon-fullscreen-collapse {
-  @include glyphBefore($glyph-icon-fullscreen-collapse);
+    @include glyphBefore($glyph-icon-fullscreen-collapse);
 }
+
 .icon-fullscreen-expand {
-  @include glyphBefore($glyph-icon-fullscreen-expand);
+    @include glyphBefore($glyph-icon-fullscreen-expand);
 }
+
 .icon-layers {
-  @include glyphBefore($glyph-icon-layers);
+    @include glyphBefore($glyph-icon-layers);
 }
+
 .icon-line-horz {
-  @include glyphBefore($glyph-icon-line-horz);
+    @include glyphBefore($glyph-icon-line-horz);
 }
+
 .icon-magnify {
-  @include glyphBefore($glyph-icon-magnify);
+    @include glyphBefore($glyph-icon-magnify);
 }
+
 .icon-magnify-in {
-  @include glyphBefore($glyph-icon-magnify-in);
+    @include glyphBefore($glyph-icon-magnify-in);
 }
+
 .icon-magnify-out {
-  @include glyphBefore($glyph-icon-magnify-out);
+    @include glyphBefore($glyph-icon-magnify-out);
 }
+
 .icon-menu-hamburger {
-  @include glyphBefore($glyph-icon-menu-hamburger);
+    @include glyphBefore($glyph-icon-menu-hamburger);
 }
+
 .icon-move {
-  @include glyphBefore($glyph-icon-move);
+    @include glyphBefore($glyph-icon-move);
 }
+
 .icon-new-window {
-  @include glyphBefore($glyph-icon-new-window);
+    @include glyphBefore($glyph-icon-new-window);
 }
+
 .icon-paint-bucket {
-  @include glyphBefore($glyph-icon-paint-bucket);
+    @include glyphBefore($glyph-icon-paint-bucket);
 }
+
 .icon-pencil {
-  @include glyphBefore($glyph-icon-pencil);
+    @include glyphBefore($glyph-icon-pencil);
 }
+
 .icon-pencil-in-brackets {
-  @include glyphBefore($glyph-icon-pencil-in-brackets);
+    @include glyphBefore($glyph-icon-pencil-in-brackets);
 }
+
 .icon-play {
-  @include glyphBefore($glyph-icon-play);
+    @include glyphBefore($glyph-icon-play);
 }
+
 .icon-pause {
-  @include glyphBefore($glyph-icon-pause);
+    @include glyphBefore($glyph-icon-pause);
 }
+
 .icon-plot-resource {
-  @include glyphBefore($glyph-icon-plot-resource);
+    @include glyphBefore($glyph-icon-plot-resource);
 }
+
 .icon-pointer-left {
-  @include glyphBefore($glyph-icon-pointer-left);
+    @include glyphBefore($glyph-icon-pointer-left);
 }
+
 .icon-pointer-right {
-  @include glyphBefore($glyph-icon-pointer-right);
+    @include glyphBefore($glyph-icon-pointer-right);
 }
+
 .icon-refresh {
-  @include glyphBefore($glyph-icon-refresh);
+    @include glyphBefore($glyph-icon-refresh);
 }
+
 .icon-save {
-  @include glyphBefore($glyph-icon-save);
+    @include glyphBefore($glyph-icon-save);
 }
+
 .icon-save-as {
-  @include glyphBefore($glyph-icon-save-as);
+    @include glyphBefore($glyph-icon-save-as);
 }
+
 .icon-sine {
-  @include glyphBefore($glyph-icon-sine);
+    @include glyphBefore($glyph-icon-sine);
 }
+
 .icon-font {
-  @include glyphBefore($glyph-icon-font);
+    @include glyphBefore($glyph-icon-font);
 }
+
 .icon-thumbs-strip {
-  @include glyphBefore($glyph-icon-thumbs-strip);
+    @include glyphBefore($glyph-icon-thumbs-strip);
 }
+
 .icon-two-parts-both {
-  @include glyphBefore($glyph-icon-two-parts-both);
+    @include glyphBefore($glyph-icon-two-parts-both);
 }
+
 .icon-two-parts-one-only {
-  @include glyphBefore($glyph-icon-two-parts-one-only);
+    @include glyphBefore($glyph-icon-two-parts-one-only);
 }
+
 .icon-resync {
-  @include glyphBefore($glyph-icon-resync);
+    @include glyphBefore($glyph-icon-resync);
 }
+
 .icon-reset {
-  @include glyphBefore($glyph-icon-reset);
+    @include glyphBefore($glyph-icon-reset);
 }
+
 .icon-x-in-circle {
-  @include glyphBefore($glyph-icon-x-in-circle);
+    @include glyphBefore($glyph-icon-x-in-circle);
 }
+
 .icon-brightness {
-  @include glyphBefore($glyph-icon-brightness);
+    @include glyphBefore($glyph-icon-brightness);
 }
+
 .icon-contrast {
-  @include glyphBefore($glyph-icon-contrast);
+    @include glyphBefore($glyph-icon-contrast);
 }
+
 .icon-expand {
-  @include glyphBefore($glyph-icon-expand);
+    @include glyphBefore($glyph-icon-expand);
 }
+
 .icon-list-view {
-  @include glyphBefore($glyph-icon-list-view);
+    @include glyphBefore($glyph-icon-list-view);
 }
+
 .icon-grid-snap-to {
-  @include glyphBefore($glyph-icon-grid-snap-to);
+    @include glyphBefore($glyph-icon-grid-snap-to);
 }
+
 .icon-grid-snap-no {
-  @include glyphBefore($glyph-icon-grid-snap-no);
+    @include glyphBefore($glyph-icon-grid-snap-no);
 }
+
 .icon-frame-show {
-  @include glyphBefore($glyph-icon-frame-show);
+    @include glyphBefore($glyph-icon-frame-show);
 }
+
 .icon-frame-hide {
-  @include glyphBefore($glyph-icon-frame-hide);
+    @include glyphBefore($glyph-icon-frame-hide);
 }
+
 .icon-import {
-  @include glyphBefore($glyph-icon-import);
+    @include glyphBefore($glyph-icon-import);
 }
+
 .icon-export {
-  @include glyphBefore($glyph-icon-export);
+    @include glyphBefore($glyph-icon-export);
 }
+
 .icon-font-size {
-  @include glyphBefore($glyph-icon-font-size);
+    @include glyphBefore($glyph-icon-font-size);
 }
+
 .icon-clear-data {
-  @include glyphBefore($glyph-icon-clear-data);
+    @include glyphBefore($glyph-icon-clear-data);
 }
+
 .icon-history {
-  @include glyphBefore($glyph-icon-history);
+    @include glyphBefore($glyph-icon-history);
 }
+
 .icon-arrow-nav-to-parent {
-  @include glyphBefore($glyph-icon-arrow-nav-to-parent);
+    @include glyphBefore($glyph-icon-arrow-nav-to-parent);
 }
+
 .icon-crosshair-in-circle {
-  @include glyphBefore($glyph-icon-crosshair-in-circle);
+    @include glyphBefore($glyph-icon-crosshair-in-circle);
 }
+
 .icon-target {
-  @include glyphBefore($glyph-icon-target);
+    @include glyphBefore($glyph-icon-target);
 }
+
 .icon-items-collapse {
-  @include glyphBefore($glyph-icon-items-collapse);
+    @include glyphBefore($glyph-icon-items-collapse);
 }
+
 .icon-items-expand {
-  @include glyphBefore($glyph-icon-items-expand);
+    @include glyphBefore($glyph-icon-items-expand);
 }
+
 .icon-3-dots {
-  @include glyphBefore($glyph-icon-3-dots);
+    @include glyphBefore($glyph-icon-3-dots);
 }
+
 .icon-grid-on {
-  @include glyphBefore($glyph-icon-grid-on);
+    @include glyphBefore($glyph-icon-grid-on);
 }
+
 .icon-grid-off {
-  @include glyphBefore($glyph-icon-grid-off);
+    @include glyphBefore($glyph-icon-grid-off);
 }
+
 .icon-camera {
-  @include glyphBefore($glyph-icon-camera);
+    @include glyphBefore($glyph-icon-camera);
 }
+
 .icon-folders-collapse {
-  @include glyphBefore($glyph-icon-folders-collapse);
+    @include glyphBefore($glyph-icon-folders-collapse);
 }
+
 .icon-activity {
-  @include glyphBefore($glyph-icon-activity);
+    @include glyphBefore($glyph-icon-activity);
 }
+
 .icon-activity-mode {
-  @include glyphBefore($glyph-icon-activity-mode);
+    @include glyphBefore($glyph-icon-activity-mode);
 }
+
 .icon-autoflow-tabular {
-  @include glyphBefore($glyph-icon-autoflow-tabular);
+    @include glyphBefore($glyph-icon-autoflow-tabular);
 }
+
 .icon-clock {
-  @include glyphBefore($glyph-icon-clock);
+    @include glyphBefore($glyph-icon-clock);
 }
+
 .icon-database {
-  @include glyphBefore($glyph-icon-database);
+    @include glyphBefore($glyph-icon-database);
 }
+
 .icon-database-query {
-  @include glyphBefore($glyph-icon-database-query);
+    @include glyphBefore($glyph-icon-database-query);
 }
+
 .icon-dataset {
-  @include glyphBefore($glyph-icon-dataset);
+    @include glyphBefore($glyph-icon-dataset);
 }
+
 .icon-datatable {
-  @include glyphBefore($glyph-icon-datatable);
+    @include glyphBefore($glyph-icon-datatable);
 }
+
 .icon-dictionary {
-  @include glyphBefore($glyph-icon-dictionary);
+    @include glyphBefore($glyph-icon-dictionary);
 }
+
 .icon-folder {
-  @include glyphBefore($glyph-icon-folder);
+    @include glyphBefore($glyph-icon-folder);
 }
+
 .icon-image {
-  @include glyphBefore($glyph-icon-image);
+    @include glyphBefore($glyph-icon-image);
 }
+
 .icon-layout {
-  @include glyphBefore($glyph-icon-layout);
+    @include glyphBefore($glyph-icon-layout);
 }
+
 .icon-object {
-  @include glyphBefore($glyph-icon-object);
+    @include glyphBefore($glyph-icon-object);
 }
+
 .icon-object-unknown {
-  @include glyphBefore($glyph-icon-object-unknown);
+    @include glyphBefore($glyph-icon-object-unknown);
 }
+
 .icon-packet {
-  @include glyphBefore($glyph-icon-packet);
+    @include glyphBefore($glyph-icon-packet);
 }
+
 .icon-page {
-  @include glyphBefore($glyph-icon-page);
+    @include glyphBefore($glyph-icon-page);
 }
+
 .icon-plot-overlay {
-  @include glyphBefore($glyph-icon-plot-overlay);
+    @include glyphBefore($glyph-icon-plot-overlay);
 }
+
 .icon-plot-stacked {
-  @include glyphBefore($glyph-icon-plot-stacked);
+    @include glyphBefore($glyph-icon-plot-stacked);
 }
+
 .icon-session {
-  @include glyphBefore($glyph-icon-session);
+    @include glyphBefore($glyph-icon-session);
 }
+
 .icon-tabular {
-  @include glyphBefore($glyph-icon-tabular);
+    @include glyphBefore($glyph-icon-tabular);
 }
+
 .icon-tabular-lad {
-  @include glyphBefore($glyph-icon-tabular-lad);
+    @include glyphBefore($glyph-icon-tabular-lad);
 }
+
 .icon-tabular-lad-set {
-  @include glyphBefore($glyph-icon-tabular-lad-set);
+    @include glyphBefore($glyph-icon-tabular-lad-set);
 }
+
 .icon-tabular-realtime {
-  @include glyphBefore($glyph-icon-tabular-realtime);
+    @include glyphBefore($glyph-icon-tabular-realtime);
 }
+
 .icon-tabular-scrolling {
-  @include glyphBefore($glyph-icon-tabular-scrolling);
+    @include glyphBefore($glyph-icon-tabular-scrolling);
 }
+
 .icon-telemetry {
-  @include glyphBefore($glyph-icon-telemetry);
+    @include glyphBefore($glyph-icon-telemetry);
 }
+
 .icon-timeline {
-  @include glyphBefore($glyph-icon-timeline);
+    @include glyphBefore($glyph-icon-timeline);
 }
+
 .icon-timer {
-  @include glyphBefore($glyph-icon-timer);
+    @include glyphBefore($glyph-icon-timer);
 }
+
 .icon-topic {
-  @include glyphBefore($glyph-icon-topic);
+    @include glyphBefore($glyph-icon-topic);
 }
+
 .icon-box-with-dashed-lines {
-  @include glyphBefore($glyph-icon-box-with-dashed-lines);
+    @include glyphBefore($glyph-icon-box-with-dashed-lines);
 }
+
 .icon-summary-widget {
-  @include glyphBefore($glyph-icon-summary-widget);
+    @include glyphBefore($glyph-icon-summary-widget);
 }
+
 .icon-notebook {
-  @include glyphBefore($glyph-icon-notebook);
+    @include glyphBefore($glyph-icon-notebook);
 }
+
 .icon-tabs-view {
-  @include glyphBefore($glyph-icon-tabs-view);
+    @include glyphBefore($glyph-icon-tabs-view);
 }
+
 .icon-flexible-layout {
-  @include glyphBefore($glyph-icon-flexible-layout);
+    @include glyphBefore($glyph-icon-flexible-layout);
 }
+
 .icon-generator-telemetry {
-  @include glyphBefore($glyph-icon-generator-telemetry);
+    @include glyphBefore($glyph-icon-generator-telemetry);
 }
+
 .icon-generator-events {
-  @include glyphBefore($glyph-icon-generator-events);
+    @include glyphBefore($glyph-icon-generator-events);
 }
+
 .icon-gauge {
-  @include glyphBefore($glyph-icon-gauge);
+    @include glyphBefore($glyph-icon-gauge);
 }
+
 .icon-spectra {
-  @include glyphBefore($glyph-icon-spectra);
+    @include glyphBefore($glyph-icon-spectra);
 }
+
 .icon-spectra-telemetry {
-  @include glyphBefore($glyph-icon-spectra-telemetry);
+    @include glyphBefore($glyph-icon-spectra-telemetry);
 }
+
 .icon-command {
-  @include glyphBefore($glyph-icon-command);
+    @include glyphBefore($glyph-icon-command);
 }
+
 .icon-conditional {
-  @include glyphBefore($glyph-icon-conditional);
+    @include glyphBefore($glyph-icon-conditional);
 }
+
 .icon-condition-widget {
-  @include glyphBefore($glyph-icon-condition-widget);
+    @include glyphBefore($glyph-icon-condition-widget);
 }
+
 .icon-alphanumeric {
-  @include glyphBefore($glyph-icon-alphanumeric);
+    @include glyphBefore($glyph-icon-alphanumeric);
 }
+
 .icon-image-telemetry {
-  @include glyphBefore($glyph-icon-image-telemetry);
+    @include glyphBefore($glyph-icon-image-telemetry);
 }
+
 .icon-telemetry-aggregate {
-  @include glyphBefore($glyph-icon-telemetry-aggregate);
+    @include glyphBefore($glyph-icon-telemetry-aggregate);
 }
+
 .icon-bar-chart {
-  @include glyphBefore($glyph-icon-bar-chart);
+    @include glyphBefore($glyph-icon-bar-chart);
 }
+
 .icon-map {
-  @include glyphBefore($glyph-icon-map);
+    @include glyphBefore($glyph-icon-map);
 }
+
 .icon-plan {
-  @include glyphBefore($glyph-icon-plan);
+    @include glyphBefore($glyph-icon-plan);
 }
+
 .icon-timelist {
-  @include glyphBefore($glyph-icon-timelist);
+    @include glyphBefore($glyph-icon-timelist);
 }
+
 .icon-notebook-shift-log {
-  @include glyphBefore($glyph-icon-notebook-shift-log);
+    @include glyphBefore($glyph-icon-notebook-shift-log);
 }
+
 .icon-plot-scatter {
-  @include glyphBefore($glyph-icon-plot-scatter);
+    @include glyphBefore($glyph-icon-plot-scatter);
 }
 
+
 /************************** 12 PX CLASSES */
+
 // TODO: sync with 16px redo as of 10/25/18
 .icon-filter-12px {
-  @include glyphBefore($glyph-icon-filter, 'symbolsfont-12px');
+    @include glyphBefore($glyph-icon-filter,
+    'symbolsfont-12px');
 }
+
 .icon-filter-outline-12px {
-  @include glyphBefore($glyph-icon-filter-outline, 'symbolsfont-12px');
+    @include glyphBefore($glyph-icon-filter-outline,
+    'symbolsfont-12px');
 }
+
 .icon-crosshair-12px {
-  @include glyphBefore($glyph-icon-crosshair, 'symbolsfont-12px');
+    @include glyphBefore($glyph-icon-crosshair,
+    'symbolsfont-12px');
 }
+
 .icon-folder-12px {
-  @include glyphBefore($glyph-icon-folder, 'symbolsfont-12px');
+    @include glyphBefore($glyph-icon-folder,
+    'symbolsfont-12px');
 }
+
 .icon-list-view-12px {
-  @include glyphBefore($glyph-icon-list-view, 'symbolsfont-12px');
+    @include glyphBefore($glyph-icon-list-view,
+    'symbolsfont-12px');
 }
+
 .icon-grippy-12px {
-  @include glyphBefore($glyph-icon-grippy, 'symbolsfont-12px');
+    @include glyphBefore($glyph-icon-grippy,
+    'symbolsfont-12px');
 }
 
+
 /************************** GLYPH BG CLASSES */
+
 .bg-icon-alert-rect {
-  @include glyphBg($bg-icon-alert-rect);
+    @include glyphBg($bg-icon-alert-rect);
 }
+
 .bg-icon-alert-triangle {
-  @include glyphBg($bg-icon-alert-triangle);
+    @include glyphBg($bg-icon-alert-triangle);
 }
+
 .bg-icon-bell {
-  @include glyphBg($bg-icon-bell);
+    @include glyphBg($bg-icon-bell);
 }
+
 .bg-icon-info {
-  @include glyphBg($bg-icon-info);
+    @include glyphBg($bg-icon-info);
 }
+
 .bg-icon-plus {
-  @include glyphBg($bg-icon-plus);
+    @include glyphBg($bg-icon-plus);
 }
+
 .bg-icon-grippy-ew {
-  @include glyphBg($bg-icon-grippy-ew);
+    @include glyphBg($bg-icon-grippy-ew);
 }
+
 .bg-icon-chain-links {
-  @include glyphBg($bg-icon-chain-links);
+    @include glyphBg($bg-icon-chain-links);
 }
+
 .bg-icon-clock {
-  @include glyphBg($bg-icon-clock);
+    @include glyphBg($bg-icon-clock);
 }
+
 .bg-icon-database {
-  @include glyphBg($bg-icon-database);
+    @include glyphBg($bg-icon-database);
 }
+
 .bg-icon-database-query {
-  @include glyphBg($bg-icon-database-query);
+    @include glyphBg($bg-icon-database-query);
 }
+
 .bg-icon-dataset {
-  @include glyphBg($bg-icon-dataset);
+    @include glyphBg($bg-icon-dataset);
 }
+
 .bg-icon-datatable {
-  @include glyphBg($bg-icon-datatable);
+    @include glyphBg($bg-icon-datatable);
 }
+
 .bg-icon-dictionary {
-  @include glyphBg($bg-icon-dictionary);
+    @include glyphBg($bg-icon-dictionary);
 }
+
 .bg-icon-folder {
-  @include glyphBg($bg-icon-folder);
+    @include glyphBg($bg-icon-folder);
 }
+
 .bg-icon-image {
-  @include glyphBg($bg-icon-image);
+    @include glyphBg($bg-icon-image);
 }
+
 .bg-icon-layout {
-  @include glyphBg($bg-icon-layout);
+    @include glyphBg($bg-icon-layout);
 }
+
 .bg-icon-object {
-  @include glyphBg($bg-icon-object);
+    @include glyphBg($bg-icon-object);
 }
+
 .bg-icon-object-unknown {
-  @include glyphBg($bg-icon-object-unknown);
+    @include glyphBg($bg-icon-object-unknown);
 }
+
 .bg-icon-packet {
-  @include glyphBg($bg-icon-packet);
+    @include glyphBg($bg-icon-packet);
 }
+
 .bg-icon-page {
-  @include glyphBg($bg-icon-page);
+    @include glyphBg($bg-icon-page);
 }
+
 .bg-icon-plot-overlay {
-  @include glyphBg($bg-icon-plot-overlay);
+    @include glyphBg($bg-icon-plot-overlay);
 }
+
 .bg-icon-plot-stacked {
-  @include glyphBg($bg-icon-plot-stacked);
+    @include glyphBg($bg-icon-plot-stacked);
 }
+
 .bg-icon-session {
-  @include glyphBg($bg-icon-session);
+    @include glyphBg($bg-icon-session);
 }
+
 .bg-icon-tabular {
-  @include glyphBg($bg-icon-tabular);
+    @include glyphBg($bg-icon-tabular);
 }
+
 .bg-icon-tabular-lad {
-  @include glyphBg($bg-icon-tabular-lad);
+    @include glyphBg($bg-icon-tabular-lad);
 }
+
 .bg-icon-tabular-lad-set {
-  @include glyphBg($bg-icon-tabular-lad-set);
+    @include glyphBg($bg-icon-tabular-lad-set);
 }
+
 .bg-icon-tabular-scrolling {
-  @include glyphBg($bg-icon-tabular-scrolling);
+    @include glyphBg($bg-icon-tabular-scrolling);
 }
+
 .bg-icon-telemetry {
-  @include glyphBg($bg-icon-telemetry);
+    @include glyphBg($bg-icon-telemetry);
 }
+
 .bg-icon-timeline {
-  @include glyphBg($bg-icon-timeline);
+    @include glyphBg($bg-icon-timeline);
 }
+
 .bg-icon-timer {
-  @include glyphBg($bg-icon-timer);
+    @include glyphBg($bg-icon-timer);
 }
+
 .bg-icon-box-with-dashed-lines {
-  @include glyphBg($bg-icon-box-with-dashed-lines);
+    @include glyphBg($bg-icon-box-with-dashed-lines);
 }
+
 .bg-icon-summary-widget {
-  @include glyphBg($bg-icon-summary-widget);
+    @include glyphBg($bg-icon-summary-widget);
 }
+
 .bg-icon-notebook {
-  @include glyphBg($bg-icon-notebook);
+    @include glyphBg($bg-icon-notebook);
 }
+
 .bg-icon-tabs-view {
-  @include glyphBg($bg-icon-tabs-view);
+    @include glyphBg($bg-icon-tabs-view);
 }
+
 .bg-icon-flexible-layout {
-  @include glyphBg($bg-icon-flexible-layout);
+    @include glyphBg($bg-icon-flexible-layout);
 }
+
 .bg-icon-generator-telemetry {
-  @include glyphBg($bg-icon-generator-telemetry);
+    @include glyphBg($bg-icon-generator-telemetry);
 }
+
 .bg-icon-generator-events {
-  @include glyphBg($bg-icon-generator-events);
+    @include glyphBg($bg-icon-generator-events);
 }
+
 .bg-icon-gauge {
-  @include glyphBg($bg-icon-gauge);
+    @include glyphBg($bg-icon-gauge);
 }
+
 .bg-icon-spectra {
-  @include glyphBg($bg-icon-spectra);
+    @include glyphBg($bg-icon-spectra);
 }
+
 .bg-icon-spectra-telemetry {
-  @include glyphBg($bg-icon-spectra-telemetry);
+    @include glyphBg($bg-icon-spectra-telemetry);
 }
+
 .bg-icon-command {
-  @include glyphBg($bg-icon-command);
+    @include glyphBg($bg-icon-command);
 }
+
 .bg-icon-conditional {
-  @include glyphBg($bg-icon-conditional);
+    @include glyphBg($bg-icon-conditional);
 }
+
 .bg-icon-condition-widget {
-  @include glyphBg($bg-icon-condition-widget);
+    @include glyphBg($bg-icon-condition-widget);
 }
+
 .bg-icon-bar-chart {
-  @include glyphBg($bg-icon-bar-chart);
+    @include glyphBg($bg-icon-bar-chart);
 }
+
 .bg-icon-map {
-  @include glyphBg($bg-icon-map);
+    @include glyphBg($bg-icon-map);
 }
+
 .bg-icon-plan {
-  @include glyphBg($bg-icon-plan);
+    @include glyphBg($bg-icon-plan);
 }
+
 .bg-icon-timelist {
-  @include glyphBg($bg-icon-timelist);
+    @include glyphBg($bg-icon-timelist);
 }
+
 .bg-icon-plot-scatter {
-  @include glyphBg($bg-icon-plot-scatter);
+    @include glyphBg($bg-icon-plot-scatter);
 }
+
 .bg-icon-notebook-shift-log {
-  @include glyphBg($bg-icon-notebook-shift-log);
+    @include glyphBg($bg-icon-notebook-shift-log);
 }
+
 .bg-icon-telemetry-aggregate {
-  @include glyphBg($bg-icon-telemetry-aggregate);
+    @include glyphBg($bg-icon-telemetry-aggregate);
 }
+
 .bg-icon-trash {
-  @include glyphBg($bg-icon-trash);
+    @include glyphBg($bg-icon-trash);
 }
+
 .bg-icon-eye-open {
-  @include glyphBg($bg-icon-eye-open);
+    @include glyphBg($bg-icon-eye-open);
 }
+
 .bg-icon-camera {
-  @include glyphBg($bg-icon-camera);
-}
+    @include glyphBg($bg-icon-camera);
+}
\ No newline at end of file

From f148ee8af72a1b075340b81a6d8f73a08998a21a Mon Sep 17 00:00:00 2001
From: nayan <khanalnayan123@gmail.com>
Date: Sat, 23 Aug 2025 22:13:45 +0545
Subject: [PATCH 2/2] re-added the license which was previously removed

---
 .../clock/components/ClockIndicator.vue       | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/plugins/clock/components/ClockIndicator.vue b/src/plugins/clock/components/ClockIndicator.vue
index d904d5522a4..14fc93795a2 100644
--- a/src/plugins/clock/components/ClockIndicator.vue
+++ b/src/plugins/clock/components/ClockIndicator.vue
@@ -1,3 +1,25 @@
+<!--
+ 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.
+-->
+
 <template>
   <div
     aria-label="Clock Indicator"