Fixed dark mode, other styling issues

rmorlok · Feb 17, 2024 · 3eded81 · 3eded81
1 parent a89f187
commit 3eded81
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 36 deletions.
diff --git a/angular.json b/angular.json
@@ -20,11 +20,6 @@
               "src/assets"
             ],
             "styles": [
-              {
-                "input": "src/scss/style.scss",
-                "inject": false,
-                "bundleName": "external-module"
-              },
               "node_modules/font-awesome/css/font-awesome.css",
               "node_modules/simple-line-icons/css/simple-line-icons.css",
               "src/scss/style.scss"
@@ -58,7 +53,7 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "kodenames:build"
+            "buildTarget": "kodenames:build"
           },
           "configurations": {
             "production": {
@@ -69,7 +64,7 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "kodenames:build"
+            "buildTarget": "kodenames:build"
           }
         },
         "test": {
@@ -81,11 +76,6 @@
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
             "styles": [
-              {
-                "input": "src/scss/style.scss",
-                "inject": false,
-                "bundleName": "external-module"
-              },
               "node_modules/font-awesome/css/font-awesome.css",
               "node_modules/simple-line-icons/css/simple-line-icons.css",
               "src/scss/style.scss"
@@ -119,11 +109,9 @@
       }
     }
   },
-  "defaultProject": "kodenames",
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "kod",
-      "styleext": "scss"
     },
     "@schematics/angular:directive": {
       "prefix": "kod"

diff --git a/src/app/views/clues/clues.component.html b/src/app/views/clues/clues.component.html
@@ -6,7 +6,7 @@
                    [class.red]="clue.team === 'red'"
                    [class.blue]="clue.team === 'blue'">
         <mat-icon matListItemIcon>{{ iconForClue(clue, i === table.clues.length - 1) }}</mat-icon>
-        <div mat-line>{{ clue.value }} &mdash; {{ clue.count }}</div>
+        <div mat-line style="white-space: normal">{{ clue.value }} &mdash; {{ clue.count }}</div>
         <div mat-line class="answers">
             <span *ngFor="let card of clue.chosenCards; index as i"
                   class="answer"

diff --git a/src/app/views/clues/clues.component.scss b/src/app/views/clues/clues.component.scss
@@ -1,5 +1,9 @@
 @import '../../../scss/colors';
 
+.mdc-list-item.clue {
+  height: 75px;
+}
+
 @media (prefers-color-scheme: light) {
   .clue {
     color: #222;
@@ -20,6 +24,7 @@
   }
 
   .pending-clue {
+    white-space: pre-line;
     color: #222;
 
     &.red {
@@ -68,6 +73,7 @@
   }
 
   .pending-clue {
+    white-space: pre-line;
     color: #222;
 
     &.red {

diff --git a/src/app/views/give-clue/give-clue.component.html b/src/app/views/give-clue/give-clue.component.html
@@ -1,7 +1,7 @@
 <h2 mat-dialog-title>Give a Clue</h2>
 <mat-dialog-content>
     <form class="clue-form" [formGroup]="formGroup">
-        <mat-form-field class="clue">
+        <mat-form-field class="clue" fxFlex>
             <mat-label>Clue</mat-label>
             <input matInput
                    formControlName="clue"
@@ -11,7 +11,7 @@ <h2 mat-dialog-title>Give a Clue</h2>
                 Clue is <strong>required</strong>
             </mat-error>
         </mat-form-field>
-        <mat-form-field appearance="fill">
+        <mat-form-field appearance="fill" fxFlex>
             <mat-label>Guesses</mat-label>
             <mat-select matNativeControl formControlName="guesses">
                 <mat-option value="unlimited">Unlimited</mat-option>

diff --git a/src/app/views/table/table.component.scss b/src/app/views/table/table.component.scss
@@ -111,7 +111,7 @@ mat-nav-list a {
     padding: 5px;
 
     .name {
-      padding-top: 4px;
+      padding-top: 8px;
     }
 
     &.red {
@@ -132,7 +132,7 @@ mat-nav-list a {
     padding: 5px;
 
     .name {
-      padding-top: 4px;
+      padding-top: 8px;
     }
 
     &.red {

diff --git a/src/app/views/table/table.component.ts b/src/app/views/table/table.component.ts
@@ -122,7 +122,8 @@ export class TableComponent implements OnInit, OnDestroy {
       data: <GiveClueData>{
         table: this.table,
         myPlayer: this.myPlayer
-      }
+      },
+      width: '600px',
     });
   }
 

diff --git a/src/scss/style.scss b/src/scss/style.scss
@@ -9,25 +9,20 @@
 @include mat.core();
 
 // Light theme
-$light-primary: mat.define-palette(mat.$indigo-palette, 500);
-$light-accent:  mat.define-palette(mat.$pink-palette, A200, A100, A400);
 $light-theme:   mat.define-light-theme((
-        color: (
-          primary: $light-primary,
-          accent: $light-accent,
-        )
+  color: (
+    primary: mat.define-palette(mat.$indigo-palette, 500),
+    accent: mat.define-palette(mat.$pink-palette, A200, A100, A400),
+  )
 ));
 
 // Dark theme
-$dark-primary: mat.define-palette(mat.$blue-grey-palette);
-$dark-accent:  mat.define-palette(mat.$amber-palette, A200, A100, A400);
-$dark-warn:    mat.define-palette(mat.$deep-orange-palette);
-$dark-theme:   mat.define-light-theme((
-        color: (
-                primary: $dark-primary,
-                accent: $dark-accent,
-                warn: $dark-warn
-        )
+$dark-theme:   mat.define-dark-theme((
+  color: (
+    primary: mat.define-palette(mat.$blue-grey-palette),
+    accent: mat.define-palette(mat.$amber-palette, A200, A100, A400),
+    warn: mat.define-palette(mat.$deep-orange-palette),
+  )
 ));
 
 @media (prefers-color-scheme: light) {
@@ -38,7 +33,6 @@ $dark-theme:   mat.define-light-theme((
   @include mat.all-component-themes($dark-theme);
 }
 
-
 //
 // If you want to add something do it here
 //