fix settings component resetting nav width, switched to using CSS fil…

…ter to set unsaved color for nav png's, unified color schemes further

src/renderer/components/nav.component.ts

@@ -25,7 +25,6 @@ import { EventEmitter } from "@angular/core";
 })
 export class NavComponent implements OnDestroy {
   isExceptionsUnsaved: boolean = false;
-  dummy: boolean = true;
   private userConfigurations: {
     saved: UserConfiguration;
     current: UserConfiguration;
@@ -106,7 +105,6 @@ export class NavComponent implements OnDestroy {
     this.subscriptions.add(
       this.exceptionsService.isUnsavedObservable.subscribe((val: boolean) => {
         this.isExceptionsUnsaved = val;
-        this.refreshActiveRoute();
         this.changeRef.detectChanges();
       }),
     );
@@ -115,10 +113,6 @@ export class NavComponent implements OnDestroy {
     });
   }
 
-  private refreshActiveRoute() {
-    this.dummy = !this.dummy;
-  }
-
   getParserControls() {
     return (this.navForm.get("parserStatuses") as FormArray).controls;
   }

src/renderer/components/settings.component.ts

@@ -216,6 +216,13 @@ export class SettingsComponent implements OnDestroy {
   loadLanguage() {
     this.languageService.loadLanguage(this.settings.language);
   }
+  changeTheme(newTheme: string) {
+    if(this.settings.theme!==newTheme){
+      this.settings.theme = newTheme;
+      this.loadTheme();
+      this.onSettingsChange();
+    }
+  }
 
   loadTheme() {
     document.querySelector("html").className = "";

src/renderer/styles/nav-link.component.scss

@@ -24,4 +24,11 @@ nav-link {
       display: flex;
     }
   }
+  &.unsaved {
+    img {
+      // calculated using https://isotropic.co/tool/hex-color-to-css-filter/
+      // target was #fbfd81
+      filter: sepia(20%) saturate(7471%) hue-rotate(315deg) brightness(124%) contrast(98%);
+    }
+  }
 }

src/renderer/styles/themes.global.scss

@@ -1275,7 +1275,7 @@
   --font-markdown-h6: 0.85em;
   --margin-markdown-hx: 3rem 0 1rem 0;
   --color-nav-border: rgba(0, 0, 0, 0);
-  --color-nav-border-drag: #249a3b;
+  --color-nav-border-drag: black;
   --color-nav-background: #32353d; //
   --display-nav-border: none;
   --height-nav-area: 260px;
@@ -1436,15 +1436,15 @@
   --color-nav-link-text: #cccfd4;
   --color-nav-link-text-active: #f0fff0;
   --color-nav-link-text-hover: #f0fff0;
-  --color-nav-link-enabled: #258045;
-  --color-nav-link-enabled-active: #22c65d;
-  --color-nav-link-enabled-hover: #22c65d;
-  --color-nav-link-disabled: #991d47;
-  --color-nav-link-disabled-active: #c22359;
-  --color-nav-link-disabled-hover: #c22359;
-  --color-nav-link-unsaved: #b8ba00;
-  --color-nav-link-unsaved-active: #b8ba00;
-  --color-nav-link-unsaved-hover: #d9dc00;
+  --color-nav-link-enabled: var(--color--filled);
+  --color-nav-link-enabled-active: var(--color--filled);
+  --color-nav-link-enabled-hover: var(--color--filled);
+  --color-nav-link-disabled: var(--color--missing);
+  --color-nav-link-disabled-active: var(--color--missing);
+  --color-nav-link-disabled-hover:var(--color--missing);
+  --color-nav-link-unsaved: var(--color-nested-form-error-border);
+  --color-nav-link-unsaved-active: var(--color-nested-form-error-border);
+  --color-nav-link-unsaved-hover: var(--color-nested-form-error-border);
   --color-nav-link-background-active: #4f596b;
   --color-nav-link-bg-hover: transparent;
   --padding-nav-link: 16px;
@@ -1675,7 +1675,7 @@
   --font-markdown-h6: 0.85em;
   --margin-markdown-hx: 3rem 0 1rem 0;
   --color-nav-border: rgba(0, 0, 0, 0);
-  --color-nav-border-drag: #249a3b;
+  --color-nav-border-drag: var(--color--filled);
   --color-nav-background: #32353d;
   --display-nav-border: inherit;
   --height-nav-area: 260px;

src/renderer/templates/nav.component.html

@@ -47,17 +47,11 @@
     [routerLinkActiveOptions]="{ exact: true }"
     (click)="navClick.emit()"
   >
-    <!--got rid of dummy: dummy in routerLinkActiveOptions, maybe try to get rid of dummy variable-->
-    <ng-container *ngIf="!isExceptionsUnsaved">
-      <img src="/assets/images/danger.png" alt="Icon" height="16" />{{
-        lang.userExceptions
-      }}
-    </ng-container>
-    <ng-container *ngIf="isExceptionsUnsaved">
-      <img src="/assets/images/danger-unsaved.png" alt="Icon" height="16" />{{
-        lang.userExceptions
-      }}
-    </ng-container>
+  <ng-container>
+    <img src="/assets/images/danger.png" alt="Icon" height="16"/>{{
+      lang.userExceptions
+    }}
+  </ng-container>
   </nav-link>
 </nav-expand>
 

src/renderer/templates/settings.component.html

@@ -55,9 +55,7 @@
           style="font-size: 0.85em"
           class="ngSelect"
           [ngModel]="settings.theme"
-          (ngModelChange)="
-            settings.theme = $event; loadTheme(); onSettingsChange()
-          "
+          (ngModelChange)="changeTheme($event);"
           [values]="themes"
         >
         </ng-select>
@@ -178,8 +176,6 @@
         "
         >{{ lang.text.fuzzy_verbose }}</ng-toggle-button
       >
-      <!-- Currently no filtering is done since only SGDB is still a viable provider and it doesn't need filtering. I am keeping the underlying code in place in case it is needed in the future -->
-      <!-- <ng-toggle-button class="ngToggleButton" [ngModel]="settings.fuzzyMatcher.filterProviders" (ngModelChange)="settings.fuzzyMatcher.filterProviders = $event; onSettingsChange();">{{lang.text.fuzzy_filter}}</ng-toggle-button> -->
       <div class="inlineGroup">
         <div
           class="clickButton dangerousButton"
@@ -206,6 +202,8 @@
       </div>
     </div>
   </div>
+
+
   <div>
     <div class="section">
       <label>