From 262d35804d02f982d41470d251afcdb58d652a2b Mon Sep 17 00:00:00 2001
From: Pegah Sarram <pegahsarram@gmail.com>
Date: Wed, 26 Jun 2019 14:25:03 -0700
Subject: [PATCH] [Telemetry Table] Display applied filters (#2421)

* Display a list of filters that are applied to telemetry objects in a telemetry table.

* - Display 'Mixed' if filters have mixed values.
- Use table configuration domain object to get composition.

* Filter indicator styling WIP

- Markup, class names added;
- TODO: 'Mixed' and commas to be added via CSS, icon and bg coloring;

* Filter indicators styling

- CSS, markup;
- Added dynamic labeling and titling for mixed/non-mixed filter states;
- Theme colors defined and added;
- Added new filter icon glyphs for both 16px and 12px fonts;
- Revised/normalized font project and glyph file names;

* Filter indicators styling

- Adding missed Icomoon project file;

* Filter indicators styling

- Reverting mistakenly changed file;

* Filter indicators styling

- Minor fix to theme sass;
- Sync maelstrom theme;

* Fix indentation

* Set label and title to empty string initially.

* Keep the default snow.
---
 .../generator/GeneratorMetadataProvider.js    |   8 +-
 .../filters/components/FilterObject.vue       |   8 +
 .../components/TelemetryFilterIndicator.vue   | 142 +++++++++++
 .../telemetryTable/components/table.vue       |   5 +-
 src/styles-new/_constants-espresso.scss       |   2 +
 src/styles-new/_constants-maelstrom.scss      |   2 +
 src/styles-new/_constants-snow.scss           |   2 +
 src/styles-new/_constants.scss                |   2 +
 src/styles-new/_glyphs.scss                   |  10 +-
 ...s-12px.json => Open MCT Symbols 12px.json} | 162 +++++--------
 ...s 2018.json => Open MCT Symbols 16px.json} | 228 +++++++++++-------
 .../fonts/Open-MCT-Symbols-12px.ttf           | Bin 0 -> 2132 bytes
 .../fonts/Open-MCT-Symbols-12px.woff          | Bin 0 -> 2208 bytes
 .../fonts/Open-MCT-Symbols-16px.ttf           | Bin 18572 -> 18756 bytes
 .../fonts/Open-MCT-Symbols-16px.woff          | Bin 18648 -> 18832 bytes
 src/styles-new/fonts/openmct-symbols-12px.ttf | Bin 1888 -> 0 bytes
 .../fonts/openmct-symbols-12px.woff           | Bin 1964 -> 0 bytes
 17 files changed, 377 insertions(+), 194 deletions(-)
 create mode 100644 src/plugins/telemetryTable/components/TelemetryFilterIndicator.vue
 rename src/styles-new/fonts/{icomoon-project-openmct-symbols-12px.json => Open MCT Symbols 12px.json} (71%)
 rename src/styles-new/fonts/{Icomoon.Open MCT Symbols 2018.json => Open MCT Symbols 16px.json} (98%)
 create mode 100644 src/styles-new/fonts/Open-MCT-Symbols-12px.ttf
 create mode 100644 src/styles-new/fonts/Open-MCT-Symbols-12px.woff
 mode change 100755 => 100644 src/styles-new/fonts/Open-MCT-Symbols-16px.ttf
 mode change 100755 => 100644 src/styles-new/fonts/Open-MCT-Symbols-16px.woff
 delete mode 100755 src/styles-new/fonts/openmct-symbols-12px.ttf
 delete mode 100755 src/styles-new/fonts/openmct-symbols-12px.woff

