brand-color to theme-color change

README.md

@@ -131,14 +131,6 @@ PORT=4200
 
 Check project's current **nodejs** and **npm** version from **[package.json](package.json)**.
 
-## Landing Screen Images
-
-To be able to update home screen images, we are using open source project **[Scale by Flexiple](https://2.flexiple.com/scale/all-illustrations)**.
-
-Find our brand color at **[brand.scss](src/styles/brand/brand.scss)** and apply at the website and download images.
-
-<br/>
-
 ## Brand Color Scale Generator
 
 To be able to generate brand color scales, we are using **[Colllor](http://colllor.com)**.

src/app/component/common/block/event-data/event-data.component.html

@@ -61,35 +61,35 @@ <h4 *ngIf="date">{{timeItem}}</h4>
   </div>
   <div class="event-last-item">
     <app-button1 (click)="onEditClick()" *ngIf="isEditable && !inProgress && !showRateBar && !completed"
-                 [brandColor]="true" [icon]="'pen'" [isSleekButton]="true" [text]="'Edit'">
+                 [themeColor]="'default'" [icon]="'pen'" [isSleekButton]="true" [text]="'Edit'">
     </app-button1>
     <app-button1 (click)="onBuyNowClick()"
                  *ngIf="!isEditable && isPremium && attendeeButton && !showRateBar && !completed"
-                 [brandColor]="true" [icon]="'shopping-cart'" [isSleekButton]="true"
+                 [themeColor]="'default'" [icon]="'shopping-cart'" [isSleekButton]="true"
                  [text]="'Buy Now ' + (price ? '(' + price + '$)' : '')">
     </app-button1>
     <app-button1 (click)="onAttendClick()"
                  *ngIf="!isEditable && !isPremium && attendeeButton && !showRateBar && !completed"
-                 [brandColor]="true" [isSleekButton]="true" [text]="'Attend'">
+                 [themeColor]="'default'" [isSleekButton]="true" [text]="'Attend'">
     </app-button1>
     <app-button1 (click)="onDropClick()" *ngIf="!isEditable && dropButton && !showRateBar && !completed && !isPremium"
                  [hoverWithColor]="false"
                  [isSleekButton]="true" [lighterContrast]="true" [text]="'Drop'" [transparent]="true">
     </app-button1>
     <app-button1 (click)="onMarkAsCompletedClick()" *ngIf="markAsCompleted && !showRateBar && !completed"
-                 [brandColor]="true" [isSleekButton]="true" [text]="'Mark As Completed'" [icon]="'check'">
+                 [themeColor]="'default'" [isSleekButton]="true" [text]="'Mark As Completed'" [icon]="'check'">
     </app-button1>
-    <app-button1 *ngIf="!isEditable && dropButton && !showRateBar && !completed && isPremium" [brandLightColor]="true"
+    <app-button1 *ngIf="!isEditable && dropButton && !showRateBar && !completed && isPremium" [themeLightColor]="true"
                  [isSleekButton]="true" [text]="'Attended'">
     </app-button1>
-    <app-button1 *ngIf="completed" [cursor]="'not-allowed'" [brandLightColor]="true" [isSleekButton]="true"
+    <app-button1 *ngIf="completed" [cursor]="'not-allowed'" [themeLightColor]="true" [isSleekButton]="true"
                  [text]="'Completed'">
     </app-button1>
     <app-button1 (click)="onRateClick()" *ngIf="showRateBar"
-                 [brandColor]="true" [isSleekButton]="true" [text]="'Rate'">
+                 [themeColor]="'default'" [isSleekButton]="true" [text]="'Rate'">
     </app-button1>
     <app-button1 *ngIf="inProgress" [cursor]="'not-allowed'"
-                 [brandLightColor]="true" [isSleekButton]="true" [text]="'In Progress'" [icon]="'hourglass'">
+                 [themeLightColor]="true" [isSleekButton]="true" [text]="'In Progress'" [icon]="'hourglass'">
     </app-button1>
     <div (click)="onCategoryClick()" class="event-categories">
       <p *ngIf="category && !subCategory && !leafCategory"><a class="link">{{'#' + category.name}}</a></p>

src/app/component/common/block/event-data/event-data.component.scss

@@ -142,7 +142,7 @@
 }
 
 .content-information-row-data {
-  color: var(--brand-color);
+  color: var(--theme-color);
   font-weight: 400;
   font-size: 1.1em;
 }

src/app/component/common/button/button1/button1.component.html

@@ -1,11 +1,11 @@
-<button class="button1" [class]="classType" [class.attendee]="isAttendee" [class.brand-color]="brandColor"
+<button class="button1" [class]="classType" [class.attendee]="isAttendee"
         [class.fixed-width]="fixedWidth" [class.hover-with-color]="hoverWithColor"
         [class.lighter-contrast]="lighterContrast" [class.mobile-view]="mobileView"
         [class.sleek-button]="isSleekButton" [class.success]="success" [class.transparent]="transparent"
-        [class.contribute]="isContribute" [class.brand-light-color]="brandLightColor"
+        [class.contribute]="isContribute" [class.theme-light-color]="themeLightColor"
         [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)' : ''"
+        [class.theme-color]="!transparent && themeColor"
+        [class.transparent-theme-color]="transparent && themeColor"
         [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>

src/app/component/common/button/button1/button1.component.scss

@@ -26,11 +26,6 @@
   margin: 0;
 }
 
-.button1.brand-color {
-  color: whitesmoke;
-  background-color: var(--brand-color);
-}
-
 .button1.always-light {
   color: var(--contrast-light-mode);
   background-color: var(--color-light-mode);
@@ -41,9 +36,20 @@
   background-color: var(--color-dark-mode);
 }
 
-.button1.brand-light-color {
+.button1.transparent.transparent-theme-color {
+  border: 1px solid var(--success);
+  color: var(--theme-color);
+  border-color: var(--theme-color);
+}
+
+.button1.theme-light-color {
+  color: whitesmoke;
+  background-color: var(--theme-color-lighter-4);
+}
+
+.button1.theme-color {
   color: whitesmoke;
-  background-color: var(--brand-color-lighter-5);
+  background-color: var(--theme-color);
 }
 
 .button1.transparent {
@@ -56,7 +62,7 @@
 }
 
 .button1.selected {
-  box-shadow: 0 0 3px 3px var(--brand-color-lighter-1);
+  box-shadow: 0 0 3px 3px var(--theme-color-lighter-1);
 }
 
 .button1.lighter-contrast {
@@ -106,13 +112,12 @@
     box-shadow: 0 3px 15px 1px var(--shadow);
   }
 
-  .button1.brand-color:hover {
-    background-color: var(--brand-color);
-    color: white;
+  .button1.transparent.transparent-theme-color:hover {
+    color: var(--theme-color);
   }
 
-  .button1.brand-light-color:hover {
-    background-color: var(--brand-color-lighter-5);
+  .button1.theme-light-color:hover {
+    background-color: var(--theme-color-lighter-4);
     color: whitesmoke;
     box-shadow: initial;
   }
@@ -126,6 +131,6 @@
   }
 
   .button1.selected:hover {
-    box-shadow: 0 0 3px 3px var(--brand-color-lighter-1);
+    box-shadow: 0 0 3px 3px var(--theme-color-lighter-1);
   }
 }

src/app/component/common/button/button1/button1.component.ts

@@ -10,8 +10,7 @@ export class Button1Component {
 
   @Input() text = 'Button';
   @Input() classType = 'top-right-bottom-left-rounded-box';
-  @Input() brandColor = false;
-  @Input() brandLightColor = false;
+  @Input() themeLightColor = false;
   @Input() transparent = false;
   @Input() success = false;
   @Input() isContribute = false;

src/app/component/common/card/card1/card1.component.html

@@ -2,13 +2,13 @@
      [class.card1-small]="isSmall"
      [class.no-margin]="!margin" [class.no-shadow]="!shadow" [style.height]="height ? height : ''"
      [style.width]="width ? width : ''" class="card1" [class.testimonial-size]="testimonialSizeActive">
-  <div *ngIf="topWrapper" [class.card1-top-wrapper-in-brand-color]="topWrapperInBrandColor"
+  <div *ngIf="topWrapper" [class.card1-top-wrapper-in-theme-color]="topWrapperInThemeColor"
        class="card1-top-wrapper">
   </div>
   <div *ngIf="topLayer" class="layers top-layer">
     <svg [style.margin-top]="topLayerMarginTop"
          [style.min-height]="topLayerMinHeight" viewBox="0 0 1000 250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMax slice">
-      <path d="M 0,250 1000,120 V 0 H 0 Z" style="fill: var(--brand-color-lighter-2);"></path>
+      <path d="M 0,250 1000,120 V 0 H 0 Z" style="fill: var(--theme-color-lighter-2);"></path>
     </svg>
   </div>
   <div *ngIf="!headerProfileImg && enableHeader && !enableHeaderFullImg" class="card1-header" [class]="headerType">
@@ -48,7 +48,7 @@ <h3>{{title}}</h3>
   <div *ngIf="bottomLayer" class="bottom-layer">
     <svg style="min-height: 210px;" xmlns="http://www.w3.org/2000/svg">
       <path transform="translate(100 100)" d="M28.9,-40.6C39.8,-43.8,52.4,-40.7,53.9,-32.9C55.4,-25,45.8,-12.5,45.4,-0.2C44.9,12,53.7,24,49.3,26.9C45,29.8,27.5,23.6,17.1,32.7C6.7,41.9,3.4,66.3,-3.1,71.6C-9.5,76.9,-18.9,63.1,-26.9,52.5C-34.8,42,-41.2,34.7,-48.2,26.5C-55.3,18.3,-63,9.2,-64.9,-1.1C-66.9,-11.4,-63.1,-22.8,-59.3,-36.6C-55.4,-50.4,-51.6,-66.6,-41.7,-63.9C-31.9,-61.2,-15.9,-39.7,-3.4,-33.8C9,-27.8,18.1,-37.4,28.9,-40.6Z"
-            [style.fill]="bottomLayerBackgroundColor ? bottomLayerBackgroundColor : 'var(--brand-color-lighter-2)'"
+            [style.fill]="bottomLayerBackgroundColor ? bottomLayerBackgroundColor : 'var(--theme-color-lighter-2)'"
             stroke="null" fill-opacity="0.4"/>
     </svg>
   </div>

src/app/component/common/card/card1/card1.component.scss

@@ -41,8 +41,8 @@
   left: 0;
 }
 
-.card1-top-wrapper.card1-top-wrapper-in-brand-color {
-  background-color: var(--brand-color);
+.card1-top-wrapper.card1-top-wrapper-in-theme-color {
+  background-color: var(--theme-color);
 }
 
 .card1-header {

src/app/component/common/card/card1/card1.component.ts

@@ -25,7 +25,7 @@ export class Card1Component {
   @Input() bottomWrapper = true;
   @Input() bottomWrapperColor = '';
   @Input() topWrapper = false;
-  @Input() topWrapperInBrandColor = false;
+  @Input() topWrapperInThemeColor = false;
   @Input() height = undefined;
   @Input() width = undefined;
   @Input() maxHeight = false;