From 20625aa33da128b444283136d73174cac9de2e35 Mon Sep 17 00:00:00 2001
From: Swetha <sangepuswetha@gmail.com>
Date: Wed, 24 Jan 2018 18:10:24 -0800
Subject: [PATCH] Device group filter (#870)

* small change

* styling changes

* color variables added

* color variable added

* Removed quotes

* updated the color variables

* alignment change

* small update
---
 src/components/editInput/editInput.scss       | 148 +++++++++---------
 src/components/flyout/deviceTagFlyout.scss    |   5 +-
 .../layout/contextFilters/contextFilters.scss |  70 +++++----
 src/components/pages/dashboard/dashboard.scss |  14 +-
 src/styles/variables/_colors.scss             |   1 +
 5 files changed, 131 insertions(+), 107 deletions(-)

diff --git a/src/components/editInput/editInput.scss b/src/components/editInput/editInput.scss
index 68cde5038..bed1d2bdf 100644
--- a/src/components/editInput/editInput.scss
+++ b/src/components/editInput/editInput.scss
@@ -1,88 +1,92 @@
 // Copyright (c) Microsoft. All rights reserved.
 
+@import '../../styles/variables/colors';
+
 .edit-input {
-    input:not([type="radio"]), 
-    textarea, 
-    select {
-        border: 1px #454a4e solid;
-        background-color: #1B1D1F;
-        width: 100%;
-        color: #afb9c3;
-        padding: 0px 8px;
+  input:not([type=radio]),
+  textarea,
+  select {
+    border: 1px $borderColor solid;
+    background-color: $gridTileDark;
+    width: 100%;
+    color: $lightestGray;
+    padding: 0px 8px;
+  }
+
+  .radio:not(:last-child) label { margin-bottom: 16px; }
+
+  textarea { padding: 7px 8px; }
+
+  input::-webkit-input-placeholder,
+  textarea::-webkit-input-placeholder { color: $lightestGray; }
+
+  input:-moz-placeholder,
+  textarea:-moz-placeholder { color: $lightestGray; }
+
+  label {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin: 0;
+  }
+
+  .radio-img {
+    margin-right: 5px;
+    height: 10px;
+    width: 10px;
+    display: inline-block;
+
+    img {
+      height: 100%;
+      width: 100%;
     }
+  }
 
-    .radio:not(:last-child) label { margin-bottom: 16px; }
+  .field-select {
 
-    textarea { padding: 7px 8px; }
+    .Select-control {
+      background-color: $gridTileDark;
+      border: 1px solid $borderColor !important;
+      padding: 0px 3px 0px 8px !important;
+      margin-bottom: 2px;
+      vertical-align: middle !important;
+      height: 10px;
 
-    input::-webkit-input-placeholder, 
-    textarea::-webkit-input-placeholder { color: #afb9c3; }
+      input { border: none; }
+    }
 
-    input:-moz-placeholder, 
-    textarea:-moz-placeholder { color: #afb9c3; }
+    .Select {
+      width: 100% !important;
+      margin-top: 0px !important;
+    }
 
-    label {
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        margin: 0;
+    .Select-placeholder,
+    .Select-value,
+    .Select-arrow-zone {
+      padding-top: 2px !important;
+      line-height: 21px !important;
     }
 
-    .radio-img {
-        margin-right: 5px;
-        height: 10px;
-        width: 10px;
-        display: inline-block;
+    .Select-menu-outer {
+      border: 1px solid $borderColor !important;
+      width: 100%;
+      margin-left: 1px !important;
+      max-height: 200px !important;
+    }
 
-        img {
-            height: 100%;
-            width: 100%;
-        }
+    .Select-input {
+      margin-left: -16px;
+      padding-top: 2px;
     }
 
-    .field-select {
-        
-        .Select-control {
-            background-color: #1b1d1f;
-            border: 1px solid #454a4e !important;
-            padding: 0px 3px 0px 8px !important;
-            margin-bottom: 2px;
-            vertical-align: middle !important;
-            height: 10px;
-
-            input { border: 0; }
-        }
-
-        .Select {
-            width: 100% !important;
-            margin-top: 0px !important;
-        }
-
-        .Select-placeholder,
-        .Select-value,
-        .Select-arrow-zone {
-            padding-top: 2px !important;
-            line-height: 21px !important;
-        }
-
-        .Select-menu-outer {
-            border: 1px solid #454A4E !important;
-            width: 100%;
-            margin-left: 1px !important;
-            max-height: 200px !important;
-        }
-
-        .Select-input {
-            margin-left: -16px;
-            padding-top: 2px;
-        }
-
-        .Select-placeholder, .Select--single > .Select-control .Select-value {
-          padding: 0px 10px;
-          line-height: 21px !important;
-        }
-
-        .Select-clear { display: none; }
+    .Select-placeholder,
+    .Select--single > .Select-control .Select-value {
+      padding: 0px 10px;
+      line-height: 21px !important;
+      top: 5px;
     }
+
+    .Select-clear { display: none; }
+  }
 }
diff --git a/src/components/flyout/deviceTagFlyout.scss b/src/components/flyout/deviceTagFlyout.scss
index 5ef1a12a8..f7cecb7ea 100644
--- a/src/components/flyout/deviceTagFlyout.scss
+++ b/src/components/flyout/deviceTagFlyout.scss
@@ -200,7 +200,6 @@
     display: inline-block;
     vertical-align: center;
     border: 1px solid #3e4145;
-    margin-top: 0px;
     margin-top: 15px;
 
     .Select-menu-outer {
@@ -210,9 +209,11 @@
       padding-top: 3px;
     }
 
+    .Select-control { height: 39px !important; }
+
     .Select-clear-zone { display: none; }
 
-    .Select-arrow-zone { padding-top: 0px; }
+    .Select-arrow-zone { top: 3px; }
 
     .Select,
     .Select div,
diff --git a/src/components/layout/contextFilters/contextFilters.scss b/src/components/layout/contextFilters/contextFilters.scss
index d770b8b93..b773cc46c 100644
--- a/src/components/layout/contextFilters/contextFilters.scss
+++ b/src/components/layout/contextFilters/contextFilters.scss
@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft. All rights reserved.
 
-$borderColor: #454a4e;
+@import '../../../styles/variables/colors';
 
 .context-filter-container {
   display: flex;
@@ -13,7 +13,7 @@ $borderColor: #454a4e;
     display: flex;
     flex-flow: row nowrap;
     align-items: stretch;
-    padding-left: 18px;
+    padding-left: 16px;
     border-right: 1px solid $borderColor;
 
     .filter-icon {
@@ -22,8 +22,6 @@ $borderColor: #454a4e;
       &.disabled { opacity: 0.5; }
     }
 
-    .select-container { width: 200px; }
-
     .select-container {
       width: 200px;
 
@@ -41,6 +39,21 @@ $borderColor: #454a4e;
     // Overrides for pcs-btn styles used in the PcsBtn component
     .pcs-btn:hover:enabled { background-color: #2e2e2e; }
   }
+
+  .top-nav-filters {
+    .Select-menu-outer {
+      border-top: 1px solid $gridTileLight !important;
+      max-height: 415px !important;
+      border: 1px solid $borderColor;
+      margin-left: -28px;
+    }
+
+    .Select-option {
+      height: 48px;
+      padding: 14px 16px !important;
+      color: $white;
+    }
+  }
 }
 
 .Select { position: relative; }
@@ -61,14 +74,14 @@ $borderColor: #454a4e;
 }
 
 .Select-control {
-  background-color: #121416;
+  background-color: $bgBlack;
   border: none;
-  color: #121416;
+  color: $bgBlack;
   cursor: default;
   display: table;
   border-spacing: 0;
   border-collapse: separate;
-  height: 36px;
+  height: 43px;
   outline: none;
   overflow: hidden;
   position: relative;
@@ -83,8 +96,8 @@ $borderColor: #454a4e;
 .is-open > .Select-control {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
-  background: #121416;
-  color: #afb9c3;
+  background: $bgBlack;
+  color: $lightestGray;
 }
 
 .is-open > .Select-control .Select-arrow {
@@ -100,7 +113,7 @@ $borderColor: #454a4e;
 .Select-placeholder,
 .Select--single > .Select-control .Select-value {
   bottom: 0;
-  color: #afb9c3;
+  color: $lightestGray;
   left: 0;
   line-height: 36px;
   padding-left: 10px;
@@ -114,7 +127,7 @@ $borderColor: #454a4e;
   white-space: nowrap;
 }
 
-.Select-value-label { color: #afb9c3; }
+.Select-value-label { color: $lightestGray; }
 
 .Select-input {
   height: 34px;
@@ -163,23 +176,23 @@ $borderColor: #454a4e;
   display: inline-block;
   height: 0;
   width: 0;
+  bottom: 2px;
   position: relative;
+  margin-right: 8px;
 }
 
 .is-open .Select-arrow,
-.Select-arrow-zone:hover > .Select-arrow {
-  border-top-color: #666;
-}
+.Select-arrow-zone:hover > .Select-arrow { border-top-color: #666; }
 
 .Select-menu-outer {
-  background-color: #121416;
-  border: 1px solid #121416;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+  background-color: $bgBlack;
+  border: 1px solid $bgBlack;
+  box-shadow: rgba(0,0,0,0.3);
   box-sizing: border-box;
-  max-height: 400px;
+  max-height: 430px;
   position: absolute;
-  border-top: 1px solid #454a4e;
-  width: 232px;
+  border-top: 1px solid $borderColor;
+  width: 230px;
   margin-left: -32px;
   top: 100%;
   z-index: 1;
@@ -198,15 +211,18 @@ $borderColor: #454a4e;
   }
 }
 
-.Select-menu { max-height: 400px; }
+.Select-menu { max-height: 430px; }
 
 .Select-option {
   box-sizing: border-box;
-  background-color: #121416;
-  color: #afb9c3;
+  background-color: $bgBlack;
+  color: $lightestGray;
   cursor: pointer;
   display: block;
   padding: 10px;
+  color: $white !important;
+
+  &:hover { background-color: #383B3E; }
 }
 
 .Select-option:last-child {
@@ -215,13 +231,13 @@ $borderColor: #454a4e;
 }
 
 .Select-option.is-selected {
-  background-color: #afb9c3;
-  color: #121416;
+  background-color: $gridTileLight;
+  color: $bgBlack;
 }
 
 .Select-option.is-focused {
-  background-color: #242628;
-  color: #afb9c3;
+  background-color: none;
+  border: 1px dotted $lightestGray;
 }
 
 .Select-noresults {
diff --git a/src/components/pages/dashboard/dashboard.scss b/src/components/pages/dashboard/dashboard.scss
index 78f5540c5..1c1ded286 100644
--- a/src/components/pages/dashboard/dashboard.scss
+++ b/src/components/pages/dashboard/dashboard.scss
@@ -1,5 +1,7 @@
 // Copyright (c) Microsoft. All rights reserved.
 
+@import '../../../styles/variables/colors';
+
 .timerange-selection.dashboard {
   display: flex;
   justify-content: flex-end;
@@ -9,28 +11,28 @@
   .Select-control { margin-top: 10px; }
 
   .Select-value-label,
-  .Select-arrow-zone { color: #fff; }
+  .Select-arrow-zone { color: $white; }
 
   .Select {
     width: 120px;
     font-size: 16px;
-    color: #fff !important;
+    color: $white !important;
   }
 
   .Select-menu-outer {
-    width : 120px;
-    margin-left: 10px;
+    width : 140px;
+    margin-left: -20px;
   }
 
   .last-refreshed-time {
     margin-right: 10px;
-    color: #fff;
+    color: $white;
   }
 
   .last-refreshed-text {
     margin-left: 10px;
     margin-right: 6px;
-    color: #afb9c3;
+    color: $lightestGray;
   }
 
   .time-icon {
diff --git a/src/styles/variables/_colors.scss b/src/styles/variables/_colors.scss
index 693820372..a2a114935 100644
--- a/src/styles/variables/_colors.scss
+++ b/src/styles/variables/_colors.scss
@@ -13,3 +13,4 @@ $white: #fff;
 $pcsRed: #fc540a;
 $pcsYellow: #ffee91;
 $pcsBlue: #7065fd;
+$borderColor: #454a4e;