styling styled-components#1

examples/css-modules/src/components/header/header.css

@@ -0,0 +1,32 @@
+.header {
+  display: flex;
+  padding: 1rem 0 .65625rem;
+}
+
+.profile {
+  flex: 1 0 0;
+  margin: 0 .3rem;
+}
+
+.image {
+  border-radius: .35rem;
+  width: 100%;
+}
+
+.user {
+  flex: 7 0 0;
+  margin: 0 .3rem;
+}
+
+.url {
+  text-decoration: none;
+}
+
+.name {
+  color: #292f33;
+  font-weight: 700;
+}
+
+.screenName {
+  color: #8899a6;
+}

examples/css-modules/src/components/header/header.js

@@ -0,0 +1,25 @@
+import React, { PropTypes } from 'react'
+
+import styles from './header.css'
+
+const Header = ({ user }) => (
+  <div className={styles.header}>
+    <div className={styles.profile}>
+      <a href={user.url}>
+        <img className={styles.image} src={user.profile_image_url_https} alt={user.name} />
+      </a>
+    </div>
+    <div className={styles.user}>
+      <a className={styles.url} href={user.url}>
+        <div className={styles.name}>{user.name}</div>
+        <div className={styles.screenName}>@{user.screen_name}</div>
+      </a>
+    </div>
+  </div>
+)
+
+Header.propTypes = {
+  user: PropTypes.object,
+}
+
+export default Header

examples/css-modules/src/components/header/index.js

@@ -0,0 +1 @@
+export { default } from './header'

examples/css-modules/src/components/like/like.css

@@ -1,3 +1,15 @@
+.button {
+  background: none;
+  border: none;
+  color: inherit;
+  font-size: inherit;
+}
+
+.liked {
+  animation: liked .25s;
+  color: #e81c4f;
+}
+
 @keyframes liked {
   50% {
     transform: scale(1.2);
@@ -6,8 +18,3 @@
     transform: scale(1);
   }
 }
-
-.liked {
-  animation: liked .25s;
-  color: red;
-}

examples/css-modules/src/components/like/like.js

@@ -24,7 +24,7 @@ class Like extends Component {
 
   render() {
     return (
-      <button onClick={this.handleClick}>
+      <button className={styles.button} onClick={this.handleClick}>
         <LikeIcon className={this.state.liked && styles.liked} />
       </button>
     )

examples/css-modules/src/components/tweet/tweet.css

@@ -1,12 +1,18 @@
-body {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+.container {
+  padding: 0 .6rem;
 }
 
-svg {
-  fill: currentColor;
-  height: 30px;
+.media {
+  border-radius: .35rem;
+  border: 1px solid #e1e8ed;
+  display: block;
 }
 
-.main {
-  color: #292f33;
+.image {
+  max-width: 100%;
+}
+
+.actions {
+  color: #8899a6;
+  font-size: 1.5rem;
 }

examples/css-modules/src/components/tweet/tweet.js

@@ -1,5 +1,6 @@
 import React, { PropTypes } from 'react'
 
+import Header from 'components/header'
 import Like from 'components/like'
 import ReplyIcon from 'assets/reply.svg'
 import RetweetIcon from 'assets/retweet.svg'
@@ -8,26 +9,20 @@ import MoreIcon from 'assets/more.svg'
 import styles from './tweet.css'
 
 const Tweet = ({ data }) => (
-  <div className={styles.main}>
-    <div>
-      <a href={data.user.url}>
-        <img src={data.user.profile_image_url_https} alt={data.user.name} />
-      </a>
-      <a href={data.user.url}>
-        <span>{data.user.name}</span>
-        <span>@{data.user.screen_name}</span>
-      </a>
-    </div>
+  <div className={styles.container}>
+    <Header user={data.user} />
     <p>
       {data.text}
     </p>
-    <img src={data.entities.media[0].media_url_https} alt="" />
+    <a className={styles.media} href={data.entities.media[0].expanded_url}>
+      <img className={styles.image} src={data.entities.media[0].media_url_https} alt="" />
+    </a>
     <div>{data.created_at}</div>
     <div>
       <span>{data.retweet_count} Retweets</span>
       <span>{data.favorite_count} Likes</span>
     </div>
-    <div>
+    <div className={styles.actions}>
       <ReplyIcon />
       <RetweetIcon />
       <Like />

examples/css-modules/src/containers/app/app.css

@@ -0,0 +1,37 @@
+html {
+  color: #292f33;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.3125;
+}
+
+svg {
+  fill: currentColor;
+  height: 1.25em;
+}
+
+.container {
+  margin: 0 auto;
+  width: 100%;
+}
+
+@media screen and (min-width: 360px) {
+  html {
+    font-size: 15px;
+  }
+
+  .container {
+    max-width: 400px;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  html {
+    font-size: 16px;
+  }
+
+  .container {
+    max-width: 600px;
+  }
+}
+

examples/css-modules/src/containers/app/app.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+import Tweet from 'components/tweet'
+import data from 'data/755481795206971392.json'
+
+import styles from './app.css'
+
+const App = () => (
+  <div className={styles.container}>
+    <Tweet data={data} />
+  </div>
+)
+
+export default App

examples/css-modules/src/containers/app/index.js

@@ -0,0 +1 @@
+export { default } from './app'

examples/css-modules/src/data/755481795206971392.json

@@ -4,14 +4,15 @@
   "truncated": false,
   "entities": {
     "media": [{
-      "media_url_https": "https:\/\/pbs.twimg.com\/media\/CnwCr-nW8AAcQeZ.jpg"
+      "media_url_https": "https:\/\/pbs.twimg.com\/media\/CnwCr-nW8AAcQeZ.jpg",
+      "expanded_url": "http:\/\/twitter.com\/mxstbr\/status\/755481795206971392\/photo\/1"
     }]
   },
   "user": {
     "name": "Max Stoiber",
     "screen_name": "mxstbr",
     "url": "https:\/\/t.co\/uAtI6h0Zng",
-    "profile_image_url_https": "https:\/\/pbs.twimg.com\/profile_images\/681114454029942784\/PwhopfmU_normal.jpg"
+    "profile_image_url_https": "https:\/\/pbs.twimg.com\/profile_images\/681114454029942784\/PwhopfmU_reasonably_small.jpg"
   },
   "retweet_count": 32,
   "favorite_count": 79

examples/css-modules/src/index.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import { render } from 'react-dom'
 
-import Tweet from 'components/tweet'
-import data from 'data/755481795206971392.json'
+import App from 'containers/app'
 
-render(<Tweet data={data} />, document.body)
+render(<App />, document.body)