Add media-query and more props based styles

Author: robinsandborg

src/css-modules/Feed.cm.js

@@ -12,6 +12,7 @@ const FeedCM = () => (
         timestamp={item.timestamp}
         likes={item.likes}
         avatar={item.avatar}
+        isNew={item.new}
         key={item.id}
       />
     ))}

src/css/Feed.css.js

@@ -15,6 +15,7 @@ const FeedCSS = () => (
             timestamp={item.timestamp}
             likes={item.likes}
             avatar={item.avatar}
+            isNew={item.new}
             key={item.id}
           />
         ))}

src/css/Feed.item.css.js

@@ -11,7 +11,8 @@ const FeedItemCSS = ({
   body,
   timestamp,
   likes,
-  avatar
+  avatar,
+  isNew
 }) => (
   <div className="css-feed-item">
     <div className="css-flag">
@@ -31,7 +32,9 @@ const FeedItemCSS = ({
             <span> · </span>
             <span className="css-feed-item-user">{`@${username}`}</span>
           </div>
-          <span className="css-feed-item-timestamp">{timestamp}</span>
+          <span className={`css-feed-item-timestamp ${isNew ? "new" : ""}`}>
+            {timestamp}
+          </span>
         </div>
       </div>
     </div>

src/css/Feed.item.styles.css

@@ -12,29 +12,31 @@
 }
 
 .css-feed-item:nth-child(2):hover .css-feed-item-footer {
-  border-color: #7ed321;
+  border-color: #8ccfb9;
 }
 
 .css-feed-item:nth-child(3):hover .css-feed-item-footer {
-  border-color: #184ab1;
+  border-color: #88a0ba;
 }
 
 .css-feed-item:nth-child(4):hover .css-feed-item-footer {
-  border-color: #f575a6;
+  border-color: #f27788;
 }
 
 .css-feed-item:last-child {
   border-bottom: 1px solid #dfdfe6;
 }
 
 .css-feed-item-avatar {
-  width: 54px;
+  width: 36px;
   border-radius: 50%;
 }
 
 .css-feed-item-header {
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
+  font-size: 14px;
 }
 
 .css-feed-item-author {
@@ -58,11 +60,13 @@
   text-align: right;
 }
 
+.css-feed-item-timestamp.new {
+  color: #f27788;
+}
+
 .css-feed-item-body {
   font-family: serif;
-  font-size: 1.3rem;
-  line-height: 1.5;
-  margin: 24px 0;
+  margin: 12px 0;
 }
 
 .css-feed-item-footer {
@@ -105,3 +109,19 @@
   width: 20px;
   vertical-align: middle;
 }
+
+@media screen and (min-width: 740px) {
+  .css-feed-item-body {
+    margin: 24px 0;
+    font-size: 1.3rem;
+    line-height: 1.5;
+  }
+
+  .css-feed-item-avatar {
+    width: 54px;
+  }
+
+  .css-feed-item-header {
+    font-size: 14px;
+  }
+}

src/data/feed.js

@@ -7,7 +7,8 @@ const data = [
     timestamp: "45m",
     likes: 138,
     avatar: "/img/amundsen.jpg",
-    id: "12r8yfq9"
+    id: "12r8yfq9",
+    new: true
   },
   {
     fullname: "Fridtjof Nansen",
@@ -17,7 +18,8 @@ const data = [
     timestamp: "2h",
     likes: 227,
     avatar: "/img/nansen.jpg",
-    id: "po3ertjfws"
+    id: "po3ertjfws",
+    new: true
   },
   {
     fullname: "Helge Ingstad",

src/glamor/Feed.glamor.js

@@ -12,6 +12,7 @@ const FeedGlamor = () => (
         timestamp={item.timestamp}
         likes={item.likes}
         avatar={item.avatar}
+        isNew={item.new}
         key={item.id}
       />
     ))}

src/rebem/Feed.bem.js

@@ -12,6 +12,7 @@ const FeedBEM = () => (
         timestamp={item.timestamp}
         likes={item.likes}
         avatar={item.avatar}
+        isNew={item.new}
         key={item.id}
       />
     ))}

src/styled-components/Feed.sc.js

@@ -12,6 +12,7 @@ const FeedSC = () => (
         timestamp={item.timestamp}
         likes={item.likes}
         avatar={item.avatar}
+        isNew={item.new}
         key={item.id}
       />
     ))}