From 468e3500fa1234c78a4f108488e421073a5a8027 Mon Sep 17 00:00:00 2001
From: Alexander Zhukov <a.zhukov@akveo.com>
Date: Wed, 12 Jul 2017 11:16:16 +0300
Subject: [PATCH] fix(forms): fix the input styles

---
 package-lock.json                             |  5 ---
 package.json                                  |  1 -
 .../form-inputs/form-inputs.component.html    | 41 +++++++++----------
 .../form-inputs/form-inputs.component.scss    | 18 ++++++++
 .../form-inputs/form-inputs.component.ts      |  4 +-
 5 files changed, 40 insertions(+), 29 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b1961b60..2246723e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7527,11 +7527,6 @@
         }
       }
     },
-    "segoe-fonts": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/segoe-fonts/-/segoe-fonts-1.0.1.tgz",
-      "integrity": "sha1-7CyCcJIbhFe8LOFmsa7hBoy6fLc="
-    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
diff --git a/package.json b/package.json
index 1f7eb292..b0dd10f2 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,6 @@
     "normalize.css": "6.0.0",
     "roboto-fontface": "0.7.0",
     "rxjs": "5.4.0",
-    "segoe-fonts": "1.0.1",
     "tether": "1.4.0",
     "tinymce": "4.5.7",
     "typeface-exo": "0.0.22",
diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.html b/src/app/pages/forms/form-inputs/form-inputs.component.html
index 7da44348..e32c51f0 100644
--- a/src/app/pages/forms/form-inputs/form-inputs.component.html
+++ b/src/app/pages/forms/form-inputs/form-inputs.component.html
@@ -17,10 +17,7 @@
         <div class="input-group">
           <input type="password" placeholder="Password" class="form-control" />
         </div>
-        <div class="input-group">
-          <span class="input-group-addon input-group-icon">
-            <i class="ion-ios-person-outline"></i>
-          </span>
+        <div class="input-group has-person-icon">
           <input type="text" placeholder="With Icon" class="form-control" />
         </div>
         <div class="input-group input-group-rounded">
@@ -95,21 +92,21 @@
         <div class="form-group">
           <label>Simple Select</label>
           <select class="form-control">
-            <option>1</option>
-            <option>2</option>
-            <option>3</option>
-            <option>4</option>
-            <option>5</option>
+            <option>Minsk</option>
+            <option>Gomel</option>
+            <option>Brest</option>
+            <option>Grodno</option>
+            <option>Mogilev</option>
           </select>
         </div>
         <div class="form-group">
           <label>Multiple Select</label>
           <select multiple class="form-control">
-            <option>1</option>
-            <option>2</option>
-            <option>3</option>
-            <option>4</option>
-            <option>5</option>
+            <option>Item 1</option>
+            <option>Item 2</option>
+            <option>Item 3</option>
+            <option>Item 4</option>
+            <option>Item 5</option>
           </select>
         </div>
       </nga-card-body>
@@ -185,9 +182,9 @@
             </label>
           </div>
           <div class="demo-disabled-checkbox-radio">
-            <nga-checkbox>Disbaled Checkbox</nga-checkbox>
+            <nga-checkbox [disabled]="true">Disbaled Checkbox</nga-checkbox>
             <label class="custom-control custom-radio">
-              <input type="radio" class="custom-control-input">
+              <input type="radio" class="custom-control-input" disabled>
               <span class="custom-control-indicator"></span>
               <span class="custom-control-description">Disabled Radio</span>
             </label>
@@ -199,7 +196,7 @@
       <nga-card-body class="demo-rating">
         <span class="header">Rating</span>
         <div>
-          <ngb-rating [(rate)]="currentRate" max=5>
+          <ngb-rating [(rate)]="starRate" max=5>
             <ng-template let-fill="fill">
               <span class="star fill" [class.filled]="fill === 100">
                 <i class="ion-android-star" *ngIf="fill === 100"></i>
@@ -207,18 +204,18 @@
               </span>
             </ng-template>
           </ngb-rating>
-          <span class="current-rate">{{ currentRate | number : '1.1' }}</span>
+          <span class="current-rate">{{ starRate | number : '1.1' }}</span>
         </div>
         <div>
-          <ngb-rating [(rate)]="currentRate" max=5>
+          <ngb-rating [(rate)]="heartRate" max=5>
             <ng-template let-fill="fill">
               <span class="star fill" [class.filled]="fill === 100">
-                <i class="ion-android-star" *ngIf="fill === 100"></i>
-                <i class="ion-android-star-outline" *ngIf="fill !== 100"></i>
+                <i class="ion-ios-heart" *ngIf="fill === 100"></i>
+                <i class="ion-ios-heart-outline" *ngIf="fill !== 100"></i>
               </span>
             </ng-template>
           </ngb-rating>
-          <span class="current-rate">{{ currentRate | number : '1.1' }}</span>
+          <span class="current-rate">{{ heartRate | number : '1.1' }}</span>
         </div>
       </nga-card-body>
     </nga-card>
diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.scss b/src/app/pages/forms/form-inputs/form-inputs.component.scss
index ea078c1b..91d914be 100644
--- a/src/app/pages/forms/form-inputs/form-inputs.component.scss
+++ b/src/app/pages/forms/form-inputs/form-inputs.component.scss
@@ -68,4 +68,22 @@
       margin-right: 1rem;
     }
   }
+
+  .input-group.has-person-icon {
+    position: relative;
+
+    .form-control {
+      padding-left: 3rem;
+    }
+
+    &::before {
+      content: '\F47D';
+      font-family: 'Ionicons';
+      font-size: 2rem;
+      position: absolute;
+      z-index: 100;
+      left: 1rem;
+      top: 0.25rem;
+    }
+  }
 }
diff --git a/src/app/pages/forms/form-inputs/form-inputs.component.ts b/src/app/pages/forms/form-inputs/form-inputs.component.ts
index b8610722..1ed34845 100644
--- a/src/app/pages/forms/form-inputs/form-inputs.component.ts
+++ b/src/app/pages/forms/form-inputs/form-inputs.component.ts
@@ -6,5 +6,7 @@ import { Component } from '@angular/core';
   templateUrl: './form-inputs.component.html',
 })
 export class FormInputsComponent {
-  currentRate: number = 3;
+
+  starRate: number = 3;
+  heartRate: number = 3;
 }