@beacon-interactive-systems-llc/beacon-platform-ui 19.3.2 → 19.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beacon-interactive-systems-llc/beacon-platform-ui",
-  "version": "19.3.2",
+  "version": "19.3.4",
   "peerDependencies": {
     "@angular/common": "^19.2.14",
     "@angular/core": "^19.2.14",

package/styles/_filters.scss

@@ -7,11 +7,13 @@ $platform_filter_contrasts: (
     filterChip: $beacon-green-100,
     filterChipText: $beacon-black,
     filterDropdownFocus: $beacon-dark-blue-200,
+    filterDropdownActiveText: $beacon-cyan-600,
     filterDropdownText: $beacon-cyan-600,
     showingRowBg: $beacon-white,
     showingRowColor: $beacon-green-500,
     superTitleBg: $beacon-white,
     superTitleColor: $beacon-dark-blue-300,
+    filterChipClearIcon: $beacon-gray-400
   ),
   dark: (
     filterBackground: $beacon-gray-700,
@@ -21,25 +23,29 @@ $platform_filter_contrasts: (
     filterChip: $beacon-dark-blue-400,
     filterChipText: $beacon-gray-300,
     filterDropdownFocus: $beacon-gray-600,
+    filterDropdownActiveText: $beacon-green-650,
     filterDropdownText: $beacon-green-650,
     showingRowBg: $beacon-gray-700,
     showingRowColor: $beacon-green-650,
     superTitleBg: $beacon-gray-700,
     superTitleColor: $beacon-gray-300,
+    filterChipClearIcon: $beacon-gray-300
   ),
   highcontrast: (
     filterBackground: $beacon-black,
     filterBorder: $beacon-white,
     filterShadow: none,
     filterSearchIcon: $beacon-white,
-    filterChip: $highcontrast-bright-green-300,
+    filterChip: $highcontrast-bright-green-100,
     filterChipText: $beacon-black,
-    filterDropdownFocus: $highcontrast-bright-blue-200,
+    filterDropdownFocus: $highcontrast-teal-100,
+    filterDropdownActiveText: $beacon-black,
     filterDropdownText: $highcontrast-bright-green-200,
     showingRowBg: $beacon-black,
     showingRowColor: $highcontrast-bright-green-200,
     superTitleBg: $beacon-black,
     superTitleColor: $beacon-white,
+    filterChipClearIcon: $beacon-gray-400
   )
 );
 
@@ -160,7 +166,7 @@ $date-filter-width: calc(1em * 8);
 
       .filter-chip {
         @include font-size--default-md;
-        @include font-weight--semibold;
+        @include font-weight--regular;
         @include themify($platform_filter_contrasts) {
           background: apply('filterChip');
           color: apply('filterChipText');
@@ -173,13 +179,15 @@ $date-filter-width: calc(1em * 8);
         padding-right: .25rem;
 
         &::after {
-          @include font-color--semi-muted;
           content: "close";
           font-family: "Material Icons";
           position: relative;
           text-align: end;
           top: 0.1rem;
           z-index: 99;
+          @include themify($platform_filter_contrasts) {
+            color: apply('filterChipClearIcon');
+          }
         }
       }
     }

package/styles/_forms.scss

@@ -21,13 +21,14 @@ $platform_form_contrasts: (
     quillToolbar: $beacon-dark-blue-50,
     quillButton: $beacon-gray-400,
     quillInlineContainerBorder: $beacon-dark-blue-200,
+    pencilEditIconColor: $beacon-gray-300
   ),
   dark: (
     formText: $beacon-gray-300,
     formPlaceholderText: $beacon-gray-400,
     formInputBackground: $beacon-gray-600,
     formInputBackgroundHover: $beacon-gray-600,
-    formInputBorder: $beacon-gray-300,
+    formInputBorder: $beacon-gray-400,
     formInputBorderActive: $beacon-dark-blue-400,
     formControlSelected: $beacon-dark-blue-400,
     formControlSelectedText: $beacon-cyan-300,
@@ -42,11 +43,12 @@ $platform_form_contrasts: (
     quillToolbar: $beacon-green-700,
     quillButton: $beacon-gray-300,
     quillInlineContainerBorder: $beacon-gray-400,
+    pencilEditIconColor: $beacon-gray-300
   ),
   highcontrast: (
     formText: $beacon-white,
     formPlaceholderText: $beacon-white,
-    formInputBackground: $beacon-gray-700,
+    formInputBackground: $beacon-black,
     formInputBackgroundHover: $beacon-gray-700,
     formInputBorder: $beacon-white,
     formInputBorderActive: $highcontrast-teal-100,
@@ -62,7 +64,8 @@ $platform_form_contrasts: (
     formHighlightOrangeText: $beacon-black,
     quillToolbar: $beacon-black,
     quillButton: $beacon-white,
-    quillInlineContainerBorder: $beacon-white
+    quillInlineContainerBorder: $beacon-white,
+    pencilEditIconColor: $beacon-white
   )
 );
 
@@ -218,3 +221,15 @@ $control-width-options: 40px, 56px, 80px, 108px, 124px, 140px;
   border-radius: 5px;
   padding: 0.25rem;
 }
+
+.pencil-edit-icon {
+  height: 15px !important;
+  width: 15px !important;
+  font-size: 15px !important;
+  @include themify($platform_form_contrasts) {
+    color: apply('pencilEditIconColor') !important;
+  }
+  &:hover {
+    cursor: pointer;
+  }
+}

package/styles/_fullcalendar.scss

@@ -317,6 +317,10 @@ $platform_fullcalendar_contrasts: (
   &.fc-event.is-subevent {
     margin-left: 16px;
   }
+  
+  .event-info {
+    overflow: hidden !important;
+  }
 }
 
 .fc-daygrid-event, .fc-timegrid-event {

package/styles/_gridstack.scss

@@ -23,7 +23,7 @@ $platform_gridstack_contrasts: (
     scrollerBorder: 0.5px solid $beacon-gray-300,
     scrollerIcon: $beacon-cyan-600,
     optionsButton: $beacon-orange-500,
-    optionsButtonText: $beacon-white,
+    optionsButtonText: $beacon-gray-300,
     optionsRowBorder: $beacon-gray-300,
     optionsTypeRow: $beacon-gray-600,
   ),
@@ -76,6 +76,9 @@ $platform_gridstack_contrasts: (
   margin-top: -12px;
   margin-left: -16px;
   margin-right: -16px;
+  position: sticky !important;
+  top: -11.7px !important;
+  z-index: 101 !important;
 
   .dashboard-buttons {
     display: flex;
@@ -96,7 +99,6 @@ $platform_gridstack_contrasts: (
       height: 30px;
       padding: 0px;
       width: 32px;
-
     }
 
     .dashboard-select {

package/styles/_layout.scss

@@ -74,7 +74,7 @@ $platform_layout_contrasts: (
     fullDetailParentBackground: $beacon-gray-700,
     fullDetailParentText: $beacon-gray-400,
     fullDetailTitleBackground: $beacon-dark-blue-600,
-    fullDetailTitleText: $beacon-white,
+    fullDetailTitleText: $beacon-gray-300,
     fullDetailStatusBackground: $beacon-gray-600,
     fullDetailScroller: $beacon-dark-blue-500,
     fullDetailScrollerBorder: none,
@@ -144,6 +144,8 @@ $detail-sidebar-width: 212px;
 $detail-tab-body-offset: 128px;
 $detail-tab-body-sm-offset: 140px;
 $detail-tab-body-xl-offset: 190px;
+$sidebar-sm-offset: 159px;
+$sidebar-xl-offset: 208px;
 
 $detail-container-padding: 1rem;
 $detail-view-width: calc(100vw - $leftnav-width);
@@ -319,7 +321,7 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
       }
 
       height: $detail-header-height;
-      padding: 12px 12px 0px;
+      padding: 12px 16px;
       position: absolute;
       width: 100%;
 
@@ -342,6 +344,9 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
 
       &.xl {
         height: $detail-header-xl-height;
+        .entity-info-header {
+          min-height: 31px !important;
+        }
       }
 
       .label {
@@ -418,8 +423,9 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
         }
 
         &.header-status {
-          margin-left: -12px !important;
-          margin-right: -20px !important;
+          margin-left: -16px;
+          margin-right: -16px;
+          padding-left: 16px;
           height: 48px;
           margin-top: 4px;
           margin-bottom: 4px;
@@ -427,6 +433,10 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
           @include themify($platform_layout_contrasts) {
             border-bottom: apply('headerBorder');
           }
+
+          button.platform-btn--pill {
+            padding: 0px 12px !important;
+          }
         }
       }
 
@@ -499,10 +509,10 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
 
         &--no-side-bar {
           display: inline !important;
-          width: calc(100vw - $leftnav-width - 24px) !important;
+          width: calc(100vw - $leftnav-width - 24px);
 
           &--expanded {
-            width: calc(100vw - $leftnav-collapsed-width - 24px) !important;
+            width: calc(100vw - $leftnav-collapsed-width - 24px);
           }
         }
       }
@@ -512,6 +522,15 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
           background: apply('containerSidebarBackground');
           border-left: apply('containerSidebarBorderLeft')
         }
+
+        &.sm-header {
+          top: $sidebar-sm-offset;
+        }
+
+        &.xl-header {
+          top: $sidebar-xl-offset;
+        }
+
         height: calc(100vh - $header-height - $detail-header-height);
         margin-left: 12px;
         overflow-y: auto;
@@ -623,10 +642,15 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
   }
 }
 
