Changed the location and shape of the login button [#622]

Moved it to the left to be more intuitive, and made it a full button with a label.
comixed · Mar 7, 2021 · 3f8eee2 · 3f8eee2
1 parent 5a9bd95
commit 3f8eee2
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/comixed-web/src/app/components/navigation-bar/navigation-bar.component.html b/comixed-web/src/app/components/navigation-bar/navigation-bar.component.html
@@ -1,17 +1,19 @@
 <mat-toolbar class="cx-width-100">
-  <button mat-icon-button [matMenuTriggerFor]="menu">
-    <mat-icon>more_vert</mat-icon>
-  </button>
-  <mat-label class="cx-spacer">ComiXed</mat-label>
   <button
     *ngIf="!user"
-    mat-icon-button
+    class="cx-action-button"
+    mat-flat-button
     color="primary"
     [matTooltip]="'user.login-user.login-tooltip' | translate"
     (click)="onLogin()"
   >
     <mat-icon>login</mat-icon>
+    <mat-label>{{ "button.login" | translate }}</mat-label>
   </button>
+  <button mat-icon-button [matMenuTriggerFor]="menu">
+    <mat-icon>more_vert</mat-icon>
+  </button>
+  <mat-label class="cx-spacer">ComiXed</mat-label>
   <mat-label *ngIf="!!user">
     {{ "app.logged-in" | translate: { email: user.email } }}
     <button

diff --git a/comixed-web/src/styles.scss b/comixed-web/src/styles.scss
@@ -182,6 +182,6 @@ $cx-column-large: 325px;
 // buttons
 
 .cx-action-button {
-  min-width: 200px !important;
+  min-width: 100px !important;
   padding-bottom: 5px !important;
 }