diff --git a/example/generator/GeneratorMetadataProvider.js b/example/generator/GeneratorMetadataProvider.js
index 1668d72d4c..ae62f74862 100644
--- a/example/generator/GeneratorMetadataProvider.js
+++ b/example/generator/GeneratorMetadataProvider.js
@@ -99,10 +99,10 @@ define([
 
     GeneratorMetadataProvider.prototype.getMetadata = function (domainObject) {
         return _.extend(
-                {},
-                domainObject.telemetry,
-                METADATA_BY_TYPE[domainObject.type]
-            );
+            {},
+            domainObject.telemetry,
+            METADATA_BY_TYPE[domainObject.type]
+        );
     };
 
     return GeneratorMetadataProvider;
diff --git a/src/plugins/filters/components/FilterObject.vue b/src/plugins/filters/components/FilterObject.vue
index 6796c44f8a..af5ed4c31c 100644
--- a/src/plugins/filters/components/FilterObject.vue
+++ b/src/plugins/filters/components/FilterObject.vue
@@ -77,6 +77,14 @@ export default {
             this.$emit('updateFilters', this.keyString, this.updatedFilters);
         },
         updateTextFilter(key, comparator, value) {
+            if (value.trim() === '') {
+                if (this.updatedFilters[key]) {
+                    delete this.updatedFilters[key];
+                    this.$emit('updateFilters', this.keyString, this.updatedFilters);
+                }
+                return;
+            }
+
             if (!this.updatedFilters[key]) {
                 this.$set(this.updatedFilters, key, {});
                 this.$set(this.updatedFilters[key], comparator, '');
diff --git a/src/plugins/telemetryTable/components/TelemetryFilterIndicator.vue b/src/plugins/telemetryTable/components/TelemetryFilterIndicator.vue
new file mode 100644
index 0000000000..a2468fdbc5
--- /dev/null
+++ b/src/plugins/telemetryTable/components/TelemetryFilterIndicator.vue
@@ -0,0 +1,142 @@
+<template>
+    <div v-if="filterNames.length > 0"
+        :title=title
+        class="c-filter-indication"
+        :class="{ 'c-filter-indication--mixed': mixed }">
+        <span class="c-filter-indication__mixed">{{ label }}</span>
+        <span v-for="(name, index) in filterNames"
+              class="c-filter-indication__label">
+            {{ name }}
+        </span>
+    </div>
+</template>
+
+<style lang="scss">
+    @import "~styles/sass-base";
+    .c-filter-indication {
+        @include userSelectNone();
+        background: $colorFilterBg;
+        color: $colorFilterFg;
+        display: flex;
+        align-items: center;
+        font-size: 0.9em;
+        margin-top: $interiorMarginSm;
+        padding: 2px;
+        text-transform: uppercase;
+
+        &:before {
+            font-family: symbolsfont-12px;
+            content: $glyph-icon-filter;
+            display: block;
+            font-size: 12px;
+            margin-right: $interiorMarginSm;
+        }
+
+        &__mixed {
+            font-weight: bold;
+            margin-right: $interiorMarginSm;
+        }
+
+        &--mixed {
+            .c-filter-indication__mixed {
+                font-style: italic;
+            }
+        }
+
+        &__label {
+            + .c-filter-indication__label {
+                &:before {
+                    content: ',';
+                }
+            }
+        }
+    }
+</style>
+
+<script>
+    const FILTER_INDICATOR_LABEL = 'Filters:';
+    const FILTER_INDICATOR_LABEL_MIXED = 'Mixed Filters:';
+    const FILTER_INDICATOR_TITLE = 'Data filters are being applied to this view.';
+    const FILTER_INDICATOR_TITLE_MIXED = 'A mix of data filter values are being applied to this view.';
+
+    export default {
+        inject: ['openmct', 'table'],
+        data() {
+            return {
+                filterNames: [],
+                telemetryFilters: {},
+                mixed: false,
+                label: '',
+                title: ''
+            }           
+        },
+        methods: {
+            isTelemetryObject(domainObject) {
+                return domainObject.hasOwnProperty('telemetry');
+            },
+            setFilterNames() {
+                let names = [];
+                let composition = this.openmct.composition.get(this.table.configuration.domainObject);
+
+                composition.load().then((domainObjects) => {
+                    domainObjects.forEach(telemetryObject => {
+                        let keyString= this.openmct.objects.makeKeyString(telemetryObject.identifier);
+                        let filters = this.telemetryFilters[keyString];
+
+                        if (filters !== undefined) {
+                            let metadataValues = this.openmct.telemetry.getMetadata(telemetryObject).values();
+                            Object.keys(filters).forEach(key => {
+                                metadataValues.forEach(metadaum => {
+
+                                    if (key === metadaum.key) {
+                                        names.push(metadaum.name);
+                                    }
+                                });
+                            });
+                        }
+                    });
+                    this.filterNames = Array.from(new Set(names));
+                });
+            },
+            handleConfigurationChanges(configuration) {
+                if (!_.eq(this.telemetryFilters, configuration.filters)) {
+                    this.updateFilters(configuration.filters || {});
+                }
+            },
+            checkFiltersForMixedValues() {
+                let valueToCompare = this.telemetryFilters[Object.keys(this.telemetryFilters)[0]];
+                let mixed = false;
+                Object.values(this.telemetryFilters).forEach(value => {
+                    if (!_.isEqual(valueToCompare, value)) {
+                        mixed = true;
+                        return;
+                    }
+                });
+                this.mixed = mixed;
+            },
+            setLabels() {
+                if (this.mixed) {
+                    this.label = FILTER_INDICATOR_LABEL_MIXED;
+                    this.title = FILTER_INDICATOR_TITLE_MIXED;
+                } else {
+                    this.label = FILTER_INDICATOR_LABEL;
+                    this.title = FILTER_INDICATOR_TITLE;
+                }
+            },
+            updateFilters(filters) {
+                this.telemetryFilters = JSON.parse(JSON.stringify(filters));
+                this.setFilterNames();
+                this.checkFiltersForMixedValues();
+                this.setLabels();
+            }
+        },
+        mounted() {
+            let filters = this.table.configuration.getConfiguration().filters || {};
+            this.table.configuration.on('change', this.handleConfigurationChanges);
+            this.updateFilters(filters);
+        },
+        destroyed() {
+            this.table.configuration.off('change', this.handleConfigurationChanges);
+        }
+    }
+</script>
diff --git a/src/plugins/telemetryTable/components/table.vue b/src/plugins/telemetryTable/components/table.vue
index c0305e04d5..9e327b83be 100644
--- a/src/plugins/telemetryTable/components/table.vue
+++ b/src/plugins/telemetryTable/components/table.vue
@@ -106,6 +106,7 @@
             :row="sizingRowData">
         </telemetry-table-row>
     </table>
+    <telemetry-filter-indicator></telemetry-filter-indicator>
 </div>
 </template>
 
@@ -280,6 +281,7 @@
 import TelemetryTableRow from './table-row.vue';
 import search from '../../../ui/components/search.vue';
 import TableColumnHeader from './table-column-header.vue';
+import TelemetryFilterIndicator from './TelemetryFilterIndicator.vue';
 import CSVExporter from '../../../exporters/CSVExporter.js';
 import _ from 'lodash';
 
@@ -295,7 +297,8 @@ export default {
     components: {
         TelemetryTableRow,
         TableColumnHeader,
-        search
+        search,
+        TelemetryFilterIndicator
     },
     inject: ['table', 'openmct'],
     props: {
diff --git a/src/styles-new/_constants-espresso.scss b/src/styles-new/_constants-espresso.scss
index 8f9614fcd0..666a705111 100644
--- a/src/styles-new/_constants-espresso.scss
+++ b/src/styles-new/_constants-espresso.scss
@@ -117,6 +117,8 @@ $colorInfo: #2294a2;
 $colorInfoFg: #fff;
 $colorOk: #33cc33;
 $colorOkFg: #fff;
+$colorFilterBg: #44449c;
+$colorFilterFg: #8984e9;
 
 // States
 $colorPausedBg: #ff9900;
diff --git a/src/styles-new/_constants-maelstrom.scss b/src/styles-new/_constants-maelstrom.scss
index 8da8a14aae..5278ca76ef 100644
--- a/src/styles-new/_constants-maelstrom.scss
+++ b/src/styles-new/_constants-maelstrom.scss
@@ -121,6 +121,8 @@ $colorInfo: #2294a2;
 $colorInfoFg: #fff;
 $colorOk: #33cc33;
 $colorOkFg: #fff;
+$colorFilterBg: #44449c;
+$colorFilterFg: #8984e9;
 
 // States
 $colorPausedBg: #ff9900;
diff --git a/src/styles-new/_constants-snow.scss b/src/styles-new/_constants-snow.scss
index 4294393c68..3496c59a27 100644
--- a/src/styles-new/_constants-snow.scss
+++ b/src/styles-new/_constants-snow.scss
@@ -117,6 +117,8 @@ $colorInfo: #2294a2;
 $colorInfoFg: #fff;
 $colorOk: #33cc33;
 $colorOkFg: #fff;
+$colorFilterBg: #a29fe2;
+$colorFilterFg: #fff;
 
 // States
 $colorPausedBg: #ff9900;
diff --git a/src/styles-new/_constants.scss b/src/styles-new/_constants.scss
index 22c35398a7..91b1e81673 100644
--- a/src/styles-new/_constants.scss
+++ b/src/styles-new/_constants.scss
@@ -141,6 +141,8 @@ $glyph-icon-grid: '\e922';
 $glyph-icon-grippy-ew: '\e923';
 $glyph-icon-columns: '\e924';
 $glyph-icon-rows: '\e925';
+$glyph-icon-filter: '\e926';
+$glyph-icon-filter-outline: '\e927';
 $glyph-icon-arrows-right-left: '\ea00';
 $glyph-icon-arrows-up-down: '\ea01';
 $glyph-icon-bullet: '\ea02';
diff --git a/src/styles-new/_glyphs.scss b/src/styles-new/_glyphs.scss
index 6e6e683b4b..910f2f8369 100644
--- a/src/styles-new/_glyphs.scss
+++ b/src/styles-new/_glyphs.scss
@@ -30,10 +30,10 @@
 }
 
 @font-face {
-    // Use https://icomoon.io/app with icomoon-project-openmct-symbols-12px.json to generate font files
+    // Use https://icomoon.io/app with icomoon-project-Open-MCT-Symbols-12px.json to generate font files
     font-family: 'symbolsfont-12px';
-    src: url('./fonts/openmct-symbols-12px.woff') format('woff'),
-    url('./fonts/openmct-symbols-12px.ttf') format('truetype');
+    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;
 }
@@ -77,6 +77,8 @@
 .icon-grippy-ew {  @include glyphBefore($glyph-icon-grippy-ew); }
 .icon-columns {  @include glyphBefore($glyph-icon-columns); }
 .icon-rows {  @include glyphBefore($glyph-icon-rows); }
+.icon-filter {  @include glyphBefore($glyph-icon-filter); }
+.icon-filter-outline {  @include glyphBefore($glyph-icon-filter-outline); }
 .icon-arrows-right-left {  @include glyphBefore($glyph-icon-arrows-right-left); }
 .icon-arrows-up-down {  @include glyphBefore($glyph-icon-arrows-up-down); }
 .icon-bullet {  @include glyphBefore($glyph-icon-bullet); }
@@ -164,6 +166,8 @@
 
 /************************** 12 PX CLASSES */
 // TODO: sync with 16px redo as of 10/25/18
+.icon-filter-12px {  @include glyphBefore($glyph-icon-filter,'symbolsfont-12px'); }
+.icon-filter-outline-12px {  @include glyphBefore($glyph-icon-filter-outline,'symbolsfont-12px'); }
 .icon-crosshair-12px {  @include glyphBefore($glyph-icon-crosshair,'symbolsfont-12px'); }
 .icon-folder-12px {  @include glyphBefore($glyph-icon-folder,'symbolsfont-12px'); }
 .icon-list-view-12px {  @include glyphBefore($glyph-icon-list-view,'symbolsfont-12px'); }
diff --git a/src/styles-new/fonts/icomoon-project-openmct-symbols-12px.json b/src/styles-new/fonts/Open MCT Symbols 12px.json
similarity index 71%
rename from src/styles-new/fonts/icomoon-project-openmct-symbols-12px.json
rename to src/styles-new/fonts/Open MCT Symbols 12px.json
index f73ef211ae..7bd655c492 100644
--- a/src/styles-new/fonts/icomoon-project-openmct-symbols-12px.json
+++ b/src/styles-new/fonts/Open MCT Symbols 12px.json	
@@ -1,19 +1,35 @@
 {
   "metadata": {
-    "name": "openmct-symbols-12px",
+    "name": "Open MCT Symbols 12px",
     "lastOpened": 0,
-    "created": 1527031065005
+    "created": 1561483556329
   },
   "iconSets": [
     {
       "selection": [
+        {
+          "order": 12,
+          "id": 10,
+          "name": "icon12-filter",
+          "prevSize": 12,
+          "code": 59686,
+          "tempChar": ""
+        },
+        {
+          "order": 14,
+          "id": 11,
+          "name": "icon12-filter-outline",
+          "prevSize": 12,
+          "code": 59687,
+          "tempChar": ""
+        },
         {
           "order": 9,
           "id": 6,
           "name": "icon12-crosshair",
           "prevSize": 12,
           "code": 59696,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 11,
@@ -21,7 +37,7 @@
           "name": "icon12-grippy",
           "prevSize": 12,
           "code": 59697,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 10,
@@ -29,7 +45,7 @@
           "name": "icon12-list-view",
           "prevSize": 12,
           "code": 921666,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 6,
@@ -37,14 +53,14 @@
           "prevSize": 12,
           "code": 921865,
           "name": "icon12-folder",
-          "tempChar": ""
+          "tempChar": ""
         }
       ],
       "id": 0,
       "metadata": {
-        "name": "openmct-symbols-12px",
+        "name": "Open MCT Symbols 12px",
         "importSize": {
-          "width": 279,
+          "width": 384,
           "height": 384
         },
         "designer": "Charles Hacskaylo"
@@ -52,6 +68,28 @@
       "height": 1024,
       "prevSize": 12,
       "icons": [
+        {
+          "id": 10,
+          "paths": [
+            "M853.333 0h-682.667c-94.135 0.302-170.364 76.532-170.667 170.638l-0 0.029v682.667c0.302 94.135 76.532 170.364 170.638 170.667l0.029 0h256v-341.333l-341.333-341.333h853.333l-341.333 341.333 1.067 341.333h254.933c94.135-0.302 170.364-76.532 170.667-170.638l0-0.029v-682.667c-0.302-94.135-76.532-170.364-170.638-170.667l-0.029-0z"
+          ],
+          "attrs": [],
+          "grid": 0,
+          "tags": [
+            "icon12-filter"
+          ]
+        },
+        {
+          "id": 11,
+          "paths": [
+            "M853.333 0h-682.667c-94.135 0.302-170.364 76.532-170.667 170.638l-0 0.029v682.667c0.302 94.135 76.532 170.364 170.638 170.667l0.029 0h682.667c94.135-0.302 170.364-76.532 170.667-170.638l0-0.029v-682.667c-0.302-94.135-76.532-170.364-170.638-170.667l-0.029-0zM170.933 853.333h-0.267v-512l256 256v256zM853.067 853.333h-255.2l-0.533-256 256-256v511.733zM853.333 341.333h-682.667v-170.4h682.667z"
+          ],
+          "attrs": [],
+          "grid": 0,
+          "tags": [
+            "icon12-filter-outline"
+          ]
+        },
         {
           "id": 6,
           "paths": [
@@ -60,26 +98,11 @@
             "M597.333 768h-170.667v256h170.667v-256z",
             "M256 426.667h-256v170.667h256v-170.667z"
           ],
-          "attrs": [
-            {},
-            {},
-            {},
-            {}
-          ],
-          "isMulticolor": false,
-          "isMulticolor2": false,
+          "attrs": [],
           "grid": 0,
           "tags": [
             "icon12-crosshair"
-          ],
-          "colorPermutations": {
-            "1161751": [
-              {},
-              {},
-              {},
-              {}
-            ]
-          }
+          ]
         },
         {
           "id": 8,
@@ -95,39 +118,12 @@
             "M744.773 511.867c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
             "M744.773 791.36c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z"
           ],
-          "attrs": [
-            {},
-            {},
-            {},
-            {},
-            {},
-            {},
-            {},
-            {},
-            {},
-            {}
-          ],
+          "attrs": [],
           "width": 745,
-          "isMulticolor": false,
-          "isMulticolor2": false,
           "grid": 0,
           "tags": [
             "icon12-grippy"
-          ],
-          "colorPermutations": {
-            "1161751": [
-              {},
-              {},
-              {},
-              {},
-              {},
-              {},
-              {},
-              {},
-              {},
-              {}
-            ]
-          }
+          ]
         },
         {
           "id": 7,
@@ -136,24 +132,11 @@
             "M0 426.667h1024v170.667h-1024v-170.667z",
             "M0 853.333h1024v170.667h-1024v-170.667z"
           ],
-          "attrs": [
-            {},
-            {},
-            {}
-          ],
-          "isMulticolor": false,
-          "isMulticolor2": false,
+          "attrs": [],
           "grid": 0,
           "tags": [
             "icon12-list-view"
-          ],
-          "colorPermutations": {
-            "1161751": [
-              {},
-              {},
-              {}
-            ]
-          }
+          ]
         },
         {
           "id": 3,
@@ -162,40 +145,14 @@
             "M85.333 426.667h853.333c47.128 0 85.333 38.205 85.333 85.333v426.667c0 47.128-38.205 85.333-85.333 85.333h-853.333c-47.128 0-85.333-38.205-85.333-85.333v-426.667c0-47.128 38.205-85.333 85.333-85.333z"
           ],
           "attrs": [],
-          "isMulticolor": false,
           "grid": 0,
           "tags": [
             "icon12-folder"
-          ],
-          "colorPermutations": {
-            "1161751": [
-              {
-                "f": 0
-              },
-              {
-                "f": 0
-              }
-            ]
-          }
+          ]
         }
       ],
       "invisible": false,
-      "colorThemes": [
-        [
-          [
-            0,
-            0,
-            0,
-            1
-          ],
-          [
-            0,
-            161,
-            75,
-            1
-          ]
-        ]
-      ],
+      "colorThemes": [],
       "colorThemeIdx": 0
     }
   ],