-// do not modify detail__body__section width for mobile based on leftnav open or closed
-.main-view-container.main-view-container--expanded.platform-mobile .detail-view-container .detail__body__section {
-  width: calc(100vw - $detail-sidebar-width - $leftnav-collapsed-width - 24px) !important;
-}
+// Do not modify detail__body__section width for mobile based on leftnav open or closed
+.main-view-container.main-view-container--expanded.platform-mobile .detail-view-container {
+  .detail__body__section {
+    width: calc(100vw - $detail-sidebar-width - $leftnav-collapsed-width - 24px) !important;
+  }
+  .detail__body__section--no-side-bar, .detail__body__section--no-side-bar--expanded {
+    width: calc(100vw - $leftnav-collapsed-width - 24px) !important;
+  }
+} 
 
 .list-view-container {
   @include themify($platform_layout_contrasts) {

package/styles/_leftnav.scss

@@ -1,359 +1,359 @@
-$platform_leftnav_contrasts: (
-  light: (
-    navLevelOne: $beacon-dark-blue-500,
-    navLevelTwo: $beacon-dark-blue-400,
-    navText: $beacon-white,
-    navTextActiveSecondary: $beacon-white,
-    navCollapseGradient: linear-gradient(90deg, $beacon-dark-blue-700, $beacon-dark-blue-500),
-    navActiveBackground: rgba(25,55,117,.4),
-    navActiveIcon: $beacon-orange-300,
-    navBarLight: $beacon-white,
-    navBarLightShadow: 0px 3px 6px $beacon-black,
-    navBarLightBrand: $beacon-dark-blue-700,
-    navBarLightIcon: $beacon-white,
-    navListItemHover: lighten($beacon-dark-blue-500, 3%),
-    navListItemSupport: $beacon-dark-blue-700,
-    navListItemSbir: $beacon-cyan-600,
-    navListItemActive: $beacon-cyan-500,
-    collapseBtnBg: $beacon-white,
-    collapseBtnColor: $beacon-cyan-500
-  ),
-  dark: (
-    navLevelOne: $beacon-black,
-    navLevelTwo: $beacon-black,
-    navText: $beacon-gray-300,
-    navTextActiveSecondary: $beacon-white,
-    navCollapseGradient: $beacon-gray-600,
-    navActiveBackground: $beacon-dark-blue-400,
-    navActiveIcon: $beacon-orange-300,
-    navBarLight: $beacon-black,
-    navBarLightShadow: none,
-    navBarLightBrand: $beacon-gray-600,
-    navBarLightIcon: $beacon-white,
-    navListItemHover: $beacon-dark-blue-700,
-    navListItemSupport: $beacon-black,
-    navListItemSbir: $beacon-black,
-    navListItemActive: $beacon-dark-blue-400,
-    collapseBtnBg: $beacon-dark-blue-400,
-    collapseBtnColor: $beacon-gray-300,
-  ),
-  highcontrast: (
-    navLevelOne: $beacon-gray-700,
-    navLevelTwo: $beacon-gray-700,
-    navText: $beacon-white,
-    navTextActiveSecondary: $beacon-black,
-    navCollapseGradient: $beacon-black,
-    navActiveBackground: $highcontrast-teal-100,
-    navActiveIcon: $beacon-orange-300,
-    navBarLight: $beacon-gray-700,
-    navBarLightShadow: none,
-    navBarLightBrand: $beacon-black,
-    navBarLightIcon: $beacon-white,
-    navListItemHover: $beacon-dark-blue-500,
-    navListItemSupport: $beacon-black,
-    navListItemSbir: $beacon-black,
-    navListItemActive: $highcontrast-teal-100,
-    collapseBtnBg: $highcontrast-teal-100,
-    collapseBtnColor: $beacon-black
-  )
-);
-
-$leftnav-transition-time: 0.10s;
-$dark-mode-transition-time: 0.5s;
-
-$top-navbar-height: 50px;
-$leftnav-width: 212px;
-$leftnav-collapsed-width: 50px;
-$leftnav-item-height: 40px;
-$icon-container-width: 50px;
-
-.leftnav {
-  box-shadow: 2px 3px 6px #00000029;
-  height: 100%;
-  left: 0;
-  position: fixed;
-  top: 0;
-  width: $leftnav-width;
-
-  &--collapsed {
-    transition: all 0.5s ease-in-out;
-    width: $leftnav-collapsed-width;
-    z-index: 9999;
-  }
-
-  &__level-one {
-    @include themify($platform_leftnav_contrasts) {
-      background: apply('navLevelOne');
-    }
-    height: 100%;
-
-    &--expanded {
-      animation: show 1s;
-      opacity: 1;
-      overflow: visible;
-      width: $leftnav-width;
-    }
-
-    &--collapsed {
-      @include themify($platform_leftnav_contrasts) {
-        background: apply('navCollapseGradient');
-      }
-      width: 50px;
-    }
-  }
-
-  &__level-two {
-    @include themify($platform_leftnav_contrasts) {
-      background: apply('navLevelTwo');
-      color: apply('navText');
-    }
-    height: 100%;
-    left: 50px;
-    position: absolute;
-    width: calc(#{$leftnav-width} - 50px);
-
-    .list-group-item {
-      border-bottom-left-radius: 10px;
-      border-top-left-radius: 10px;
-      margin-left: 20px;
-      width: calc(#{$leftnav-width} - 50px - 20px);
-
-      .level-two-option-container {
-        @include themify($platform_leftnav_contrasts) {
-          color: apply('navText');
-        }
-        font-size: 14px;
-        position: relative;
-        top: 7px;
-      }
-
-      &:hover, &--active-secondary, &--active-level-two {
-        @include themify($platform_leftnav_contrasts) {
-          background: apply('navActiveBackground') !important;
-          .level-two-option-container {
-            color: apply('navTextActiveSecondary');
-          }
-        }
-      }
-
-      mat-icon.link-active {
-        @include themify($platform_leftnav_contrasts) {
-          color: apply('navActiveIcon');
-        }
-        font-size: 8px;
-        position: absolute;
-        right: -6px;
-        top: 16px;
-      }
-    }
-  }
-
-  &--collapsed {
-    transition: all 0.5s ease-in-out;
-    width: 50px;
-  }
-
-  &--expanded {
-    transition: all 0.5s ease-in-out;
-    width: $leftnav-width;
-  }
-
-  .navbar--light {
-    @include themify($platform_leftnav_contrasts) {
-      background: apply('navBarLight') 0% 0% no-repeat padding-box;
-    }
-    box-shadow: 0px 3px 6px #00000029;
-    height: $top-navbar-height;
-    line-height: $top-navbar-height;
-    opacity: 1;
-    padding: 0px;
-    width: inherit;
-    z-index: 1000;
-
-    .navbar-brand {
-      @include themify($platform_leftnav_contrasts) {
-        background: apply('navBarLightBrand');
-      }
-      transition: width $leftnav-transition-time;
-      height: $top-navbar-height;
-
-      &--collapsed {
-        width: 50px;
-        transition: all 0.5s ease-in-out;
-      }
-
-      &--expanded {
-        width: $leftnav-width;
-        transition: all 0.5s ease-in-out;
-      }
-
-      .brand-icon {
-        width: $icon-container-width;
-
-        img {
-          @include themify($platform_leftnav_contrasts) {
-            background: apply('navBarLightIcon');
-          }
-          border-radius: 50%;
-          left: 12px;
-          position: relative;
-          top: -2px;
-          width: 26px;
-        }
-      }
-
-      .collapse-box {
-        @include themify($platform_leftnav_contrasts) {
-          background: apply('collapseBtnBg');
-        }
-        border-radius: 5px;
-        height: 36px;
-        width: 36px;
-
-        mat-icon {
-          @include themify($platform_leftnav_contrasts) {
-            color: apply('collapseBtnColor');
-          }
-          font-size: 24px;
-          height: 24px;
-
-          &.collapsed {
-            width: 20px;
-          }
-
-          &.open {
-            width: 24px;
-          }
-        }
-      }
-    }
-
-    .list-group-item--support, .list-group-item:last-of-type {
-      margin-bottom: 0px !important;
-    }
-  }
-
-  .list-group-item {
-    background: inherit;
-    border-width: 0px;
-    height: $leftnav-item-height;
-    margin-bottom: 4px;
-
-    &:hover {
-      @include themify($platform_leftnav_contrasts) {
-        background: apply('navListItemHover');
-      }
-    }
-
-    &:first-of-type {
-      margin-top: 18px;
-    }
-
-    &--support {
-      @include themify($platform_leftnav_contrasts) {
-        background: apply('navListItemSupport');
-      }
-      bottom: 56px;
-      height: 40px;
-      position: fixed;
-      width: 212px;
-
-      &.support-link--collapsed {
-        bottom: 0px;
-        width: 50px;
-      }
-    }
-
-    &--sbir {
-      background: transparent;
-      bottom: 0px;
-      height: auto;
-      position: fixed;
-      width: 212px;
-
-      &.secondary {
-        @include themify($platform_leftnav_contrasts) {
-          background-color: apply('navListItemSbir');
-        }
-      }
-    }
-
-    &--last {
-      bottom: 0px;
-      height: auto;
-      position: fixed;
-      width: $leftnav-width;
-    }
-
-    .icon-container {
-      @include themify($platform_leftnav_contrasts) {
-        color: apply('navText') !important;
-      }
-      height: 100%;
-      width: $icon-container-width;
-
-      mat-icon {
-        font-size: 20px;
-        height: 20px;
-        position: relative;
-        top: 10px;
-        width: 20px;
-      }
-    }
-
-    .option-container {
-      @include themify($platform_leftnav_contrasts) {
-        color: apply('navText') !important;
-      }
-      font-size: 14px;
-      left: -1px;
-      position: relative;
-      top: 5px;
-      width: calc($leftnav-width - $icon-container-width);
-    }
-
-    mat-icon.favorite {
-      @include themify($platform_leftnav_contrasts) {
-        color: apply('navText') !important;
-      }
-      font-size: 14px;
-      opacity: 0.3;
-      position: absolute;
-      right: 8px;
-      top: 12px;
-
-      &:hover {
-        @include themify($platform_leftnav_contrasts) {
-          color: apply('navActiveIcon');
-        }
-        opacity: 1.0;
-      }
-    }
-
-    // Placed after the general styles for icon-container, option-container, etc so the active style is applied correctly
-    &--active {
-      @include themify($platform_leftnav_contrasts) {
-        background: apply('navListItemActive');
-        color: apply('navTextActiveSecondary');
-
-        &:hover {
-          background: lighten(apply('navListItemActive'), 2%);
-        }
-      }
-
-      .icon-container, .option-container, mat-icon.expansion-icon {
-        @include themify($platform_leftnav_contrasts) {
-          color: apply('navTextActiveSecondary') !important;
-        }
-      }
-    }
-  }
-
-  .brand-icon img {
-    padding: 1px;
-  }
-
-  a.disabled {
-    opacity: 0.4;
-  }
-}
+$platform_leftnav_contrasts: (
+  light: (
+    navLevelOne: $beacon-dark-blue-500,
+    navLevelTwo: $beacon-dark-blue-400,
+    navText: $beacon-white,
+    navTextActiveSecondary: $beacon-white,
+    navCollapseGradient: linear-gradient(90deg, $beacon-dark-blue-700, $beacon-dark-blue-500),
+    navActiveBackground: rgba(25,55,117,.4),
+    navActiveIcon: $beacon-orange-300,
+    navBarLight: $beacon-white,
+    navBarLightShadow: 0px 3px 6px $beacon-black,
+    navBarLightBrand: $beacon-dark-blue-700,
+    navBarLightIcon: $beacon-white,
+    navListItemHover: lighten($beacon-dark-blue-500, 3%),
+    navListItemSupport: $beacon-dark-blue-700,
+    navListItemSbir: $beacon-cyan-600,
+    navListItemActive: $beacon-cyan-500,
+    collapseBtnBg: $beacon-white,
+    collapseBtnColor: $beacon-cyan-500
+  ),
+  dark: (
+    navLevelOne: $beacon-black,
+    navLevelTwo: $beacon-black,
+    navText: $beacon-gray-300,
+    navTextActiveSecondary: $beacon-gray-300,
+    navCollapseGradient: $beacon-gray-600,
+    navActiveBackground: $beacon-dark-blue-400,
+    navActiveIcon: $beacon-orange-300,
+    navBarLight: $beacon-black,
+    navBarLightShadow: none,
+    navBarLightBrand: $beacon-gray-600,
+    navBarLightIcon: $beacon-gray-300,
+    navListItemHover: $beacon-dark-blue-700,
+    navListItemSupport: $beacon-black,
+    navListItemSbir: $beacon-black,
+    navListItemActive: $beacon-dark-blue-400,
+    collapseBtnBg: $beacon-dark-blue-400,
+    collapseBtnColor: $beacon-gray-300,
+  ),
+  highcontrast: (
+    navLevelOne: $beacon-gray-700,
+    navLevelTwo: $beacon-gray-700,
+    navText: $beacon-white,
+    navTextActiveSecondary: $beacon-black,
+    navCollapseGradient: $beacon-black,
+    navActiveBackground: $highcontrast-teal-100,
+    navActiveIcon: $beacon-orange-300,
+    navBarLight: $beacon-gray-700,
+    navBarLightShadow: none,
+    navBarLightBrand: $beacon-black,
+    navBarLightIcon: $beacon-white,
+    navListItemHover: $beacon-dark-blue-500,
+    navListItemSupport: $beacon-black,
+    navListItemSbir: $beacon-black,
+    navListItemActive: $highcontrast-teal-100,
+    collapseBtnBg: $highcontrast-teal-100,
+    collapseBtnColor: $beacon-black
+  )
+);
+
+$leftnav-transition-time: 0.10s;
+$dark-mode-transition-time: 0.5s;
+
+$top-navbar-height: 50px;
+$leftnav-width: 212px;
+$leftnav-collapsed-width: 50px;
+$leftnav-item-height: 40px;
+$icon-container-width: 50px;
+
+.leftnav {
+  box-shadow: 2px 3px 6px #00000029;
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: $leftnav-width;
+
+  &--collapsed {
+    transition: all 0.5s ease-in-out;
+    width: $leftnav-collapsed-width;
+    z-index: 9999;
+  }
+
+  &__level-one {
+    @include themify($platform_leftnav_contrasts) {
+      background: apply('navLevelOne');
+    }
+    height: 100%;
+
+    &--expanded {
+      animation: show 1s;
+      opacity: 1;
+      overflow: visible;
+      width: $leftnav-width;
+    }
+
+    &--collapsed {
+      @include themify($platform_leftnav_contrasts) {
+        background: apply('navCollapseGradient');
+      }
+      width: 50px;
+    }
+  }
+
+  &__level-two {
+    @include themify($platform_leftnav_contrasts) {
+      background: apply('navLevelTwo');
+      color: apply('navText');
+    }
+    height: 100%;
+    left: 50px;
+    position: absolute;
+    width: calc(#{$leftnav-width} - 50px);
+
+    .list-group-item {
+      border-bottom-left-radius: 10px;
+      border-top-left-radius: 10px;
+      margin-left: 20px;
+      width: calc(#{$leftnav-width} - 50px - 20px);
+
+      .level-two-option-container {
+        @include themify($platform_leftnav_contrasts) {
+          color: apply('navText');
+        }
+        font-size: 14px;
+        position: relative;
+        top: 7px;
+      }
+
+      &:hover, &--active-secondary, &--active-level-two {
+        @include themify($platform_leftnav_contrasts) {
+          background: apply('navActiveBackground') !important;
+          .level-two-option-container {
+            color: apply('navTextActiveSecondary');
+          }
+        }
+      }
+
+      mat-icon.link-active {
+        @include themify($platform_leftnav_contrasts) {
+          color: apply('navActiveIcon');
+        }
+        font-size: 8px;
+        position: absolute;
+        right: -6px;
+        top: 16px;
+      }
+    }
+  }
+
+  &--collapsed {
+    transition: all 0.5s ease-in-out;
+    width: 50px;
+  }
+
+  &--expanded {
+    transition: all 0.5s ease-in-out;
+    width: $leftnav-width;
+  }
+
+  .navbar--light {
+    @include themify($platform_leftnav_contrasts) {
+      background: apply('navBarLight') 0% 0% no-repeat padding-box;
+    }
+    box-shadow: 0px 3px 6px #00000029;
+    height: $top-navbar-height;
+    line-height: $top-navbar-height;
+    opacity: 1;
+    padding: 0px;
+    width: inherit;
+    z-index: 1000;
+
+    .navbar-brand {
+      @include themify($platform_leftnav_contrasts) {
+        background: apply('navBarLightBrand');
+      }
+      transition: width $leftnav-transition-time;
+      height: $top-navbar-height;
+
+      &--collapsed {
+        width: 50px;
+        transition: all 0.5s ease-in-out;
+      }
+
+      &--expanded {
+        width: $leftnav-width;
+        transition: all 0.5s ease-in-out;
+      }
+
+      .brand-icon {
+        width: $icon-container-width;
+
+        img {
+          @include themify($platform_leftnav_contrasts) {
+            background: apply('navBarLightIcon');
+          }
+          border-radius: 50%;
+          left: 12px;
+          position: relative;
+          top: -2px;
+          width: 26px;
+        }
+      }
+
+      .collapse-box {
+        @include themify($platform_leftnav_contrasts) {
+          background: apply('collapseBtnBg');
+        }
+        border-radius: 5px;
+        height: 36px;
+        width: 36px;
+
+        mat-icon {
+          @include themify($platform_leftnav_contrasts) {
+            color: apply('collapseBtnColor');
+          }
+          font-size: 24px;
+          height: 24px;
+
+          &.collapsed {
+            width: 20px;
+          }
+
+          &.open {
+            width: 24px;
+          }
+        }
+      }
+    }
+
+    .list-group-item--support, .list-group-item:last-of-type {
+      margin-bottom: 0px !important;
+    }
+  }
+
+  .list-group-item {
+    background: inherit;
+    border-width: 0px;
+    height: $leftnav-item-height;
+    margin-bottom: 4px;
+
+    &:hover {
+      @include themify($platform_leftnav_contrasts) {
+        background: apply('navListItemHover');
+      }
+    }
+
+    &:first-of-type {
+      margin-top: 18px;
+    }
+
+    &--support {
+      @include themify($platform_leftnav_contrasts) {
+        background: apply('navListItemSupport');
+      }
+      bottom: 56px;
+      height: 40px;
+      position: fixed;
+      width: 212px;
+
+      &.support-link--collapsed {
+        bottom: 0px;
+        width: 50px;
+      }
+    }
+
+    &--sbir {
+      background: transparent;
+      bottom: 0px;
+      height: auto;
+      position: fixed;
+      width: 212px;
+
+      &.secondary {
+        @include themify($platform_leftnav_contrasts) {
+          background-color: apply('navListItemSbir');
+        }
+      }
+    }
+
+    &--last {
+      bottom: 0px;
+      height: auto;
+      position: fixed;
+      width: $leftnav-width;
+    }
+
+    .icon-container {
+      @include themify($platform_leftnav_contrasts) {
+        color: apply('navText') !important;
+      }
+      height: 100%;
+      width: $icon-container-width;
+
+      mat-icon {
+        font-size: 20px;
+        height: 20px;
+        position: relative;
+        top: 10px;
+        width: 20px;
+      }
+    }
+
+    .option-container {
+      @include themify($platform_leftnav_contrasts) {
+        color: apply('navText') !important;
+      }
+      font-size: 14px;
+      left: -1px;
+      position: relative;
+      top: 5px;
+      width: calc($leftnav-width - $icon-container-width);
+    }
+
+    mat-icon.favorite {
+      @include themify($platform_leftnav_contrasts) {
+        color: apply('navText') !important;
+      }
+      font-size: 14px;
+      opacity: 0.3;
+      position: absolute;
+      right: 8px;
+      top: 12px;
+
+      &:hover {
+        @include themify($platform_leftnav_contrasts) {
+          color: apply('navActiveIcon');
+        }
+        opacity: 1.0;
+      }
+    }
+
+    // Placed after the general styles for icon-container, option-container, etc so the active style is applied correctly
+    &--active {
+      @include themify($platform_leftnav_contrasts) {
+        background: apply('navListItemActive');
+        color: apply('navTextActiveSecondary');
+
+        &:hover {
+          background: lighten(apply('navListItemActive'), 2%);
+        }
+      }
+
+      .icon-container, .option-container, mat-icon.expansion-icon {
+        @include themify($platform_leftnav_contrasts) {
+          color: apply('navTextActiveSecondary') !important;
+        }
+      }
+    }
+  }
+
+  .brand-icon img {
+    padding: 1px;
+  }
+
+  a.disabled {
+    opacity: 0.4;
+  }
+}

package/styles/_material-drawer.scss

@@ -10,7 +10,7 @@ $platform_drawer_contrasts: (
     drawerFooterShadow: none
   ),
   highcontrast: (
-    drawerBackground: $beacon-black,
+    drawerBackground: $beacon-gray-700,
     drawerFooterBackground: $beacon-gray-600,
     drawerFooterShadow: none
   )

package/styles/_material-tabs.scss

@@ -15,17 +15,17 @@ $platform_tab_contrasts: (
     tabLabelActive: $beacon-gray-400,
     tabBackgroundActive: $beacon-dark-blue-700,
     tabBackgroundActiveAlt: $beacon-orange-700,
-    tabDividerBorder: $beacon-gray-700,
+    tabDividerBorder: $beacon-gray-400,
     tabRedCircleIcon: $beacon-orange-500,
     tabOrangeCircleIcon: $beacon-orange-400,
   ),
   highcontrast: (
     popoverHeaderBackground: $beacon-gray-700,
     tabLabel: $beacon-white,
-    tabLabelActive: $beacon-white,
-    tabBackgroundActive: $beacon-dark-blue-700,
+    tabLabelActive: $beacon-black,
+    tabBackgroundActive: $highcontrast-teal-100,
     tabBackgroundActiveAlt: $highcontrast-bright-orange-200,
-    tabDividerBorder: $beacon-gray-100,
+    tabDividerBorder: $beacon-white,
     tabRedCircleIcon: $highcontrast-bright-orange-300,
     tabOrangeCircleIcon: $highcontrast-bright-orange-100,
   )
@@ -88,8 +88,16 @@ $platform_tab_contrasts: (
         }
 
         &:not(.mdc-tab--active):not(:last-child):not(:has(+ .mat-mdc-tab.mdc-tab--active)) {
-          @include themify($platform_tab_contrasts) {
-            border-right: 1px solid apply('tabDividerBorder');
+          &::after {
+            content: '';
+            position: absolute;
+            top: 6px;
+            bottom: 6px;
+            right: 0;
+            width: 1px;
+            @include themify($platform_tab_contrasts) {
+              background-color: apply('tabDividerBorder') !important;
+            }
           }
         }
 
@@ -145,24 +153,23 @@ $platform_tab_contrasts: (
   }
 }
 
-@mixin tab-circle-icon {
-  &.tab-with-circle-icon {
-    &.red::after {
-      @include material-icons-circle-sm();
-      top: -12px;
-      right: 3px;
-      @include themify($platform_tab_contrasts) {
-        color: apply('tabRedCircleIcon');
-      }
+// tabs borders were updated to use ::after this is an updated way to add status dot to tabs
+.status-dot {
+  &.red::after {
+    @include material-icons-circle-sm();
+    top: 3px;
+    right: 4px;
+    @include themify($platform_tab_contrasts) {
+      color: apply('tabRedCircleIcon');
     }
+  }
 
-    &.orange::after {
-      @include material-icons-circle-sm();
-      top: -12px;
-      right: 3px;
-      @include themify($platform_tab_contrasts) {
-        color: apply('tabOrangeCircleIcon');
-      }
+  &.orange::after {
+    @include material-icons-circle-sm();
+    top: 3px;
+    right: 4px;
+    @include themify($platform_tab_contrasts) {
+      color: apply('tabOrangeCircleIcon');
     }
   }
 }
@@ -182,7 +189,7 @@ $platform_tab_contrasts: (
 
       .mat-mdc-tab-labels {
         .mat-mdc-tab {
-          @include tab-circle-icon();
+          letter-spacing: 0 !important;
         }
       }
     }
@@ -203,12 +210,6 @@ $platform_tab_contrasts: (
       @include platform-tab-label-styles();
 
       margin-bottom: 12px;
-
-      .mat-mdc-tab-labels {
-        .mat-mdc-tab {
-          @include tab-circle-icon();
-        }
-      }
     }
   }
 }
@@ -226,7 +227,6 @@ $platform_tab_contrasts: (
       .mat-mdc-tab-labels {
         .mat-mdc-tab {
           @include platform-alt-tab-common-styles();
-          @include tab-circle-icon();
 
           &:first-of-type {
             margin-left: 12px;
@@ -256,10 +256,10 @@ $platform_tab_contrasts: (
     @include platform-tab-common-styles();
 
     .mat-mdc-tab-header {
+      z-index: 100 !important;
       .mat-mdc-tab-labels {
         .mat-mdc-tab {
           @include platform-alt-tab-common-styles();
-          @include tab-circle-icon();
         }
       }
     }

package/styles/_ng-select.scss

@@ -41,8 +41,8 @@ $min-dropdown-panel-width: 215px;
   }
 
   .ng-dropdown-panel {
-    min-width: $min-dropdown-panel-width;
-    width: fit-content;
+    min-width: fit-content !important;
+    width: 100%;
 
     .ng-dropdown-panel-items {
       max-height: 200px;
@@ -147,7 +147,7 @@ $min-dropdown-panel-width: 215px;
       @include font-weight--semibold;
       @include themify($platform_filter_contrasts) {
         background: apply('filterDropdownFocus') !important;
-        color: apply('filterDropdownText') !important;
+        color: apply('filterDropdownActiveText') !important;
       }
 
       .ng-value-label {
@@ -157,12 +157,25 @@ $min-dropdown-panel-width: 215px;
 
     .ng-select-container {
       background: transparent !important;
+
+      &:not(.ng-has-value) .ng-arrow-wrapper::before {
+        @include themify($platform_filter_contrasts) {
+          color: apply('filterDropdownText') !important;
+        }
+      }
+
       &.ng-has-value {
         @include themify($platform_filter_contrasts) {
           background: apply('filterDropdownFocus') !important;
         }
 
         border-radius: 4px;
+
+        .ng-arrow-wrapper::before {
+          @include themify($platform_filter_contrasts) {
+            color: apply('filterDropdownActiveText') !important;
+          }
+        }
       }
 
       .ng-value-container {

package/styles/_popover.scss

@@ -245,4 +245,4 @@ $platform_popover_contrasts: (
       }
     }
   }
-}
+}

package/styles/_tables.scss

@@ -206,7 +206,7 @@ table.platform-table {
   }
 
   &--expandable {
-    margin-top: 5px;
+    margin-top: 8px;
     thead {
       visibility: collapse;
       th {

package/styles/_theming.scss

@@ -65,11 +65,11 @@ $platform_contrasts: (
     accentGreen: $beacon-green-750,
     accentGreenText: $beacon-gray-300,
     accentGray: $beacon-gray-400,
-    accentGrayText: $beacon-gray-200,
+    accentGrayText: $beacon-gray-300,
     accentLightGray: $beacon-gray-700,
-    accentLightGrayText: $beacon-gray-200,
+    accentLightGrayText: $beacon-gray-300,
     accentDarkGray: $beacon-gray-400,
-    accentDarkGrayText: $beacon-white,
+    accentDarkGrayText: $beacon-gray-300,
     accentLightRed: $beacon-orange-50,
     accentLightRedText: $beacon-black,
     accentLightYellow: $beacon-yellow-100,
@@ -79,19 +79,19 @@ $platform_contrasts: (
     accentOrange: $beacon-orange-400,
     accentOrangeText: $beacon-black,
     accentMidOrange: $beacon-orange-400,
-    accentMidOrangeText: $beacon-white,
+    accentMidOrangeText: $beacon-gray-300,
     accentLightOrange: $beacon-orange-400,
-    accentLightOrangeText: $beacon-gray-200,
+    accentLightOrangeText: $beacon-gray-300,
     accentDarkOrange: $beacon-orange-500,
-    accentDarkOrangeText: $beacon-gray-200,
+    accentDarkOrangeText: $beacon-gray-300,
     accentCyan: $beacon-cyan-300,
     accentCyanText: $beacon-black,
     accentDarkCyan: $beacon-cyan-600,
-    accentDarkCyanText: $beacon-white,
+    accentDarkCyanText: $beacon-gray-300,
     accentBlue: $beacon-dark-blue-300,
-    accentBlueText: $beacon-white,
+    accentBlueText: $beacon-gray-300,
     accentDarkBlue: $beacon-dark-blue-600,
-    accentDarkBlueText: $beacon-white,
+    accentDarkBlueText: $beacon-gray-300,
     cuiBanner: $beacon-green-750,
     scrollBar: $beacon-dark-blue-300,
     scrollBarBackground: $beacon-gray-600,

package/styles/_typography.scss

@@ -20,6 +20,7 @@ $platform_text_contrasts: (
     textOrange: $beacon-orange-300,
     textOrangeDark: $beacon-orange-500,
     textDarkBackground: $beacon-gray-100,
+    entityTitleColor: $beacon-dark-blue-500,
   ),
   dark: (
     textDefaultPrimary: $beacon-gray-300,
@@ -40,6 +41,7 @@ $platform_text_contrasts: (
     textOrange: $beacon-orange-400,
     textOrangeDark: $beacon-orange-500,
     textDarkBackground: $beacon-gray-300,
+    entityTitleColor: $beacon-dark-blue-300,
   ),
   highcontrast: (
     textDefaultPrimary: $beacon-white,
@@ -60,6 +62,7 @@ $platform_text_contrasts: (
     textOrange: $highcontrast-bright-orange-100,
     textOrangeDark: $highcontrast-bright-orange-200,
     textDarkBackground: $beacon-white,
+    entityTitleColor: $beacon-white,
   )
 );
 
@@ -123,6 +126,7 @@ $font-sizes: 8px, 10px, 12px, 14px, 16px, 18px, 20px, 22px, 24px, 28px, 32px;
     &--dark-orange { color:apply('textOrangeDark') !important; }
 
     &--dark-background { color:apply('textDarkBackground') !important; }
+    &--entity-title { color:apply('entityTitleColor') !important; }
   }
 
   // Use white and black sparingly - when it is guaranteed they'll be visible on a background

package/styles/_widgets.scss

@@ -593,7 +593,7 @@ $platform_widget_contrasts: (
     .summary-container {
       display: flex;
       flex-wrap: wrap;
-      gap: 8px;
+      gap: 4px;
       justify-content: space-between;
       margin-top: 12px;
       width: 100%;
@@ -606,8 +606,7 @@ $platform_widget_contrasts: (
         flex-grow: 1;
         justify-content: space-between;
         height: 64px;
-        max-width: 92px;
-        min-width: 58px;
+        min-width: 60px;
         padding: 8px 12px;
         text-align: center;
 
@@ -685,6 +684,8 @@ $platform_widget_contrasts: (
 
         &.reg { height: 100%; }
         &.sm { height: calc(50% - 5px); }
+        &.width-for-no-stack { width: 19% !important; }
+        &.width-for-stack { width: 32% !important; }
 
         .sticky-header {
           position: sticky;

package/styles/styles.scss

@@ -74,6 +74,7 @@ button, a {
 
 .highlight-chip {
   border-radius: 3px;
+  padding: 0px 6px !important;
 
   &.rounded-chip {
     border-radius: 8px;
@@ -275,3 +276,9 @@ $border-radii: 3px, 5px, 8px, 10px, 12px;
     text-align: center;
   }
 }
+
+.inline-flex-icon-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}