fix angular json

angular.json

@@ -15,8 +15,9 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
+            "browser": "src/main.ts",
             "outputPath": {
               "base": "dist/wgenerator"
             },
@@ -25,7 +26,7 @@
               "src/polyfills.ts"
             ],
             "tsConfig": "tsconfig.app.json",
-            "aot": false,
+            "inlineStyleLanguage": "less",
             "assets": [
               "src/browserconfig.xml",
               "src/android-chrome-192x192.png",
@@ -49,17 +50,9 @@
               "lodash",
               "docx",
               "qrcode"
-            ],
+            ]
-            "browser": "src/main.ts"
 },
           "configurations": {
-            "development": {
-              "aot": false,
-              "extractLicenses": false,
-              "sourceMap": true,
-              "optimization": false,
-              "namedChunks": true
-            },
             "production": {
               "fileReplacements": [
                 {
@@ -67,114 +60,44 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2mb",
+                  "maximumWarning": "500kB",
-                  "maximumError": "5mb"
+                  "maximumError": "1MB"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
+                  "maximumWarning": "4kB",
-                  "maximumError": "10kb"
+                  "maximumError": "8kB"
                 }
               ],
-              "serviceWorker": "ngsw-config.json"
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
             }
           },
           "defaultConfiguration": "production"
         },
    "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
-          "options": {
-            "buildTarget": "wgenerator:build:development"
-          },
           "configurations": {
-            "development": {
-              "buildTarget": "wgenerator:build:development"
-            },
             "production": {
               "buildTarget": "wgenerator:build:production"
+            },
+            "development": {
+              "buildTarget": "wgenerator:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "buildTarget": "wgenerator:build"
-          }
-        },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:unit-test"
-          "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets",
-              "src/manifest.webmanifest"
-            ],
-            "styles": [],
-            "scripts": []
-          }
-        },
-        "lint": {
-          "builder": "@angular-eslint/builder:lint",
-          "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
         }
       }
     }
   }
-  },
-  "cli": {
-    "analytics": "4047dcd7-89f4-402f-958e-e365a5505c55",
-    "schematicCollections": [
-      "@angular-eslint/schematics"
-    ]
-  },
-  "schematics": {
-    "@angular-eslint/schematics:application": {
-      "setParserOptionsProject": true
-    },
-    "@angular-eslint/schematics:library": {
-      "setParserOptionsProject": true
-    },
-    "@schematics/angular:component": {
-      "type": "component"
-    },
-    "@schematics/angular:directive": {
-      "type": "directive"
-    },
-    "@schematics/angular:service": {
-      "type": "service"
-    },
-    "@schematics/angular:guard": {
-      "typeSeparator": "."
-    },
-    "@schematics/angular:interceptor": {
-      "typeSeparator": "."
-    },
-    "@schematics/angular:module": {
-      "typeSeparator": "."
-    },
-    "@schematics/angular:pipe": {
-      "typeSeparator": "."
-    },
-    "@schematics/angular:resolver": {
-      "typeSeparator": "."
-    }
-  }
 }

src/app/modules/shows/dialog/report-dialog/report-dialog.component.less

@@ -14,7 +14,7 @@
 
 .list-head {
   padding: 3px 10px;
-  color: var(--text-muted);
+  color: var(--text-soft);
   font-size: 0.85rem;
   font-weight: 600;
 }

src/app/modules/shows/show/show.component.less

@@ -59,7 +59,7 @@
 }
 
 .next-song {
-  color: var(--text-muted);
+  color: var(--text-soft);
   position: fixed;
   bottom: 0;
   right: 10px;
@@ -70,7 +70,7 @@
 }
 
 .time {
-  color: var(--text-muted);
+  color: var(--text-soft);
   position: fixed;
   bottom: 0;
   left: 10px;

src/app/widget-modules/components/application-frame/navigation/link/link.component.less

@@ -3,18 +3,17 @@ a {
   display: block;
   height: 50px;
   font-size: 16px;
-  font-weight: bold;
+  font-weight: 500;
   text-decoration: none;
+  letter-spacing: 1.1px;
   padding: 15px;
   box-sizing: border-box;
   background: transparent;
-  transition: var(--transition);
+  transition: var(--transition-fast);
   border-color: transparent;
 
   fa-icon {
     display: inline-block;
-    transform: scale(1);
-    transition: var(--transition);
   }
 
   @media screen and (max-width: 860px) {
@@ -28,18 +27,11 @@ a {
     color: var(--primary-hover);
     border-bottom: 5px solid var(--hover-background);
 
-    fa-icon {
-      transform: scale(1.2);
-    }
   }
 
   &.active {
     border-bottom: 5px solid var(--primary-color);
     opacity: 1;
     color: var(--text-inverse);
-
-    fa-icon {
-      transform: scale(1.3);
-    }
   }
 }

src/app/widget-modules/components/card/card.component.less

@@ -59,7 +59,7 @@
   margin-bottom: 20px;
   margin-right: 20px;
   opacity: 0.7;
-  color: var(--text-muted);
+  color: var(--text-soft);
   padding-left: 20px;
   padding-top: 20px;
 }
@@ -74,5 +74,5 @@
   right: 10px;
   top: 15px;
   opacity: 0.7;
-  color: var(--text-muted);
+  color: var(--text-soft);
 }

src/app/widget-modules/components/sidebar/sidebar.component.html

@@ -0,0 +1 @@
+<aside></aside>

src/app/widget-modules/components/sidebar/sidebar.component.less

@@ -0,0 +1,11 @@
+aside {
+  width: 200px;
+  height: calc(100vh - 50px);
+
+  position: fixed;
+  top: 50px;
+  left: 0;
+  bottom: 0;
+
+  background: var(--surface);
+}

src/app/widget-modules/components/sidebar/sidebar.component.spec.ts

@@ -0,0 +1,22 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {SidebarComponent} from './sidebar.component';
+
+describe('SidebarComponent', () => {
+  let component: SidebarComponent;
+  let fixture: ComponentFixture<SidebarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SidebarComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SidebarComponent);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/widget-modules/components/sidebar/sidebar.component.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-sidebar',
+  imports: [],
+  templateUrl: './sidebar.component.html',
+  styleUrl: './sidebar.component.less',
+})
+export class SidebarComponent {}

src/styles/styles.less

@@ -11,7 +11,6 @@
   --surface-muted: rgba(41, 46, 73, 0.06);
 
   --text: #1f2433;
-  --text-muted: #5f6b73;
   --text-soft: #7a858c;
   --text-inverse: #f7fbff;
 
@@ -34,6 +33,10 @@
   --link-color: var(--primary-active);
   --focus-ring: 0 0 0 2px rgba(111, 143, 149, 0.28);
   --transition: all 300ms ease-in-out;
+  --transition-fast: all 150ms ease-in-out;
+
+
+  --mat-dialog-supporting-text-color: var(--text);
 }
 
 html {