@allsorter/ui-components 0.0.378 → 0.0.380

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allsorter/ui-components",
-  "version": "0.0.378",
+  "version": "0.0.380",
   "peerDependencies": {
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",

package/src/lib/ai-apply-bar/ai-apply-bar.component.html

@@ -3,7 +3,7 @@
   <!-- Toggle Button - AI Trigger or Close Button (Fixed Position) -->
   <div class="ai-toggle-button">
     <!-- AI Trigger Button - Show when bar is hidden -->
-    <al-button *ngIf="!isVisible" [iconOnly]="true" [buttonType]="'icon-circle'" [icon]="'auto_fix_high'"
+    <al-button *ngIf="!isVisible" [iconOnly]="true" [buttonType]="'icon-circle'" [icon]="'auto_fix_high'" [iconOutlined]="true"
       [color]="'gradient'" [size]="'base'" aria-label="AI Trigger" (onClick)="toggleBar()">
     </al-button>
 
@@ -30,7 +30,7 @@
             [state]="applyDisabled ? 'disabled' : 'default'" (onClick)="applyClick.emit()">
           </al-button>
           <al-icon-button *ngIf="showChevronButton" icon="chevron_right" [iconOutlined]="true"
-            [customColour]="'#ffffff'" [size]="'xl'" [disabled]="applyDisabled" (onClick)="chevronClick.emit()"
+            [customColour]="'#ffffff'" [size]="'l'" [disabled]="applyDisabled" (onClick)="chevronClick.emit()"
             [dataTestId]="'icon-btn_Uwofs4q_3kWU'">
           </al-icon-button>
         </div>
@@ -42,4 +42,4 @@
     </div>
   </div>
 
-</div>
+</div>

package/src/lib/ai-apply-bar/ai-apply-bar.component.scss

@@ -12,7 +12,7 @@
 .ai-apply-container {
   position: relative;
   display: flex;
-  align-items: center;
+  align-items: flex-start; // Align items from start
   justify-content: flex-end;
 }
 
@@ -21,6 +21,10 @@
   position: relative;
   z-index: 50;
   flex-shrink: 0;
+  display: flex;
+  align-items: flex-start; // Align items from start
+  justify-content: center;
+  margin-top: 10px;
 }
 
 /* Expanding Bar - Positioned absolute, expands to the LEFT of button */
@@ -29,7 +33,7 @@
   right: 48px;
   /* 40px button width + 8px gap = 48px from button right edge */
   display: flex;
-  align-items: stretch;
+  align-items: flex-start; // Align items from start
   overflow: hidden;
   transform-origin: right center;
   transition: max-width 500ms cubic-bezier(0.2, 0.8, 0.2, 1),
@@ -88,9 +92,9 @@
 
 .ai-apply-row {
   display: flex;
-  align-items: center;
+  align-items: center; // Center align all items (input, apply button, chevron) to match close button
   gap: $space-4;
-  height: 40px;
+  height: 40px; // Match close button height
   opacity: 0;
   transform: scale(0.8);
   transition: opacity 300ms ease-out, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
@@ -120,8 +124,8 @@
 }
 
 .ai-apply-button al-icon-button {
-  height: 24px !important;
-  min-height: 24px !important;
+  height: 40px !important; // Match close button height for alignment
+  min-height: 40px !important;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -149,26 +153,26 @@
   /* Style mat-form-field */
   ::ng-deep .mat-mdc-form-field {
     background: #fff;
-    border-radius: $radius-8;
+    border-radius: $radius-4;
     border: 0 !important;
     overflow: hidden;
   }
 
   /* Ensure all parts of the notched outline have consistent border-radius */
   ::ng-deep .al-input-field .mdc-notched-outline {
-    border-radius: $radius-8 !important;
+    border-radius: $radius-4 !important;
   }
 
   ::ng-deep .al-input-field .mdc-notched-outline__leading {
-    border-top-left-radius: $radius-8 !important;
-    border-bottom-left-radius: $radius-8 !important;
+    border-top-left-radius: $radius-4 !important;
+    border-bottom-left-radius: $radius-4 !important;
     border-top-right-radius: 0 !important;
     border-bottom-right-radius: 0 !important;
   }
 
   ::ng-deep .al-input-field .mdc-notched-outline__trailing {
-    border-top-right-radius: $radius-8 !important;
-    border-bottom-right-radius: $radius-8 !important;
+    border-top-right-radius: $radius-4 !important;
+    border-bottom-right-radius: $radius-4 !important;
     border-top-left-radius: 0 !important;
     border-bottom-left-radius: 0 !important;
   }
@@ -215,9 +219,16 @@
   color: rgba(255, 255, 255, 0.7);
   font-size: 12px;
   line-height: 16px;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  flex-shrink: 0;
   opacity: 0;
   transform: scale(0.8);
   transition: opacity 300ms ease-out, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  display: block; // Ensure it's displayed
+  white-space: normal; // Allow text wrapping
+  word-wrap: break-word; // Allow long text to wrap
 }
 
 /* Helper text pop-out like input and buttons */
