Vanilla CSS Variant

package.json

@@ -3,9 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "classnames": "^2.2.6",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "react-scripts": "3.1.1"
+    "react-scripts": "3.1.1",
+    "styled-components": "^4.3.2"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -27,5 +29,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "babel-plugin-macros": "^2.6.1"
   }
 }

public/index.html

@@ -9,18 +9,12 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+    <!--  Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->

public/manifest.json

@@ -6,17 +6,7 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }	    
+    } 
   ],
   "start_url": ".",
   "display": "standalone",

src/App.js

@@ -1,19 +1,33 @@
 import React from 'react';
+import styled from 'styled-components/macro';
+import BlogPostContent from './BlogPostContent';
+import { Header, Footer } from './components';
+import Blog from './containers/Blog';
 
-import BlogPostContent from './BlogPostContent'
+const Grid = styled.div`
+  background: ivory;
+  font-size: 16px;
+  display: grid;
+  grid-template-columns: 140px 50px auto 50px 140px;
+  grid-template-areas:
+  "header header header header header"
+  ". main main main ."
+  "footer footer footer footer footer"
+`
 
-import { Header, Footer } from './components'
-import Blog from './containers/Blog'
+const Main = styled.div`
+  grid-area: main;
+`
 
 function App() {
   return (
-    <div className="App">
+    <Grid>
       <Header />
-      <div className="content">
+      <Main>
         <Blog content={BlogPostContent}/>
-      </div>
+      </Main>
       <Footer />
-    </div>
+    </Grid>
   );
 }
 

src/components/Atoms/Avatar/index.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components/macro';
 
 const Avatar = (props) => {
   const { image, altText } = props;
-
+  const AvatarStyle = styled.img`
+    max-width: 250px;
+  `
 
   return (
-    <img src={image} className="avatar" alt={altText} />
+    <AvatarStyle src={image} alt={altText} />
   );
 };
 

src/components/Atoms/Button/index.js

@@ -1,23 +1,23 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import styled from 'styled-components/macro';
 
-const Button = (props) => {
-  const { children, ...other } = props;
+export const Button = styled.button`
+  background:  ${props => props.secondary ? "#fff" : "#5CBCFF"};
+  background-image:  ${props => props.secondary ? "none" : "linear-gradient(to bottom, #5CBCFF, #A696FF)"};
+  border-radius: 4px;
+  color: ${props => props.secondary ? "#a696ff" : "#fff"};
+  border: solid #A696FF 1px;
+  text-decoration: none;
+  display: inline-block;
+  cursor: pointer;
+  padding: 10px 15px;
+  &:hover {
+    background: #fff;
+    color: #A696FF;
+    text-decoration: none;
+    opacity: 0.5;
+  }`;
 
-
-  return (
-    <button className="button" {...other} >
-      {children}
-    </button>
-  );
-};
-
-Button.propTypes = {
-  children: PropTypes.node
-};
-
-Button.defaultProps = {
-  children: null
-};
-
-export default Button;
+export const SuperLike = styled(Button)`
+  font-size: 25px;
+  font-weight: bold;
+`

src/components/Atoms/Content/index.js

@@ -6,7 +6,7 @@ const Content = (props) => {
 
 
   return (
-    <article className="content"  dangerouslySetInnerHTML={{ __html: blogText }} />
+    <article dangerouslySetInnerHTML={{ __html: blogText }} />
   );
 };
 

src/components/Atoms/ContentList/index.js

@@ -4,11 +4,11 @@ import PropTypes from 'prop-types';
 const ContentList = (props) => {
   const { listElements } = props;
   return (
-    <ul className="contentList">
+    <ul>
       {
         Object.keys(listElements).map((key, index) => {
           return (
-            <li className="contentList__element" key={`contentList__element-${index}`}>
+            <li key={`contentList__element-${index}`}>
             <b>{key}</b>: {listElements[key]}
             </li>
           )

src/components/Atoms/TextField/index.js

@@ -1,11 +1,8 @@
-import React from 'react';
-
-const TextField = (props) => {
-  const { ...other } = props;
-
-  return (
-    <textarea className='textField' {...other} />
-  );
-};
+import styled from 'styled-components'
 
+const TextField = styled.textarea`
+  width: 800px;
+  height: 250px;
+  display: block;
+`
 export default TextField;

src/components/Molecules/Comments/index.js

@@ -1,23 +1,47 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components/macro';
 import Avatar from './../../Atoms/Avatar';
 
 const Comments = (props) => {
   const { comments, ...other } = props;
 
+  const Comment = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    background-color: white;
+  `;
+
+  const CommentAvatar = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+    background-color: ivory;
+  `;
+
+  const CommentContent = styled.div`
+    background-color: white;
+    padding: 40px;
+    border-radius: 10%;
+  `;
+
   return (
-    <section className="comments" {...other}>
-      <div className="comment">
-        <div className="comment__avatar">
+    <section {...other}>
+      <Comment>
+        <CommentAvatar>
           <Avatar image={comments.avatar} altText={comments.avatarName} />
-          <span className="comment__avatarName">
+          <span>
             {comments.avatarName}
           </span>
-        </div>
-        <div className="comment__content">
+        </CommentAvatar>
+        <CommentContent>
           {comments.commentText}
-        </div>
-      </div>
+        </CommentContent>
+      </Comment>
     </section>
   );
 };

src/components/Molecules/Profile/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Button from '../../Atoms/Button';
+import './profile.css';
+
+const Profile = (props) => {
+  const { image, imageAlt } = props;
+
+  return (
+    <div className="profile">
+      <img className="profile__image" src={image} alt={imageAlt} />
+      <Button className="superlike profile__button">
+        <span aria-label="heart black" role="img">
+          🖤
+        </span>
+      </Button>
+    </div>
+  );
+};
+
+export default Profile;

src/components/Organisms/CommentArea/index.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Comments from  '../../Molecules/Comments';
+import {Button} from '../../Atoms/Button';
+import styled from 'styled-components/macro';
+import TextField from '../../Atoms/TextField';
+
+const CommentArea = (props) => {
+  const {comments} = props;
+  const CommentForm = styled.form`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 20px;
+  `
+
+  const CommentFormActions = styled.div`
+    display: flex;
+    justify-content: center;
+    width: 800px;
+  `
+
+  const CommentFormActionsButton = styled(Button)`
+    margin: 20px 5px;
+  `
+
+  return (
+  <section className="commentArea">
+      <Comments comments={comments}/>
+      <CommentForm onSubmit={()=>(console.log('submitted'))}>
+        <TextField />
+        <CommentFormActions>
+          <CommentFormActionsButton>Submit</CommentFormActionsButton>
+          <CommentFormActionsButton secondary>Decline</CommentFormActionsButton>
+        </CommentFormActions>
+      </CommentForm>
+    </section>
+  );
+};
+
+CommentArea.propTypes = {
+  comments:
+    PropTypes.shape({
+      avatar: PropTypes.string,
+      avatarName: PropTypes.string,
+      commentText: PropTypes.string
+  }).isRequired
+};
+
+export default CommentArea;