theme simplification

open-template-hub · Aug 31, 2021 · a62fc96 · a62fc96
1 parent ca32f04
commit a62fc96
Show file tree

Hide file tree

Showing 14 changed files with 361 additions and 201 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,4 +1,4 @@
 <div [class.dark-theme]="darkLightSetting === 'dark'" [class.light-theme]="darkLightSetting === 'light'"
-     [class]="themeColorSetting ? themeColorSetting + '-theme' : ''">
+     [class]="themeColorSetting ? themeColorSetting + '-theme' : 'default-theme'">
   <router-outlet></router-outlet>
 </div>
diff --git a/src/app/component/common/button/button1/button1.component.html b/src/app/component/common/button/button1/button1.component.html
@@ -6,7 +6,8 @@
         [class.always-light]="alwaysLight" [class.always-dark]="alwaysDark" [class.selected]="selected"
         [style.color]="themeColor ? 'var(--brand-color-' + themeColor + '-theme)' : ''"
         [style.border-color]="themeColor ? 'var(--brand-color-' + themeColor + '-theme)' : ''"
-        [disabled]="loading || disabled" [style.cursor]="cursor" [class.relative-to-parent]="relativeToParent">
+        [disabled]="loading || disabled" [style.cursor]="cursor" [class.relative-to-parent]="relativeToParent"
+        [ngClass]="themeColor + '-theme'">
   <i aria-hidden="true" *ngIf="icon" [class]="'fas fa-' + icon + ' fa-lg fa-fw'"></i>
   {{text}}
 </button>
diff --git a/src/app/page/raw-landing-layout/home/home.component.html b/src/app/page/raw-landing-layout/home/home.component.html
@@ -63,8 +63,18 @@ <h6 class="testimonial-description">What our customers are saying...</h6>
     <div *ngFor="let productLine of PRODUCT_LINES;" class="features">
       <h4>{{ productLine.sectionTitle }}</h4>
       <div *ngFor="let product of productLine.menus; let i = index; last as isLast" class="feature-wrapper"
-           [class.feature-right]="i % 2 === 0" [class.feature-left]="i % 2 === 1">
-        <div class="feature">
+           [class.feature-left]="i % 2 === 1" [class.feature-right]="i % 2 === 0">
+        <div *ngIf="i % 2 === 0" class="layers">
+          <svg viewBox="0 0 1000 150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin slice">
+            <path d="M 0,150 1000,0 v 150 z" [style]="'fill: ' + product.backgroundColor + ';'"></path>
+          </svg>
+        </div>
+        <div *ngIf="i % 2 === 1" class="layers">
+          <svg viewBox="0 0 1000 150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin slice">
+            <path d="M 1000,0 0,0 v 150 z" [style]="'fill: ' + product.backgroundColor + ';'"></path>
+          </svg>
+        </div>
+        <div class="feature" [style.background-color]="i % 2 == 0 ? product.backgroundColor : ''">
           <a class="feature-img-wrapper" [href]="product.link">
             <img class="server-logo"
                  [src]="product.brand.brandLogo"
@@ -79,14 +89,10 @@ <h6>
             </h6>
           </div>
         </div>
-        <div *ngIf="i % 2 === 0 && !isLast" class="layers">
-          <svg viewBox="0 0 1000 150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin slice">
-            <path d="M 0,150 1000,0 v 150 z" style="fill: var(--brand-color-lighter-5);"></path>
-          </svg>
-        </div>
-        <div *ngIf="i % 2 === 1" class="layers">
+
+        <div *ngIf="i % 2 === 0 && isLast" class="layers">
           <svg viewBox="0 0 1000 150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin slice">
-            <path d="M 0,150 1000,0 v 150 z" style="fill: var(--background-color);"></path>
+            <path d="M 1000,0 0,0 v 150 z" [style]="'fill: ' + product.backgroundColor + ';'"></path>
           </svg>
         </div>
       </div>

