From eeed00b30e42afab327866839475215e05887b58 Mon Sep 17 00:00:00 2001
From: sercan <sercanyemen@gmail.com>
Date: Thu, 11 Oct 2018 19:27:38 +0300
Subject: [PATCH] (E-Commerce) Matched search fields styles to the rest of the
 apps (Contacts) Search field doesn't span to the full width of its container

---
 src/app/app.theme.scss                        |  4 ++
 .../apps/contacts/contacts.component.html     |  2 +-
 .../apps/contacts/contacts.component.scss     |  3 +-
 .../e-commerce/orders/orders.component.html   | 12 +++---
 .../e-commerce/orders/orders.component.scss   | 37 +++++++++---------
 .../e-commerce/orders/orders.component.ts     | 13 ++++---
 .../apps/e-commerce/orders/orders.theme.scss  | 27 +++++++++++++
 .../products/products.component.html          | 13 +++----
 .../products/products.component.scss          | 39 ++++++++++---------
 .../e-commerce/products/products.component.ts |  5 ++-
 .../e-commerce/products/products.theme.scss   | 27 +++++++++++++
 11 files changed, 122 insertions(+), 60 deletions(-)
 create mode 100644 src/app/main/apps/e-commerce/orders/orders.theme.scss
 create mode 100644 src/app/main/apps/e-commerce/products/products.theme.scss

