Fix dark theme at serval-administration (#3511)

Author: marksvc

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/_draft-jobs-theme.scss

@@ -0,0 +1,15 @@
+@use '@angular/material' as mat;
+
+@mixin color($theme) {
+  $is-dark: mat.get-theme-type($theme) == dark;
+
+  --sf-draft-jobs-table-row-background: #{mat.get-theme-color($theme, neutral, if($is-dark, 10, 100))};
+  --sf-draft-jobs-project-link-color: #{mat.get-theme-color($theme, primary, if($is-dark, 70, 40))};
+  --sf-draft-jobs-book-count-color: #{mat.get-theme-color($theme, neutral, if($is-dark, 70, 40))};
+}
+
+@mixin theme($theme) {
+  @if mat.theme-has($theme, color) {
+    @include color($theme);
+  }
+}

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/_job-events-dialog-theme.scss

@@ -0,0 +1,18 @@
+@use '@angular/material' as mat;
+
+@mixin color($theme) {
+  $is-dark: mat.get-theme-type($theme) == dark;
+
+  --sf-job-events-summary-background: #{mat.get-theme-color($theme, neutral, if($is-dark, 20, 95))};
+  --sf-job-events-item-border-color: #{mat.get-theme-color($theme, neutral, if($is-dark, 40, 90))};
+  --sf-job-events-exception-background: #{mat.get-theme-color($theme, error, if($is-dark, 20, 95))};
+  --sf-job-events-exception-border-color: #{mat.get-theme-color($theme, error, if($is-dark, 40, 80))};
+  --sf-job-events-payload-background: #{mat.get-theme-color($theme, neutral, if($is-dark, 17, 98))};
+  --sf-job-events-payload-border-color: #{mat.get-theme-color($theme, neutral, if($is-dark, 40, 90))};
+}
+
+@mixin theme($theme) {
+  @if mat.theme-has($theme, color) {
+    @include color($theme);
+  }
+}

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/draft-jobs.component.scss

@@ -6,7 +6,7 @@
 }
 
 #draft-jobs-table tr:nth-child(odd) {
-  background-color: white;
+  background-color: var(--sf-draft-jobs-table-row-background);
 }
 
 app-owner,
@@ -76,7 +76,7 @@ app-owner,
 }
 
 .project-link {
-  color: #1976d2;
+  color: var(--sf-draft-jobs-project-link-color);
   text-decoration: none;
   font-weight: 500;
 
@@ -89,7 +89,7 @@ app-owner,
   cursor: help;
   text-decoration: underline;
   text-decoration-style: dotted;
-  color: #666;
+  color: var(--sf-draft-jobs-book-count-color);
 }
 
 .filter-notice-content {

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/job-events-dialog.component.scss

@@ -6,7 +6,7 @@
 }
 
 .job-summary {
-  background: #f5f5f5;
+  background: var(--sf-job-events-summary-background);
   padding: 16px;
   border-radius: 4px;
   margin-bottom: 20px;
@@ -18,7 +18,7 @@
 
 .events-timeline {
   .event-item {
-    border: 1px solid #e0e0e0;
+    border: 1px solid var(--sf-job-events-item-border-color);
     border-radius: 8px;
     margin-bottom: 16px;
     padding: 16px;
@@ -68,8 +68,8 @@
   }
 
   .event-exception {
-    background: #ffebee;
-    border: 1px solid #ffcdd2;
+    background: var(--sf-job-events-exception-background);
+    border: 1px solid var(--sf-job-events-exception-border-color);
     border-radius: 4px;
     padding: 12px;
     margin-bottom: 8px;
@@ -88,8 +88,8 @@
 
   .event-payload,
   .event-result {
-    background: #f9f9f9;
-    border: 1px solid #e0e0e0;
+    background: var(--sf-job-events-payload-background);
+    border: 1px solid var(--sf-job-events-payload-border-color);
     border-radius: 4px;
     padding: 12px;
     margin-bottom: 8px;

src/SIL.XForge.Scripture/ClientApp/src/app/shared/notice/notice.component.scss

@@ -138,6 +138,8 @@ $colors: (
     // set the button theme vars to our specific colors
     --mdc-filled-button-container-color: var(--notice-color-button-bg);
     --mdc-filled-button-label-text-color: var(--notice-color-button-text);
+    // icon buttons
+    color: var(--notice-color-text);
 
     &:hover {
       background-color: var(--notice-color-button-hover-bg) !important;

src/SIL.XForge.Scripture/ClientApp/src/material-styles.scss

@@ -23,6 +23,8 @@
 @use 'src/app/translate/biblical-terms/biblical-terms-theme' as sf-biblical-terms;
 @use 'src/app/translate/translate-overview/translate-overview.component' as sf-translate-overview;
 @use 'src/app/permissions-viewer/permissions-viewer-theme' as sf-permissions-viewer;
+@use 'src/app/serval-administration/draft-jobs-theme' as sf-draft-jobs;
+@use 'src/app/serval-administration/job-events-dialog-theme' as sf-job-events-dialog;
 
 @use 'text' as sf-text;
 
@@ -55,6 +57,8 @@
   @include sf-text.theme($theme);
   @include sf-translate-overview.theme($theme);
   @include sf-permissions-viewer.theme($theme);
+  @include sf-draft-jobs.theme($theme);
+  @include sf-job-events-dialog.theme($theme);
 
   // Custom variables
   --sf-disabled-foreground: #{mat.get-theme-color($theme, neutral, 70)};