@beacon-interactive-systems-llc/beacon-platform-ui 17.6.3 → 17.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beacon-interactive-systems-llc/beacon-platform-ui",
-  "version": "17.6.3",
+  "version": "17.6.5",
   "peerDependencies": {
     "@angular/common": "^17.3.0",
     "@angular/core": "^17.3.0",

package/styles/_buttons.scss

@@ -25,7 +25,8 @@ $platform_button_contrasts: (
     buttonAmbientBorder: $beacon-gray-400,
 
     buttonDisabled: $beacon-gray-300,
-    buttonShadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16)
+    buttonShadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16),
+    buttonBorder: $beacon-gray-border
   ),
   dark: (
     buttonBlue: $beacon-blue-200,
@@ -53,7 +54,8 @@ $platform_button_contrasts: (
     buttonAmbientBorder: $beacon-gray-300,
 
     buttonDisabled: $beacon-gray-500,
-    buttonShadow: none
+    buttonShadow: none,
+    buttonBorder: $beacon-gray-border
   ),
   highcontrast: (
     buttonBlue: $highcontrast-bright-blue-200,
@@ -81,7 +83,8 @@ $platform_button_contrasts: (
     buttonAmbientBorder: $beacon-white,
 
     buttonDisabled: $beacon-gray-500,
-    buttonShadow: none
+    buttonShadow: none,
+    buttonBorder: $beacon-gray-border
   )
 );
 
@@ -219,13 +222,25 @@ button.platform-btn {
   &--toggle {
     @include themify($platform_button_contrasts) {
       background-color: apply('buttonAmbient') !important;
-      border: 1px solid apply('buttonAmbientText') !important;
+      border: 1px solid apply('buttonBorder') !important;
     }
     border-radius: 15px;
+    height: 28px;
 
     .group-btn {
       border: none !important;
       border-radius: 15px !important;
+      margin-top: auto;
+      margin-bottom: auto;
+      position: relative;
+
+      &:first-of-type {
+        margin-left: 2px;
+      }
+
+      &:last-of-type {
+        margin-right: 2px;
+      }
 
       &:not(.selected) {
         @include themify($platform_button_contrasts) {

package/styles/_filters.scss

@@ -1,7 +1,7 @@
 $platform_filter_contrasts: (
   light: (
     filterBackground: $beacon-dark-blue-100,
-    filterBorder: $beacon-gray-300,
+    filterBorder: $beacon-gray-border,
     filterShadow: 0px 3px 3px $beacon-black,
     filterSearchIcon: $beacon-gray-400,
     filterChip: $beacon-green-100,
@@ -104,6 +104,10 @@ $date-filter-width: calc(1em * 8);
 
       .showing-label {
         @include font-size--default-md;
+
+        &:first-of-type {
+          padding-left: 8px;
+        }
       }
 
       .filter-chip-label {
@@ -115,14 +119,16 @@ $date-filter-width: calc(1em * 8);
       .filter-chip {
         @include font-size--default-md;
         @include font-weight--semibold;
-        margin-left: 4px;
-        padding-left: .25rem;
-        padding-right: .25rem;
         @include themify($platform_filter_contrasts) {
           background: apply('filterChip');
           color: apply('filterChipText');
         }
 
+        height: 25px;
+        margin-left: 4px;
+        padding-left: .25rem;
+        padding-right: .25rem;
+
         &::after {
           @include font-color--semi-muted;
           content: "close";
@@ -138,9 +144,10 @@ $date-filter-width: calc(1em * 8);
 }
 
 .filter-input {
+  font-size: 14px;
   min-width: $min-filter-input-width;
   max-width: $max-filter-input-width;
-  padding-left: 1.25rem;
+  padding-left: 26px;
 }
 
 .date-filter {
@@ -158,7 +165,7 @@ $date-filter-width: calc(1em * 8);
     font-family: "Material Icons";
     font-size: 16px;
     position: relative;
-    left: .25rem;
+    left: 8px;
     top: 0.4rem;
     z-index: 99;
   }

package/styles/_forms.scss

@@ -143,11 +143,11 @@ $platform_form_contrasts: (
       top: 8px;
 
       &.right-icon {
-        right: 4px;
+        right: 8px;
       }
 
       &.left-icon {
-        left: 4px;
+        left: 8px;
       }
     }
 

package/styles/_layout.scss

@@ -38,7 +38,7 @@ $platform_layout_contrasts: (
 );
 
 $header-height: 50px;
-$detail-header-height: 70px;
+$detail-header-height: 78px;
 $min-detail-width: 1400px;
 $leftnav-width: 212px;
 $leftnav-collapsed-width: 50px;
@@ -102,9 +102,9 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
       }
 
       mat-icon {
-        height: 30px;
-        width: 30px;
-        font-size: 30px;
+        height: 24px;
+        width: 24px;
+        font-size: 24px;
         position: relative;
         top: 10px;
 
@@ -157,8 +157,11 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
       @include themify($platform_layout_contrasts) {
         background: apply('containerHeaderBackground');
       }
-      height: $detail-header-height;
-      padding: 8px 16px 0px 16px;
+
+      background-color: #f3f4f6;
+      box-shadow: 0 3px 6px #00000029;
+      height: 78px;
+      padding: 12px 12px 60px;
       position: absolute;
       width: 100%;
 
@@ -213,6 +216,11 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
         align-items: center;
         white-space: pre-wrap;
       }
+
+      mat-icon.three-dot-menu-trigger {
+        position: relative;
+        top: 7.5px;
+      }
     }
 
     &__tabs {
@@ -238,7 +246,7 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
 
       &__section {
         overflow: scroll;
-        padding-top: 32px;
+        padding-top: 16px;
         position: relative;
         top: -16px;
         transition: width 0.5s ease-in-out;
@@ -261,7 +269,7 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
         padding: 16px;
         position: fixed;
         right: 0px;
-        top: calc($header-height + $detail-header-height);
+        top: calc($header-height + $detail-header-height + 6px);
         width: $detail-sidebar-width;
 
         &__title {

package/styles/_material-tabs.scss

@@ -42,7 +42,7 @@ $platform_tab_contrasts: (
 
 .detail__tabs {
   position: absolute;
-  top: 46px;
+  top: 128px;
 
   mat-tab-header .mat-mdc-tab-labels .mdc-tab {
     height: 24px;
@@ -54,7 +54,10 @@ $platform_tab_contrasts: (
   .mat-mdc-tab-group {
     .mat-mdc-tab-header {
       box-shadow: none;
-      padding-left: 14px !important;
+      // padding-left: 14px !important;
+      margin-top: -74px;
+      position: fixed !important;
+      // padding-bottom: 8px;
 
       .mat-tab-label-container {
         padding-left: 14px;
@@ -63,13 +66,15 @@ $platform_tab_contrasts: (
       .mdc-tab__text-label {
         font-size: 14px;
         height: 23px;
+        letter-spacing: 0.5px;
         min-width: unset;
-        padding: 0 2px;
+        padding: 0 2px 6px 2px;
 
         mat-icon.tab-icon {
+          font-size: 15px;
           height: 16px;
+          margin-right: 4px;
           width: 16px;
-          font-size: 14px;
         }
       }
 
@@ -83,6 +88,7 @@ $platform_tab_contrasts: (
 
 .mat-mdc-tab-body-wrapper {
   min-height: 324px;
+  margin-top: -36px;
 }
 
 // relevant connector tabs

package/styles/_menus.scss

@@ -9,3 +9,24 @@
     padding-bottom: 0px !important;
   }
 }
+
+
+.mat-mdc-menu-panel {
+  .mat-mdc-menu-content {
+    .mat-mdc-menu-item {
+      min-height: 32px;
+      min-width: 132px;
+
+      mat-icon {
+        font-size: 18px;
+        height: 18px;
+        margin-right: 8px;
+        width: 18px;
+      }
+
+      .mat-mdc-menu-item-text {
+        font-size: 14px;
+      }
+    }
+  }
+}

package/styles/_ng-select.scss

@@ -39,7 +39,8 @@ $min-dropdown-panel-width: 215px;
     @include themify($platform_form_contrasts) {
       background: apply('formInputBackground') !important;
       color: apply('formText') !important;
-      border: 1px solid apply('formInputBorder') !important;
+      border: none;// 0.5px solid apply('formInputBorder') !important;
+      box-shadow: 0px 3px 7px 2px #00000029;
 
       .ng-dropdown-header {
         border-bottom: 1px solid apply('formInputBorder') !important;
@@ -90,6 +91,7 @@ $min-dropdown-panel-width: 215px;
   // For use with platform-selection-list: makes each select as wide as its placeholder text
   &.platform-filter-select {
     border-radius: 4px;
+    font-size: 14px;
 
     &.ng-select-multiple .ng-value {
       @include font-weight--semibold;
@@ -134,13 +136,35 @@ $min-dropdown-panel-width: 215px;
 }
 
 .ng-select .ng-arrow-wrapper::before {
-  font-family: 'Material Icons';
   content: 'expand_more';
+  font-family: 'Material Icons';
+  position: relative;
+  top: 2px;
 }
 
 .ng-select.ng-select-opened .ng-arrow-wrapper::before {
-  font-family: 'Material Icons';
   content: 'expand_less';
+  font-family: 'Material Icons';
+  position: relative;
+  top: 2px;
+}
+
+.ng-select .ng-clear-wrapper {
+  position: relative;
+  top: 2px;
+}
+
+.ng-select.search {
+  font-size: 14px;
+  line-height: 25px;
+
+  .ng-select-container {
+    width: 216px;
+  }
+
+  .ng-arrow-wrapper .ng-arrow {
+    display: none;
+  }
 }
 
 /* apply material form control highlight animation on focus for filter bar dropdowns */

package/styles/_palette.scss

@@ -21,6 +21,7 @@ $beacon-gray-400: #707070;
 $beacon-gray-500: #4B4A48;
 $beacon-gray-600: #2D2926;
 $beacon-gray-700: #121212;
+$beacon-gray-border: #C4C4C4a1;
 
 $beacon-green-100: #D9F5E9;
 $beacon-green-200: #BFEFDB;

package/styles/_quill.scss

@@ -78,7 +78,7 @@ quill-editor {
             background: apply('formInputDisabled') !important;
           }
         }
-        min-height: 100px;
+        min-height: 45px;
       }
     }
   }
@@ -104,6 +104,12 @@ quill-editor {
   }
 }
 
+quill-view {
+  .ql-editor {
+    padding: 0;
+  }
+}
+
 .quill-read-edit-toggle-container {
   &:hover {
     @include themify($platform_form_contrasts) {

package/styles/_tables.scss

@@ -2,7 +2,7 @@
 
 $platform_table_contrasts: (
   light: (
-    tableBorder: $beacon-gray-300,
+    tableBorder: $beacon-gray-border,
     tableHeader: $beacon-dark-blue-100,
     tableHeaderText: $beacon-black,
     tableHeaderSortingColor: $beacon-white,