From 0d3965aa57f4ff95e4a88b398329c2c7e4a13519 Mon Sep 17 00:00:00 2001
From: Armin Ster <sterarmin@gmail.com>
Date: Fri, 6 Oct 2023 15:52:03 +0200
Subject: [PATCH] Refactor: Switch back to ng-select

---
 src/app/components/auth/auth.component.scss   |  2 +-
 .../snippet-options.component.scss            |  2 +-
 .../snippet-modal.component.html              | 17 +++++------
 src/styles.scss                               | 28 ++++++++++++++++---
 src/theme/_variables.scss                     | 25 +++++++++++++++--
 5 files changed, 56 insertions(+), 18 deletions(-)

diff --git a/src/app/components/auth/auth.component.scss b/src/app/components/auth/auth.component.scss
index 85cd886f4..a883b6d37 100644
--- a/src/app/components/auth/auth.component.scss
+++ b/src/app/components/auth/auth.component.scss
@@ -24,7 +24,7 @@
     .application-info {
       padding-bottom: 20px;
       grid-area: info;
-      background-color: $secondary-color;
+      background-color: $secondary-color-600;
       color: #ffffff;
     }
 
diff --git a/src/app/components/snippet-options/snippet-options.component.scss b/src/app/components/snippet-options/snippet-options.component.scss
index 8ae740f4f..9a23e5ac0 100644
--- a/src/app/components/snippet-options/snippet-options.component.scss
+++ b/src/app/components/snippet-options/snippet-options.component.scss
@@ -36,7 +36,7 @@
       }
 
       .link {
-        border: 1px solid #{$primary-color};
+        border: 1px solid #{$primary-color-950};
         padding: 0px 10px;
         height: 36px;
         display: flex;
diff --git a/src/app/modals/snippet-modal/snippet-modal.component.html b/src/app/modals/snippet-modal/snippet-modal.component.html
index e42daa6ad..51729993c 100644
--- a/src/app/modals/snippet-modal/snippet-modal.component.html
+++ b/src/app/modals/snippet-modal/snippet-modal.component.html
@@ -13,20 +13,17 @@ <h4 class="modal-title" *ngIf="snippet">Edit snippet</h4>
       </anglify-text-field>
 
       <ng-container *ngIf="labels$ | async as labels">
-        <anglify-select
+        <label for="labels">Labels</label>
+        <ng-select
+          class="input-field mb-4"
           [multiple]="true"
-          label="Labels"
-          appearance="outlined"
+          id="labels"
           [items]="labels"
-          itemTextKey="name"
-          itemValueKey="pk"
+          bindLabel="name"
+          bindValue="pk"
           formControlName="labels"
-          [clearable]="true"
         >
-          <ng-template slot="selection" let-context>
-            <anglify-chip *ngFor="let item of context.selectedItems">{{ item.name }}</anglify-chip>
-          </ng-template>
-        </anglify-select>
+        </ng-select>
       </ng-container>
 
       <anglify-text-area label="Description" appearance="outlined">
diff --git a/src/styles.scss b/src/styles.scss
index 86cc76f1b..cba2ff0ca 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,21 +1,22 @@
 /* You can add global styles to this file, and also import other style files */
 @use 'node_modules/@anglify/components/styles/index' as *;
 @use 'node_modules/@anglify/components/styles/themes/light' as *;
+@import '~@ng-select/ng-select/themes/default.theme.css';
 @import 'theme/variables';
 
 :root {
   @include light-theme;
 
-  --anglify-input-outlined-label-color-focused: #{$primary-color};
-  --anglify-input-outlined-border-color-focused: #{$primary-color};
+  --anglify-input-outlined-label-color-focused: #{$primary-color-950};
+  --anglify-input-outlined-border-color-focused: #{$primary-color-950};
   --anglify-notched-outline-border-radius: 0px;
 
   --anglify-button-contained-border-radius: 0px;
-  --anglify-button-contained-background: #{$primary-color};
+  --anglify-button-contained-background: #{$primary-color-950};
   --anglify-button-text-border-radius: 0px;
   --anglify-button-contained-label-color: #ffffff;
 
-  --anglify-button-text-label-color: #{$primary-color};
+  --anglify-button-text-label-color: #{$primary-color-950};
 
   // change border radius of bootstrap modal
   .modal-content {
@@ -25,4 +26,23 @@
   anglify-legacy-menu .dropdown-menu {
     display: block;
   }
+
+  .ng-select.input-field {
+    .ng-select-container {
+      min-height: 54px;
+      border-radius: 0;
+
+      .ng-value {
+        background-color: #{$secondary-color-200} !important;
+      }
+    }
+    .ng-dropdown-panel-items {
+      .ng-option-selected {
+        background-color: #{$secondary-color-200} !important;
+      }
+      .ng-option-marked {
+        background-color: #{$secondary-color-50} !important;
+      }
+    }
+  }
 }
diff --git a/src/theme/_variables.scss b/src/theme/_variables.scss
index ac9e95762..52b437506 100644
--- a/src/theme/_variables.scss
+++ b/src/theme/_variables.scss
@@ -1,2 +1,23 @@
-$primary-color: #142f43;
-$secondary-color: #cf5331;
+$primary-color-50: #f2f9fd;
+$primary-color-100: #e5f0f9;
+$primary-color-200: #c5e2f2;
+$primary-color-300: #92cae7;
+$primary-color-400: #57aed9;
+$primary-color-500: #3293c5;
+$primary-color-600: #2277a7;
+$primary-color-700: #1d5e87;
+$primary-color-800: #1c5170;
+$primary-color-900: #1c445e;
+$primary-color-950: #142f43;
+
+$secondary-color-50: #fcf5f0;
+$secondary-color-100: #f8e8dc;
+$secondary-color-200: #f1cfb7;
+$secondary-color-300: #e8ae89;
+$secondary-color-400: #dd845a;
+$secondary-color-500: #d66539;
+$secondary-color-600: #cf5331;
+$secondary-color-700: #a63d28;
+$secondary-color-800: #853327;
+$secondary-color-900: #6c2c22;
+$secondary-color-950: #3a1410;