add dark theme and ligth theme

Author: jessiLeandro

src/app/core/interceptors/header.interceptor.ts

@@ -17,7 +17,7 @@ export class HeaderInterceptor implements HttpInterceptor {
 
   intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
 
-    const token = this.storage.getItem('planning-poker-token');
+    const token = this.storage.getItem('@planningPoker:token');
     const Authorization = `Bearer ${token}`
 
     return next.handle(request.clone({ setHeaders: { Authorization } }));

src/app/core/services/auth/auth.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { JwtHelperService } from "@auth0/angular-jwt";
+import { JwtHelperService } from '@auth0/angular-jwt';
 
 @Injectable({
   providedIn: 'root',
@@ -14,16 +14,16 @@ export class AuthService {
   }
 
   auth() {
-    const token = this.storage.getItem('planning-poker-token');
-    const isExpired = this.jwtHelper.isTokenExpired(token || "");
+    const token = this.storage.getItem('@planningPoker:token');
+    const isExpired = this.jwtHelper.isTokenExpired(token || '');
 
-    if(isExpired) return false;
+    if (isExpired) return false;
 
     return true;
   }
 
   decode(){
-    const token = this.storage.getItem('planning-poker-token');
+    const token = this.storage.getItem('@planningPoker:token');
     const decodeToken = this.jwtHelper.decodeToken(token || "")
     return decodeToken ? decodeToken : "";
   }

src/app/modules/home/components/create-poker/create-poker.component.css

@@ -1,28 +1,27 @@
-header{
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    justify-content: space-between;
+header {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
-h1{
-    color: #1A237E; /*$indigo-palette 900*/
-    margin: 0;
+h1 {
+  margin: 0;
 }
 
-form{
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-    margin: 50px;
+form {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  margin: 50px;
 }
 
-.input-field{
-    width: 400px;
-    margin-bottom: 30px;
+.input-field {
+  width: 400px;
+  margin-bottom: 30px;
 }
 
-.button-submit{
-    width: 50%;
-}
+.button-submit {
+  width: 50%;
+}

src/app/modules/home/components/create-poker/create-poker.component.html

@@ -1,29 +1,28 @@
-
 <header>
-    <h1 mat-dialog-title>New Poker</h1> 
-    <button mat-icon-button mat-dialog-close cdkFocusInitial>
-        <mat-icon>close</mat-icon>
-    </button>
+  <h1 class="ppa-title" mat-dialog-title>New Poker</h1>
+  <button mat-icon-button mat-dialog-close cdkFocusInitial>
+    <mat-icon>close</mat-icon>
+  </button>
 </header>
 
 <mat-dialog-content class="mat-typography">
   <div class="wrapper-form">
     <form [formGroup]="formCreatePoker">
-          <mat-form-field class="input-field" appearance="fill">
-            <mat-label>Nome</mat-label>
-            <input matInput placeholder="Nome" formControlName="pokerName"/>
-            <mat-error>
-              {{getErrorMessage("pokerName")}}
-            </mat-error>
-          </mat-form-field>
-          <button
-            class="button-submit"
-            mat-raised-button
-            color="primary"
-            (click)="createPoker()"
-          >
-            Criar
-          </button>
+      <mat-form-field class="input-field" appearance="fill">
+        <mat-label>Nome</mat-label>
+        <input matInput placeholder="Nome" formControlName="pokerName" />
+        <mat-error>
+          {{ getErrorMessage("pokerName") }}
+        </mat-error>
+      </mat-form-field>
+      <button
+        class="button-submit"
+        mat-raised-button
+        color="primary"
+        (click)="createPoker()"
+      >
+        Criar
+      </button>
     </form>
-  </div>  
-</mat-dialog-content>
+  </div>
+</mat-dialog-content>

src/app/modules/home/components/home.component.ts

@@ -6,27 +6,28 @@ import { CreatePokerComponent } from './create-poker/create-poker.component';
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
-  styleUrls: ['./home.component.css']
+  styleUrls: ['./home.component.css'],
 })
 export class HomeComponent implements OnInit {
+  private storage: Storage;
 
+  isDarkTheme: boolean = false;
 
-
-  constructor(
-    private pokerService: PokerService,
-    public dialog: MatDialog,
-  ) { }
+  constructor(private pokerService: PokerService, public dialog: MatDialog) {
+    this.storage = window.localStorage;
+  }
 
   ngOnInit(): void {
     this.pokerService.post({}).subscribe((res) => {
       console.log(res);
-
     });
-  }
 
-  createPoker(){
-    const dialogRef = this.dialog.open(CreatePokerComponent);
+    const theme = this.storage.getItem('@planningPoker:theme');
 
+    if (theme === 'dark') this.isDarkTheme = true;
   }
 
+  createPoker() {
+    const dialogRef = this.dialog.open(CreatePokerComponent);
+  }
 }

src/app/modules/home/home/home.component.html

@@ -1,7 +1,12 @@
-<app-navbar></app-navbar>
-<div id="container">
+<div 
+  id="wrapper-container"
+  [ngClass]="{'dark-theme': isDarkTheme}"
+  class="mat-app-background">
+  <app-navbar [(isDarkTheme)]="isDarkTheme"></app-navbar>
+  <div id="container">
+
     <header>
-        <h4>Meus Pokers</h4>
+        <h4 class="ppa-title" >Meus Pokers</h4>
         <button
             id="button-create-poker"
             mat-raised-button
@@ -11,7 +16,7 @@ <h4>Meus Pokers</h4>
             Criar Pokers
         </button>
     </header>
-    
+
     <div id="content">
         <mat-accordion class="example-headers-align" multi>
             <mat-expansion-panel>
@@ -31,12 +36,12 @@ <h4>Meus Pokers</h4>
                       </div>
                     </mat-panel-description>
                 </mat-expansion-panel-header>
-          
+
                 <mat-form-field appearance="fill">
                     <mat-label>First name</mat-label>
                     <input matInput>
                 </mat-form-field>
-          
+
                 <mat-form-field appearance="fill">
                     <mat-label>Age</mat-label>
                     <input matInput type="number" min="1">

src/app/modules/login/components/login-form/login-form.component.html

@@ -8,9 +8,13 @@ <h1 class="mat-headline" color="primary">Log in</h1>
       <mat-grid-tile>
         <mat-form-field class="width-form-field" appearance="outline">
           <mat-label>Email</mat-label>
-          <input matInput placeholder="[email protected]" formControlName="email" />
+          <input
+            matInput
+            placeholder="[email protected]"
+            formControlName="email"
+          />
           <mat-error>
-            {{getErrorMessage("email")}}
+            {{ getErrorMessage("email") }}
           </mat-error>
         </mat-form-field>
       </mat-grid-tile>
@@ -24,17 +28,11 @@ <h1 class="mat-headline" color="primary">Log in</h1>
             formControlName="password"
             [type]="hide ? 'password' : 'text'"
           />
-          <button
-            mat-icon-button
-            matSuffix
-            (click)="hide = !hide"
-            [attr.aria-label]="'Hide password'"
-            [attr.aria-pressed]="hide"
-          >
-            <mat-icon>{{ hide ? "visibility_off" : "visibility" }}</mat-icon>
-          </button>
+          <mat-icon style="cursor: pointer" matSuffix (click)="hide = !hide">{{
+            hide ? "visibility_off" : "visibility"
+          }}</mat-icon>
           <mat-error>
-            {{getErrorMessage("password")}}
+            {{ getErrorMessage("password") }}
           </mat-error>
         </mat-form-field>
       </mat-grid-tile>
@@ -48,25 +46,18 @@ <h1 class="mat-headline" color="primary">Log in</h1>
         >
           Entrar
         </button>
-        
       </mat-grid-tile>
-
     </mat-grid-list>
-
   </form>
 
   <mat-grid-list cols="1" rowHeight="100px">
     <mat-grid-tile>
       <p>
         Não possui conta?
-        <button 
-          mat-button
-          color="primary"
-          routerLink="/poker/signUp">
-            Cadastre-se
+        <button mat-button color="primary" routerLink="/poker/signUp">
+          Cadastre-se
         </button>
       </p>
     </mat-grid-tile>
   </mat-grid-list>
-
 </div>

src/app/modules/login/components/login-form/login-form.component.ts

@@ -36,7 +36,7 @@ export class LoginFormComponent implements OnInit {
       this.userService.login(this.form.value).subscribe((res) => {
         const { token } = res;
 
-        this.storage.setItem('planning-poker-token', token);
+        this.storage.setItem('@planningPoker:token', token);
         this.router.navigate(['home']);
       });
     }

src/app/modules/login/login.component.css

@@ -1,42 +1,48 @@
-.content{
+.content {
   width: 100%;
   height: 100vh;
-  background-color: #1A237E; /*$indigo-palette 900*/
+  background-color: #1a237e; /*$indigo-palette 900*/
 }
 
-#logo{
+#logo {
   width: 100%;
   height: 100%;
   background-size: 120px 120px;
-  background-image:
-    linear-gradient(to right, #1A237E, transparent),
-                        /*$indigo-palette 900*/
-    repeating-conic-gradient(from 0deg, #1A237E 0deg 90deg, #3F51B5 90deg 180deg)
-                                  /*$indigo-palette 900*/ /*$indigo-palette 500*/
-  ;
-  box-shadow: inset 0px 0px 10em 14em #1A237E; /*$indigo-palette 900*/
+  background-image: linear-gradient(to right, #1a237e, transparent),
+    /*$indigo-palette 900*/
+      repeating-conic-gradient(
+        from 0deg,
+        #1a237e 0deg 90deg,
+        #3f51b5 90deg 180deg
+      )
+      /*$indigo-palette 900*/ /*$indigo-palette 500*/;
+  box-shadow: inset 0px 0px 10em 14em #1a237e; /*$indigo-palette 900*/
   color: #fafafa;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 
-#img-hello{
+#logo span p {
+  font-family: "Poker In October", Roboto, sans-serif;
+}
+
+#img-hello {
   width: 40%;
 }
 
-span{
+span {
   font-size: 4em;
   font-weight: bolder;
 }
 
-p{
+p {
   display: inline;
   font-size: 0.5em;
 }
 
-.container{
+.container {
   min-width: 450px;
   max-width: 450px;
 }

src/app/modules/login/login.module.ts

@@ -8,21 +8,15 @@ import { LoginComponent } from './login.component';
 import { LoginFormComponent } from './components/login-form/login-form.component';
 import { RouterModule } from '@angular/router';
 
-
-
 @NgModule({
-  declarations: [
-    LoginFormComponent,
-    LoginComponent,
-    SignUpComponent,
-  ],
+  declarations: [LoginFormComponent, LoginComponent, SignUpComponent],
   imports: [
     CoreModule,
     SharedModule,
     CommonModule,
     LoginRoutingModule,
     RouterModule,
   ],
-  exports: []
+  exports: [],
 })
-export class LoginModule { }
+export class LoginModule {}