@@ -206,9 +163,9 @@
     "showQuickUse2": true,
     "showSVGs": true,
     "fontPref": {
-      "prefix": "icon-",
+      "prefix": "openmct-symbols-",
       "metadata": {
-        "fontFamily": "openmct-symbols-12px",
+        "fontFamily": "Open-MCT-Symbols-12px",
         "majorVersion": 1,
         "minorVersion": 0
       },
@@ -217,7 +174,12 @@
         "baseline": 6.25,
         "whitespace": 50
       },
-      "embed": false
+      "embed": false,
+      "noie8": true,
+      "ie7": false,
+      "showMetadata": false,
+      "includeMetadata": false,
+      "showMetrics": true
     },
     "imagePref": {
       "prefix": "icon-",
diff --git a/src/styles-new/fonts/Icomoon.Open MCT Symbols 2018.json b/src/styles-new/fonts/Open MCT Symbols 16px.json
similarity index 98%
rename from src/styles-new/fonts/Icomoon.Open MCT Symbols 2018.json
rename to src/styles-new/fonts/Open MCT Symbols 16px.json
index 356d4204b8..7a35dbd1e9 100644
--- a/src/styles-new/fonts/Icomoon.Open MCT Symbols 2018.json	
+++ b/src/styles-new/fonts/Open MCT Symbols 16px.json	
@@ -1,8 +1,8 @@
 {
   "metadata": {
-    "name": "Open MCT Symbols",
+    "name": "Open MCT Symbols 16px",
     "lastOpened": 0,
-    "created": 1541830438012
+    "created": 1561482854927
   },
   "iconSets": [
     {
@@ -317,13 +317,29 @@
           "code": 59685,
           "tempChar": ""
         },
+        {
+          "order": 161,
+          "id": 142,
+          "name": "icon-filter",
+          "prevSize": 32,
+          "code": 59686,
+          "tempChar": ""
+        },
+        {
+          "order": 162,
+          "id": 141,
+          "name": "icon-filter-outline",
+          "prevSize": 32,
+          "code": 59687,
+          "tempChar": ""
+        },
         {
           "order": 27,
           "id": 105,
           "name": "icon-arrows-right-left",
           "prevSize": 32,
           "code": 59904,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 26,
@@ -331,7 +347,7 @@
           "name": "icon-arrows-up-down",
           "prevSize": 32,
           "code": 59905,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 68,
@@ -339,7 +355,7 @@
           "name": "icon-bullet",
           "prevSize": 32,
           "code": 59906,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 150,
@@ -347,7 +363,7 @@
           "prevSize": 32,
           "code": 59907,
           "name": "icon-calendar",
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 45,
@@ -355,7 +371,7 @@
           "name": "icon-chain-links",
           "prevSize": 32,
           "code": 59908,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 73,
@@ -363,7 +379,7 @@
           "name": "icon-download",
           "prevSize": 32,
           "code": 59909,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 39,
@@ -371,7 +387,7 @@
           "name": "icon-duplicate",
           "prevSize": 32,
           "code": 59910,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 50,
@@ -379,7 +395,7 @@
           "name": "icon-folder-new",
           "prevSize": 32,
           "code": 59911,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 138,
@@ -387,7 +403,7 @@
           "name": "icon-fullscreen-collapse",
           "prevSize": 32,
           "code": 59912,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 139,
@@ -395,7 +411,7 @@
           "name": "icon-fullscreen-expand",
           "prevSize": 32,
           "code": 59913,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 122,
@@ -403,7 +419,7 @@
           "name": "icon-layers",
           "prevSize": 32,
           "code": 59914,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 151,
@@ -411,7 +427,7 @@
           "name": "icon-line-horz",
           "prevSize": 32,
           "code": 59915,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 100,
@@ -419,7 +435,7 @@
           "name": "icon-magnify",
           "prevSize": 32,
           "code": 59916,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 99,
@@ -427,7 +443,7 @@
           "name": "icon-magnify-in",
           "prevSize": 32,
           "code": 59917,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 101,
@@ -435,7 +451,7 @@
           "name": "icon-magnify-out-v2",
           "prevSize": 32,
           "code": 59918,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 103,
@@ -443,7 +459,7 @@
           "name": "icon-menu",
           "prevSize": 32,
           "code": 59919,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 124,
@@ -451,7 +467,7 @@
           "name": "icon-move",
           "prevSize": 32,
           "code": 59920,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 7,
@@ -459,7 +475,7 @@
           "name": "icon-new-window",
           "prevSize": 32,
           "code": 59921,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 63,
@@ -467,7 +483,7 @@
           "name": "icon-paint-bucket-v2",
           "prevSize": 32,
           "code": 59922,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 15,
@@ -475,7 +491,7 @@
           "name": "icon-pencil",
           "prevSize": 32,
           "code": 59923,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 54,
@@ -483,7 +499,7 @@
           "name": "icon-pencil-edit-in-place",
           "prevSize": 32,
           "code": 59924,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 40,
@@ -491,7 +507,7 @@
           "name": "icon-play",
           "prevSize": 32,
           "code": 59925,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 125,
@@ -499,7 +515,7 @@
           "name": "icon-pause",
           "prevSize": 32,
           "code": 59926,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 119,
@@ -507,7 +523,7 @@
           "name": "icon-plot-resource",
           "prevSize": 32,
           "code": 59927,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 48,
@@ -515,7 +531,7 @@
           "name": "icon-pointer-left",
           "prevSize": 32,
           "code": 59928,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 47,
@@ -523,7 +539,7 @@
           "name": "icon-pointer-right",
           "prevSize": 32,
           "code": 59929,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 85,
@@ -531,7 +547,7 @@
           "name": "icon-refresh",
           "prevSize": 32,
           "code": 59930,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 55,
@@ -539,7 +555,7 @@
           "name": "icon-save",
           "prevSize": 32,
           "code": 59931,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 56,
@@ -547,7 +563,7 @@
           "name": "icon-save-as",
           "prevSize": 32,
           "code": 59932,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 58,
@@ -555,7 +571,7 @@
           "name": "icon-sine",
           "prevSize": 32,
           "code": 59933,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 113,
@@ -563,7 +579,7 @@
           "name": "icon-font",
           "prevSize": 32,
           "code": 59934,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 41,
@@ -571,7 +587,7 @@
           "name": "icon-thumbs-strip",
           "prevSize": 32,
           "code": 59935,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 146,
@@ -579,7 +595,7 @@
           "name": "icon-two-parts-both",
           "prevSize": 32,
           "code": 59936,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 145,
@@ -587,7 +603,7 @@
           "name": "icon-two-parts-one-only",
           "prevSize": 32,
           "code": 59937,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 82,
@@ -595,7 +611,7 @@
           "name": "icon-resync",
           "prevSize": 32,
           "code": 59938,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 86,
@@ -603,7 +619,7 @@
           "name": "icon-reset",
           "prevSize": 32,
           "code": 59939,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 61,
@@ -611,7 +627,7 @@
           "name": "icon-x-in-circle",
           "prevSize": 32,
           "code": 59940,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 84,
@@ -619,7 +635,7 @@
           "name": "icon-brightness",
           "prevSize": 32,
           "code": 59941,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 83,
@@ -627,7 +643,7 @@
           "name": "icon-contrast",
           "prevSize": 32,
           "code": 59942,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 87,
@@ -635,7 +651,7 @@
           "name": "icon-expand",
           "prevSize": 32,
           "code": 59943,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 89,
@@ -643,7 +659,7 @@
           "name": "icon-list-view",
           "prevSize": 32,
           "code": 59944,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 133,
@@ -651,7 +667,7 @@
           "name": "icon-grid-snap-to",
           "prevSize": 32,
           "code": 59945,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 132,
@@ -659,7 +675,7 @@
           "name": "icon-grid-snap-no",
           "prevSize": 32,
           "code": 59946,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 94,
@@ -667,7 +683,7 @@
           "name": "icon-frame-show",
           "prevSize": 32,
           "code": 59947,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 95,
@@ -675,7 +691,7 @@
           "name": "icon-frame-hide",
           "prevSize": 32,
           "code": 59948,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 97,
@@ -683,7 +699,7 @@
           "name": "icon-import",
           "prevSize": 32,
           "code": 59949,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 96,
@@ -691,7 +707,7 @@
           "name": "icon-export",
           "prevSize": 32,
           "code": 59950,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 114,
@@ -699,7 +715,7 @@
           "name": "icon-font-size",
           "prevSize": 32,
           "code": 59951,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 144,
@@ -707,7 +723,7 @@
           "name": "icon-activity",
           "prevSize": 32,
           "code": 60160,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 104,
@@ -715,7 +731,7 @@
           "name": "icon-activity-mode",
           "prevSize": 32,
           "code": 60161,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 137,
@@ -723,7 +739,7 @@
           "name": "icon-autoflow-tabular",
           "prevSize": 32,
           "code": 60162,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 115,
@@ -731,7 +747,7 @@
           "name": "icon-clock",
           "prevSize": 32,
           "code": 60163,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 2,
@@ -739,7 +755,7 @@
           "name": "icon-database",
           "prevSize": 32,
           "code": 60164,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 3,
@@ -747,7 +763,7 @@
           "name": "icon-database-query",
           "prevSize": 32,
           "code": 60165,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 67,
@@ -755,7 +771,7 @@
           "name": "icon-dataset",
           "prevSize": 32,
           "code": 60166,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 59,
@@ -763,7 +779,7 @@
           "name": "icon-datatable",
           "prevSize": 32,
           "code": 60167,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 136,
@@ -771,7 +787,7 @@
           "name": "icon-dictionary",
           "prevSize": 32,
           "code": 60168,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 51,
@@ -779,7 +795,7 @@
           "name": "icon-folder",
           "prevSize": 32,
           "code": 60169,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 147,
@@ -787,7 +803,7 @@
           "name": "icon-image",
           "prevSize": 32,
           "code": 60170,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 4,
@@ -795,7 +811,7 @@
           "name": "icon-layout",
           "prevSize": 32,
           "code": 60171,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 24,
@@ -803,7 +819,7 @@
           "name": "icon-object",
           "prevSize": 32,
           "code": 60172,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 52,
@@ -811,7 +827,7 @@
           "name": "icon-object-unknown",
           "prevSize": 32,
           "code": 60173,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 105,
@@ -819,7 +835,7 @@
           "name": "icon-packet",
           "prevSize": 32,
           "code": 60174,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 126,
@@ -827,7 +843,7 @@
           "name": "icon-page",
           "prevSize": 32,
           "code": 60175,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 130,
@@ -835,7 +851,7 @@
           "name": "icon-plot-overlay",
           "prevSize": 32,
           "code": 60176,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 80,
@@ -843,7 +859,7 @@
           "name": "icon-plot-stacked",
           "prevSize": 32,
           "code": 60177,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 134,
@@ -851,7 +867,7 @@
           "name": "icon-session",
           "prevSize": 32,
           "code": 60178,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 109,
@@ -859,7 +875,7 @@
           "name": "icon-tabular",
           "prevSize": 32,
           "code": 60179,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 107,
@@ -867,7 +883,7 @@
           "name": "icon-tabular-lad",
           "prevSize": 32,
           "code": 60180,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 106,
@@ -875,7 +891,7 @@
           "name": "icon-tabular-lad-set",
           "prevSize": 32,
           "code": 60181,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 70,
@@ -883,7 +899,7 @@
           "name": "icon-tabular-realtime",
           "prevSize": 32,
           "code": 60182,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 60,
@@ -891,7 +907,7 @@
           "name": "icon-tabular-scrolling",
           "prevSize": 32,
           "code": 60183,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 131,
@@ -899,7 +915,7 @@
           "name": "icon-telemetry",
           "prevSize": 32,
           "code": 60184,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 108,
@@ -907,7 +923,7 @@
           "name": "icon-timeline",
           "prevSize": 32,
           "code": 60185,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 81,
@@ -915,7 +931,7 @@
           "name": "icon-timer",
           "prevSize": 32,
           "code": 60186,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 69,
@@ -923,7 +939,7 @@
           "name": "icon-topic",
           "prevSize": 32,
           "code": 60187,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 79,
@@ -931,7 +947,7 @@
           "name": "icon-box-with-dashed-lines-v2",
           "prevSize": 32,
           "code": 60188,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 90,
@@ -939,7 +955,7 @@
           "name": "icon-summary-widget",
           "prevSize": 32,
           "code": 60189,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 92,
@@ -947,7 +963,7 @@
           "name": "icon-notebook",
           "prevSize": 32,
           "code": 60190,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 118,
@@ -955,7 +971,7 @@
           "name": "icon-tabs-view",
           "prevSize": 32,
           "code": 60191,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 117,
@@ -963,7 +979,7 @@
           "name": "icon-flexible-layout",
           "prevSize": 32,
           "code": 60192,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 152,
@@ -971,7 +987,7 @@
           "name": "icon-generator-sine",
           "prevSize": 32,
           "code": 60193,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 153,
@@ -979,7 +995,7 @@
           "name": "icon-generator-event",
           "prevSize": 32,
           "code": 60194,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 160,
@@ -987,7 +1003,7 @@
           "name": "icon-gauge",
           "prevSize": 32,
           "code": 60195,
-          "tempChar": ""
+          "tempChar": ""
         }
       ],
       "id": 0,
@@ -1602,6 +1618,46 @@
             ]
           }
         },