@@ -243,4 +254,4 @@
     box-shadow: none !important;
     border: none !important;
   }
-}
+}

package/src/lib/ai-wrapper/ai-wrapper.component.html

@@ -19,7 +19,7 @@
                     [options]="inputOptions" [size]="'base'" [types]="'plain'"
                     (change)="onInputChange($event)"></al-input></div>
                 <div class="al-ai-wrapper__ai-actions"><al-button *ngIf="showApplyButton" [buttonType]="'icon-label'"
-                    [color]="'gradient'" [outline]="false" [size]="'base'" [labelText]="applyLabel"
+                    [color]="'gradient'" [outline]="false" [size]="'sm'" [labelText]="applyLabel"
                     [disabled]="applyDisabled" aria-label="Apply AI"
                     (onClick)="onApplyClick()"></al-button><al-icon-button *ngIf="showChevronButton"
                     icon="chevron_right" [iconOutlined]="true" [customColour]="'#ffffff'" [size]="'xl'"

package/src/lib/ai-wrapper/ai-wrapper.component.scss

@@ -6,7 +6,8 @@
   display: flex;
   align-items: flex-start;
   justify-content: flex-end;
-  height: 400px;
+  height: 500px;
+  max-height: 500px; // Add max-height to match height
   overflow: visible;
   padding: 32px;
 
@@ -145,7 +146,6 @@
       // Center vertically and rotate: translate first, then rotate
       transform: translateY(-50%) rotate(-90deg);
       transform-origin: center center;
-      animation: expandFromRight 1s cubic-bezier(0.4, 0, 0.2, 1);
     }
   }
 
@@ -168,9 +168,19 @@
     gap: 4px;
     transform-origin: right center;
     padding-bottom: 0;
+    animation: aiBarExpand 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
     flex-shrink: 0;
   }
 
+  &__ai-row {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    // height: 56px;
+    opacity: 0;
+    animation: aiBarContentFade 0.3s ease-out 0.2s forwards;
+  }
+
   &__ai-icon {
     width: 40px;
     height: 40px;
@@ -356,23 +366,6 @@
   }
 }
 
