fix angular json

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 {