Merge pull request #2214 from HSLdevcom/DT-2538

DT-2538: small Quick Settings Bar UI improvements

app/component/SummaryNavigation.js

@@ -144,7 +144,7 @@ class SummaryNavigation extends React.Component {
     }
 
     return (
-      <div>
+      <div style={{ background: '#f4f4f5' }}>
         <LazilyLoad modules={this.customizeSearchModules}>
           {({ Drawer, CustomizeSearch }) => (
             <Drawer
@@ -171,16 +171,16 @@ class SummaryNavigation extends React.Component {
           origin={parseLocation(this.props.params.from)}
           destination={parseLocation(this.props.params.to)}
         />
+        <div
+          className={cx('quicksettings-separator-line', {
+            hidden: !this.props.isQuickSettingsOpen,
+          })}
+        />
         <div
           className={cx('time-selector-settings-row', className, {
             quickSettingsOpen: this.props.isQuickSettingsOpen,
           })}
         >
-          <div
-            className={cx('quicksettings-separator-line', {
-              hidden: !this.props.isQuickSettingsOpen,
-            })}
-          />
           <Relay.Renderer
             Container={TimeSelectorContainer}
             queryConfig={{

app/component/TimeSelectors.js

@@ -14,7 +14,7 @@ export default function TimeSelectors({ time, dates, changeTime, changeDate }) {
         initMin={time.format('m')}
         changeTime={changeTime}
       />
-      <div className="select-wrapper" style={{ flex: '1 2 100%' }}>
+      <div className="select-wrapper">
         <select className="date" value={`${time.unix()}`} onChange={changeDate}>
           {dates}
         </select>

app/component/origin-destination-bar.scss

@@ -1,5 +1,5 @@
 .origin-destination-bar {
-  background-color: $background-color-darker;
+  background-color: $background-color-lighter;
   width: 100%;
   padding-top: calc(#{$padding-large} - 15px);
   display: flex;

app/component/quickSettingsPanel.scss

@@ -1,6 +1,6 @@
 .quicksettings-container {
     display: none;
-    background-color: $background-color-darker;
+    background-color: $background-color-lighter;
     padding-bottom: 1em;
     padding-left: 1em;
     padding-right: 1em;
@@ -130,7 +130,7 @@
         display: inline-block;
         background-color: $white;
         color: $link-color;
-        border-radius: $border-radius;
+        border-radius: 5px;
         border: solid 1px #ddd;
         appearance: none;
         font-weight: 700;

app/component/search.scss

@@ -364,6 +364,11 @@ div.autosuggest-panel {
       z-index: 1004;
       background: $white;
     }
+    .clear-input {
+      border-top: 1px solid #ddd;
+      border-right: 1px solid #ddd;
+      border-bottom: 1px solid #ddd;
+    }
   }
   &.small {
     position: relative;
@@ -658,6 +663,11 @@ input.react-autosuggest__input{
   &.viapoint {
     width: 94%;
   }
+  input[type="text"]{
+    border-top: 1px solid #ddd;
+    border-left: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+  }
 }
 
 .viapoint-before {

app/component/summary.scss

@@ -34,7 +34,7 @@
 .time-selectors {
   @include font-book;
   font-size: $font-size-small;
-  background-color: $background-color-darker;
+  background-color: $background-color-lighter;
   display: flex;
   flex-direction: row;
   align-items: stretch;
@@ -79,13 +79,17 @@
     flex-direction: row;
     align-items: center;
     border-radius: $border-radius;
-    background: $background-color-darker;
+    background: $background-color-lighter;
     margin-right: 1px;
+    flex: 0 1 14.5em;
 
     > span {
       margin-left: -1rem;
       pointer-events: none;
     }
+    select {
+      border-radius: 5px;
+    }
   }
   .time-box-shadow input {
     box-shadow: inset 1px 1px 3px 0 rgba(0, 0, 0, 0.43);
@@ -155,8 +159,9 @@
   display: flex;
   background: $white;
   padding: 0 0.6em 0 0.2em;
-  border-radius: 3px;
+  border-radius: 5px;
   margin-right: 0.6em;
+  flex: 0 1 2em;
   .time-input-field {
     width: 1.5em;
     padding-right: 0 !important;
@@ -201,37 +206,39 @@
 }
 
 .quicksettings-separator-line {
-  border-top: 1px solid #ddd;
+  display: block;
+  width: auto;
   margin: 0 auto;
   margin-left: 1em;
   margin-right: 1em;
-  background-color: $background-color-darker
+  margin-top: 0.3em;
+  border-top: 1px solid #ddd;
+  background: $background-color-lighter;
+  &.hidden {
+    display: none;
+  }
+}
+
+.mobile .quicksettings-separator-line {
+  margin-left: 6px;
+  margin-right: 6px;
 }
 
 .time-selector-settings-row {
   padding: $padding-small 6px;
   overflow-x: hidden;
-  background-color: $background-color-darker;
+  background-color: $background-color-lighter;
   display: flex;
   justify-content: space-between;
   align-items: stretch;
-
-  .quicksettings-separator-line {
-    display: block;
-    height: 1px;
-    width: 100%;
-    background: black;
-    &.hidden {
-      display: none;
-    }
-  }
+  flex-direction: initial;
 
   &.quickSettingsOpen {
     padding: 1em 6px $padding-small 6px;
     padding-top: 0.8em;
-    background: linear-gradient(rgba(194, 197, 199, 0.8), $background-color-darker 12%);
-    background-size: 100%;
-    background-repeat-y: no-repeat;
+    //background: linear-gradient(rgba(194, 197, 199, 0.8), $background-color-lighter 12%);
+    //background-size: 100%;
+    //background-repeat-y: no-repeat;
   }
 
   .button-container {
@@ -278,6 +285,7 @@
 
   .select-wrapper {
     margin-right: 2px;
+    flex: 0 1 14.5em;
     // padding-right: 0.5rem;
 
     > span {

sass/themes/default/_theme.scss

@@ -23,6 +23,7 @@ $livi-tram-green: rgb(106, 137, 37);
 /* Application palette */
 $background-color: #eef1f3;
 $background-color-darker: #e0e5e8;
+$background-color-lighter: #f4f4f5;
 $primary-color: $livi-blue;
 $primary-font-color: $white;
 $secondary-color: #008bde;