Moved more to styled-components

src/components/Counter/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Counter from './Counter';
-import SharedTitle from '../Utils/SharedTitle.jsx';
+import SharedTitle from '../Utils/SharedTitle';
 
 // import './style.css';
 

src/components/Form/Form.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { Motion, spring } from 'react-motion';
 
+import { TextArea, Warning, Input, Label } from './style';
+
 import './style.css';
 
 export default class Form extends React.Component {
@@ -20,9 +22,7 @@ export default class Form extends React.Component {
     const warning = (
       <Motion defaultStyle={{ x: 0 }} style={{ x: spring(1) }} key="isRequired">
         {({ x }) =>
-          <span className="warning" style={{ opacity: x }}>
-            This field is required.
-          </span>}
+          <Warning style={{ opacity: x }}>This field is required.</Warning>}
       </Motion>
     );
     const color = this.state[name].color;
@@ -53,11 +53,7 @@ export default class Form extends React.Component {
   validatePasswordMatch = (name1, name2) => {
     const password1 = this.state[name1].message;
     const password2 = this.state[name2].message;
-    const warning = (
-      <span className="warning" key="isPwdMatch">
-        Password don't match.
-      </span>
-    );
+    const warning = <Warning key="isPwdMatch">Password don't match.</Warning>;
     const color1 = this.state[name1].color;
     return password1 === password2 && color1 !== 'grey' ? null : warning;
   };
@@ -201,28 +197,28 @@ export default class Form extends React.Component {
     };
 
     if (type === 'textarea') {
-      return <textarea {...props} />;
+      return <TextArea {...props} />;
     }
-    return <input {...props} />;
+    return <Input {...props} />;
   };
 
   render() {
     return (
       <form onSubmit={this.handleSubmit} action={<Link to="/tabss" />}>
-        <label htmlFor="name">Name:</label>
+        <Label htmlFor="name">Name:</Label>
         {this.renderInput('text', 'name')}
         {this.state.name.warnings}
-        <label htmlFor="password">Password:</label>
+        <Label htmlFor="password">Password:</Label>
         {this.renderInput('password', 'password')}
         {this.state.password.warnings}
-        <label htmlFor="password2">Password:</label>
+        <Label htmlFor="password2">Password:</Label>
         {this.renderInput('password', 'password2')}
         {this.state.password2.warnings}
 
-        <label htmlFor="comments">Comments:</label>
+        <Label htmlFor="comments">Comments:</Label>
         {this.renderInput('textarea', 'comments')}
         {this.state.comments.warnings}
-        <input type="submit" value="Submit" />
+        <Input type="submit" value="Submit" />
       </form>
     );
   }

src/components/Form/style.js

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+
+const TextArea = styled.textarea`
+  width: 200px;
+  height: 100px;
+  margin: 8px 0;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+  display: block;
+
+  :focus {
+    outline: none;
+    border-color: #66ccff;
+  }
+`;
+
+const Warning = styled.div`
+  display: block;
+  width: 400px;
+  color: red;
+  font-size: 80%;
+`;
+
+const Input = styled.input`
+  :not([type=submit]) {
+    width: 150px;
+    margin: 8px 10px;
+    padding: 5px;
+    border: none;
+    border-bottom: 1px solid #ccc;
+    box-sizing: border-box;
+  }
+
+  :not([type=submit]):focus {
+    outline: none;
+    border-bottom: 1px solid #66ccff;
+    box-sizing: border-box;
+  }
+`;
+
+const Label = styled.label`display: block;`;
+
+export { TextArea, Warning, Input, Label };

src/components/Nav/NavLink.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 
-export default class MyNav extends React.PureComponent {
+export default class MyNav extends React.Component {
   render() {
     return (
       <NavLink

src/components/Tabs/TabView.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Tab, TabContent } from './style';
+
 const data = {
   tabs: ['One', 'Two', 'Three'],
   content: [
@@ -11,21 +13,21 @@ const data = {
 };
 
 const ContentView = ({ content }) =>
-  <div className="tabContent">
+  <TabContent>
     {content}
-  </div>;
+  </TabContent>;
 
 const TabGroup = props => {
   return (
-    <div className="tabGroup">
+    <div>
       {props.tabs.map((tabName, id) =>
-        <button
+        <Tab
           onClick={() => props.handleClick(id)}
-          className={'tab ' + props.isActive(id)}
+          isActive={props.isActive(id)}
           key={tabName}
         >
           {tabName}
-        </button>
+        </Tab>
       )}
     </div>
   );
@@ -46,7 +48,7 @@ export default class TabView extends React.Component {
   };
 
   isActive = id => {
-    return id === this.state.activeIndex ? 'active' : '';
+    return id === this.state.activeIndex;
   };
 
   render() {

src/components/Tabs/index.js

@@ -2,8 +2,6 @@ import React from 'react';
 import TabView from './TabView';
 import SharedTitle from '../Utils/SharedTitle';
 
-import './style.css';
-
 const TabViewDemo = () =>
   <div>
     <SharedTitle />

src/components/Tabs/style.css

@@ -1,25 +0,0 @@
-
-.tab {
-	border: 0;
-	border-top: 1px solid black;
-	border-left: 1px solid black;
-	border-right: 1px solid black;
-	border-radius: 5px 5px 0 0;
-	background-color: grey;
-	padding: 10px;
-	margin-right: 5px;
-	color: white;
-	display: inline-block;
-	outline:none;
-	width: 80px;
-}
-
-.tab.active {
-	background-color: #111;
-	box-shadow: 1px 2px 5px grey;
-}
-
-.tabContent {
-	padding: 10px 10px;
-	border: 1px solid black;
-}

src/components/Tabs/style.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+
+const Tab = styled.button`
+  border: 0;
+  border-top: 1px solid black;
+  border-left: 1px solid black;
+  border-right: 1px solid black;
+  border-radius: 5px 5px 0 0;
+  background-color: grey;
+  padding: 10px;
+  margin-right: 5px;
+  color: white;
+  display: inline-block;
+  outline: none;
+  width: 80px;
+
+  ${props => {
+    if (props.isActive) {
+      return 'background-color: #111;box-shadow: 1px 2px 5px grey;';
+    }
+  }};
+`;
+
+const TabContent = styled.div`
+  padding: 10px 10px;
+  border: 1px solid black;
+`;
+
+export { Tab, TabContent };

src/components/Toggle/Toggle.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { Motion, spring } from 'react-motion';
 import FadeInOut from '../Utils/FadeInOut';
 
+import { BG, ToggleBlock } from './style';
+
 export default class Toggle extends React.Component {
   state = {
     open: false
@@ -23,15 +25,14 @@ export default class Toggle extends React.Component {
         </h3>
         <Motion style={{ x: spring(this.state.open ? 200 : 0) }}>
           {({ x }) =>
-            <div className="toggle-bg">
-              <div
-                className="toggle-block"
+            <BG>
+              <ToggleBlock
                 onClick={this.handleClick}
                 style={{
                   transform: `translate3d(${x}px, 0, 0)`
                 }}
               />
-            </div>}
+            </BG>}
         </Motion>
         <FadeInOut content={animatedContent} />
       </div>

src/components/Toggle/Toggle.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { Motion, spring } from 'react-motion';
-import FadeInOut from '../Utils/FadeInOut'
-
-
-export default class Toggle extends React.Component {
-  state = {
-    open: false,
-  };
-
-  handleClick = () => {
-    this.setState({ open: !this.state.open });
-  };
-
-  render() {
-    const animatedContent = this.state.open ? [{key: 'FadeInOut',data:'FadeInOut', opacity: spring(1)}] : null
-    return (
-      <div>
-        <button onClick={this.handleClick}>
-          Toggle
-        </button>
-        <h3>Status: {this.state.open ? 'open' : 'closed'}</h3>
-        <Motion style={{ x: spring(this.state.open ? 200 : 0) }}>
-          {({ x }) =>
-            <div className="toggle-bg">
-              <div
-                className="toggle-block"
-                onClick={this.handleClick}
-                style={{
-                  transform: `translate3d(${x}px, 0, 0)`,
-                }}
-              />
-            </div>}
-        </Motion>
-        <FadeInOut content={animatedContent}/>
-      </div>
-    );
-  }
-}

src/components/Toggle/index.js

@@ -1,19 +1,16 @@
-import React from 'react'
-import Toggle from './Toggle'
-import SharedTitle from '../Utils/SharedTitle'
+import React from 'react';
+import Toggle from './Toggle';
+import SharedTitle from '../Utils/SharedTitle';
 
-import './style.css'
-
-const ToggleDemo = () => (
+const ToggleDemo = () =>
   <div>
-    <SharedTitle/>
-     <p>
-          Try the toggle which controls the status and animation. The block
-          itself is also clickable. The animation is created using React-Motion.
-     </p>
-         <hr />
-     <Toggle/>
-  </div>
-)
+    <SharedTitle />
+    <p>
+      Try the toggle which controls the status and animation. The block itself
+      is also clickable. The animation is created using React-Motion.
+    </p>
+    <hr />
+    <Toggle />
+  </div>;
 
-export default ToggleDemo
+export default ToggleDemo;

src/components/Toggle/style.css

@@ -1,16 +0,0 @@
-.toggle-bg {
-	border-radius: 4px;
-    background-color: grey;
-    position: relative;
-    margin: 5px 3px 10px;
-    width: 250px;
-    height: 50px;
-}
-
-.toggle-block {
-    position: absolute;
-    width: 50px;
-    height: 50px;
-    border-radius: 4px;
-    background-color: #70C1B3;
-  }

src/components/Toggle/style.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+const BG = styled.div`
+  border-radius: 4px;
+  background-color: grey;
+  position: relative;
+  margin: 5px 3px 10px;
+  width: 250px;
+  height: 50px;
+`;
+
+const ToggleBlock = styled.div`
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  border-radius: 4px;
+  background-color: #70c1b3;
+`;
+
+export { BG, ToggleBlock };

src/components/Utils/SharedTitle.jsx

@@ -1,5 +0,0 @@
-import React from 'react';
-
-const SharedTile = () => <h2>Comments</h2>
-
-export default SharedTile