weather: colors change based on weather

pkg/interface/weather/tile/tile.js

@@ -2,31 +2,15 @@ import React, { Component } from 'react';
 import classnames from 'classnames';
 import moment from 'moment';
 
-class IconWithData extends Component {
-  render() {
-    const { props } = this;
-
-    return (
-      <div className='mt2'>
-        <p className="f9 white">{props.text}</p>
-      </div>
-    );
-  }
-}
-
 export default class WeatherTile extends Component {
-
   constructor(props) {
     super(props);
-
-    let ship = window.ship;
-    let api = window.api;
-
     this.state = {
       latlng: '',
       manualEntry: false,
       error: false
     };
+    let api = window.api;
   }
 
   locationSubmit() {
@@ -62,18 +46,22 @@ export default class WeatherTile extends Component {
 
   keyPress(e) {
     if (e.keyCode === 13) {
-      e.preventDefault();
+
-      this.manualLocationSubmit(e.target.value);
     }
   }
 
-  renderWrapper(child) {
+  renderWrapper(child,
+    weatherStyle = { gradient1: "white", gradient2: "white", text: "black" }
+    ) {
     return (
       <div
-        className="pa2 relative bg-white b--black ba"
+        className={"relative b--black ba " + weatherStyle.text}
         style={{
           width: 126,
           height: 126,
+          background: `linear-gradient(135deg, ${weatherStyle.gradient1} 0%,` +
+          `${weatherStyle.gradient2} 45%, ${weatherStyle.gradient2} 65%,` +
+          `${weatherStyle.gradient1} 100%)`
         }}>
         {child}
       </div>
@@ -95,7 +83,7 @@ export default class WeatherTile extends Component {
         onClick={() => this.locationSubmit()}>Detect -></a>
     }
     return this.renderWrapper(
-      <div>
+      <div className="pa2 w-100 h-100 bg-white black">
         <a
           className="f9 black pointer"
           onClick={() =>
@@ -104,10 +92,10 @@ export default class WeatherTile extends Component {
           &lt;&#45;
         </a>
         {secureCheck}
-        <p className="f9 black pt2">
+        <p className="f9 pt2">
           Please enter your{" "}
           <a
-            className="white"
+            className="black"
             href="https://latitudeandlongitude.org/"
             target="_blank">
             latitude and longitude
@@ -122,12 +110,17 @@ export default class WeatherTile extends Component {
               className="w-100 black bg-transparent bn f9"
               type="text"
               placeholder="29.558107, -95.089023"
-              onKeyDown={this.keyPress.bind(this)}></input>
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  this.manualLocationSubmit(e.target.value);
+                }}
+              }/>
             <input
               className="bg-transparent black bn pointer f9 flex-shrink-0"
               type="submit"
               onClick={() => this.manualLocationSubmit()}
-              value="->"></input>
+              value="->"/>
           </form>
         </div>
       </div>
@@ -136,29 +129,32 @@ export default class WeatherTile extends Component {
 
   renderNoData() {
     return this.renderWrapper((
-      <div onClick={() => this.setState({manualEntry: !this.state.manualEntry})}>
+      <div
-          <p className="black f9 absolute"
+      className="pa2 bg-white black"
+      onClick={() => this.setState({manualEntry: !this.state.manualEntry})}>
+          <p className="f9 absolute"
             style={{left: 8, top: 8}}>
             Weather
           </p>
-        <p className="absolute w-100 flex-col f9 black" style={{verticalAlign: "bottom", bottom: 8, left: 8, cursor: "pointer"}}>-> Set location</p>
+        <p className="absolute w-100 flex-col f9" style={{verticalAlign: "bottom", bottom: 8, left: 8, cursor: "pointer"}}>-> Set location</p>
       </div>
     ));
   }
 
-  renderWithData(data) {
+  renderWithData(data, weatherClasses) {
     let c = data.currently;
     let d = data.daily.data[0];
 
     let da = moment.unix(d.sunsetTime).format('h:mm a') || '';
 
     return this.renderWrapper(
-      <div>
+      <div className="w-100 h-100"
-        <p className="black f9 absolute" style={{ left: 8, top: 8 }}>
+      style={{backdropFilter: "blur(35px)"}}>
+        <p className="f9 absolute" style={{ left: 8, top: 8 }}>
           Weather
         </p>
         <a
-          className="black f9 absolute pointer"
+          className="f9 absolute pointer"
           style={{ right: 8, top: 8 }}
           onClick={() =>
             this.setState({ manualEntry: !this.state.manualEntry })
@@ -166,12 +162,12 @@ export default class WeatherTile extends Component {
           ->
         </a>
         <div className="w-100 absolute" style={{ left: 8, bottom: 8 }}>
-          <p className="f9 black">{c.summary}</p>
+          <p className="f9">{c.summary}</p>
-          <p className="f9 pt1 black">{Math.round(c.temperature)}°</p>
+          <p className="f9 pt1">{Math.round(c.temperature)}°</p>
-          <p className="f9 pt1 black">Sunset at {da}</p>
+          <p className="f9 pt1">Sunset at {da}</p>
         </div>
       </div>
-    );
+    , weatherClasses);
   }
 
   render() {
@@ -182,7 +178,91 @@ export default class WeatherTile extends Component {
     }
 
     if ('currently' in data && 'daily' in data) {
-      return this.renderWithData(data);
+      let weatherStyle = {
+        gradient1: "",
+        gradient2: "",
+        text: ""
+      };
+
+      switch(data.daily.icon) {
+        case "clear-day":
+          weatherStyle = {
+            gradient1: "#A5CEF0",
+            gradient2: "#FEF4E0",
+            text: "black"
+          }
+          break;
+        case "clear-night":
+          weatherStyle = {
+            gradient1: "#56668e",
+            gradient2: "#000080",
+            text: "white"
+          }
+          break;
+        case "rain":
+          weatherStyle = {
+            gradient1: "#b1b2b3",
+            gradient2: "#b0c7ff",
+            text: "black"
+          };
+          break;
+        case "snow":
+          weatherStyle = {
+            gradient1: "#eee",
+            gradient2: "#f9f9f9",
+            text: "black"
+          };
+          break;
+        case "sleet":
+          weatherStyle = {
+            gradient1: "#eee",
+            gradient2: "#f9f9f9",
+            text: "black"
+          };
+          break;
+        case "wind":
+          weatherStyle = {
+            gradient1: "#eee",
+            gradient2: "#fff",
+            text: "black"
+          };
+          break;
+        case "fog":
+          weatherStyle = {
+            gradient1: "#eee",
+            gradient2: "#fff",
+            text: "black"
+          };
+          break;
+        case "cloudy":
+          weatherStyle = {
+            gradient1: "#eee",
+            gradient2: "#b1b2b3",
+            text: "black"
+          };
+          break;
+        case "partly-cloudy-day":
+          weatherStyle = {
+            gradient1: "#fcc440",
+            gradient2: "#b1b2b3",
+            text: "black"
+          };
+          break;
+        case "partly-cloudy-night":
+          weatherStyle = {
+            gradient1: "#7f7f7f",
+            gradient2: "#56668e",
+            text: "white"
+          };
+          break;
+        default:
+          weatherStyle = {
+            gradient1: "white",
+            gradient2: "white",
+            text: "black"
+          };
+      }
+      return this.renderWithData(data, weatherStyle);
     }
 
     return this.renderNoData();