added theme-button to forget-password, learn-page, reset-password and…

… sign up
open-template-hub · Sep 26, 2021 · d866751 · d866751
1 parent 51f1606
commit d866751
Show file tree

Hide file tree

Showing 17 changed files with 79 additions and 51 deletions.
diff --git a/src/app/component/button/button.component.scss b/src/app/component/button/button.component.scss
@@ -8,8 +8,8 @@
   width: 100%;
 }
 
-@mixin default-button-shadow {
-  box-shadow: 0 3px 15px 1px var(--shadow);
+@mixin selected-button-shadow {
+  box-shadow: 0 0 3px 3px var(--theme-color-lighter-1);
 }
 
 .button {
@@ -34,7 +34,8 @@
   font-size: 14px;
 
   &:hover {
-    @include default-button-shadow;
+    @include util.default-shadow;
+    @include selected-button-shadow;
   }
 
   // Button Types
@@ -68,4 +69,20 @@
     color: var(--theme-color);
     border-color: var(--theme-color);
   }
+
+  // Shadows
+  &.selected-button-shadow {
+    @include selected-button-shadow;
+  }
+
+  // Dark Light Themes
+  &.disable-dark-mode {
+    color: var(--contrast-light-mode);
+    background-color: var(--color-light-mode);
+  }
+
+  &.disable-light-mode {
+    color: var(--contrast-dark-mode);
+    background-color: var(--color-dark-mode);
+  }
 }
