ui make up

open-template-hub · Aug 31, 2021 · 9350f3f · 9350f3f
1 parent b81957a
commit 9350f3f
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 18 deletions.
diff --git a/src/app/component/common/dropdown-menu/dropdown-menu.component.html b/src/app/component/common/dropdown-menu/dropdown-menu.component.html
@@ -2,21 +2,32 @@
   <div *ngIf="menuType === 'top'" #toggleButton class="ng-content-area">
     <ng-content (click)="toggleDropdown()"></ng-content>
   </div>
+
   <div *ngIf="isDropdownOpen" #dropdownContent class="dropdown-content" [class.bottom]="menuType === 'bottom'">
     <i *ngIf="menuType === 'top'" aria-hidden="true" class="fas fa-caret-up fa-lg fa-fw"></i>
     <i *ngIf="menuType === 'bottom'" (click)="toggleDropdown()" aria-hidden="true" class="fas fa-times fa-lg fa-fw"></i>
+
     <div class="section-column" *ngFor="let column of options">
-      <span *ngIf="column.sectionTitle" class="section-header">{{ column.sectionTitle }}</span>
+      <span *ngIf="column.sectionTitle" class="section-header" [style.color]="column.sectionColor ? column.sectionColor : ''">
+        {{ column.sectionTitle }}
+      </span>
+
       <a *ngFor="let option of column.menus; last as isLast; first as isFirst" class="dropdown-item"
          (mouseover)="option.hover = true" (mouseleave)="option.hover = false"
          [ngStyle]="option?.hover && { 'background-color': option.backgroundColor }"
          [style.margin-bottom]="!isLast ? '10px' : '0'"
          [style.margin-top]="isFirst ? '20px' : '10px'"
          [href]="option.link">
+
         <img [src]="option.brand.brandLogo" alt="logo" class="dropdown-item-logo" height="50"/>
+
         <div class="dropdown-item-content">
-          <span>{{ option.header }}</span>
-          <p>{{ option.description }}</p>
+          <span>
+            {{ option.header }}
+          </span>
+          <p>
+            {{ option.description }}
+          </p>
         </div>
       </a>
     </div>

diff --git a/src/app/component/common/dropdown-menu/dropdown-menu.component.ts b/src/app/component/common/dropdown-menu/dropdown-menu.component.ts
@@ -4,6 +4,7 @@ import { ThemeService } from '../../../service/theme/theme.service';
 
 export interface DropdownColumnOption {
   sectionTitle?: string,
+  sectionColor?: string
   menus: DropdownMenuOption[]
 }
 
@@ -31,18 +32,7 @@ export class DropdownMenuComponent implements OnInit {
   @Input() isDropdownOpen = false;
   @Input() toggleEvent: Observable<void>;
 
-  @Input() options: DropdownColumnOption[] = [
-    {
-      sectionTitle: 'Payment',
-      menus: [ {
-        backgroundColor: 'var(--brand-color-lighter-5)',
-        brand: { brandLogo: '' },
-        header: 'Open Template Hub',
-        description: 'Open Template Hub is an organization that develops open source micro servers as templates including authentication server, payment server and more..',
-        link: '/'
-      } ]
-    }
-  ];
+  @Input() options: DropdownColumnOption[] = [];
 
   @Input() menuType: 'top' | 'bottom' = 'top';
   @Input() isActive = false;

diff --git a/src/app/page/raw-landing-layout/home/home.component.html b/src/app/page/raw-landing-layout/home/home.component.html
@@ -61,7 +61,10 @@ <h6 class="testimonial-description">What our customers are saying...</h6>
   <app-swiper-wrapper></app-swiper-wrapper>
   <div class="features-wrapper">
     <div *ngFor="let productLine of PRODUCT_LINES;" class="features">
-      <h4>{{ productLine.sectionTitle }}</h4>
+      <h4 *ngIf="productLine.sectionTitle" [style.color]="productLine.sectionColor ? productLine.sectionColor : ''">
+        {{ productLine.sectionTitle }}
+      </h4>
+
       <div *ngFor="let product of productLine.menus; let i = index; last as isLast" class="feature-wrapper"
            [class.feature-left]="i % 2 === 1" [class.feature-right]="i % 2 === 0">
         <div *ngIf="i % 2 === 0" class="layers">

diff --git a/src/app/page/raw-landing-layout/home/home.component.scss b/src/app/page/raw-landing-layout/home/home.component.scss
@@ -25,7 +25,8 @@
 }
 
 .feature-img-wrapper {
-  padding: 30px;
+  padding-left: 2vw;
+  padding-right: 2vw;
 }
 
 .features h4, .features .feature {
@@ -198,7 +199,6 @@ app-swiper-wrapper {
 
   .feature-img-wrapper {
     max-width: 20%;
-    margin-right: 5vw;
   }
 
   .features h4 {

diff --git a/src/app/util/constant.ts b/src/app/util/constant.ts
@@ -172,6 +172,7 @@ export const PRODUCT_LINES: DropdownColumnOption[] = [
   },
   {
     sectionTitle: 'Premium',
+    sectionColor: 'var(--brand-color-yellow-theme)',
     menus: [
       {
         backgroundColor: 'var(--brand-color-yellow-theme-lighter-5)',

diff --git a/src/styles/brand/brand.scss b/src/styles/brand/brand.scss
@@ -6,6 +6,7 @@
 @import "brand-blue";
 
 .default-theme {
+  // This is the class to change default theme
   @extend .green-theme;
   --brand-color-default-theme: var(--brand-color-green-theme);
 }