ui make up

open-template-hub · Sep 6, 2021 · 3195874 · 3195874
1 parent dc0f1a5
commit 3195874
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 20 deletions.
diff --git a/src/app/component/common/card/pricing-card/pricing-card.component.html b/src/app/component/common/card/pricing-card/pricing-card.component.html
@@ -13,9 +13,9 @@
       </div>
       <hr>
       <div class="subscription-features" [style.height]="option.styles.featureHeight">
-        <p *ngFor="let feture of option.features">
+        <p *ngFor="let feature of option.features">
           <i aria-hidden="true" class="material-icons">check</i>
-          <span>{{ feture }}</span>
+          <span>{{ feature }}</span>
         </p>
       </div>
       <app-button1 (click)="routeToEvent(option.link ? option.link : URLS.maintenance)"

diff --git a/src/app/component/common/card/pricing-card/pricing-card.component.ts b/src/app/component/common/card/pricing-card/pricing-card.component.ts
@@ -29,14 +29,14 @@ export class PricingCardComponent {
   RIBBONS = RIBBONS;
   URLS = URLS;
   @Input() option: PricingOption = {
-    title: 'Basic',
-    ribbon: { type: 'premium', text: 'DEAL' },
+    title: '',
+    ribbon: { type: '', text: '' },
     price: {
-      currency: '$',
-      value: '9',
-      subscriptionTime: 'mo.'
+      currency: '',
+      value: '',
+      subscriptionTime: ''
     },
-    features: [ 'Up to 10 users', 'Maximum 100 photos/mo.', '500 queries' ],
+    features: [],
     styles: {
       width: '340px',
       height: '440px',

diff --git a/src/app/component/common/dropdown-menu/dropdown-menu.component.html b/src/app/component/common/dropdown-menu/dropdown-menu.component.html
@@ -11,33 +11,33 @@
     </div>
 
     <div class="section-column-wrapper" [style]="'min-width: ' + (330 * calculatedColumns) + 'px;'">
-      <div class="section-column" *ngFor="let column of productLines; last as isLastColumn"
+      <div class="section-column" *ngFor="let productLine of productLines; last as isLastColumn"
            [class.section-column-right-border]="true"
-           [class]="column.color ? column.color + '-theme' : ''"
+           [class]="productLine.color ? productLine.color + '-theme' : ''"
            [style]="'max-height: ' + ((80  + (150 * calculatedRows)) + 1) + 'px;'">
-        <div *ngIf="column.name" class="section-header">
+        <div *ngIf="productLine.name" class="section-header">
           <h4>
-            {{ column.name }}
+            {{ productLine.name }}
           </h4>
           <hr [style.border-color]="'var(--brand-color)'"/>
           <p>
-            {{ column.description }}
+            {{ productLine.description }}
           </p>
         </div>
 
-        <a *ngFor="let option of column.products; last as isLast; first as isFirst" class="dropdown-item"
-           [class]="option.color ? option.color + '-theme' : ''"
-           [routerLink]="URLS.product" [queryParams]="{productLineName: column.key, productName: option.key}"
+        <a *ngFor="let product of productLine.products; last as isLast; first as isFirst" class="dropdown-item"
+           [class]="product.color ? product.color + '-theme' : ''"
+           [routerLink]="URLS.product" [queryParams]="{productLineName: productLine.key, productName: product.key}"
            (click)="closeDropDownInternal()">
 
-          <img [src]="option.logo" alt="logo" class="dropdown-item-logo" height="55"/>
+          <img [src]="product.logo" alt="logo" class="dropdown-item-logo" height="55"/>
 
           <div class="dropdown-item-content">
             <h6>
-              {{ option.name }}
+              {{ product.name }}
             </h6>
             <p>
-              {{ option.description }}
+              {{ product.description }}
             </p>
           </div>
         </a>

diff --git a/src/app/page/raw-landing-layout/pricing/pricing.component.ts b/src/app/page/raw-landing-layout/pricing/pricing.component.ts
@@ -26,7 +26,7 @@ export class PricingComponent {
 
   basicOption: PricingOption = {
     title: 'BASIC',
-    ribbon: { type: 'error', text: 'DEAL' },
+    ribbon: { type: 'deal', text: 'DEAL' },
     price: {
       currency: '$',
       value: '49',

diff --git a/src/styles/other/ribbon.scss b/src/styles/other/ribbon.scss
@@ -107,6 +107,10 @@
   background-color: var(--brand-color-yellow-theme);
 }
 
+.ribbon.ribbon-deal:before {
+  background-color: var(--brand-color-default-theme);
+}
+
 .ribbon:after {
   /* Set the text from the data-ribbon attribute */
   content: attr(data-ribbon);