diff --git a/src/app/component/button/button.component.ts b/src/app/component/button/button.component.ts
@@ -10,14 +10,24 @@ export enum ButtonClass {
 
   // App themes
   DefaultTheme = 'default-theme',
-  Red = 'default-theme red-theme',
-  Yellow = 'default-theme yellow-theme',
-  Green = 'default-theme green-theme',
+  red = 'default-theme red-theme',
+  yellow = 'default-theme yellow-theme',
+  green = 'default-theme green-theme',
+  blue = 'default-theme blue-theme',
+  orange = 'default-theme orange-theme',
+  purple = 'default-theme purple-theme',
 
   Transparent = 'transparent-button',
 
   // Borders
-  BorderAndFontByDefaultTheme = 'border-and-font'
+  BorderAndFontByDefaultTheme = 'border-and-font',
+
+  // Shadows
+  SelectedButtonShadow = 'selected-button-shadow',
+
+  // Dark Light Mode
+  DisableLightMode = 'disable-light-mode',
+  DisableDarkMode = 'disable-dark-mode'
 }
 
 @Component({

diff --git a/src/app/page/dashboard-layout/learn-page/learn-page.component.html b/src/app/page/dashboard-layout/learn-page/learn-page.component.html
@@ -4,8 +4,7 @@
     <i aria-hidden="true" class="material-icons">search</i>
     <input #searchArea (keyup)="search($event)" placeholder="ex. title, username.." type="text">
   </div>
-  <app-button1 (click)="search(undefined)" [hoverWithColor]="false" [isSleekButton]="true" [lighterContrast]="true"
-               [text]="'Search'" [transparent]="true"></app-button1>
+  <app-theme-button (click)="search(undefined)" [buttonClasses]="searchButtonClasses" [buttonText]="'Search'"></app-theme-button>
   <div
       *ngIf="(categorySearchResults.length > 0) && searchEnabled"
       class="search-results">

diff --git a/src/app/page/dashboard-layout/learn-page/learn-page.component.ts b/src/app/page/dashboard-layout/learn-page/learn-page.component.ts
@@ -5,6 +5,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { IDayCalendarConfig } from 'ng2-date-picker';
 import { ToastrService } from 'ngx-toastr';
 import { URLS } from 'src/app/data/constant';
+import { ButtonClass } from '../../../component/button/button.component';
 import { EventTypes } from '../../../data/event/events.data';
 import { BasicInfoService } from '../../../service/basic-info/basic-info.service';
 import { CategoryService } from '../../../service/category/category.service';
@@ -18,6 +19,7 @@ import { LoadingService } from '../../../service/loading/loading.service';
   styleUrls: [ './learn-page.component.scss' ]
 } )
 export class LearnPageComponent implements OnInit, OnDestroy {
+  searchButtonClasses = [ ButtonClass.DefaultTheme, ButtonClass.BorderAndFontByDefaultTheme, ButtonClass.Transparent ]
 
   searchedEvents: any;
   recommendedEvents = [];

diff --git a/...app/page/landing-layout/form-pages/reset-password-page/reset-password-page.component.html b/...app/page/landing-layout/form-pages/reset-password-page/reset-password-page.component.html
@@ -20,15 +20,15 @@ <h3>Reset password</h3>
               </div>
             </div>
             <div class="section-submit">
-              <app-button1 [text]="'DONE'"></app-button1>
+              <app-theme-button [buttonText]="'DONE'" [buttonClasses]="doneButtonClasses"></app-theme-button>
             </div>
           </form>
         </div>
         <div class="body" *ngIf="success">
           <h3>Please proceed with login</h3>
           <br/>
           <br/>
-          <app-button1 (click)="router.navigate(['/login'])" [text]="'LOG IN'"></app-button1>
+          <app-theme-button (click)="router.navigate(['/login'])" [buttonText]="'LOG IN'"></app-theme-button>
         </div>
       </ng-template>
     </app-card>

diff --git a/src/app/page/landing-layout/form-pages/reset-password-page/reset-password-page.component.ts b/src/app/page/landing-layout/form-pages/reset-password-page/reset-password-page.component.ts
@@ -2,6 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { first } from 'rxjs/operators';
+import { ButtonClass } from '../../../../component/button/button.component';
 import { URLS } from '../../../../data/constant';
 import { AuthenticationService } from '../../../../service/auth/authentication.service';
 import { InformationService } from '../../../../service/information/information.service';
@@ -14,7 +15,7 @@ import { ToastService } from '../../../../service/toast/toast.service';
   styleUrls: [ './reset-password-page.component.scss', '../../landing-layout.component.scss' ]
 } )
 export class ResetPasswordPageComponent implements OnInit, OnDestroy {
-
+  doneButtonClasses = ButtonClass.DefaultTheme
   form: FormGroup;
   submitted = false;
   token = '';

diff --git a/src/app/page/landing-layout/form-pages/sign-up-page/sign-up-page.component.html b/src/app/page/landing-layout/form-pages/sign-up-page/sign-up-page.component.html
@@ -37,7 +37,7 @@ <h3>Register</h3>
               </div>
             </div>
             <div class="section-submit">
-              <app-button1 [text]="'CONTINUE'" [themeColor]="'default'"></app-button1>
+              <app-theme-button [buttonText]="'CONTINUE'" [buttonClasses]="continueButtonClasses"></app-theme-button>
               <p>
                 <small class="dim">By signing up, you agree
                   <a class="theme-color-link" rel=noopener routerLink="{{URLS.terms}}" target="_blank">Terms of Use</a>,

diff --git a/src/app/page/landing-layout/form-pages/sign-up-page/sign-up-page.component.ts b/src/app/page/landing-layout/form-pages/sign-up-page/sign-up-page.component.ts
@@ -4,6 +4,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { first } from 'rxjs/operators';
 import { environment } from '../../../../../environments/environment';
 import { environmentCommon } from '../../../../../environments/environment-common';
+import { ButtonClass } from '../../../../component/button/button.component';
 import { URLS } from '../../../../data/constant';
 import { AnalyticsService } from '../../../../service/analytics/analytics.service';
 import { AuthenticationService } from '../../../../service/auth/authentication.service';
@@ -17,6 +18,7 @@ import { ToastService } from '../../../../service/toast/toast.service';
   styleUrls: [ './sign-up-page.component.scss', '../../landing-layout.component.scss' ]
 } )
 export class SignUpPageComponent implements OnInit, OnDestroy {
+  continueButtonClasses = [ ButtonClass.DefaultTheme ]
 
   form: FormGroup;
   submitted = false;

diff --git a/src/app/page/landing-layout/raw-content-pages/maintenance-page/maintenance-page.component.ts b/src/app/page/landing-layout/raw-content-pages/maintenance-page/maintenance-page.component.ts
@@ -9,7 +9,7 @@ import { ThemeService } from '../../../../service/theme/theme.service';
   styleUrls: [ './maintenance-page.component.scss', '../../landing-layout.component.scss' ]
 } )
 export class MaintenancePageComponent {
-  yellowButtonClass = ButtonClass.Yellow
+  yellowButtonClass = ButtonClass.yellow
 
   brand = {
     brandLogoMerge: ''

diff --git a/src/app/page/landing-layout/raw-content-pages/not-found-page/not-found-page.component.ts b/src/app/page/landing-layout/raw-content-pages/not-found-page/not-found-page.component.ts
@@ -9,7 +9,7 @@ import { ThemeService } from '../../../../service/theme/theme.service';
   styleUrls: [ './not-found-page.component.scss', '../../landing-layout.component.scss' ]
 } )
 export class NotFoundPageComponent {
-  redButtonClass = ButtonClass.Red
+  redButtonClass = ButtonClass.red
 
   brand = {
     brandLogoBroken: '',

diff --git a/...e/landing-layout/raw-content-pages/verify-account-page/verify-account-page.component.html b/...e/landing-layout/raw-content-pages/verify-account-page/verify-account-page.component.html
@@ -11,11 +11,9 @@ <h2 *ngIf="!loading && !error">Account verified 🎉</h2>
     <h4 *ngIf="!loading && error" class="error-text">Something went wrong!</h4>
     <h4 *ngIf="!loading && !error">Please proceed with login</h4>
 
-    <app-button1 (click)="router.navigate([URLS.root])" *ngIf="!loading && error" [isSleekButton]="true" [text]="'HOME'"
-                 [themeColor]="'red'">
-    </app-button1>
-    <app-button1 (click)="router.navigate([URLS.login])" *ngIf="!loading && !error" [isSleekButton]="true"
-                 [text]="'LOG IN'" [themeColor]="'default'">
-    </app-button1>
+    <app-theme-button (click)="router.navigate([URLS.root])" *ngIf="!loading && error"
+                      [buttonText]="'HOME'" [buttonClasses]="homeButtonClasses"></app-theme-button>
+    <app-theme-button (click)="router.navigate([URLS.login])" *ngIf="!loading && !error"
+                      [buttonText]="'LOG IN'" [buttonClasses]="loginButtonClasses"></app-theme-button>
   </div>
 </div>
diff --git a/...age/landing-layout/raw-content-pages/verify-account-page/verify-account-page.component.ts b/...age/landing-layout/raw-content-pages/verify-account-page/verify-account-page.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { first } from 'rxjs/operators';
+import { ButtonClass } from '../../../../component/button/button.component';
 import { URLS } from '../../../../data/constant';
 import { AuthenticationService } from '../../../../service/auth/authentication.service';
 import { InformationService } from '../../../../service/information/information.service';
@@ -13,6 +14,8 @@ import { ThemeService } from '../../../../service/theme/theme.service';
   styleUrls: [ './verify-account-page.component.scss', '../../landing-layout.component.scss' ]
 } )
 export class VerifyAccountPageComponent implements OnInit, OnDestroy {
+  homeButtonClasses = [ ButtonClass.red ]
+  loginButtonClasses: [ ButtonClass.DefaultTheme ]
 
   loading = true;
   error = '';

diff --git a/src/app/page/settings-layout/edit-profile-page/edit-profile-page.component.html b/src/app/page/settings-layout/edit-profile-page/edit-profile-page.component.html
@@ -102,7 +102,7 @@
           </div>
         </div>
         <div class="section-submit">
-          <app-button1 [text]="'DONE'"></app-button1>
+          <app-theme-button [buttonText]="'DONE'"></app-theme-button>
           <a [routerLink]="URLS.dashboard.root">
             skip for now
           </a>

diff --git a/src/app/page/settings-layout/edit-theme-page/edit-theme-page.component.html b/src/app/page/settings-layout/edit-theme-page/edit-theme-page.component.html
@@ -6,39 +6,29 @@
         <hr/>
       </div>
       <div class="section horizontal">
-        <app-button1 (click)="setDarkLightSetting(DarkLightSettings.light)" [alwaysDark]="true"
-                     [icon]="'sun'"
-                     [isSleekButton]="true"
-                     [selected]="darkLightSetting === DarkLightSettings.light"
-                     [text]="'Light theme'">
-        </app-button1>
-        <app-button1 (click)="setDarkLightSetting(DarkLightSettings.dark)" [alwaysLight]="true"
-                     [icon]="'moon'"
-                     [isSleekButton]="true"
-                     [selected]="darkLightSetting === DarkLightSettings.dark"
-                     [text]="'Dark theme'">
-        </app-button1>
-        <app-button1 (click)="setDarkLightSetting(DarkLightSettings.auto)" [icon]="'adjust'"
-                     [isSleekButton]="true"
-                     [selected]="darkLightSetting === DarkLightSettings.auto"
-                     [text]="'Auto'">
-        </app-button1>
+        <app-theme-button (click)="setDarkLightSetting(DarkLightSettings.light)" [buttonIcon]="'sun'"
+                          [buttonText]="'Light theme'"
+                          [buttonClasses]=" insertIf( darkLightSetting === DarkLightSettings.light, [ ButtonClass.DisableLightMode ], ButtonClass.SelectedButtonShadow )">
+        </app-theme-button>
+        <app-theme-button (click)="setDarkLightSetting(DarkLightSettings.dark)" [buttonIcon]="'moon'"
+                          [buttonText]="'Dark theme'"
+                          [buttonClasses]=" insertIf( darkLightSetting === DarkLightSettings.dark, [ ButtonClass.DisableDarkMode ], ButtonClass.SelectedButtonShadow )">
+        </app-theme-button>
+        <app-theme-button (click)="setDarkLightSetting(DarkLightSettings.auto)" [buttonIcon]="'adjust'"
+                          [buttonText]="'Auto'"
+                          [buttonClasses]=" insertIf( darkLightSetting === DarkLightSettings.auto, [], ButtonClass.SelectedButtonShadow )">
+        </app-theme-button>
       </div>
       <div class="section-header">
         <p class="dim">Theme Color</p>
         <hr/>
       </div>
       <div class="section horizontal">
-        <app-button1 (click)="setThemeColorSetting(themeColor)"
-                     *ngFor="let themeColor of themeColorSettingsList"
-                     [icon]="'tint'"
-                     [isSleekButton]="true"
-                     [lighterContrast]="true"
-                     [selected]="themeColorSetting === themeColor"
-                     [text]="themeColor + ' theme' | titlecase"
-                     [themeColor]="themeColor"
-                     [transparent]="true">
-        </app-button1>
+        <app-theme-button (click)="setThemeColorSetting(themeColor)" *ngFor="let themeColor of themeColorSettingsList"
+                          [buttonIcon]="'tint'" [buttonText]="themeColor + ' theme' | titlecase"
+                          [buttonClasses]=" insertIf( themeColorSetting === themeColor,[ ButtonClass.Transparent, ButtonClass[themeColor],
+                          ButtonClass.BorderAndFontByDefaultTheme ], ButtonClass.SelectedButtonShadow )">
+        </app-theme-button>
       </div>
     </div>
   </app-card1>

