style: login/logout btn stroked
MODIFY
src/app/components/header/header.component.html
src/app/components/header/header.component.html
<p #heroSubtitle>{{ heroService.hero.subtitle }}</p>
</div>
<div id="hero-btn">
- <button mat-raised-button color="primary" (click)="login()" *ngIf="!loggedIn; else logoutBtn">
+ <button mat-stroked-button color="primary" (click)="login()" *ngIf="!loggedIn; else logoutBtn" class="primary-border-color">
Register / Login
</button>
<ng-template #logoutBtn>
- <button mat-raised-button color="primary" (click)="logout()">
+ <button mat-stroked-button color="primary" (click)="logout()" class="primary-border-color">
Log-Out
</button>
</ng-template>

MODIFY
src/app/components/navigation/navigation.component.html
src/app/components/navigation/navigation.component.html
<a
*ngIf="!link.openInNewTab"
[routerLink]="link.link"
- routerLinkActive="active-link"
+ routerLinkActive="primary"
>
<span>{{ link.name }}</span>
</a>

MODIFY
src/styles.scss
src/styles.scss
$accent: mat-color($accent-palette);
$warn: mat-color($warn-palette);
- // CUSTOM SCSS
- .primary-bg{
- background-color: $primary !important;
- }
-
- .warn-bg{
- background-color: $warn !important;
- }
-
- .accent-bg{
- background-color: $accent !important;
- }
-
- .active-link{
- color: $primary;
- }
-
- .primary, .active{
- color: $primary;
- }
-
- .accent {
- color: $accent;
- }
-
- .warn {
- color: $warn;
- }
+ // Main Colors: Use this classes in components
+ // Color
+ .primary {color: $primary;}
+ .accent {color: $accent;}
+ .warn {color: $warn;}
+
+ // Background
+ .primary-bg{background-color: $primary}
+ .warn-bg{background-color: $warn}
+ .accent-bg{background-color: $accent;}
+
+ // Border
+ .primary-border-color{border-color: $primary !important}
+ .accent-border-color{border-color: $accent !important}
+ .warn-border-color{border-color: $warn !important}
.form-field-pre-icon{
min-width: 40px;

style: login/logout btn stroked