From 7a2adef336864355491b4b7ee3d67bbc71498ea1 Mon Sep 17 00:00:00 2001
From: John Jones <johnjones4@gmail.com>
Date: Sat, 3 Feb 2018 09:11:20 -0500
Subject: [PATCH] style updates

---
 public/index.html                    |   2 +-
 src/lib/services/Weather.js          |  40 +++---
 src/ui/Dashboard.js                  |   3 +-
 src/ui/vars_mixins.scss              |  27 ++--
 src/ui/widgets/RSS.js                |  12 +-
 src/ui/widgets/RSS.scss              |  46 ++-----
 src/ui/widgets/Twitter.js            |   3 +
 src/ui/widgets/Twitter.scss          |  12 +-
 src/ui/widgets/Weather.js            | 104 +++++++-------
 src/ui/widgets/Weather.scss          | 195 +++++++++++++++++++--------
 src/ui/widgets/Widget.scss           |   8 +-
 src/ui/widgets/WidgetBigNumbers.scss |   8 +-
 12 files changed, 265 insertions(+), 195 deletions(-)
diff --git a/public/index.html b/public/index.html
index d3bdd33..5ead7f1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
+    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic" />
   </head>
   <body>
     <noscript>
diff --git a/src/lib/services/Weather.js b/src/lib/services/Weather.js
index 0300d32..39f303b 100644
--- a/src/lib/services/Weather.js
+++ b/src/lib/services/Weather.js
@@ -18,24 +18,28 @@ class Weather extends Service {
         .then((weatherData) => {
           return {
             'name': 'weather',
-            'data': {
-              'now': {
-                'weather': weatherData.current_observation.weather,
-                'temp': weatherData.current_observation.temp_f,
-                'feelslike': parseFloat(weatherData.current_observation.feelslike_f),
-                'humidity': weatherData.current_observation.relative_humidity,
-                'icon': weatherData.current_observation.icon
-              },
-              'forecast': [0, 1, 2].map((i) => {
-                return {
-                  'label': weatherData.forecast.txt_forecast.forecastday[i].title,
-                  'forecast': weatherData.forecast.txt_forecast.forecastday[i].fcttext,
-                  'high': parseFloat(weatherData.forecast.simpleforecast.forecastday[i].high.fahrenheit),
-                  'low': parseFloat(weatherData.forecast.simpleforecast.forecastday[i].low.fahrenheit),
-                  'icon': weatherData.forecast.simpleforecast.forecastday[i].icon
-                }
-              })
-            }
+            'data': [
+              {
+                'label': 'Now',
+                'icon': weatherData.current_observation.icon,
+                'description': weatherData.current_observation.weather,
+                'temps': [
+                  weatherData.current_observation.temp_f
+                ],
+                'humidity': weatherData.current_observation.relative_humidity
+              }
+            ].concat([0, 1, 2].map((i) => {
+              return {
+                'label': weatherData.forecast.txt_forecast.forecastday[i].title,
+                'icon': weatherData.forecast.simpleforecast.forecastday[i].icon,
+                'description': weatherData.forecast.simpleforecast.forecastday[i].conditions,
+                'temps': [
+                  parseFloat(weatherData.forecast.simpleforecast.forecastday[i].high.fahrenheit),
+                  parseFloat(weatherData.forecast.simpleforecast.forecastday[i].low.fahrenheit)
+                ],
+                'humidity': weatherData.forecast.simpleforecast.forecastday[i].avehumidity + '%'
+              }
+            }))
           }
         })
         .catch((err) => {
diff --git a/src/ui/Dashboard.js b/src/ui/Dashboard.js
index b4fab46..169ed37 100644
--- a/src/ui/Dashboard.js
+++ b/src/ui/Dashboard.js
@@ -89,7 +89,8 @@ class Dashboard extends Component {
             breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
             cols={{lg: cols, md: cols, sm: cols, xs: cols, xxs: cols}}
             onLayoutChange={(layout, layouts) => this.layoutChanged(layout, layouts)}
-            draggableCancel='input,textarea'>
+            draggableCancel='input,textarea'
+            margin={[20, 20]}>
             {
               this.props.services.services.map((service, i) => {
                 const defaultProps = this.getServiceProps(service)
diff --git a/src/ui/vars_mixins.scss b/src/ui/vars_mixins.scss
index c3be3dd..027b6d7 100644
--- a/src/ui/vars_mixins.scss
+++ b/src/ui/vars_mixins.scss
@@ -1,24 +1,21 @@
-$page_background: url(./background.jpg) no-repeat center center;
-$page_background_overlay: rgba(0,0,0,0.6);
-$widget_background: rgba(0,0,0,0.15);
-$widget_stripe: rgba(150,150,150,0.2);
+$page_background: #f7f7f7;;
+$page_background_overlay: transparent;
+$widget_background: white;
 $widget_title_background: rgba(0,0,0,0);
-$widget_body_text_color: #CCD;
-$widget_body_strong_text_color: #EEF;
+$widget_body_text_color: #1a1a1a;
+$widget_body_strong_text_color: #1a1a1a;
 
-$foreground_highlight_color: rgba(20,20,20,0.4);
+$foreground_highlight_color: #eee;
 
-$stripe_background_odd: lighten($foreground_highlight_color,7%);
-$stripe_background_even: $foreground_highlight_color;
-$stripe_background_hover: lighten($foreground_highlight_color,35%);
+$stripe_background_odd: transparent;
+$stripe_background_even: transparent;
+$stripe_background_hover: transparent;
 
-$deemphasized_text: darken(desaturate($widget_body_text_color,40%),40%);
-$double_deemphasized_text: darken(desaturate($widget_body_text_color,50%),50%);
+$deemphasized_text: rgba(26, 26, 26, .5);
+$double_deemphasized_text: rgba(26, 26, 26, .5);
 
 @mixin heading_font_styles {
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  font-weight: 300;
+  font-weight: 700;
   color: $widget_body_strong_text_color;
 }
 
diff --git a/src/ui/widgets/RSS.js b/src/ui/widgets/RSS.js
index 5380991..930024a 100644
--- a/src/ui/widgets/RSS.js
+++ b/src/ui/widgets/RSS.js
@@ -48,18 +48,18 @@ class RSS extends Widget {
             feed.items.map((item, j) => {
               return (
                 <div onClick={() => shell.openExternal(item.link)} className='faux-link rss-feed-item striped striped-hover' key={j}>
-                  <span className='rss-feed-item-title'>
-                    <span className='rss-feed-item-headeline' dangerouslySetInnerHTML={{__html: item.title}} />
+                  <div className='rss-feed-item-title' dangerouslySetInnerHTML={{__html: item.title}} />
+                  <div>
                     { item.author && (<span className='rss-feed-item-author'>
                       {item.author}
                     </span>)}
                     <span className='rss-feed-item-website'>
                       {item.website}
                     </span>
-                  </span>
-                  <span className='rss-feed-item-date'>
-                    {formatDate(item.date)}
-                  </span>
+                    <span className='rss-feed-item-date'>
+                      {formatDate(item.date)}
+                    </span>
+                  </div>
                 </div>
               )
             })
diff --git a/src/ui/widgets/RSS.scss b/src/ui/widgets/RSS.scss
index 94449e5..fa88087 100644
--- a/src/ui/widgets/RSS.scss
+++ b/src/ui/widgets/RSS.scss
@@ -7,43 +7,25 @@
 .rss-feed-item {
   display: block;
   color: inherit;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  text-decoration: none;
-}
-
-.rss-feed-item:visited {
-  color: $double_deemphasized_text;
-}
-
-.rss-feed-item-title {
-  padding: 0.5em;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  justify-content: space-between;
-}
-
-.rss-feed-item-date {
-  padding: 0.5em;
-  white-space: nowrap;
-  color: $deemphasized_text;
-}
-
+  padding: 0.5em 0;
+  border-bottom: 1px solid $foreground_highlight_color;
+  transition: background 0.25s;
+  &:hover {
+    // background: $foreground_highlight_color;
+    .rss-feed-item-title {
+      text-decoration: underline;
+    }
+  }
+}
+
+.rss-feed-item-date,
 .rss-feed-item-author,
 .rss-feed-item-website {
-  margin-left: 0.5em;
   font-size: 0.75em;
   color: $deemphasized_text;
 }
 
-.rss-feed-item:visited .rss-feed-item-author,
-.rss-feed-item:visited .rss-feed-item-website {
-  color: $double_deemphasized_text;
-}
-
+.rss-feed-item-website:after,
 .rss-feed-item-author:after {
-  content: ' /';
+  content: ' - ';
 }
diff --git a/src/ui/widgets/Twitter.js b/src/ui/widgets/Twitter.js
index 998cbba..16a68b4 100644
--- a/src/ui/widgets/Twitter.js
+++ b/src/ui/widgets/Twitter.js
@@ -109,6 +109,9 @@ class Twitter extends Widget {
                       <span className='twitter-feed-tweet-name'>
                         {tweet.user.name}
                       </span>
+                      <span className='twitter-feed-tweet-screen-name'>
+                        @{tweet.user.screen_name}
+                      </span>
                       <span className='twitter-feed-tweet-date'>
                         {formatDate(tweet.created_at)}
                       </span>
diff --git a/src/ui/widgets/Twitter.scss b/src/ui/widgets/Twitter.scss
index c65f5b7..6c5af53 100644
--- a/src/ui/widgets/Twitter.scss
+++ b/src/ui/widgets/Twitter.scss
@@ -10,10 +10,11 @@
 .twitter-feed-tweet {
   clear: both;
   height: 50px;
-  padding: 0.5em;
+  padding: 1em 0.5em;
   box-sizing: content-box;
   overflow: hidden;
   text-overflow: ellipsis;
+  border-bottom: 1px solid $foreground_highlight_color;
 }
 
 .twitter-feed-tweet a {
@@ -26,11 +27,17 @@
   width: 50px;
   height: auto;
   margin-right: 0.5em;
+  border-radius: 50%;
+}
+
+.twitter-feed-tweet-screen-name {
+  color: $deemphasized_text;
 }
 
 .twitter-feed-tweet-date {
   font-size: 0.75em;
   color: $deemphasized_text;
+  float: right;
 }
 
 @media (max-width: 1900px) {
@@ -41,8 +48,9 @@
 }
 
 .twitter-feed-tweet-name {
-  margin-right: 0.5em;
+  margin-right: 0.25em;
   color: $widget_body_strong_text_color;
+  font-weight: 600;
 }
 
 .twitter-feed-tweet-header {
diff --git a/src/ui/widgets/Weather.js b/src/ui/widgets/Weather.js
index 8ce01ce..7eab7ef 100644
--- a/src/ui/widgets/Weather.js
+++ b/src/ui/widgets/Weather.js
@@ -15,64 +15,56 @@ import {
 class Weather extends Widget {
   constructor (props) {
     super('Weather', 'weather', props)
+    this.state = {
+      selectedIndex: 0
+    }
   }
 
-  renderCurrentWeather (data) {
-    return (
-      <div className='weather-now'>
-        <div className='weather-label'>Now</div>
-        <div className='weather-now-content'>
-          <img src={'./weather/' + data.now.icon + '.svg'} alt={data.now.weather} className='weather-icon' />
-          <div className='weather-description'>
-            {data.now.weather}
-          </div>
-          <div className='weather-temp'>
-            <span className='weather-value-label weather-temp-label'>Temp: </span>
-            <span className='weather-temp-temp'>{data.now.temp}&#176;</span>
-          </div>
-          <div className='weather-feelslike'>
-            <span className='weather-value-label weather-feelslike-label'>Feels Like: </span>
-            <span className='weather-feelslike-temp'>{data.now.feelslike}&#176;</span>
-          </div>
-          <div className='weather-humidity'>
-            <span className='weather-value-label weather-humidity-label'>Humidity: </span>
-            <span className='weather-humidity-temp'>{data.now.humidity}</span>
-          </div>
-        </div>
-      </div>
-    )
+  getForecaseTranslation (index) {
+    if (index === this.state.selectedIndex) {
+      return {}
+    } else {
+      const delta = index - this.state.selectedIndex
+      return {
+        'transform': 'translateX(' + (delta * 100) + '%)'
+      }
+    }
   }
 
-  renderForecast (data) {
+  renderWeather (weather, index) {
     return (
-      <div className='weather-forecast'>
-        {
-          data.forecast.map((item, i) => {
-            return (
-              <div className='weather-forecast-item' key={i}>
-                <div className='weather-label'>{item.label}</div>
-                <div className='weather-content'>
-                  <div className='weather-icon-wrapper'>
-                    <img src={'./weather/' + item.icon + '.svg'} className='weather-icon' alt={item.forecast} />
-                  </div>
-                  <div className='weather-text'>
-                    <div className='weather-description'>
-                      {item.forecast}
-                    </div>
-                    <div className='weather-high'>
-                      <span className='weather-value-label weather-high-label'>High: </span>
-                      <span className='weather-high-temp'>{item.high}&#176;</span>
-                    </div>
-                    <div className='weather-low'>
-                      <span className='weather-value-label weather-low-label'>Low: </span>
-                      <span className='weather-low-temp'>{item.low}&#176;</span>
-                    </div>
-                  </div>
+      <div className='weather-forecast' style={this.getForecaseTranslation(index)} key={weather.label}>
+        <div className='weather-content'>
+          <div className='weather-icon-wrapper'>
+            <img src={'./weather/' + weather.icon + '.svg'} className='weather-icon' alt={weather.description} />
+          </div>
+          <div className='weather-text'>
+            <div className='weather-description'>
+              {weather.description}
+            </div>
+            { weather.temps.length === 2 ? (
+              <div>
+                <div className='weather-key-value'>
+                  <span className='weather-key'>High: </span>
+                  <span className='weather-value'>{weather.temps[0]}&#176;</span>
                 </div>
+                <div className='weather-key-value'>
+                  <span className='weather-key'>Low: </span>
+                  <span className='weather-value'>{weather.temps[1]}&#176;</span>
+                </div>
+              </div>
+            ) : (
+              <div className='weather-key-value'>
+                <span className='weather-key'>Temp: </span>
+                <span className='weather-value'>{weather.temps[0]}&#176;</span>
               </div>
-            )
-          })
-        }
+            )}
+            <div className='weather-key-value'>
+              <span className='weather-key'>Humidity: </span>
+              <span className='weather-value'>{weather.humidity}</span>
+            </div>
+          </div>
+        </div>
       </div>
     )
   }
@@ -81,8 +73,14 @@ class Weather extends Widget {
     const data = this.getWidgetData()
     return data && (
       <div className='weather-wrapper'>
-        { this.renderCurrentWeather(data) }
-        { this.renderForecast(data) }
+        <div className='weather-forecasts'>
+          { data.map((weather, index) => this.renderWeather(weather, index)) }
+        </div>
+        <div className='weather-nav-labels'>
+          { data.map((weather, index) => {
+            return (<button className={'weather-nav-label' + (index === this.state.selectedIndex ? ' active' : '')} onClick={() => this.setState({selectedIndex: index})}>{weather.label}</button>)
+          }) }
+        </div>
       </div>
     )
   }
diff --git a/src/ui/widgets/Weather.scss b/src/ui/widgets/Weather.scss
index d0e361a..14416d2 100644
--- a/src/ui/widgets/Weather.scss
+++ b/src/ui/widgets/Weather.scss
@@ -1,83 +1,162 @@
 @import '../vars_mixins.scss';
 
-.widget-weather .widget-body {
+.weather-forecasts {
   position: absolute;
   top: 3em;
   right: 0;
-  bottom: 0;
   left: 0;
-}
-
-// .weather-wrapper {
-//   position: relative;
-//   padding-right: 0.5em;
-// }
-
-.weather-now {
-  // flex: 0 0 150px;
-  width: 30%;
-  float: left;
+  bottom: 3em;
+  overflow: hidden;
 }
 
 .weather-forecast {
-  // flex: 0 0 auto;
-  width: 70%;
-  height: 100%;
   position: absolute;
+  width: 100%;
   top: 0;
-  right: 0;
   bottom: 0;
-  overflow: scroll;
+  transition: all 0.5s linear;
 }
 
-.weather-now .weather-icon {
-  width: 70%;
-  height: auto;
-  display: block;
+.weather-content {
+  max-width: 300px;
   margin: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  .weather-icon-wrapper {
+    position: absolute;
+    width: 45%;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+  }
+  .weather-text {
+    width: 55%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    padding-left: 1em;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .weather-description {
+    font-weight: 700;
+    font-size: 2em;
+    padding-bottom: 0.25em;
+  }
+  .weather-key-value {
+    font-size: 1.25em;
+    padding: 0.25em 0;
+    .weather-key {
+      font-weight: 600;
+    }
+  }
 }
 
-.weather-now-content {
+.weather-nav-labels {
+  position: absolute;
+  right: 0;
+  left: 0;
+  bottom: 0;
   text-align: center;
-  line-height: 1.25em;
-  font-size: 1.25em;
-  padding: 0.25rem;
+  .weather-nav-label {
+    border: none;
+    outline: none;
+    padding: 1em;
+    margin: 0;
+    text-transform: uppercase;
+    &.active {
+      font-weight: 600;
+    }
+  }
 }
 
-.weather-label {
-  padding: 3px;
-  color: $widget_body_strong_text_color;
-  @include heading_font_styles;
-}
+// .widget-weather .widget-body {
+//   position: absolute;
+//   top: 3em;
+//   right: 0;
+//   bottom: 0;
+//   left: 0;
+// }
 
-.weather-forecast-item {
-  clear: both;
-  line-height: 1.25em;
-}
+// // .weather-wrapper {
+// //   position: relative;
+// //   padding-right: 0.5em;
+// // }
 
-.weather-forecast-item .weather-content {
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-  justify-content: space-between;
-  margin-top: 0;
-}
+// .weather-now {
+//   // flex: 0 0 150px;
+//   width: 30%;
+//   float: left;
+// }
 
-.weather-forecast-item .weather-text {
-  flex-grow: 1;
-  margin-left: 0.5em;
-  padding-bottom: 0.5em;
-}
+// .weather-forecast {
+//   // flex: 0 0 auto;
+//   width: 70%;
+//   height: 100%;
+//   position: absolute;
+//   top: 0;
+//   right: 0;
+//   bottom: 0;
+//   overflow: scroll;
+// }
 
-.weather-forecast-item .weather-high,
-.weather-forecast-item .weather-low {
-  float: left;
-  margin-right: 0.5em;
-  font-size: 0.9em;
-  color: $deemphasized_text;
-}
+// .weather-now .weather-icon {
+//   width: 70%;
+//   height: auto;
+//   display: block;
+//   margin: auto;
+// }
 
-.weather-forecast-item .weather-icon {
-  width: 50px;
-  height: auto;
-}
+// .weather-now-content {
+//   text-align: center;
+//   line-height: 1.25em;
+//   font-size: 1.25em;
+//   padding: 0.25rem;
+// }
+
+// .weather-label {
+//   padding: 3px;
+//   color: $widget_body_strong_text_color;
+//   @include heading_font_styles;
+// }
+
+// .weather-forecast-item {
+//   clear: both;
+//   line-height: 1.25em;
+// }
+
+// .weather-forecast-item .weather-content {
+//   display: flex;
+//   flex-direction: row;
+//   align-items: stretch;
+//   justify-content: space-between;
+//   margin-top: 0;
+// }
+
+// .weather-forecast-item .weather-text {
+//   flex-grow: 1;
+//   margin-left: 0.5em;
+//   padding-bottom: 0.5em;
+// }
+
+// .weather-forecast-item .weather-high,
+// .weather-forecast-item .weather-low {
+//   float: left;
+//   margin-right: 0.5em;
+//   font-size: 0.9em;
+//   color: $deemphasized_text;
+// }
+
+// .weather-forecast-item .weather-icon {
+//   width: 50px;
+//   height: auto;
+// }
diff --git a/src/ui/widgets/Widget.scss b/src/ui/widgets/Widget.scss
index 66b4c97..018c822 100644
--- a/src/ui/widgets/Widget.scss
+++ b/src/ui/widgets/Widget.scss
@@ -3,7 +3,8 @@
 .widget {
   background: $widget_background;
   border: solid 1px transparent;
-  border-left: solid 4px $widget_stripe;
+  border-radius: 15px;
+  box-shadow: 0 0 10px 3px rgba(0, 0, 0, .05);
   position: absolute;
   top: 0;
   left: 0;
@@ -23,7 +24,7 @@
 }
 
 .widget-title {
-  padding: 0.5rem;
+  padding: 1rem;
   font-size: 16px;
   background: $widget_title_background;
   @include heading_font_styles;
@@ -41,7 +42,6 @@
   padding: 0;
   margin: 2px 0 0 0;
   background: none;
-  color: white;
   font-size: 0.6em;
   float: right;
   cursor: pointer;
@@ -51,7 +51,7 @@
 }
 
 .widget-body {
-  padding: 0.25rem 0.25rem 0.25rem 0.5rem;
+  padding: 1rem;
   color: $widget_body_text_color;
   backface-visibility: hidden;
 }
diff --git a/src/ui/widgets/WidgetBigNumbers.scss b/src/ui/widgets/WidgetBigNumbers.scss
index 485354e..44af661 100644
--- a/src/ui/widgets/WidgetBigNumbers.scss
+++ b/src/ui/widgets/WidgetBigNumbers.scss
@@ -10,30 +10,28 @@
   top: 3em;
   left: 0;
   right: 0;
-  bottom: 3em;
+  bottom: 1em;
   align-items: center;
 }
 
 .widget-big-numbers-group {
   flex-grow: 0;
   text-align: center;
-  border-right: solid 3px $foreground_highlight_color;
-  border-left: solid 3px $foreground_highlight_color;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  border-radius: 100%;
   height: 100%;
 }
 
 .widget-big-numbers-number {
   font-size: 5em;
   line-height: 0.9em;
+  font-weight: 600;
   color: $widget_body_strong_text_color;
 }
 
 .widget-big-numbers-label {
   line-height: 2em;
-  @include heading_font_styles;
+  text-transform: uppercase;
   color: $deemphasized_text;
 }