diff --git a/src/app/page/settings-layout/edit-theme-page/edit-theme-page.component.scss b/src/app/page/settings-layout/edit-theme-page/edit-theme-page.component.scss
@@ -22,7 +22,7 @@
     flex-wrap: wrap;
   }
 
-  .section.horizontal app-button1 {
+  .section.horizontal app-theme-button {
     padding-right: 15px;
   }
 }

diff --git a/src/app/page/settings-layout/edit-theme-page/edit-theme-page.component.ts b/src/app/page/settings-layout/edit-theme-page/edit-theme-page.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { ButtonClass } from '../../../component/button/button.component';
 import { DarkLightSettings, ThemeColorSettings } from '../../../data/constant';
 import { ThemeService } from '../../../service/theme/theme.service';
 
@@ -8,6 +9,7 @@ import { ThemeService } from '../../../service/theme/theme.service';
   styleUrls: [ './edit-theme-page.component.scss' ]
 } )
 export class EditThemePageComponent {
+  ButtonClass = ButtonClass
 
   darkLightSetting: string;
   themeColorSetting: string;
@@ -42,4 +44,8 @@ export class EditThemePageComponent {
   setThemeColorSetting( themeColorSetting: string ) {
     this.themeService.setThemeColorSetting( themeColorSetting );
   }
+
+  insertIf( condition: boolean, array: any[], element: any ) {
+    return condition ? [ ...array, element ] : array
+  }
 }
diff --git a/src/app/page/splash-layout/external-redirect-page/external-redirect-page.component.ts b/src/app/page/splash-layout/external-redirect-page/external-redirect-page.component.ts
@@ -11,7 +11,7 @@ import { ThemeService } from '../../../service/theme/theme.service';
   styleUrls: [ './external-redirect-page.component.scss' ],
 } )
 export class ExternalRedirectPageComponent {
-  buttonClasses = [ ButtonClass.Green, ButtonClass.Transparent, ButtonClass.BorderAndFontByDefaultTheme ];
+  buttonClasses = [ ButtonClass.green, ButtonClass.Transparent, ButtonClass.BorderAndFontByDefaultTheme ];
 
   href: any;
   info: string;