styles: - apply new palette and add some polishing

rocket-admin · Oct 22, 2023 · 0b80bcd · 0b80bcd
1 parent dd59fed
commit 0b80bcd
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 16 deletions.
diff --git a/frontend/src/app/app.component.css b/frontend/src/app/app.component.css
@@ -11,7 +11,7 @@
 
 .nav-bar {
     flex-shrink: 0;
-    background-color: #171D39;
+    background-color: #212121;
 }
 
 .nav-bar_home {

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
@@ -110,7 +110,7 @@ type Palettes = { primaryPalette: string, accentedPalette: string, warnPalette:
 type Colors = { myColorName: string };
 
 const colorConfig: IColorConfig<Palettes, Colors> = {
-  palettes: { primaryPalette: '#A63BFB', accentedPalette: '#95CFA3', warnPalette: '#B00020' },
+  palettes: { primaryPalette: '#212121', accentedPalette: '#A63BFB', warnPalette: '#B00020' },
   simpleColors: { myColorName: '#2e959a' },
 };
 

diff --git a/frontend/src/app/components/dashboard/db-table/db-table.component.css b/frontend/src/app/components/dashboard/db-table/db-table.component.css
@@ -150,8 +150,12 @@
     grid-template-columns: repeat(var(--colCount), auto) !important;
 }
 
-.db-table ::ng-deep .mat-mdc-row:nth-child(even) {
+/* .db-table ::ng-deep .mat-mdc-row:nth-child(even) {
     background-color: rgba(0, 0, 0, 0.02);
+} */
+
+.db-table ::ng-deep .mat-mdc-row:hover {
+    background-color: var(--color-primaryPalette-50);
 }
 
 .db-table ::ng-deep .mat-mdc-row,
@@ -224,7 +228,7 @@ tr.mat-row:hover {
 }
 
 .foreign-key-link {
-    color: var(--color-accentedPalette-700);
+    color: var(--color-accentedPalette-500);
 }
 
 .empty-table {

diff --git a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css
@@ -39,12 +39,12 @@
     width: 32px;
     height: 32px;
     border-radius: 50%;
-    background-color: var(--color-primaryPalette-100);
-    color: var(--color-primaryPalette-100-contrast);
+    background-color: var(--color-primaryPalette-50);
+    color: var(--color-primaryPalette-50-contrast);
 }
 
 .table-list-initials:hover {
-    background-color: var(--color-primaryPalette-200);
+    background-color: var(--color-primaryPalette-100);
 }
 
 .table-list-icon {
@@ -58,12 +58,12 @@
 }
 
 .list-item_active ::ng-deep .mdc-list-item__primary-text {
-    color: var(--color-accentedPalette-700);
+    color: var(--color-accentedPalette-500);
 }
 
 .list-item_active ::ng-deep .table-list-initials {
-    background-color: var(--color-primaryPalette-400);
-    color: var(--color-primaryPalette-400-contrast);
+    background-color: var(--color-accentedPalette-500);
+    color: var(--color-accentedPalette-500-contrast);
 }
 
 .empty-message {

diff --git a/frontend/src/app/components/user-settings/user-settings.component.html b/frontend/src/app/components/user-settings/user-settings.component.html
@@ -27,7 +27,7 @@ <h1 class="mat-h1">
             <strong>Email:</strong>
             <span class="mat-body-1 user-settings__value">{{currentUser.email}}</span>
         </div>
-        <button mat-button color="primary" data-testid="user-settings__button"
+        <button mat-stroked-button color="primary" data-testid="user-settings__button"
                 class="user-settings__button"
                 [disabled]="!currentUser.isActive"
                 (click)="changeEmail()">
@@ -37,7 +37,7 @@ <h1 class="mat-h1">
         <div class="user-settings__section-heading">
             <strong>Password:</strong>
         </div>
-        <a mat-button routerLink="/change-password" color="primary" data-testid="change-user-password-link"
+        <a mat-stroked-button routerLink="/change-password" color="primary" data-testid="change-user-password-link"
             angulartics2On="click"
             angularticsAction="User settings: change password is clicked"
             [disabled]="!currentUser.isActive"
@@ -55,7 +55,7 @@ <h1 class="mat-h1">
                 </span>
             </span>
         </div>
-        <a mat-button color="accent" class="upgrade-button"
+        <a mat-stroked-button color="accent" class="upgrade-button"
             routerLink="/upgrade"
             class="user-settings__button"
             angulartics2On="click"

diff --git a/frontend/src/app/components/users/users.component.html b/frontend/src/app/components/users/users.component.html
@@ -1,7 +1,7 @@
 <div class="wrapper">
     <header>
             <h1 class="mat-h1">User groups</h1>
-            <button mat-button *ngIf="connectionAccessLevel !== 'none'"
+            <button mat-stroked-button *ngIf="connectionAccessLevel !== 'none'"
                 color="primary" class="add-group-button"
                 angulartics2On="click"
                 angularticsAction="Users access: add group is clicked"

diff --git a/frontend/src/app/services/connections.service.ts b/frontend/src/app/services/connections.service.ts
@@ -147,14 +147,14 @@ export class ConnectionsService {
         } else {
           this.connectionLogo = null;
           this.companyName = null;
-          this._themeService.updateColors({ palettes: { primaryPalette: '#A63BFB', accentedPalette: '#95CFA3' }});
+          this._themeService.updateColors({ palettes: { primaryPalette: '#212121', accentedPalette: '#A63BFB' }});
         }
       });
     } else {
       this.connection = {...this.connectionInitialState};
       this.connectionLogo = null;
       this.companyName = null;
-      this._themeService.updateColors({ palettes: { primaryPalette: '#A63BFB', accentedPalette: '#95CFA3' }});
+      this._themeService.updateColors({ palettes: { primaryPalette: '#212121', accentedPalette: '#A63BFB' }});
     }
   }
 

diff --git a/frontend/src/custom-theme.scss b/frontend/src/custom-theme.scss
@@ -137,6 +137,10 @@ body .mat-mdc-flat-button.mat-warn, body .mat-mdc-unelevated-button.mat-warn {
 //   --mdc-checkbox-selected-checkmark-color: var(--color-accentedPalette-500-contrast) !important;
 // }
 
+.mat-mdc-checkbox .mdc-checkbox .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background .mdc-checkbox__checkmark {
+  --mdc-checkbox-selected-checkmark-color: var(--color-accentedPalette-500-contrast) !important;
+}
+
 $button-custom-level: mat.define-typography-level(
   $font-family: 'Noto Sans',
   $font-weight: 500,