+        {
+          "id": 142,
+          "paths": [
+            "M896 0h-768c-70.601 0.227-127.773 57.399-128 127.978l-0 0.022v768c0.227 70.601 57.399 127.773 127.978 128l0.022 0h256v-512l-192-192h640l-192 192v512h256c70.601-0.227 127.773-57.399 128-127.978l0-0.022v-768c-0.227-70.601-57.399-127.773-127.978-128l-0.022-0z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 1,
+          "tags": [
+            "icon-filter"
+          ],
+          "colorPermutations": {
+            "11841841841": [
+              {}
+            ]
+          }
+        },
+        {
+          "id": 141,
+          "paths": [
+            "M896 0h-768c-70.601 0.227-127.773 57.399-128 127.978l-0 0.022v768c0.227 70.601 57.399 127.773 127.978 128l0.022 0h768c70.601-0.227 127.773-57.399 128-127.978l0-0.022v-768c-0.227-70.601-57.399-127.773-127.978-128l-0.022-0zM896 895.8h-256v-383.8l192-192h-640l192 192v384h-256v-767.8h768z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 1,
+          "tags": [
+            "icon-filter-outline"
+          ],
+          "colorPermutations": {
+            "11841841841": [
+              {}
+            ]
+          }
+        },
         {
           "id": 105,
           "paths": [
diff --git a/src/styles-new/fonts/Open-MCT-Symbols-12px.ttf b/src/styles-new/fonts/Open-MCT-Symbols-12px.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..0e3434dea808f82c1d499baf70977ff7dffaa971
GIT binary patch
literal 2132
zcmbtVO>1LS7=F$@Y1*bGGuJlJ(K6;vN+JWzG&gBu9nryoc1A3PX%h!rbkZcIgZZM(
zVC!n|4^&VW;=+v!$rV>F9C0yp>uf|2L@0<K7+ffbyY^n6b8^$k2-QVTc;EB9-{-#P
zBM<<_a2FD@E3236GmlMuLCsgBTcvuj)xG!a`+%6D{GeLgZgD<K`8UoZ)!Ods3-@-v
zq5LNxZ*EqK<;dP2CNOl3_W4aJhWF*yl<!iW-mJHGrn*EJ`k3sQTC-G?9ivV80p)1D
zxYI%eZ&Ci4a;#CTSImPCe*l63z(}>4+ik9sV<fBWkaADFgCW{JFjR)U-YkAcMvN-I
zfg!l;N5>Vw^W=T+KCVa-jj9*@5z`<@t}3c}Tm#zl>B+*ErH;x{8`AcG&NPk@81xW`
zb(7t+cjS4rf>NS8t0m$66g`N3$GE|&z_|9isX0H~pOufIm`_|oH$h5L=DNDGq%?65
z;j=GkVv`UyM>PSXj22wOnSp8skXz8jHDfdz`F}dk2|zk{oXfGoB4SQPGnOeVF_E$7
z=ge#(nU?vZ!cw`sB;a;r!R-i7NzxIerK9{}S>#3DbzG;sXgEtH-9<mAi71}J(}S7&
zIYrtOrWKdMG_5(SU%}|8%tr-&TE`OtM+KvET*uFU*fHSoM<2LCc#ir?cFeCS*`;yt
z#EQ6?8L}eQoB~1tBj4!=M@70su11pFakzR9M&8l6xa*!{blH<Jb|sEWxQr#NVjXYb
zO<-a&7{8F1%g$%)sCfbwC+LUIi{Y?HrbO-qF)@Ho@*m9q<$N-c%O#TY|DMGYxt=B0
zpI=Sd(zu*R+J;p87>oB9f9%!wR<p6M@{(K)SjgS?s~PWVFrfKSK9@{nq~`9geL<Cb
z?ZhnHBcAX__6QT)6jN=CV%);RW0H>E7H(7T1p9Fj@P-JB{fk={f)SH@VA;{gTs9FG
z3aEBj+#6+(j@xOR%TIfV+jd+Q6hGwg?af+;#<^*G+I5sb=E07;c_j!+EX3NRg?6a9
ze&+eVF{Yji;QMFu>knstW$JG7rs=^L{RXK+$wB_`Hfjw*JxfneVM^|k!S}R}wMPh(
zIFD<18=r_Z(Gs6ht1^bLqhBa}$F=7m3*$4tuHXyYUxR^R9Qb-k{Vg8{i2w5O5YPRK
zJ`Pg<k&i=oQrPNs3#hl}A}u{^AdFvpEUCZa;{Yy-5g!lnC3xA#LHc~|;}Ejqm6cYd
zF|&MiZDw`1zR|30&!p|v4pz`Y1r5w#8CS8!c@?{;V*^dpuuVA)n?5^*%GUPnW+RqP
z&7#1NEgEmrseu?>Qv4S@UH(&s->6jY)QVfU!KGE%oEnPQI%UqqW}_XeRvMM9V!Kj~
zZS2ObmzvAXW+R0~{pD?bdsVkj^`pptxeChEZLozgTt|ss%OusM6i<ix2mFum4_FO!
Axc~qF

literal 0
HcmV?d00001

diff --git a/src/styles-new/fonts/Open-MCT-Symbols-12px.woff b/src/styles-new/fonts/Open-MCT-Symbols-12px.woff
new file mode 100644
index 0000000000000000000000000000000000000000..e76e6ed5a69a2f5b50408430906cff090869e22f
GIT binary patch
literal 2208
zcmbtV&ue2<6#nkJX*x|yr_VNVMu#z(ltc#FX<qunI)e@lw2oLR(<TZoI%yKq!Tcy~
zhG|`i|3C%Dg}BhA<cTX6j;o<t-H0HFP!LfFE)>LF`<~yqdFf<?iqIR*z27<aJLlYY
z&U-iamKPSFz;WhN44QSdqYHj~EU#Q~0Ck4e+ahP5xbRi6R@kI%gZj53?FZj~SSf7N
zW=&HUuE<EGy89Mw*8u&7$ozxd?>5SX63};_`?Dg^y+7;?8flYQ<0Ae0`kRefbBDG+
zsXr@np$$|UMe@SusK-Qf%WBpNJIouNq8>LA#XI#vtxVf%%snY$AAJ1NW@Ed_W4(LK
z(?nYDsrS)G&PSGH-|MXEcVyK7_1>XIdNsk<0pHgT{fD@&DYTfHa+MJ`bC|PalDdQ_
zO>#QA3UqC}rfH3s{g8<?#0pwuD8$?8cE&&QeeN=9JJp^tn(}{%9mIa1UvE}m$naQi
zGbFzZ;fTZo;ThT~N}4*))n@(L8R9U8M_w`_Jsh?Ni~s}lRy@O56NN+$3z(ZX$<6ft
zY`z<UcJU;SlNeS}dn}es*ean$v(D^{J)KHtbnYm>SSl?lcrBgxTFMtqyQ;W&lv^mN
zoXUBw=av>Mcd=-y7{s*sRy>VodLwsZs*J7dL{cl;PRt~_8LXB>KFagaTE0>^%3H1D
zJVE@!mIa?ba^NZDyYiT<Sdde*N<*-jGihi064Atr042c6wOYy*PmjnmNON{wp5BL*
zb4@IE-FK}vYcj~HByj~-v4|C{;ceUlM#sX*OR1UZ*{l<@Pr&K~d;dk%KdjP|YVHL!
z+JjHx_s0KvHl3QAOQmQ3y{dC_ot?Sv`g+>Y*40$nv9!#`Sly@pF{{g#)!LW16wd%A
z^7eyl)&~akSbo;er&C#NX79JIBI({dF$#OcH~g_4VU$g=r7<$Gg@?zYUDFn}iGF;m
z1HUNvg{TDUmrPs=M{V{X;l!dd)2XBqAmvK1H?pB!uT?*v8~2fPoTSdne8|_gvl<)f
z=f|CK&lQD}4=3s6L{Ze3h`A~A%}8VI?6to!DAxt><8!&SM{960`8Ih@Gw5UPAbBY{
zI6wLtjRld;PDc?p(Ys>tUhQJTh+qsC@iN}SXKGb#s?TYah!O0V8_HD3FngzAd=cbT
zhz1_Q?8iZ1*R<abaESP?0Qd2|e=)#e+CK?!1WzePZnu!!J(s!D!4`(`Yk)QFcLN;4
zW&TTbIDNbcUI}oRoG$|$!L)jHd9z%fSh}$~v9eoRZ&bG@GS21>ma&O4>X^V1ZeW$`
z3U*P$IvS{An|cNgIXn6C*7lu7J)W7ILY^*L+`L0l9dS}7F?GuLr*ywnuH3B_ws4C_
ztFSm#6tH#5m<x@1GhQjz%UgwJxfEaDjo&ObmKu%vBo@q*H~H)pQ$DFjf&X%4lxSOL
V3FEklB3VlmsS^K@*^U1k{{RSQcRc_A

literal 0
HcmV?d00001

diff --git a/src/styles-new/fonts/Open-MCT-Symbols-16px.ttf b/src/styles-new/fonts/Open-MCT-Symbols-16px.ttf
old mode 100755
new mode 100644
index ac0509be5576ecbd01a099f866322bff24544094..d6dd1b8b7870be7dee6d71cd3b18b787425c8d59
GIT binary patch
delta 603
zcmeB~$arKD;{?U}=lca27#L+37#LF06N?Lgv;dIb0Hit6b1KtjAFP=T<aaPIIKIh9
zO-vD;5cZyd!MOw|Z<YZR;9z6{s&!ri<f~-lmQ;LW=Qs`IUtnNhV#vu)PV6{c9>Kui
z3gj~~<tA1XF!V9ZV_<N*0#vV%mzbL>q4;F>YoNdvpa#8y{NfS@W}p;<r^>_~lNr?~
z`!LEg>xjl|&SN~zU(X1VVF5x0F`#jZN^GKnB4Wmhg6fLwf{I3Frh+DF%FGRa8BD#s
zO&J*uFf|-t1hZKfyiGx(ObiDO`~$L?fozabOmOoA7^IL*gqkI&C}^%I4kQ)9rfLC=
z1!?s*{m*dVZ^MEAK&QfthRFPBU~B+d(ZIafNN}E^OlD7aY&^fsR|amNlY!u-1;-B<
zJ^783Ib*|Q73a;9-#c?`zV1ASvHl;24u=y*1V;(SEzTa!Eu8PTthh?J)^VNTddBU<
zy^TkL$A~A1XBN*FUJc$N-Ui-jydU`3_+<F{_-^n!@E_xUB;X*BBQQbWm0*nEJfSe5
zdBQBhD#BsHeZs4RuZb{;Xo*CK)QB7rc_o@AdO*xTtVNtp+(x`ge3ke$@h=iZb`n!0
z_DRM`ev_IZ^-nrO`kqXm%rV(4*-dh6a&zRq$s5Q=$xo6$r4XhtP2n5RAE4-HV3@<e
S3-S{K)8s-A;m!7LzDxj>-JQ+=

delta 410
zcmX>yiLqxQ;{?U}r~7#s7#L+37#LF06N?Lgv;dIb0Hit6b1Ks;{LcFT`5g=ljt&{A
zi7CR?&czH2PA7o!W*I;M4n~$b1_oy!mq8^Xx1{17JI84tUj?Y=M^1inVo`IV9Rq_a
z$ozk~i4_G5Jq+_07~DX7g}lVvR0+i=vtI)RY#11r^a}EeOBk3zW_jdH+%cI^b+Qkm
zJhPT))aE?K<NTW+3eGl^DcoXrI-cL=D+4zRNFl=w-g+w-J$Z(+Ib+@A3(lK2ce~7C
ztbfD7#39Gg!fD1C$2o)Z36~sK1Xmf?1g<yS3EYRc@9^;OxbV#5xx_2OtHtZUJBxP%
z?=e0Lz9zm`{000y{I3MW1gr$62(k%!2r&qG2(1%3C(IyhAsiyyAiPHSiU^a4nn<3=
z6j1@uEYVwHdSW}oo{6i7hln?b&y$dmu#?CzkmQhDAmt>rLRv_=L&id;KvqOHMs|ao
go7@7qTk<UOHu5D33<?ek3xMut1me2Qx7@Or0D6gO;{X5v

diff --git a/src/styles-new/fonts/Open-MCT-Symbols-16px.woff b/src/styles-new/fonts/Open-MCT-Symbols-16px.woff
old mode 100755
new mode 100644
index c73a38c32223ba87f1a1247375b47094702a50b8..42a2473a58459bf03d26fd5f53e3a36228dc1a0a
GIT binary patch
delta 637
zcmcaHk#WLgMzL~#H#Y`G1|aa9z`zZrT^Lv<AM_BLsH0l{e7|6NVsQZj1LGN>6bBRw
zq~}zo0mZH`FgU&e;n@dkW@n@(rZ6x#9{{Q`17Xn#Ved15f<Un!K)wnHb1<?rWaO4q
zFfh2tFfcFyg_sz=v2&cx$xjBVa|4Po0tFeFI!>2I<R(@W=rAz2D*#nNa390Gyu{p8
zpqK+tqaFw=KAHWxAiuZ-==y?*e`YhPPoBXj&#WUFvw0WeasGNnpk4+RAY>2&8mp+p
zCMqZ*W~?ZvuE;K^Xk=z8XriXf-0+vd)Z5#Xk>LPS!vRJxn}xyK6eP;TaNxi{Ae$M;
z1{no%F~mFp1}S6{p=Jpx3Ysg514%`&sail|L0Y{{|1%u;+i>7N12a%J#At}jp9aPT
zpcM_wo9hJU8Omh#bjQZ?+k9o<209rCZd!1F!VXMNws1CQY?xf&ym_*{3&&<<mpP2}
z|2T9woH!ylN;qzD_Hb_De8*+QRl>E7>kQX3ZYS<-JQ6%cJV`vWc)svz@D}kl@J{3X
zz{kcX!`H`mgWrMw82=*y2Z0=c2?DPKV+7|3g$d0QW)W5q4ioMZUL|}@gh@n8BtoP{
z<cP>C(KOKmVg_O@;(X#Z;#K0S#IK2ekti~em?E)HGEVZF)C{SA(izhCWcp-|$!5uJ
kl4FybBlk_-Kt4)-lKd%!FokIf-+<l#MMuNtJhv<+0PV}5YXATM

delta 452
zcmbO*neoO%Mv-!VH#Y`G1|aab!N3isdnSt5)<50Po1R!)z`($G1}Mk@#RBO$m1#h+
zD+~;d4j^pdcitx>H8F*O!C3^T#tejot(}WAfPz3VA0S@^ggF>l>N0XmDu7}jGk<{a
zJ9duKIr+&zb*>peHUB`ks5#LtH?g8Xhk?NjB&Yz!Jq+{m5_405VjT<&OnM-!_+<9$
zg8bqVpu2ZW{4<+Tb@B{Gd1fuqsLi_=kMnQV6`E}*Q@F+MbUeS!R|aktpfL;#H+bu<
zVD#iC&gP7DlVw~sZ@%s_hq3+*2NQ=JM+>JJXB_7Y&L>=QToGJlTobt7a3^pd;=aSf
z!{fp;kLMDv46hci1Me)}4ZO$rEclxEUhx<3_wc_G5EHNxm?Fp~=pn=)<RP?9=$tTv
zu!V4laD(s~;VU9cB5EReB2z>KM6*P1iRp>$5PK%BA|4{%AU;n*M#4@a!$6Wla)FeS
x)Cy@K=?)nSnF3i6*%;Xka&B@9<Zj8c$lJ)5C@?5EC@cWF9~4`4o7LR2m;n7Jaa{la

diff --git a/src/styles-new/fonts/openmct-symbols-12px.ttf b/src/styles-new/fonts/openmct-symbols-12px.ttf
deleted file mode 100755
index b985d7eb205a3dfd014c32ddc12e0c7c4632c954..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1888
zcmbtVO>7%Q6#iy+{Szm0>gJ~uMb$cvY*Z<Zy>Vio6^all6j33yN;n{B*3Q;xYwsG{
z6%Hrv94LZI@0_xNGeR7yoIv7O1c!1!NI=>Ps>CgL`DS(<oJ#2>6TNxg_kQNhzL{|#
z0F2{f=qSB?ZONKEJ@*MM-%&Q}ExUcD{ipzlIr48BcDGG^iu?g}veDeR@#NQApOHTV
zw7c7my_M-1j{&1e|LQgki9P)X@-N93wp+da^ga=c?>U)GuWoCbVvGDQ^3yH5-^LU^
zB0rFR*KRpWPv+hSVyv&tx4mwU`{YQhNk4SGChj6e-#zU|T0RZ6c#LH+Mm{<Ow|#W1
z0YRYO5AI`4r_d>TF&w4>an7=0g<?>ej0w4jxURA)w5F8bz>Cx=B%$$7z}znf{{{hV
zATB8^g5PH!Fk`gdgo=1e&HUg<%LplEB&@w(qLj%Eq))x71c)P@8B@aMFhj87<jDFO
zP<=_2Qxmh<v}fA*wSjLy_qop`CXnGqa+&2=b|$+bfsjC3-`y2{z(NC}fkHZG-}fca
z)_q@AVrK$h+vi&2ID;IPZ~?F58m{9uJ_M$w<GK0#N@aD~n#~-8#WD88Igv<<LQzy-
z5mO`hxcJfazg;cltJQpA^=U1htA?KHP`^{KbnQaEU}?IX53%@y`G--%XsNY5xh`d(
z01FNFqH5ab3XE8O(_b#+mvuD{{umNj?%iWoVPAP0j+_yucqkcpFmmDrIXD#ESI5F*
z3Qs=Dn?auEnq~iT+4=ZPhG&qqW@lC^`J9kIwkylCkq+G-?7C;y7XsugE2nSB`Cxab
zl@0FM1#4m8OTsCDl^d)}BFMs<%=`D|jbHw}K6&vUjLRnl{Cs{>-TP2SJLB(*yrF6^
zN4-<^<kUm_{}zW4$#A8R$TZ0{{?<r+=u2T5=kOZ-78BwPI^-%z^wrB%?}7a2NaO41
z6$$2s88R|~pCY?X`+E^Kh#y5b#=Cwo!g1Q~ML31$MP9yrV~my;=n1igG#*A+r~QKn
z8^nVM$1uxx6UN7B|0=>MRK%LscHCCIx7gij)x2hRv23;b@X&?>7cJD$!y>xaA+FKh
zBwj=r79;u_PN#d*bIo$GgbgNi=)B1w7bZiBD4k^SljL4?8h4s@2UoeN2JUdzHaaI+
z@RH~D%!cDS9lPgjnYA7Ba^1V)d2SJx)Cc$Y$qm&r*#?_kbFf8Qjh!=bnSJzdg(90%
M<c*O34W2Rn1KI&S-v9sr

diff --git a/src/styles-new/fonts/openmct-symbols-12px.woff b/src/styles-new/fonts/openmct-symbols-12px.woff
deleted file mode 100755
index da269d12ef2ca06e048b4c2e6dfdbd1a18eaa760..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1964
zcmbtV&u<$=6#iz{KN2T$;^s#ws;YGy*%eZpc;m!CD-<CVD59#=D&c^jaU9n!*t^Dd
zRfm58B#PkDe<2H;5vM9QB#t0BzyTo@rM*;@xD_won_U|RDZON(Z{~a7yf<(5&5U#R
z+U6z{*y3MfLXSIvE&O=9c4OHF)ELzr!PJ@apH`aX7PUI<?*wOCk8-tghniv07GJ@1
zt+9WL+C}1?;OXxleo?QM_kf7RtqW4!$m2RiYENh{3gU<65A|lZ2SjISTY}jmpy5{N
z7cJ60BQSQ<UbEa|-soH6qcMX|oN}{Dt<Ibag5{^@KWMp~F2DD)p`S@+n!D;AqV&0M
z{7C!rU{sH>s>W%LHZ?tJ3Eu#G-+bUdz=lasQN*BGn#9;kCfRd@XwWCHRcM<!sz^1V
z=OcKTV}cbl_@`hU75smEpBl(lG*|wg^FJ|SG~cB5ct`jA_;3^tffa(ek5-5R?Ff?7
zuWJA?Bva!WED|FWGfs`HZvdrNbUNKJnnioA#;^6g2uzRr9K$41+(;(18colo*Muk`
z#@4}s@_Z)hll3(-*?XQRhOy;&l8Ke^J>!ULP2emtSjHv1i5s|yk8l^5nT=%@vTMcl
zReL^l0#_&K@e3-RRJpt=y{2YH_(}ew>wmwV%a%&n-1`4V^+G9_DGkPVbGB(*%I0jt
zlzzz7SBxKe4ZLME4rN`UuL%?N55sK6mzs<yf0(c4va6=<`ws_(q<ingRajTvhGS=h
z86HYX4n{g&kY_`fo<0^HQ*iQO+#Iqz*EH*wNiW3aQappSJwLZr%x07jDOZ|jBNL|A
zKXA@%E&9mVcE;S6{@KA`)Eb;~i}qsQ6N8-(JJa71L(vLuGVkBpw|@QW=G5iCF(FS1
z_~oS?eeZ)Y+?o6a@rLTg82wK5lhY6Jzgrx5j0GzNhJ=Z2@Ha=s;amc<xPUkCL`^FB
z#gSFU(9<thzX#gKTN2-fuShXAh!D>>ehzh$`uib|kUt7}lz07d$Ya#+hdhB7RaV}9
zWSq)H&IH^*62FDqr2cWpBjo*%M={TL6Zprde-rWqifY4cRh?#~yVTil?z)Z6Qo(NZ
z;G%^p95hiu7fa}1pL~~kgM0}E*!1XaSKFQ2u45JQE7)d0o0GTc<iMg!9xJC={4}xG
ztF=3gavRsVsT%HZ*JZR%v*4!dbgf#|skY1A>YlZ`Z(XUlS6$c1V^e={m!DkIHIp)w
dS+y$msO_?H7Ot?4F0K+%oIG!Y{5N<``xg%fKZO7Q