diff --git a/src/app/app.theme.scss b/src/app/app.theme.scss
index 4e970272..0b3c3128 100644
--- a/src/app/app.theme.scss
+++ b/src/app/app.theme.scss
@@ -86,6 +86,8 @@ $typography: mat-typography-config(
 @import "src/app/main/apps/chat/chat.theme";
 @import "src/app/main/apps/contacts/contacts.theme";
 @import "src/app/main/apps/dashboards/project/project.theme";
+@import "src/app/main/apps/e-commerce/orders/orders.theme";
+@import "src/app/main/apps/e-commerce/products/products.theme";
 @import "src/app/main/apps/file-manager/file-manager.theme";
 @import "src/app/main/apps/mail/mail.theme";
 @import "src/app/main/apps/mail-ngrx/mail.theme";
@@ -134,6 +136,8 @@ $typography: mat-typography-config(
     @include chat-theme($theme);
     @include contacts-theme($theme);
     @include dashboards-project-theme($theme);
+    @include e-commerce-orders-theme($theme);
+    @include e-commerce-products-theme($theme);
     @include file-manager-theme($theme);
     @include mail-theme($theme);
     @include mail-ngrx-theme($theme);
diff --git a/src/app/main/apps/contacts/contacts.component.html b/src/app/main/apps/contacts/contacts.component.html
index fd5cbe32..69451b10 100644
--- a/src/app/main/apps/contacts/contacts.component.html
+++ b/src/app/main/apps/contacts/contacts.component.html
@@ -29,7 +29,7 @@
 
             <div class="search-wrapper mt-16 mt-sm-0">
 
-                <div class="search" flex fxLayout="row" fxLayoutAlign="start center">
+                <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
                     <mat-icon>search</mat-icon>
                     <input [formControl]="searchInput" placeholder="Search for a contact">
                 </div>
diff --git a/src/app/main/apps/contacts/contacts.component.scss b/src/app/main/apps/contacts/contacts.component.scss
index 20964802..5906aa50 100644
--- a/src/app/main/apps/contacts/contacts.component.scss
+++ b/src/app/main/apps/contacts/contacts.component.scss
@@ -18,6 +18,7 @@
                 padding: 0 18px;
 
                 input {
+                    width: 100%;
                     height: 48px;
                     min-height: 48px;
                     max-height: 48px;
@@ -39,4 +40,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/main/apps/e-commerce/orders/orders.component.html b/src/app/main/apps/e-commerce/orders/orders.component.html
index cb26fb66..e0fd79b2 100644
--- a/src/app/main/apps/e-commerce/orders/orders.component.html
+++ b/src/app/main/apps/e-commerce/orders/orders.component.html
@@ -15,7 +15,7 @@
             <!-- APP TITLE -->
             <div class="logo mb-24 mb-sm-0"
                  fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="logo-icon s-40 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
+                <mat-icon class="logo-icon s-32 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
                     shopping_basket
                 </mat-icon>
                 <span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Orders</span>
@@ -23,11 +23,11 @@
             <!-- / APP TITLE -->
 
             <!-- SEARCH -->
-            <div class="search-input-wrapper ml-sm-32" fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center">
-                <label for="search" class="mr-8">
-                    <mat-icon class="secondary-text s-18">search</mat-icon>
-                </label>
-                <input id="search" #filter placeholder="Search">
+            <div class="search-wrapper  ml-sm-32">
+                <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
+                    <mat-icon>search</mat-icon>
+                    <input #filter placeholder="Search for an order">
+                </div>
             </div>
             <!-- / SEARCH -->
 
diff --git a/src/app/main/apps/e-commerce/orders/orders.component.scss b/src/app/main/apps/e-commerce/orders/orders.component.scss
index 4b1327c1..0df904ef 100644
--- a/src/app/main/apps/e-commerce/orders/orders.component.scss
+++ b/src/app/main/apps/e-commerce/orders/orders.component.scss
@@ -1,6 +1,6 @@
 @import "src/@fuse/scss/fuse";
 
-:host {
+e-commerce-orders {
 
     #orders {
 
@@ -15,32 +15,33 @@
 
             > .header {
 
-                .search-input-wrapper {
+                .search-wrapper {
+                    width: 100%;
                     max-width: 480px;
-                    height: 42px;
-                    max-height: 42px;
-                    min-height: 42px;
-                    border-radius: 21px;
-                    padding: 0 16px;
-                    background: white;
+                    border-radius: 28px;
+                    overflow: hidden;
+                    @include mat-elevation(1);
 
                     @include media-breakpoint('xs') {
                         width: 100%;
                     }
 
-                    label {
-                        width: 18px;
-                        height: 18px;
+                    .search {
+                        width: 100%;
+                        height: 48px;
+                        line-height: 48px;
+                        padding: 0 18px;
 
-                        mat-icon {
-                            color: rgba(0, 0, 0, 0.54) !important;
+                        input {
+                            width: 100%;
+                            height: 48px;
+                            min-height: 48px;
+                            max-height: 48px;
+                            padding: 0 16px;
+                            border: none;
+                            outline: none;
                         }
                     }
-
-                    #search {
-                        border: none;
-                        background: none;
-                    }
                 }
 
                 @include media-breakpoint('xs') {
diff --git a/src/app/main/apps/e-commerce/orders/orders.component.ts b/src/app/main/apps/e-commerce/orders/orders.component.ts
index 5b1582ab..041f065f 100644
--- a/src/app/main/apps/e-commerce/orders/orders.component.ts
+++ b/src/app/main/apps/e-commerce/orders/orders.component.ts
@@ -1,7 +1,7 @@
-import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { MatPaginator, MatSort } from '@angular/material';
 import { DataSource } from '@angular/cdk/collections';
-import { merge, Observable, BehaviorSubject, fromEvent, Subject } from 'rxjs';
+import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
 
 import { fuseAnimations } from '@fuse/animations';
@@ -11,10 +11,11 @@ import { EcommerceOrdersService } from 'app/main/apps/e-commerce/orders/orders.s
 import { takeUntil } from 'rxjs/internal/operators';
 
 @Component({
-    selector   : 'e-commerce-orders',
-    templateUrl: './orders.component.html',
-    styleUrls  : ['./orders.component.scss'],
-    animations : fuseAnimations
+    selector     : 'e-commerce-orders',
+    templateUrl  : './orders.component.html',
+    styleUrls    : ['./orders.component.scss'],
+    animations   : fuseAnimations,
+    encapsulation: ViewEncapsulation.None
 })
 export class EcommerceOrdersComponent implements OnInit, OnDestroy
 {
diff --git a/src/app/main/apps/e-commerce/orders/orders.theme.scss b/src/app/main/apps/e-commerce/orders/orders.theme.scss
new file mode 100644
index 00000000..4456f809
--- /dev/null
+++ b/src/app/main/apps/e-commerce/orders/orders.theme.scss
@@ -0,0 +1,27 @@
+@mixin e-commerce-orders-theme($theme) {
+
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    e-commerce-orders {
+
+        .header {
+
+            .search-wrapper {
+                background: map-get($background, card);
+
+                .search {
+
+                    .mat-icon {
+                        color: map-get($foreground, icon);
+                    }
+
+                    input {
+                        background: map-get($background, card);
+                        color: map-get($foreground, text);
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/app/main/apps/e-commerce/products/products.component.html b/src/app/main/apps/e-commerce/products/products.component.html
index e2dd4baa..1d36aab3 100644
--- a/src/app/main/apps/e-commerce/products/products.component.html
+++ b/src/app/main/apps/e-commerce/products/products.component.html
@@ -15,7 +15,7 @@
             <!-- APP TITLE -->
             <div class="logo mb-24 mb-md-0"
                  fxLayout="row" fxLayoutAlign="start center">
-                <mat-icon class="logo-icon s-40 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
+                <mat-icon class="logo-icon s-32 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
                     shopping_basket
                 </mat-icon>
                 <span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">
@@ -25,12 +25,11 @@
             <!-- / APP TITLE -->
 
             <!-- SEARCH -->
-            <div class="search-input-wrapper mx-32 mx-md-0" fxFlex="1 0 auto" fxLayout="row"
-                 fxLayoutAlign="start center">
-                <label for="search" class="mr-8">
-                    <mat-icon class="secondary-text s-18">search</mat-icon>
-                </label>
-                <input id="search" #filter placeholder="Search">
+            <div class="search-wrapper mx-32 mx-md-0">
+                <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
+                    <mat-icon>search</mat-icon>
+                    <input #filter placeholder="Search for a product">
+                </div>
             </div>
             <!-- / SEARCH -->
 
diff --git a/src/app/main/apps/e-commerce/products/products.component.scss b/src/app/main/apps/e-commerce/products/products.component.scss
index 12f16582..36245c62 100644
--- a/src/app/main/apps/e-commerce/products/products.component.scss
+++ b/src/app/main/apps/e-commerce/products/products.component.scss
@@ -1,6 +1,6 @@
 @import "src/@fuse/scss/fuse";
 
-:host {
+e-commerce-products {
 
     #products {
 
@@ -15,32 +15,33 @@
 
             > .header {
 
-                .search-input-wrapper {
+                .search-wrapper {
+                    width: 100%;
                     max-width: 480px;
-                    height: 42px;
-                    max-height: 42px;
-                    min-height: 42px;
-                    border-radius: 21px;
-                    padding: 0 16px;
-                    background: white;
+                    border-radius: 28px;
+                    overflow: hidden;
+                    @include mat-elevation(1);
 
-                    @include media-breakpoint('lt-md') {
+                    @include media-breakpoint('xs') {
                         width: 100%;
                     }
 
-                    label {
-                        width: 18px;
-                        height: 18px;
+                    .search {
+                        width: 100%;
+                        height: 48px;
+                        line-height: 48px;
+                        padding: 0 18px;
 
-                        mat-icon {
-                            color: rgba(0, 0, 0, 0.54) !important;
+                        input {
+                            width: 100%;
+                            height: 48px;
+                            min-height: 48px;
+                            max-height: 48px;
+                            padding: 0 16px;
+                            border: none;
+                            outline: none;
                         }
                     }
-
-                    #search {
-                        border: none;
-                        background: none;
-                    }
                 }
 
                 @include media-breakpoint('lt-md') {
diff --git a/src/app/main/apps/e-commerce/products/products.component.ts b/src/app/main/apps/e-commerce/products/products.component.ts
index 4d27caa6..9f113470 100644
--- a/src/app/main/apps/e-commerce/products/products.component.ts
+++ b/src/app/main/apps/e-commerce/products/products.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { MatPaginator, MatSort } from '@angular/material';
 import { DataSource } from '@angular/cdk/collections';
 import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
@@ -14,7 +14,8 @@ import { takeUntil } from 'rxjs/internal/operators';
     selector     : 'e-commerce-products',
     templateUrl  : './products.component.html',
     styleUrls    : ['./products.component.scss'],
-    animations   : fuseAnimations
+    animations   : fuseAnimations,
+    encapsulation: ViewEncapsulation.None
 })
 export class EcommerceProductsComponent implements OnInit
 {
diff --git a/src/app/main/apps/e-commerce/products/products.theme.scss b/src/app/main/apps/e-commerce/products/products.theme.scss
new file mode 100644
index 00000000..27d50c2d
--- /dev/null
+++ b/src/app/main/apps/e-commerce/products/products.theme.scss
@@ -0,0 +1,27 @@
+@mixin e-commerce-products-theme($theme) {
+
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    e-commerce-products {
+
+        .header {
+
+            .search-wrapper {
+                background: map-get($background, card);
+
+                .search {
+
+                    .mat-icon {
+                        color: map-get($foreground, icon);
+                    }
+
+                    input {
+                        background: map-get($background, card);
+                        color: map-get($foreground, text);
+                    }
+                }
+            }
+        }
+    }
+}