-@keyframes expandFromRight {
-  0% {
-    opacity: 0;
-    transform: scaleX(0.2) translateX(20px);
-  }
-
-  60% {
-    opacity: 0.8;
-    transform: scaleX(1.02) translateX(-2px);
-  }
-
-  100% {
-    opacity: 1;
-    transform: scaleX(1) translateX(0);
-  }
-}
-
 /* Hide down arrow in mat-mdc-select for all selects inside ai-wrapper */
 :host ::ng-deep .mat-mdc-select-arrow {
   display: none !important;

package/src/lib/button/button.component.scss

@@ -21,7 +21,7 @@ $color-grey: $color-grey-600;
 
 .mdc-button.btn {
   /* Global radius as per spec */
-  border-radius: $radius-8;
+  border-radius: $radius-4;
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -482,7 +482,7 @@ mat-icon.mat-icon {
 .size-header {
   font-size: 20px;
   padding: 4px 6px !important;
-  gap: 4px !important;
+  gap: 4px;
   border-radius: 4px !important;
 }
 
@@ -555,7 +555,7 @@ mat-icon.mat-icon {
 
 /* Adjust gap for header size */
 .btn.size-header {
-  gap: 4px !important;
+  gap: 4px;
   padding: 4px 6px !important;
 }
 
@@ -566,7 +566,7 @@ mat-icon.mat-icon {
 ::ng-deep .custom-dropdown-menu.mat-menu-panel {
   padding: 0;
   /* remove default padding */
-  border-radius: $radius-8;
+  border-radius: $radius-4;
   /* rounded corners */
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
   border: 1px solid rgba(0, 0, 0, 0.12);
@@ -1157,7 +1157,7 @@ button.icon-circle {
 
 /*************Button Drop down design*********/
 ::ng-deep .cdk-overlay-pane {
-  border-radius: 8px !important;
+  border-radius: 4px !important;
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15) !important;
 }
 
@@ -1165,7 +1165,7 @@ button.icon-circle {
   padding: 4px 0 !important;
   background-color: white !important;
   min-width: 180px !important;
-  border-radius: 8px !important;
+  border-radius: 4px !important;
   box-shadow: none !important;
   /* handled by cdk-overlay-pane */
 }

package/src/lib/custom-editor/custom-editor.component.html

@@ -57,6 +57,11 @@
           </span>
         </button>
 
+        <!-- Table Component (Small Screens Only) -->
+        <app-table *ngIf="showTable" [getEditorElement]="getBoundGetEditorElement()"
+          [saveHistoryMethod]="getBoundSaveHistory()" [textChangeMethod]="getBoundTextChange()">
+        </app-table>
+
         <!-- Auto Bullet Button -->
         <button *ngIf="autobullet" class="ms-3 auto-bullet" mat-flat-button (click)="transformToBullets($event)"
           [disabled]="autoBulletDisable || isLoadingAI || !checkHtmlContent('')">
@@ -82,8 +87,8 @@
       </span>
     </button>
 
-    <!-- Table Component -->
-    <app-table *ngIf="showTable" [getEditorElement]="getBoundGetEditorElement()"
+    <!-- Table Component (Large Screens Only) -->
+    <app-table *ngIf="showTable && !isSmallScreen" [getEditorElement]="getBoundGetEditorElement()"
       [saveHistoryMethod]="getBoundSaveHistory()" [textChangeMethod]="getBoundTextChange()" matTooltip="Table"
       matTooltipPosition="above">
     </app-table>

package/src/lib/custom-editor/custom-editor.component.scss

@@ -159,6 +159,7 @@
     .styling-text {
       @extend .font-label-large;
       color: $color-grey-700;
+      font-weight: 400;
       padding: 4px;
       border-radius: 4px;
       transition: background-color 0.2s ease;
@@ -247,6 +248,7 @@
     .text-formatting-text {
       @extend .font-label-large;
       color: $color-grey-700;
+      font-weight: 400;
       padding: 4px;
       border-radius: 4px;
       transition: background-color 0.2s ease;
@@ -261,7 +263,7 @@
       position: absolute;
       bottom: 100%;
       left: 0;
-      background-color: white;
+      background-color: $color-grey-100;
       border: 1px solid #dee2e6;
       border-radius: 6px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

package/src/lib/editable-form-wrapper/editable-form-wrapper.component.html

@@ -18,7 +18,7 @@
   <div class="fab-group right" #buttonGroup><al-button *ngIf="showSaveButton" class="fab" [buttonType]="'icon-circle'"
       [iconOnly]="true" [leftIcon]="'save'" [arialabel]="'Save'" [size]="'base'"  iconOutlined="true"
       [color]="'green'" (onClick)="saveButtonClick.emit($event)"></al-button><al-button *ngIf="showDeleteButton" class="fab warn" [buttonType]="'icon-circle'"
-      [iconOnly]="true" [leftIcon]="'close'" [arialabel]="'Delete'" [size]="'base'" [color]="'error'" iconOutlined="true"
+      [iconOnly]="true" [leftIcon]="'cancel'" [arialabel]="'Delete'" [size]="'base'" [color]="'error'" iconOutlined="true"
       (onClick)="deleteButtonClick.emit($event)"></al-button>
   </div>
 </div>

package/src/lib/editable-form-wrapper/editable-form-wrapper.component.scss

@@ -79,7 +79,7 @@
   position: relative;
 
   /* space between outer blue edge and inner card; matches border inset */
-  padding: 32px !important;
+  padding: 24px !important;
   /* requested content padding inside the border */
   /* IMPORTANT: inner card radius must match border's inner curve */
   border-radius: calc(16px - 6px);

package/src/lib/field-placeholder/field-placeholder.component.scss

@@ -21,6 +21,7 @@
 
 /* Make all typography utility classes available inside this component */
 @import '../styles/typography-classes.scss';
+@import '../styles/colors.scss';
 
 
 
@@ -76,3 +77,9 @@
  justify-content: center;
   color: #37C1CE;
 }
+
+.value-text {
+  // Default style - can be overridden by valueClass input
+  display: inline;
+  color: $color-grey-600 !important;
+}

package/src/lib/input/input.component.scss

@@ -244,13 +244,13 @@
 }
 
 ::ng-deep .al-input-size-large .mdc-notched-outline__leading {
-  border-top-left-radius: 8px !important;
-  border-bottom-left-radius: 8px !important;
+  border-top-left-radius: 4px !important;
+  border-bottom-left-radius: 4px !important;
 }
 
 ::ng-deep .al-input-size-large .mdc-notched-outline__trailing {
-  border-top-right-radius: 8px !important;
-  border-bottom-right-radius: 8px !important;
+  border-top-right-radius: 4px !important;
+  border-bottom-right-radius: 4px !important;
 }
 
 /* ===== NO BORDER STYLES ===== */

package/src/lib/newresumeheader/newresumeheader.component.html

@@ -118,4 +118,4 @@
       [attr.data-test-id]="isHidden ? 'section-show-eye-icon' : 'section-hide-eye-icon'"
       style="cursor: pointer; display: inline-block; width: 24px; height: 24px; font-size: 24px; color: #717793;"
       [style.opacity]="1" [style.visibility]="'visible'"></mat-icon></div>
-</ng-template>
+</ng-template>

package/src/lib/newresumeheader/newresumeheader.component.scss

@@ -1,4 +1,4 @@
-
+@import '../styles/colors.scss';
 @import url('https://fonts.googleapis.com/css2?family=Material+Icons+Outlined');
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0');
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@@ -120,6 +120,9 @@
   align-items: center;
   justify-content: center;
 
+  .material-icons-outlined {
+    color: $color-grey-600;
+  }
 }
 
 .example-accordion-item-header al-responsive-columns div[left] {
@@ -460,9 +463,10 @@
   cursor: pointer;
   border-radius: 4px;
   flex-shrink: 0;
-  min-width: 24px;
-  width: 24px;
-  height: 24px;
+  min-width: 16px;
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/src/lib/resume-entries/resume-entries.component.scss

@@ -205,7 +205,7 @@
 @container resume-entries (max-width: 500px) {
   .entry-header {
     flex-direction: column;
-    gap: 12px;
+    gap: 4px;
     display: flex;
   }
 
@@ -261,7 +261,7 @@
 @media (max-width: 767px) {
   .entry-header {
     flex-direction: column;
-    gap: 12px;
+    gap: 4px;
     display: flex;
   }
 
@@ -477,4 +477,4 @@
       }
     }
   }
-}
+}

package/src/lib/test-styling/test-styling.component.html

@@ -3,6 +3,187 @@
   [overflowY]="'auto'">
   <al-tabs [selectedIndex]="0" [size]="'large'">
     <al-tab labelText="Resume">
+      <al-candidate-section
+          [candidateDetails]="candidateEntry"
+          [useCustomHeader]="false"
+          [getFieldNotHidden]="getFieldNotHidden"
+          [getForceShowAllFields]="getForceShowAllFields"
+        ></al-candidate-section>
+
+        <!-- candidate-section-form -->
+      <al-form *ngIf="candidateEntry" [showLeftButton]="true" [showSaveButton]="true" [showDeleteButton]="true" [testId]="'candidate'"
+          (leftButtonClick)="onLeftButtonClick($event)"
+          (saveButtonClick)="onSaveButtonClick($event)"
+          (deleteButtonClick)="onDeleteButtonClick($event)">
+
+          <!-- Row: First Name, Last Name -->
+          <app-flex-grid [type]="'row'" [mobRow]="1" [tabRow]="2" [desktop]="2" [gap]="'16px'">
+            <al-input
+              [label]="'First Name'"
+              [placeholder]="'First Name'"
+              [value]="'Jane'"
+              [type]="'text'"
+              [disabled]="false"
+              [helperText]="false"
+              [size]="'base'"
+              [types]="'primary'"
+              [dataTestId]="'first-name'"
+            ></al-input>
+            <al-input
+              [label]="'Last Name'"
+              [placeholder]="'Last Name'"
+              [value]="'Swindle'"
+              [type]="'text'"
+              [disabled]="false"
+              [helperText]="false"
+              [size]="'base'"
+              [types]="'primary'"
+              [dataTestId]="'last-name'"
+            ></al-input>
+          </app-flex-grid>
+
+          <!-- Row: Phone Number (full width) -->
+          <app-flex-grid [type]="'column'" [rows]="1" [mobRow]="1" [tabRow]="1" [desktop]="1" [gap]="'16px'">
+            <al-input
+              [label]="'Phone Number'"
+              [placeholder]="'Phone Number'"
+              [value]="'8529123456'"
+              [type]="'tel'"
+              [disabled]="false"
+              [helperText]="false"
+              [size]="'base'"
+              [types]="'primary'"
+              [dataTestId]="'phone-number'"
+            ></al-input>
+          </app-flex-grid>
+
+          <!-- Row: Email Address (full width) -->
+          <app-flex-grid [type]="'column'" [rows]="1" [mobRow]="1" [tabRow]="1" [desktop]="1" [gap]="'16px'">
+            <al-input
+              [label]="'Email Address'"
+              [placeholder]="'Email Address'"
+              [value]="'swindler@gmail.com'"
+              [type]="'email'"
+              [disabled]="false"
+              [helperText]="false"
+              [size]="'base'"
+              [types]="'primary'"
+              [dataTestId]="'email-address'"
+            ></al-input>
+          </app-flex-grid>
+
+          <!-- Row: LinkedIn (full width) -->
+          <app-flex-grid [type]="'column'" [rows]="1" [mobRow]="1" [tabRow]="1" [desktop]="1" [gap]="'16px'">
+            <al-input
+              [label]="'LinkedIn'"
+              [placeholder]="'LinkedIn'"
+              [value]="''"
+              [type]="'url'"
+              [disabled]="false"
+              [helperText]="false"
+              [size]="'base'"
+              [types]="'primary'"
+              [dataTestId]="'linkedin'"
+            ></al-input>
+          </app-flex-grid>
+
+          <!-- Row: Street (full width) -->
+          <app-flex-grid [type]="'column'" [rows]="1" [mobRow]="1" [tabRow]="1" [desktop]="1" [gap]="'16px'">
+            <al-input
+              [label]="'Street'"
+              [placeholder]="'Street'"
+              [value]="'Wide Street'"
+              [type]="'text'"
+              [disabled]="false"
+              [helperText]="false"
+              [size]="'base'"
+              [types]="'primary'"
+              [dataTestId]="'street'"
+            ></al-input>
+          </app-flex-grid>
+
+          <!-- Row: City, Region, Region Code -->
+          <app-flex-grid [type]="'row'" [mobRow]="1" [tabRow]="3" [desktop]="3" [gap]="'16px'">
+            <al-input
+              [label]="'City'"
+              [placeholder]="'City'"
+              [value]="''"
+              [type]="'text'"
+              [disabled]="false"
+              [helperText]="false"
+              [size]="'base'"
+              [types]="'primary'"
+              [dataTestId]="'city'"
+            ></al-input>
+            <al-input
+              [label]="'Region'"
+              [placeholder]="'Region'"
+              [value]="''"
+              [type]="'text'"
+              [disabled]="false"
+              [helperText]="false"
+              [size]="'base'"
+              [types]="'primary'"
+              [dataTestId]="'region'"
+            ></al-input>
+            <al-input
+              [label]="'Region Code'"
+              [placeholder]="'Region Code'"
+              [value]="''"
+              [type]="'text'"
+              [disabled]="false"
+              [helperText]="false"
+              [size]="'base'"
+              [types]="'primary'"
+              [dataTestId]="'region-code'"
+            ></al-input>
+          </app-flex-grid>
+
+          <!-- Row: Country (full width) -->
+          <app-flex-grid [type]="'column'" [rows]="1" [mobRow]="1" [tabRow]="1" [desktop]="2" [gap]="'16px'">
+            <al-input
+              [label]="'Country'"
+              [placeholder]="'Country'"
+              [value]="'United Kingdom'"
+              [type]="'text'"
+              [disabled]="false"
+              [helperText]="false"
+              [size]="'base'"
+              [types]="'primary'"
+              [dataTestId]="'country'"
+            ></al-input>
+          </app-flex-grid>
+
+          <!-- Row: Post Code, Gender -->
+          <app-flex-grid [type]="'row'" [mobRow]="1" [tabRow]="2" [desktop]="2" [gap]="'16px'">
+            <al-input
+              [label]="'Post Code'"
+              [placeholder]="'Post Code'"
+              [value]="''"
+              [type]="'text'"
+              [disabled]="false"
+              [helperText]="false"
+              [size]="'base'"
+              [types]="'primary'"
+              [dataTestId]="'post-code'"
+            ></al-input>
+            <al-input
+              [label]="'Gender'"
+              [placeholder]="'Gender'"
+              [value]="'Unselected'"
+              [type]="'text'"
+              [disabled]="false"
+              [helperText]="false"
+              [hasDropDown]="true"
+              [options]="['Male','Female','Other','Unselected']"
+              [rightIcon]="'expand_more'"
+              [size]="'base'"
+              [types]="'primary'"
+              [dataTestId]="'gender'"
+            ></al-input>
+          </app-flex-grid>
+
+        </al-form>
       <al-newresumeheader [title]="'Experiences'" [showHeaderCheckbox]="true" [headerCheckboxChecked]="false"
         [isLargeScreen]="true" [showPopOutPanel]="false" [hiddenSection]="{ headerSectionHidden: false }"
         [configEyeToggle]="configEyeToggle" [buttonConfig]="buttonConfig">
@@ -73,6 +254,8 @@
             (ApplyAIinQuill)="onAIApply($event)"></app-custom-editor>
         </app-flex-grid>
       </al-form>
+      <!-- candidate-section-form -->
+
     </al-tab>
     <al-tab labelText="CoverSheet">
       <h3>About Us</h3>
@@ -83,4 +266,4 @@
       <p>Get in touch with us through various channels.</p>
     </al-tab>
   </al-tabs>
-</al-general-container>
+</al-general-container>

package/src/lib/toolbar-left/toolbar-left.component.scss

@@ -1,3 +1,5 @@
+@import "../styles/colors.scss";
+
 .toolbar-container {
   background-color: transparent;
   border-radius: 8px;
@@ -19,7 +21,7 @@
 .toolbar-icon {
   /* Removed custom sizing/alignment to use icon-button's built-in styles */
   border-radius: 8px;
-  color: #6B7280;
+  color: $color-grey-500;
   background: transparent;
   transition: background 0.2s, color 0.2s;
   cursor: pointer;
@@ -97,7 +99,7 @@
   width: 20px;
   height: 20px;
   font-size: 20px;
-  color: #6B7280;
+  color: $color-grey-500;
 }
 
 .handle-icon mat-icon,
@@ -106,7 +108,7 @@
   width: 20px;
   height: 20px;
   font-size: 20px;
-  color: #6B7280;
+  color: $color-grey-500;
   
   ::ng-deep svg {
     width: 20px;