Skip to content
Snippets Groups Projects
Commit 99efc6dd authored by OZGCloud's avatar OZGCloud
Browse files

accessibility low hanging fruits

parent 02d8aef8
Branches
Tags
No related merge requests found
@import "~@angular/material/theming"; @import "~@angular/material/theming";
$grey: #777;
$background: #fafafa; $background: #fafafa;
$dark-background: #303030; $dark-background: #303030;
......
@import "variables";
:host { :host {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
font-size: 12px; font-size: 12px;
color: #999; color: #666;
padding: 4px 8px; padding: 4px 8px;
transform: rotate(-90deg) translate(100%, 0); transform: rotate(-90deg) translate(100%, 0);
transform-origin: right bottom; transform-origin: right bottom;
......
<header> <header>
<div class="left"> <div class="left">
<button mat-icon-button (click)="toggleMenuEvent.emit(!this.navigationCollapse)"> <goofy-client-icon-button-with-spinner icon="menu" (clickEmitter)="toggleMenuEvent.emit(!this.navigationCollapse)">
<mat-icon>menu</mat-icon></button> </goofy-client-icon-button-with-spinner>
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"> <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
<img src="/assets/img/logo.svg" alt="Goofy Logo" /> <img src="/assets/img/logo.svg" alt="Goofy Logo" />
<h1 data-test-id='title'>Goofy</h1> <h1 data-test-id='title'>Goofy</h1>
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<goofy-client-settings [darkMode]="darkMode" (darkModeEmitter)="darkModeEmitter.emit($event)"></goofy-client-settings> <goofy-client-settings [darkMode]="darkMode" (darkModeEmitter)="darkModeEmitter.emit($event)"></goofy-client-settings>
<button mat-icon-button [matMenuTriggerFor]="accountMenu" class="big-button" data-test-id="user-icon-button"> <button mat-icon-button [matMenuTriggerFor]="accountMenu" class="big-button" aria-label="button with user icon" data-test-id="user-icon-button">
<goofy-client-user-icon></goofy-client-user-icon> <goofy-client-user-icon></goofy-client-user-icon>
</button> </button>
......
...@@ -55,7 +55,7 @@ img { ...@@ -55,7 +55,7 @@ img {
} }
.right { .right {
color: #999; color: $grey;
display: flex; display: flex;
align-items: center; align-items: center;
} }
<button mat-icon-button [matMenuTriggerFor]="settingsMenu"><mat-icon>settings</mat-icon></button> <goofy-client-icon-button-with-spinner icon="settings" [matMenuTriggerFor]="settingsMenu"></goofy-client-icon-button-with-spinner>
<mat-menu #settingsMenu="matMenu" > <mat-menu #settingsMenu="matMenu" >
<div class="menu-container" <div class="menu-container"
(click)="$event.stopPropagation()"> (click)="$event.stopPropagation()">
......
@import "variables";
.user-profile { .user-profile {
width: 36px; width: 36px;
height: 36px; height: 36px;
...@@ -16,7 +18,7 @@ ...@@ -16,7 +18,7 @@
} }
mat-icon { mat-icon {
color: #999; color: $grey;
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment