From 342f0883784a87b1a4978178b4c04a3e6b27371e Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 21 Jul 2017 12:21:18 -0700
Subject: [PATCH] Polish moving dates UI

---
 ui/src/shared/components/CustomTimeRange.js   | 42 +++++++++++++++----
 .../style/components/custom-time-range.scss   | 35 ++++++++++++----
 2 files changed, 61 insertions(+), 16 deletions(-)

diff --git a/ui/src/shared/components/CustomTimeRange.js b/ui/src/shared/components/CustomTimeRange.js
index 517fa174d3..4fc1824080 100644
--- a/ui/src/shared/components/CustomTimeRange.js
+++ b/ui/src/shared/components/CustomTimeRange.js
@@ -41,16 +41,42 @@ class CustomTimeRange extends Component {
     return (
       <div className="custom-time--container">
         <div className="custom-time--moving-dates">
-          <div onClick={this.handleMovingTimeRange('pastWeek')}>Past week</div>
-          <div onClick={this.handleMovingTimeRange('pastMonth')}>
-            Past month
+          <div
+            className="custom-time--moving-date"
+            onClick={this.handleMovingTimeRange('pastWeek')}
+          >
+            Past Week
           </div>
-          <div onClick={this.handleMovingTimeRange('pastYear')}>Past year</div>
-          <div onClick={this.handleMovingTimeRange('thisWeek')}>This week</div>
-          <div onClick={this.handleMovingTimeRange('thisMonth')}>
-            This month
+          <div
+            className="custom-time--moving-date"
+            onClick={this.handleMovingTimeRange('pastMonth')}
+          >
+            Past Month
+          </div>
+          <div
+            className="custom-time--moving-date"
+            onClick={this.handleMovingTimeRange('pastYear')}
+          >
+            Past Year
+          </div>
+          <div
+            className="custom-time--moving-date"
+            onClick={this.handleMovingTimeRange('thisWeek')}
+          >
+            This Week
+          </div>
+          <div
+            className="custom-time--moving-date"
+            onClick={this.handleMovingTimeRange('thisMonth')}
+          >
+            This Month
+          </div>
+          <div
+            className="custom-time--moving-date"
+            onClick={this.handleMovingTimeRange('thisYear')}
+          >
+            This Year
           </div>
-          <div onClick={this.handleMovingTimeRange('thisYear')}>This year</div>
         </div>
         <div className="custom-time--wrap">
           <div className="custom-time--dates">
diff --git a/ui/src/style/components/custom-time-range.scss b/ui/src/style/components/custom-time-range.scss
index 495274eb13..1e02111277 100644
--- a/ui/src/style/components/custom-time-range.scss
+++ b/ui/src/style/components/custom-time-range.scss
@@ -7,22 +7,27 @@
   position: relative;
 }
 .custom-time--container {
-  display: flex;
+  display: none;
   position: absolute;
   flex-direction: row;
-  align-items: center;
+  align-items: stretch;
   top: 35px;
   right: 0;
-  background: $g5-pepper;
   border-radius: $radius;
-  padding: 8px;
   z-index: 1000;
   box-shadow: 0 2px 5px 0.6px rgba(15, 14, 21, 0.2);
 }
-.custom-time--wrap {
+.custom-time--wrap,
+.custom-time--moving-dates {
   display: flex;
   flex-direction: column;
 }
+.custom-time--wrap {
+  padding: 8px;
+  align-items: center;
+  border-radius: 0 $radius $radius 0;
+  background: $g5-pepper;
+}
 .custom-time--dates {
   display: flex;
   align-items: flex-start;
@@ -35,10 +40,24 @@
   margin-left: 4px;
 }
 .custom-time--moving-dates {
-  flex: 1;
-  width: 80px;
-  > div {
+  @include no-user-select();
+  align-items: stretch;
+  background-color: $g6-smoke;
+  border-radius: $radius 0 0 $radius;
+}
+.custom-time--moving-date {
+  white-space: nowrap;
+  padding: 8px 16px;
+  transition:
+    color 0.25s ease,
+    background-color 0.25s ease;
+  color: $g13-mist;
+  font-weight: 600;
+
+  &:hover {
     cursor: pointer;
+    background-color: $g7-graphite;
+    color: $g17-whisper;
   }
 }