diff --git a/src/app/page/raw-landing-layout/home/home.component.scss b/src/app/page/raw-landing-layout/home/home.component.scss
@@ -22,7 +22,6 @@
 .feature-wrapper {
   display: flex;
   flex-direction: column;
-  background-color: var(--brand-color-lighter-5);
 }
 
 .feature-img-wrapper {
@@ -36,13 +35,13 @@
 
 .features h4 {
   color: var(--brand-color);
+  font-weight: normal;
 }
 
 .features h5 {
   padding-top: 10px;
   padding-bottom: 10px;
   font-weight: normal;
-  color: var(--brand-color);
 }
 
 .feature img {
@@ -51,12 +50,12 @@
   height: auto;
 }
 
-.feature-left {
-  background-color: var(--brand-color-lighter-5);
+.feature-left .feature {
+  background-color: var(--background-color);
 }
 
-.feature-right {
-  background-color: var(--background-color);
+.feature-right .feature {
+  background-color: var(--brand-color-lighter-5);
 }
 
 .feature-notes {

diff --git a/src/app/page/settings-layout/edit-theme/edit-theme.component.html b/src/app/page/settings-layout/edit-theme/edit-theme.component.html
@@ -61,6 +61,14 @@
                      [selected]="themeColorSetting === ThemeColorSettings.blue"
                      [themeColor]="ThemeColorSettings.blue">
         </app-button1>
+        <app-button1 [text]="'Green theme'" (click)="setThemeColorSetting(ThemeColorSettings.green)"
+                     [icon]="'tint'"
+                     [transparent]="true"
+                     [lighterContrast]="true"
+                     [isSleekButton]="true"
+                     [selected]="themeColorSetting === ThemeColorSettings.green"
+                     [themeColor]="ThemeColorSettings.green">
+        </app-button1>
       </div>
     </div>
   </app-card1>

diff --git a/src/app/service/theme/theme.service.ts b/src/app/service/theme/theme.service.ts
@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { version } from '../../../environments/version';
+import { DarkLightSettings, ThemeColorSettings } from '../../util/constant';
 
 @Injectable( {
   providedIn: 'root'
@@ -40,7 +41,7 @@ export class ThemeService {
   constructor() {
     let themeColorSettingStorageItem = localStorage.getItem( 'themeColorSetting' ) ?
         localStorage.getItem( 'themeColorSetting' ) : sessionStorage.getItem( 'themeColorSetting' );
-    themeColorSettingStorageItem = themeColorSettingStorageItem ? themeColorSettingStorageItem : 'auto';
+    themeColorSettingStorageItem = themeColorSettingStorageItem ? themeColorSettingStorageItem : 'default';
 
     this.themeColorSettingSubject = new BehaviorSubject<string>( themeColorSettingStorageItem);
     this.themeColorSetting = this.themeColorSettingSubject.asObservable();
@@ -136,8 +137,8 @@ export class ThemeService {
     sessionStorage.removeItem( 'themeColorSetting' );
     sessionStorage.removeItem( 'sideNavClosed' );
 
-    this.darkLightSettingSubject.next( 'auto' );
-    this.themeColorSettingSubject.next( 'default' );
+    this.darkLightSettingSubject.next( DarkLightSettings.auto );
+    this.themeColorSettingSubject.next( ThemeColorSettings.default );
     this.sideNavClosedSubject.next( 'false' );
   }
 

diff --git a/src/app/util/constant.ts b/src/app/util/constant.ts
@@ -38,7 +38,8 @@ export const ThemeColorSettings = {
   default: 'default',
   red: 'red',
   yellow: 'yellow',
-  blue: 'blue'
+  blue: 'blue',
+  green: 'green'
 };
 
 export const URLS = {
@@ -107,35 +108,35 @@ export const PRODUCT_LINES: DropdownColumnOption[] = [
     sectionTitle: 'Servers',
     menus: [
       {
-        backgroundColor: 'var(--brand-color-lighter-2)',
+        backgroundColor: 'var(--brand-color-lighter-5)',
         brand: { brandLogo: 'https://github.com/open-template-hub/open-template-hub.github.io/blob/master/assets/logo/servers/auth-server-logo.png?raw=true' },
         header: 'Auth Server',
         description: 'Authentication Server Template supporting both regular signup and login processes and login with social networks that support OAuth and OAuth2.0',
         link: URLS.maintenance
       },
       {
-        backgroundColor: 'var(--brand-color-lighter-2)',
+        backgroundColor: 'var(--brand-color-lighter-5)',
         brand: { brandLogo: 'https://github.com/open-template-hub/open-template-hub.github.io/blob/master/assets/logo/servers/payment-server-logo.png?raw=true' },
         header: 'Payment Server',
         description: 'Payment Server template integrated with Stripe and Coinbase Commerce payment systems',
         link: URLS.maintenance
       },
       {
-        backgroundColor: 'var(--brand-color-lighter-2)',
+        backgroundColor: 'var(--brand-color-lighter-5)',
         brand: { brandLogo: 'https://github.com/open-template-hub/open-template-hub.github.io/blob/master/assets/logo/servers/file-storage-server-logo.png?raw=true' },
         header: 'File Storage Server',
         description: 'File Storage Server Template that supports uploading and downloading files from AWS S3',
         link: URLS.maintenance
       },
       {
-        backgroundColor: 'var(--brand-color-lighter-2)',
+        backgroundColor: 'var(--brand-color-lighter-5)',
         brand: { brandLogo: 'https://github.com/open-template-hub/open-template-hub.github.io/blob/master/assets/logo/servers/analytics-server-logo.png?raw=true' },
         header: 'Analytics Server',
         description: 'Analytics Server Template for generic usage in Node.js',
         link: URLS.maintenance
       },
       {
-        backgroundColor: 'var(--brand-color-lighter-2)',
+        backgroundColor: 'var(--brand-color-lighter-5)',
         brand: { brandLogo: 'https://github.com/open-template-hub/open-template-hub.github.io/blob/master/assets/logo/servers/basic-info-server-logo.png?raw=true' },
         header: 'Basic Info Server',
         description: 'Basic Info Server Template for generic usage in Node.js',
@@ -147,21 +148,21 @@ export const PRODUCT_LINES: DropdownColumnOption[] = [
     sectionTitle: 'User Interfaces',
     menus: [
       {
-        backgroundColor: 'var(--brand-color-lighter-2)',
+        backgroundColor: 'var(--brand-color-lighter-5)',
         brand: { brandLogo: './assets/production/brand-logo.png' },
         header: 'Company Profile UI',
         description: 'Open Template Hub is an organization that develops open source micro servers as templates including authentication server, payment server and more..',
         link: URLS.maintenance
       },
       {
-        backgroundColor: 'var(--brand-color-lighter-2)',
+        backgroundColor: 'var(--brand-color-lighter-5)',
         brand: { brandLogo: './assets/production/brand-logo.png' },
         header: 'Web UI',
         description: 'Open Template Hub is an organization that develops open source micro servers as templates including authentication server, payment server and more..',
         link: URLS.maintenance
       },
       {
-        backgroundColor: 'var(--brand-color-lighter-2)',
+        backgroundColor: 'var(--brand-color-lighter-5)',
         brand: { brandLogo: './assets/production/brand-logo.png' },
         header: 'Mobile UI',
         description: 'Open Template Hub is an organization that develops open source micro servers as templates including authentication server, payment server and more..',
@@ -173,7 +174,7 @@ export const PRODUCT_LINES: DropdownColumnOption[] = [
     sectionTitle: 'Premium',
     menus: [
       {
-        backgroundColor: 'var(--brand-color-lighter-2)',
+        backgroundColor: 'var(--brand-color-yellow-theme-lighter-5)',
         brand: { brandLogo: 'https://github.com/open-template-hub/open-template-hub.github.io/blob/master/assets/logo/servers/orchestration-server-logo.png?raw=true' },
         header: 'Orchestration Server',
         description: 'Orchestration Server Template for generic usage in Node.js',
@@ -187,21 +188,21 @@ export const SERVICES: DropdownColumnOption[ ] = [
   {
     menus: [
       {
-        backgroundColor: 'var(--brand-color-lighter-2)',
+        backgroundColor: 'var(--brand-color-lighter-5)',
         brand: { brandLogo: './assets/production/brand-logo.png' },
         header: 'Software Consultancy',
         description: 'Open Template Hub is an organization that develops open source micro servers as templates including authentication server, payment server and more..',
         link: URLS.maintenance
       },
       {
-        backgroundColor: 'var(--brand-color-lighter-2)',
+        backgroundColor: 'var(--brand-color-lighter-5)',
         brand: { brandLogo: './assets/production/brand-logo.png' },
         header: 'Cloud Integration',
         description: 'Open Template Hub is an organization that develops open source micro servers as templates including authentication server, payment server and more..',
         link: URLS.maintenance
       },
       {
-        backgroundColor: 'var(--brand-color-lighter-2)',
+        backgroundColor: 'var(--brand-color-lighter-5)',
         brand: { brandLogo: './assets/production/brand-logo.png' },
         header: 'Quality Insurance',
         description: 'Open Template Hub is an organization that develops open source micro servers as templates including authentication server, payment server and more..',

diff --git a/src/styles/brand/brand-blue.scss b/src/styles/brand/brand-blue.scss
@@ -1,50 +1,87 @@
+:root {
+
+  --brand-color-blue-theme: #4098d6;
+
+  --brand-color-blue-theme-lighter-1: #57abd8;
+  --brand-color-blue-theme-lighter-2: #67b7da;
+  --brand-color-blue-theme-lighter-3: #78c1dc;
+  --brand-color-blue-theme-lighter-4: #84c2dc;
+  --brand-color-blue-theme-lighter-5: #8cbedd;
+  --brand-color-blue-theme-lighter-6: #acd5e6;
+  --brand-color-blue-theme-lighter-7: #bedfeb;
+  --brand-color-blue-theme-lighter-8: #d9eef3;
+  --brand-color-blue-theme-lighter-9: #f0f8fa;
+
+  --brand-color-blue-theme-darker-1: #4a9fc4;
+  --brand-color-blue-theme-darker-2: #498db2;
+  --brand-color-blue-theme-darker-3: #4a7895;
+  --brand-color-blue-theme-darker-4: #4a7785;
+  --brand-color-blue-theme-darker-5: #415867;
+  --brand-color-blue-theme-darker-6: #475a64;
+  --brand-color-blue-theme-darker-7: #445058;
+  --brand-color-blue-theme-darker-8: #41484d;
+  --brand-color-blue-theme-darker-9: #404142;
+
+  --overlay-blue-theme-lighter: rgba(64, 174, 214, 0.3);
+  --overlay-blue-theme-darker: rgba(27, 67, 88, 0.6);
+
+  --brand-blue-theme-background: #1e7aab;
+  --hover-blue-theme: rgba(89, 129, 150, 0.2);
+
+  --color-alpha-blue-theme-0-5: rgba(26, 89, 108, 0.5);
+  --color-alpha-blue-theme-0-13: rgba(26, 89, 108, 0.13);
+}
+
 :root .blue-theme, .light-theme.blue-theme {
+
   --brand-color: var(--brand-color-blue-theme);
-  --brand-color-lighter-1: #57abd8;
-  --brand-color-lighter-2: #67b7da;
-  --brand-color-lighter-3: #78c1dc;
-  --brand-color-lighter-4: #84c2dc;
-  --brand-color-lighter-5: #8cbedd;
-  --brand-color-lighter-6: #acd5e6;
-  --brand-color-lighter-7: #bedfeb;
-  --brand-color-lighter-8: #d9eef3;
-  --brand-color-lighter-9: #f0f8fa;
-
-  --brand-background: #1e7aab;
-  --hover: rgba(89, 129, 150, 0.2);
-  --overlay: rgba(64, 174, 214, 0.3);
+
+  --brand-color-lighter-1: var(--brand-color-blue-theme-lighter-1);
+  --brand-color-lighter-2: var(--brand-color-blue-theme-lighter-2);
+  --brand-color-lighter-3: var(--brand-color-blue-theme-lighter-3);
+  --brand-color-lighter-4: var(--brand-color-blue-theme-lighter-4);
+  --brand-color-lighter-5: var(--brand-color-blue-theme-lighter-5);
+  --brand-color-lighter-6: var(--brand-color-blue-theme-lighter-6);
+  --brand-color-lighter-7: var(--brand-color-blue-theme-lighter-7);
+  --brand-color-lighter-8: var(--brand-color-blue-theme-lighter-8);
+  --brand-color-lighter-9: var(--brand-color-blue-theme-lighter-9);
+
+  --overlay: var(--overlay-blue-theme-lighter);
+
+  --brand-background: var(--brand-blue-theme-background);
+  --hover: var(--hover-blue-theme);
 
   // shine animation colors
-  --color-alpha-0-5: rgba(26, 89, 108, 0.5);
-  --color-alpha-0-13: rgba(26, 89, 108, 0.13);
+  --color-alpha-0-5: var(--color-alpha-blue-theme-0-5);
+  --color-alpha-0-13: var(--color-alpha-blue-theme-0-13);
 }
 
 .dark-theme.blue-theme {
-  --brand-color-lighter-1: #4a9fc4;
-  --brand-color-lighter-2: #498db2;
-  --brand-color-lighter-3: #4a7895;
-  --brand-color-lighter-4: #4a7785;
-  --brand-color-lighter-5: #415867;
-  --brand-color-lighter-6: #475a64;
-  --brand-color-lighter-7: #445058;
-  --brand-color-lighter-8: #41484d;
-  --brand-color-lighter-9: #404142;
-
-  --overlay: rgba(27, 67, 88, 0.6);
+  --brand-color-lighter-1: var(--brand-color-blue-theme-darker-1);
+  --brand-color-lighter-2: var(--brand-color-blue-theme-darker-2);
+  --brand-color-lighter-3: var(--brand-color-blue-theme-darker-3);
+  --brand-color-lighter-4: var(--brand-color-blue-theme-darker-4);
+  --brand-color-lighter-5: var(--brand-color-blue-theme-darker-5);
+  --brand-color-lighter-6: var(--brand-color-blue-theme-darker-6);
+  --brand-color-lighter-7: var(--brand-color-blue-theme-darker-7);
+  --brand-color-lighter-8: var(--brand-color-blue-theme-darker-8);
+  --brand-color-lighter-9: var(--brand-color-blue-theme-darker-9);
+
+  --overlay: var(--overlay-blue-theme-darker);
 }
 
 @media (prefers-color-scheme: dark) {
   :root .blue-theme {
-    --brand-color-lighter-1: #4a9fc4;
-    --brand-color-lighter-2: #498db2;
-    --brand-color-lighter-3: #4a7895;
-    --brand-color-lighter-4: #4a7785;
-    --brand-color-lighter-5: #415867;
-    --brand-color-lighter-6: #475a64;
-    --brand-color-lighter-7: #445058;
-    --brand-color-lighter-8: #41484d;
-    --brand-color-lighter-9: #404142;
-
-    --overlay: rgba(27, 67, 88, 0.6);
+    --brand-color-lighter-1: var(--brand-color-blue-theme-darker-1);
+    --brand-color-lighter-2: var(--brand-color-blue-theme-darker-2);
+    --brand-color-lighter-3: var(--brand-color-blue-theme-darker-3);
+    --brand-color-lighter-4: var(--brand-color-blue-theme-darker-4);
+    --brand-color-lighter-5: var(--brand-color-blue-theme-darker-5);
+    --brand-color-lighter-6: var(--brand-color-blue-theme-darker-6);
+    --brand-color-lighter-7: var(--brand-color-blue-theme-darker-7);
+    --brand-color-lighter-8: var(--brand-color-blue-theme-darker-8);
+    --brand-color-lighter-9: var(--brand-color-blue-theme-darker-9);
+
+    --overlay: var(--overlay-blue-theme-darker);
   }
 }