Revert to simple style variables and helvetica

- Helvetica seems to work better as a font - Style variables are part of render again
nocturneDevs · May 2, 2016 · 615018d · 615018d
1 parent 5c380eb
commit 615018d
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 74 deletions.
diff --git a/app/background.js b/app/background.js
@@ -56,9 +56,8 @@ var Background = React.createClass({
     }.bind(this), 50);
   },
 
-  style: function(element) {
-    // Don't cache since state is injected
-    this._styles = {
+  render: function() {
+    var style = {
       app: {
         position: "relative",
         width: "100%",
@@ -89,15 +88,10 @@ var Background = React.createClass({
         justifyContent: "center",
       }
     };
-
-    return this._styles[element];
-  },
-
-  render: function() {
     return (
-      React.createElement("div", {style: this.style('app')}, 
-        React.createElement("div", {id: "mask", style: this.style('mask')}), 
-        React.createElement("div", {id: "container", style: this.style('container')}, 
+      React.createElement("div", {style: style.app}, 
+        React.createElement("div", {id: "mask", style: style.mask}), 
+        React.createElement("div", {id: "container", style: style.container}, 
           this.props.children
         )
       )

diff --git a/app/background.jsx b/app/background.jsx
@@ -56,9 +56,8 @@ var Background = React.createClass({
     }.bind(this), 50);
   },
 
-  style: function(element) {
-    // Don't cache since state is injected
-    this._styles = {
+  render: function() {
+    var style = {
       app: {
         position: "relative",
         width: "100%",
@@ -89,15 +88,10 @@ var Background = React.createClass({
         justifyContent: "center",
       }
     };
-
-    return this._styles[element];
-  },
-
-  render: function() {
     return (
-      <div style={this.style('app')}>
-        <div id="mask" style={this.style('mask')}></div>
-        <div id="container" style={this.style('container')}>
+      <div style={style.app}>
+        <div id="mask" style={style.mask}></div>
+        <div id="container" style={style.container}>
           {this.props.children}
         </div>
       </div>

diff --git a/app/link.js b/app/link.js
@@ -8,22 +8,17 @@ var Link = React.createClass({
     });
   },
 
-  style: function() {
-    this._style = this._style || {
+  render: function() {
+    var style = {
       textDecoration: "none",
       color: "#ccc",
       opacity: "0.8",
       padding: "5px",
       backgroundImage: "radial-gradient(closest-side at 50% 50% , rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%)",
       WebkitAnimation: "fadein 1s"
-    };
-
-    return this._style;
-  },
-
-  render: function() {
+    }
     return (
-      React.createElement("a", {style: this.style(), href: this.props.href, target: "_blank"}, 
+      React.createElement("a", {style: style, href: this.props.href, target: "_blank"}, 
         this.props.text
       )
     );

diff --git a/app/link.jsx b/app/link.jsx
@@ -8,22 +8,17 @@ var Link = React.createClass({
     });
   },
 
-  style: function() {
-    this._style = this._style || {
+  render: function() {
+    var style = {
       textDecoration: "none",
       color: "#ccc",
       opacity: "0.8",
       padding: "5px",
       backgroundImage: "radial-gradient(closest-side at 50% 50% , rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%)",
       WebkitAnimation: "fadein 1s"
-    };
-
-    return this._style;
-  },
-
-  render: function() {
+    }
     return (
-      <a style={this.style()} href={this.props.href} target="_blank">
+      <a style={style} href={this.props.href} target="_blank">
         {this.props.text}
       </a>
     );

diff --git a/app/time.js b/app/time.js
@@ -23,8 +23,8 @@ var TimeDisplay = React.createClass({
     setInterval(updateTime, 100);
   },
 
-  style: function() {
-    this._style = this._style || {
+  render: function() {
+    var style = {
       zIndex: "99",
       padding: "10px",
       width: this.props.width,
@@ -33,18 +33,13 @@ var TimeDisplay = React.createClass({
       textAlign: "center",
       cursor: "default",
       WebkitUserSelect: "none",
-      fontFamily: "Roboto Condensed",
+      fontFamily: "Helvetica, sans-serif",
       fontSize: "7rem",
       backgroundImage: "radial-gradient(closest-side at 50% 50% , rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%)",
       WebkitAnimation: "fadein 2s"
     };
-
-    return this._style;
-  },
-
-  render: function() {
     return (
-      React.createElement("div", {style: this.style()}, 
+      React.createElement("div", {style: style}, 
         React.createElement("span", null, this.state.time)
       )
     );

diff --git a/app/time.jsx b/app/time.jsx
@@ -23,8 +23,8 @@ var TimeDisplay = React.createClass({
     setInterval(updateTime, 100);
   },
 
-  style: function() {
-    this._style = this._style || {
+  render: function() {
+    var style = {
       zIndex: "99",
       padding: "10px",
       width: this.props.width,
@@ -33,18 +33,13 @@ var TimeDisplay = React.createClass({
       textAlign: "center",
       cursor: "default",
       WebkitUserSelect: "none",
-      fontFamily: "Roboto Condensed",
+      fontFamily: "Helvetica, sans-serif",
       fontSize: "7rem",
       backgroundImage: "radial-gradient(closest-side at 50% 50% , rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%)",
       WebkitAnimation: "fadein 2s"
     };
-
-    return this._style;
-  },
-
-  render: function() {
     return (
-      <div style={this.style()}>
+      <div style={style}>
         <span>{this.state.time}</span>
       </div>
     );

diff --git a/app/widget-container.js b/app/widget-container.js
@@ -1,8 +1,8 @@
 var WidgetContainer = React.createClass({
   displayName: "WidgetContainer",
 
-  style: function(position) {
-    this._styles = this._style || {
+  render: function() {
+    var style = {
       topLeft: {
         padding: "5px",
         width: "200px",
@@ -43,13 +43,8 @@ var WidgetContainer = React.createClass({
         textAlign: "right"
       }
     };
-
-    return this._styles[this.props.position];
-  },
-
-  render: function() {
     return (
-      React.createElement("div", {style: this.style()}, 
+      React.createElement("div", {style: style[this.props.position]}, 
         this.props.children
       )
     )

diff --git a/app/widget-container.jsx b/app/widget-container.jsx
@@ -1,8 +1,8 @@
 var WidgetContainer = React.createClass({
   displayName: "WidgetContainer",
 
-  style: function(position) {
-    this._styles = this._style || {
+  render: function() {
+    var style = {
       topLeft: {
         padding: "5px",
         width: "200px",
@@ -43,13 +43,8 @@ var WidgetContainer = React.createClass({
         textAlign: "right"
       }
     };
-
-    return this._styles[this.props.position];
-  },
-
-  render: function() {
     return (
-      <div style={this.style()}>
+      <div style={style[this.props.position]}>
         {this.props.children}
       </div>
     )