fix styles

Dangl-IT · May 10, 2024 · 6c95717 · 6c95717
1 parent 668d70d
commit 6c95717
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 10 deletions.
diff --git a/src/server/dangl-opencde-ui/src/app/app.component.html b/src/server/dangl-opencde-ui/src/app/app.component.html
@@ -8,6 +8,7 @@
         [opened]="sideNavOpened && userIsAuthenticated"
         (openedChange)="sideNavOpened && (userIsAuthenticated = $event)"
         class="main-sidenav dark-bg"
+        color="primary"
       >
         <div class="list">
           <opencde-sidenav></opencde-sidenav>

diff --git a/src/server/dangl-opencde-ui/src/app/components/sidenav/sidenav.component.html b/src/server/dangl-opencde-ui/src/app/components/sidenav/sidenav.component.html
@@ -1,9 +1,9 @@
 <div>
-  <a routerLinkActive="active" mat-button routerLink="/projects">
+  <a routerLinkActive="active" mat-flat-button routerLink="/projects">
     <mat-icon>business</mat-icon>
     <span>Projects</span>
   </a>
-  <a routerLinkActive="active" mat-button routerLink="/api-spec">
+  <a routerLinkActive="active" mat-flat-button routerLink="/api-spec">
     <mat-icon>settings</mat-icon>
     <span>API</span>
   </a>

diff --git a/src/server/dangl-opencde-ui/src/app/components/sidenav/sidenav.component.scss b/src/server/dangl-opencde-ui/src/app/components/sidenav/sidenav.component.scss
@@ -10,6 +10,8 @@ a {
   text-align: start;
   padding-top: 4px;
   padding-bottom: 2px;
+  background-color: $color-dark !important;
+  color: #fff !important;
 }
 
 mat-icon {
@@ -19,5 +21,5 @@ mat-icon {
 }
 
 a.active {
-  background-color: $color-primary;
+  background-color: $color-primary !important;
 }
diff --git a/src/server/dangl-opencde-ui/src/app/components/site-header/site-header.component.html b/src/server/dangl-opencde-ui/src/app/components/site-header/site-header.component.html
@@ -13,7 +13,7 @@
       <opencde-user-info [userInfo]="userInfo"></opencde-user-info>
     </ng-container>
     <ng-template #notUser>
-      <button mat-button (click)="login()">
+      <button mat-flat-button color="primary" (click)="login()">
         <span>Login / Register</span>
       </button>
     </ng-template>

diff --git a/src/server/dangl-opencde-ui/src/app/components/user-info/user-info.component.html b/src/server/dangl-opencde-ui/src/app/components/user-info/user-info.component.html
@@ -1,15 +1,22 @@
 <ng-container *ngIf="userInfo">
-  <button class="menu-btn" mat-button [matMenuTriggerFor]="menu">
+  <div class="user-info-container">
     <img
       class="profile-image"
       *ngIf="userInfo?.identiconId"
       [diIcon]="userInfo.identiconId"
       [rectangleSize]="30"
     />
-    <span id="username-nav">
-      {{ userInfo.username }}
-    </span>
-  </button>
+    <button
+      class="menu-btn"
+      mat-flat-button
+      color="primary"
+      [matMenuTriggerFor]="menu"
+    >
+      <span id="username-nav">
+        {{ userInfo.username }}
+      </span>
+    </button>
+  </div>
 </ng-container>
 <mat-menu #menu>
   <button mat-menu-item (click)="logout()">

diff --git a/src/server/dangl-opencde-ui/src/app/components/user-info/user-info.component.scss b/src/server/dangl-opencde-ui/src/app/components/user-info/user-info.component.scss
@@ -10,3 +10,8 @@
 #username-nav {
   font-size: 14px;
 }
+
+.user-info-container {
+  display: flex;
+  align-items: center;
+}
diff --git a/src/server/dangl-opencde-ui/src/styles.scss b/src/server/dangl-opencde-ui/src/styles.scss
@@ -11,5 +11,5 @@ body {
 }
 
 .dark-bg {
-  background-color: $color-dark;
+  background-color: $color-dark !important;
 }