From 693a6d5bcc18181bc6477b5e0f79f820da6e8e5e Mon Sep 17 00:00:00 2001
From: Kathrin Holzmann <lelith@gmx.de>
Date: Fri, 13 Sep 2019 16:06:05 +0200
Subject: [PATCH 1/9] setup vanilla css variant

---
 package.json                                  |  1 +
 public/index.html                             |  8 +---
 public/styles/avatar.css                      |  3 ++
 public/styles/base.css                        |  4 ++
 public/styles/blog.css                        |  7 ++++
 public/styles/button.css                      | 39 +++++++++++++++++++
 public/styles/comments.css                    | 38 ++++++++++++++++++
 public/styles/grid.css                        | 20 ++++++++++
 public/styles/header.css                      |  3 ++
 public/styles/index.css                       |  9 +++++
 public/styles/profile.css                     | 29 ++++++++++++++
 public/styles/textField.css                   |  5 +++
 src/App.js                                    |  4 +-
 src/components/Atoms/Button/index.js          | 16 +++++---
 .../{CommentForm => CommentArea}/index.js     | 17 +++++---
 src/components/Organisms/Footer/index.js      |  2 +-
 src/components/index.js                       |  4 +-
 src/containers/Blog/index.js                  | 13 +++++--
 yarn.lock                                     |  5 +++
 19 files changed, 202 insertions(+), 25 deletions(-)
 create mode 100644 public/styles/avatar.css
 create mode 100644 public/styles/base.css
 create mode 100644 public/styles/blog.css
 create mode 100644 public/styles/button.css
 create mode 100644 public/styles/comments.css
 create mode 100644 public/styles/grid.css
 create mode 100644 public/styles/header.css
 create mode 100644 public/styles/index.css
 create mode 100644 public/styles/profile.css
 create mode 100644 public/styles/textField.css
 rename src/components/Organisms/{CommentForm => CommentArea}/index.js (54%)

diff --git a/package.json b/package.json
index 19b56dd..7a37123 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "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"
diff --git a/public/index.html b/public/index.html
index 80ffd85..468a0e0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -15,12 +15,8 @@
       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
+    <link rel="stylesheet" href="./styles/index.css" />
+    <!--  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`.
     -->
diff --git a/public/styles/avatar.css b/public/styles/avatar.css
new file mode 100644
index 0000000..db24338
--- /dev/null
+++ b/public/styles/avatar.css
@@ -0,0 +1,3 @@
+.avatar {
+  max-width: 250px;
+}
\ No newline at end of file
diff --git a/public/styles/base.css b/public/styles/base.css
new file mode 100644
index 0000000..01f3371
--- /dev/null
+++ b/public/styles/base.css
@@ -0,0 +1,4 @@
+body {
+  font-size: 16px;
+  background: ivory;
+}
\ No newline at end of file
diff --git a/public/styles/blog.css b/public/styles/blog.css
new file mode 100644
index 0000000..3366f8b
--- /dev/null
+++ b/public/styles/blog.css
@@ -0,0 +1,7 @@
+.blogContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+}
\ No newline at end of file
diff --git a/public/styles/button.css b/public/styles/button.css
new file mode 100644
index 0000000..d77a9b3
--- /dev/null
+++ b/public/styles/button.css
@@ -0,0 +1,39 @@
+.button {
+  background: #5CBCFF;
+  background-image: -webkit-linear-gradient(top, #5CBCFF, #A696FF);
+  background-image: -moz-linear-gradient(top, #5CBCFF, #A696FF);
+  background-image: -ms-linear-gradient(top, #5CBCFF, #A696FF);
+  background-image: -o-linear-gradient(top, #5CBCFF, #A696FF);
+  background-image: linear-gradient(to bottom, #5CBCFF, #A696FF);
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  color: #fff;
+  border: solid #A696FF 1px;
+  text-decoration: none;
+  display: inline-block;
+  cursor: pointer;
+  padding: 10px 15px;
+}
+
+.button:hover {
+  background: #fff;
+  color: #A696FF;
+  text-decoration: none;
+}
+
+.button.secondary {
+  background: #fff;
+  border-color:  #a696ff;
+  color: #a696ff
+}
+.button.secondary:hover {
+  background-color: #fff;
+  border-color:  #a696ff;
+  opacity: 0.5;
+}
+
+.button.superlike {
+  font-size: 25px;
+  font-weight: bold;
+}
\ No newline at end of file
diff --git a/public/styles/comments.css b/public/styles/comments.css
new file mode 100644
index 0000000..b9cdf72
--- /dev/null
+++ b/public/styles/comments.css
@@ -0,0 +1,38 @@
+.comment__form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.comment {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+}
+
+.comment__avatar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-top-right-radius: 50%;
+  border-bottom-right-radius: 50%;
+  background-color: ivory;
+}
+
+.comment__content {
+  background-color: white;
+  padding: 40px;
+  border-radius: 10%;
+}
+
+.comment__form__actions {
+  display: flex;
+  justify-content: center;
+  width: 800px;
+}
+
+.comment__form__actions__btn {
+  margin: 20px 5px;
+}
diff --git a/public/styles/grid.css b/public/styles/grid.css
new file mode 100644
index 0000000..e4063ab
--- /dev/null
+++ b/public/styles/grid.css
@@ -0,0 +1,20 @@
+.grid {
+  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"
+}
+
+.header {
+  grid-area: header;
+}
+
+.footer {
+  grid-area: footer;
+}
+
+.main {
+  grid-area: main;
+}
\ No newline at end of file
diff --git a/public/styles/header.css b/public/styles/header.css
new file mode 100644
index 0000000..3efa158
--- /dev/null
+++ b/public/styles/header.css
@@ -0,0 +1,3 @@
+.header {
+  background: rgba(224, 100, 230, 0.3);
+}
\ No newline at end of file
diff --git a/public/styles/index.css b/public/styles/index.css
new file mode 100644
index 0000000..2dbb7dc
--- /dev/null
+++ b/public/styles/index.css
@@ -0,0 +1,9 @@
+@import "./base.css";
+@import "./grid.css";
+@import "./header.css";
+@import "./button.css";
+@import "./textField.css";
+@import "./avatar.css";
+@import "./profile.css";
+@import "./comments.css";
+@import "./blog.css";
diff --git a/public/styles/profile.css b/public/styles/profile.css
new file mode 100644
index 0000000..a314cdd
--- /dev/null
+++ b/public/styles/profile.css
@@ -0,0 +1,29 @@
+.profile {
+  position: relative;
+}
+
+.profile__button {
+  position: absolute;
+  left: 20px;
+  bottom: 20px;
+}
+.profile__image {
+  max-width: 800px;
+  display: inline-block;
+  border: 3px solid silver;
+  border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%;
+  position: relative;
+}
+
+.profile__image::before {
+    content: '';
+    border: 2px solid #353535;
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg);
+    border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%;
+}
\ No newline at end of file
diff --git a/public/styles/textField.css b/public/styles/textField.css
new file mode 100644
index 0000000..51ec71a
--- /dev/null
+++ b/public/styles/textField.css
@@ -0,0 +1,5 @@
+.textField {
+  width: 800px;
+  height: 250px;
+  display: block;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 31d8b33..27e6ec2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,9 +7,9 @@ import Blog from './containers/Blog'
 
 function App() {
   return (
-    <div className="App">
+    <div className="grid">
       <Header />
-      <div className="content">
+      <div className="main">
         <Blog content={BlogPostContent}/>
       </div>
       <Footer />
diff --git a/src/components/Atoms/Button/index.js b/src/components/Atoms/Button/index.js
index dd5915a..f98ebeb 100644
--- a/src/components/Atoms/Button/index.js
+++ b/src/components/Atoms/Button/index.js
@@ -1,23 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 const Button = (props) => {
-  const { children, ...other } = props;
-
+  const { children, className, ...other } = props;
 
+    const buttonClasses = classNames(
+      'button',
+      className
+    );
   return (
-    <button className="button" {...other} >
+    <button className={buttonClasses} {...other} >
       {children}
     </button>
   );
 };
 
 Button.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
+  className: PropTypes.string
 };
 
 Button.defaultProps = {
-  children: null
+  children: null,
+  className: ''
 };
 
 export default Button;
diff --git a/src/components/Organisms/CommentForm/index.js b/src/components/Organisms/CommentArea/index.js
similarity index 54%
rename from src/components/Organisms/CommentForm/index.js
rename to src/components/Organisms/CommentArea/index.js
index 6e42aa3..8b15168 100644
--- a/src/components/Organisms/CommentForm/index.js
+++ b/src/components/Organisms/CommentArea/index.js
@@ -4,20 +4,25 @@ import Comments from  '../../Molecules/Comments';
 import Button from '../../Atoms/Button';
 import TextField from '../../Atoms/TextField';
 
-const CommentForm = (props) => {
+const CommentArea = (props) => {
   const {comments} = props;
 
   return (
-  <section className="commentForm">
+  <section className="commentArea">
     <Comments comments={comments}/>
     <hr className="divider"/>
-    <TextField />
-    <Button>Submit</Button>
+    <form className="comment__form">
+      <TextField />
+      <div className="comment__form__actions">
+        <Button className="comment__form__actions__btn">Submit</Button>
+        <Button className='secondary comment__form__actions__btn'>Decline</Button>
+      </div>
+    </form>
   </section>
   );
 };
 
-CommentForm.propTypes = {
+CommentArea.propTypes = {
   comments:
     PropTypes.shape({
       avatar: PropTypes.string,
@@ -26,4 +31,4 @@ CommentForm.propTypes = {
   }).isRequired
 };
 
-export default CommentForm;
+export default CommentArea;
diff --git a/src/components/Organisms/Footer/index.js b/src/components/Organisms/Footer/index.js
index 332ee00..add1a32 100644
--- a/src/components/Organisms/Footer/index.js
+++ b/src/components/Organisms/Footer/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 const Footer = () => {
   return (
-  <footer>
+  <footer className="footer">
   made by <a href="https://github.com/Lelith/playground-styled" target="_blank" rel="noopener noreferrer" info="github repository"> Kathrin </a>
   </footer>
   );
diff --git a/src/components/index.js b/src/components/index.js
index 6ac1229..7a251f2 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -4,7 +4,7 @@ import ContentList from './Atoms/ContentList';
 import Content from './Atoms/Content';
 import TextField from './Atoms/TextField';
 import Comments from './Molecules/Comments';
-import CommentForm from './Organisms/CommentForm';
+import CommentArea from './Organisms/CommentArea';
 import Header from './Organisms/Header';
 import Footer from './Organisms/Footer';
 
@@ -15,7 +15,7 @@ export {
   Content,
   TextField,
   Comments,
-  CommentForm,
+  CommentArea,
   Header,
   Footer
 };
\ No newline at end of file
diff --git a/src/containers/Blog/index.js b/src/containers/Blog/index.js
index c55f98c..d30c0ad 100644
--- a/src/containers/Blog/index.js
+++ b/src/containers/Blog/index.js
@@ -1,14 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {ContentList, Content, CommentForm } from '../../components';
+import {ContentList, Content, CommentArea, Button } from '../../components';
 const Blog = (props) => {
   const { content } = props;
   return (
     <section className="blogContainer">
-      <img src={content.image} alt={content.imageAlt} />
+      <div className="profile">
+        <img className="profile__image" src={content.image} alt={content.imageAlt} />
+        <Button className="superlike profile__button">
+          <span aria-label="heart black" role="img">
+            🖤
+          </span>
+        </Button>
+      </div>
       <ContentList listElements={content.list} />
       <Content blogText={content.blogText} />
-      <CommentForm comments={content.comments}/>
+      <CommentArea comments={content.comments}/>
     </section>
   );
 };
diff --git a/yarn.lock b/yarn.lock
index b9360c8..e5eceb2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2356,6 +2356,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
+
 clean-css@4.2.x:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"

From 4b0cac27e53064f326a76c6f6aeb1bd78f7d5f9d Mon Sep 17 00:00:00 2001
From: Kathrin Holzmann <lelith@gmx.de>
Date: Fri, 13 Sep 2019 16:07:04 +0200
Subject: [PATCH 2/9] change whitespace

---
 src/components/Organisms/CommentArea/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Organisms/CommentArea/index.js b/src/components/Organisms/CommentArea/index.js
index 8b15168..263a6c3 100644
--- a/src/components/Organisms/CommentArea/index.js
+++ b/src/components/Organisms/CommentArea/index.js
@@ -15,7 +15,7 @@ const CommentArea = (props) => {
       <TextField />
       <div className="comment__form__actions">
         <Button className="comment__form__actions__btn">Submit</Button>
-        <Button className='secondary comment__form__actions__btn'>Decline</Button>
+        <Button className="secondary comment__form__actions__btn">Decline</Button>
       </div>
     </form>
   </section>

From d1d04734d69752e01577d5ca351d7b058c1c831b Mon Sep 17 00:00:00 2001
From: Kathrin Holzmann <lelith@gmx.de>
Date: Fri, 13 Sep 2019 17:03:44 +0200
Subject: [PATCH 3/9] remove css from index.html

---
 public/index.html | 2 --
 1 file changed, 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index 468a0e0..40dc71d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,13 +9,11 @@
       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" />
-    <link rel="stylesheet" href="./styles/index.css" />
     <!--  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`.

From fd8239b5b0deed6fbb79275baa3c7280b5ca75f1 Mon Sep 17 00:00:00 2001
From: Kathrin Holzmann <lelith@gmx.de>
Date: Sat, 14 Sep 2019 06:56:12 +0200
Subject: [PATCH 4/9] refactor for inline style loading

---
 public/styles/index.css                                |  9 ---------
 src/App.js                                             | 10 +++++-----
 {public/styles => src}/base.css                        |  0
 .../styles => src/components/Atoms/Avatar}/avatar.css  |  0
 src/components/Atoms/Avatar/index.js                   |  1 +
 .../styles => src/components/Atoms/Button}/button.css  |  0
 src/components/Atoms/Button/index.js                   |  1 +
 .../components/Atoms/TextField}/textField.css          |  0
 .../components/Organisms/CommentArea}/comments.css     |  0
 src/components/Organisms/CommentArea/index.js          |  1 +
 .../components/Organisms/Header}/header.css            |  0
 src/components/Organisms/Header/index.js               |  4 +++-
 {public/styles => src/containers/Blog}/blog.css        |  0
 src/containers/Blog/index.js                           |  2 ++
 {public/styles => src/containers/Blog}/profile.css     |  0
 {public/styles => src}/grid.css                        |  0
 16 files changed, 13 insertions(+), 15 deletions(-)
 delete mode 100644 public/styles/index.css
 rename {public/styles => src}/base.css (100%)
 rename {public/styles => src/components/Atoms/Avatar}/avatar.css (100%)
 rename {public/styles => src/components/Atoms/Button}/button.css (100%)
 rename {public/styles => src/components/Atoms/TextField}/textField.css (100%)
 rename {public/styles => src/components/Organisms/CommentArea}/comments.css (100%)
 rename {public/styles => src/components/Organisms/Header}/header.css (100%)
 rename {public/styles => src/containers/Blog}/blog.css (100%)
 rename {public/styles => src/containers/Blog}/profile.css (100%)
 rename {public/styles => src}/grid.css (100%)

diff --git a/public/styles/index.css b/public/styles/index.css
deleted file mode 100644
index 2dbb7dc..0000000
--- a/public/styles/index.css
+++ /dev/null
@@ -1,9 +0,0 @@
-@import "./base.css";
-@import "./grid.css";
-@import "./header.css";
-@import "./button.css";
-@import "./textField.css";
-@import "./avatar.css";
-@import "./profile.css";
-@import "./comments.css";
-@import "./blog.css";
diff --git a/src/App.js b/src/App.js
index 27e6ec2..674cefe 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,9 @@
 import React from 'react';
-
-import BlogPostContent from './BlogPostContent'
-
-import { Header, Footer } from './components'
-import Blog from './containers/Blog'
+import BlogPostContent from './BlogPostContent';
+import { Header, Footer } from './components';
+import Blog from './containers/Blog';
+import './base.css';
+import './grid.css';
 
 function App() {
   return (
diff --git a/public/styles/base.css b/src/base.css
similarity index 100%
rename from public/styles/base.css
rename to src/base.css
diff --git a/public/styles/avatar.css b/src/components/Atoms/Avatar/avatar.css
similarity index 100%
rename from public/styles/avatar.css
rename to src/components/Atoms/Avatar/avatar.css
diff --git a/src/components/Atoms/Avatar/index.js b/src/components/Atoms/Avatar/index.js
index f133ce4..733a1b1 100644
--- a/src/components/Atoms/Avatar/index.js
+++ b/src/components/Atoms/Avatar/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import './avatar.css';
 
 const Avatar = (props) => {
   const { image, altText } = props;
diff --git a/public/styles/button.css b/src/components/Atoms/Button/button.css
similarity index 100%
rename from public/styles/button.css
rename to src/components/Atoms/Button/button.css
diff --git a/src/components/Atoms/Button/index.js b/src/components/Atoms/Button/index.js
index f98ebeb..b96f0fb 100644
--- a/src/components/Atoms/Button/index.js
+++ b/src/components/Atoms/Button/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import './button.css';
 
 const Button = (props) => {
   const { children, className, ...other } = props;
diff --git a/public/styles/textField.css b/src/components/Atoms/TextField/textField.css
similarity index 100%
rename from public/styles/textField.css
rename to src/components/Atoms/TextField/textField.css
diff --git a/public/styles/comments.css b/src/components/Organisms/CommentArea/comments.css
similarity index 100%
rename from public/styles/comments.css
rename to src/components/Organisms/CommentArea/comments.css
diff --git a/src/components/Organisms/CommentArea/index.js b/src/components/Organisms/CommentArea/index.js
index 263a6c3..950eb58 100644
--- a/src/components/Organisms/CommentArea/index.js
+++ b/src/components/Organisms/CommentArea/index.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import Comments from  '../../Molecules/Comments';
 import Button from '../../Atoms/Button';
 import TextField from '../../Atoms/TextField';
+import './comments.css';
 
 const CommentArea = (props) => {
   const {comments} = props;
diff --git a/public/styles/header.css b/src/components/Organisms/Header/header.css
similarity index 100%
rename from public/styles/header.css
rename to src/components/Organisms/Header/header.css
diff --git a/src/components/Organisms/Header/index.js b/src/components/Organisms/Header/index.js
index d6f24cf..2e8f60d 100644
--- a/src/components/Organisms/Header/index.js
+++ b/src/components/Organisms/Header/index.js
@@ -1,5 +1,7 @@
 import React from 'react';
-import Logo from './logo.png'
+import Logo from './logo.png';
+import './header.css';
+
 const Header = () => {
   return (
   <header className="header">
diff --git a/public/styles/blog.css b/src/containers/Blog/blog.css
similarity index 100%
rename from public/styles/blog.css
rename to src/containers/Blog/blog.css
diff --git a/src/containers/Blog/index.js b/src/containers/Blog/index.js
index d30c0ad..eb7f48c 100644
--- a/src/containers/Blog/index.js
+++ b/src/containers/Blog/index.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {ContentList, Content, CommentArea, Button } from '../../components';
+import './blog.css';
+import './profile.css';
 const Blog = (props) => {
   const { content } = props;
   return (
diff --git a/public/styles/profile.css b/src/containers/Blog/profile.css
similarity index 100%
rename from public/styles/profile.css
rename to src/containers/Blog/profile.css
diff --git a/public/styles/grid.css b/src/grid.css
similarity index 100%
rename from public/styles/grid.css
rename to src/grid.css

From e5ee0e498bb697c887b0af48c7c70a10fd33629c Mon Sep 17 00:00:00 2001
From: Kathrin Holzmann <lelith@gmx.de>
Date: Sat, 14 Sep 2019 12:06:47 +0200
Subject: [PATCH 5/9] refactor for styled components

---
 package.json                                  |   3 +-
 public/images/placeholder.png                 | Bin 0 -> 92 bytes
 public/logo192.png                            | Bin 5347 -> 0 bytes
 public/logo512.png                            | Bin 9664 -> 0 bytes
 public/manifest.json                          |  12 +-
 src/App.css                                   |  45 --------
 src/App.js                                    |  26 ++++-
 src/base.css                                  |   4 -
 src/components/Atoms/Avatar/avatar.css        |   3 -
 src/components/Atoms/Avatar/index.js          |   8 +-
 src/components/Atoms/Button/button.css        |  39 -------
 src/components/Atoms/Button/index.js          |  49 ++++-----
 src/components/Atoms/Content/index.js         |   2 +-
 src/components/Atoms/ContentList/index.js     |   4 +-
 src/components/Atoms/TextField/index.js       |  15 +--
 src/components/Atoms/TextField/textField.css  |   5 -
 src/components/Molecules/Comments/index.js    |  40 +++++--
 .../Organisms/CommentArea/comments.css        |  38 -------
 src/components/Organisms/CommentArea/index.js |  39 +++++--
 src/components/Organisms/Footer/index.js      |  10 +-
 src/components/Organisms/Header/header.css    |   3 -
 src/components/Organisms/Header/index.js      |  10 +-
 src/components/Organisms/Profile/index.js     |  59 ++++++++++
 src/components/index.js                       |   4 +-
 src/containers/Blog/blog.css                  |   7 --
 src/containers/Blog/index.js                  |  27 ++---
 src/containers/Blog/profile.css               |  29 -----
 src/grid.css                                  |  20 ----
 src/index.css                                 |  13 ---
 src/index.js                                  |   1 -
 yarn.lock                                     | 103 +++++++++++++++++-
 31 files changed, 307 insertions(+), 311 deletions(-)
 create mode 100644 public/images/placeholder.png
 delete mode 100644 public/logo192.png
 delete mode 100644 public/logo512.png
 delete mode 100644 src/App.css
 delete mode 100644 src/base.css
 delete mode 100644 src/components/Atoms/Avatar/avatar.css
 delete mode 100644 src/components/Atoms/Button/button.css
 delete mode 100644 src/components/Atoms/TextField/textField.css
 delete mode 100644 src/components/Organisms/CommentArea/comments.css
 delete mode 100644 src/components/Organisms/Header/header.css
 create mode 100644 src/components/Organisms/Profile/index.js
 delete mode 100644 src/containers/Blog/blog.css
 delete mode 100644 src/containers/Blog/profile.css
 delete mode 100644 src/grid.css
 delete mode 100644 src/index.css

diff --git a/package.json b/package.json
index 7a37123..6a65a81 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
     "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",
diff --git a/public/images/placeholder.png b/public/images/placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..96e11216e0d3f6f2162073a2a26ae6a18944c47d
GIT binary patch
literal 92
zcmeAS@N?(olHy`uVBq!ia0vp^AT}2V8<6ZZI=>f4aTa()7BeuIUIAgoxYVZ{KtVoF
l7sn8ZsmTcvtj)p<42-iF7{yLq&IHOZc)I$ztaD0e0st4#6PN%1

literal 0
HcmV?d00001

diff --git a/public/logo192.png b/public/logo192.png
deleted file mode 100644
index fc44b0a3796c0e0a64c3d858ca038bd4570465d9..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5347
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
X@eDJUQo;Ye2mwlRs<JiGX2Jghdw)}T

diff --git a/public/logo512.png b/public/logo512.png
deleted file mode 100644
index a4e47a6545bc15971f8f63fba70e4013df88a664..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 9664
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
b{|{}U^kRn2wo}j7|0ATu<;8xA7zX}7|B6mN

diff --git a/public/manifest.json b/public/manifest.json
index e4c94e6..fa02500 100644
--- a/public/manifest.json
+++ b/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",
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 61e4b72..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,45 +0,0 @@
-/* color theme *
-*
- #96ffff
- #52eeff
- #17d8ff
- #5cbcff
- #a696ff
- #e064e6
- #ff009f
-*/
-
-
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/App.js b/src/App.js
index 674cefe..e576b51 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,19 +1,33 @@
 import React from 'react';
+import styled from 'styled-components';
 import BlogPostContent from './BlogPostContent';
 import { Header, Footer } from './components';
 import Blog from './containers/Blog';
-import './base.css';
-import './grid.css';
+
+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"
+`
+
+const Main = styled.div`
+  grid-area: main;
+`
 
 function App() {
   return (
-    <div className="grid">
+    <Grid>
       <Header />
-      <div className="main">
+      <Main>
         <Blog content={BlogPostContent}/>
-      </div>
+      </Main>
       <Footer />
-    </div>
+    </Grid>
   );
 }
 
diff --git a/src/base.css b/src/base.css
deleted file mode 100644
index 01f3371..0000000
--- a/src/base.css
+++ /dev/null
@@ -1,4 +0,0 @@
-body {
-  font-size: 16px;
-  background: ivory;
-}
\ No newline at end of file
diff --git a/src/components/Atoms/Avatar/avatar.css b/src/components/Atoms/Avatar/avatar.css
deleted file mode 100644
index db24338..0000000
--- a/src/components/Atoms/Avatar/avatar.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.avatar {
-  max-width: 250px;
-}
\ No newline at end of file
diff --git a/src/components/Atoms/Avatar/index.js b/src/components/Atoms/Avatar/index.js
index 733a1b1..8cbbd34 100644
--- a/src/components/Atoms/Avatar/index.js
+++ b/src/components/Atoms/Avatar/index.js
@@ -1,13 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import './avatar.css';
+import styled from 'styled-components';
 
 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} />
   );
 };
 
diff --git a/src/components/Atoms/Button/button.css b/src/components/Atoms/Button/button.css
deleted file mode 100644
index d77a9b3..0000000
--- a/src/components/Atoms/Button/button.css
+++ /dev/null
@@ -1,39 +0,0 @@
-.button {
-  background: #5CBCFF;
-  background-image: -webkit-linear-gradient(top, #5CBCFF, #A696FF);
-  background-image: -moz-linear-gradient(top, #5CBCFF, #A696FF);
-  background-image: -ms-linear-gradient(top, #5CBCFF, #A696FF);
-  background-image: -o-linear-gradient(top, #5CBCFF, #A696FF);
-  background-image: linear-gradient(to bottom, #5CBCFF, #A696FF);
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  color: #fff;
-  border: solid #A696FF 1px;
-  text-decoration: none;
-  display: inline-block;
-  cursor: pointer;
-  padding: 10px 15px;
-}
-
-.button:hover {
-  background: #fff;
-  color: #A696FF;
-  text-decoration: none;
-}
-
-.button.secondary {
-  background: #fff;
-  border-color:  #a696ff;
-  color: #a696ff
-}
-.button.secondary:hover {
-  background-color: #fff;
-  border-color:  #a696ff;
-  opacity: 0.5;
-}
-
-.button.superlike {
-  font-size: 25px;
-  font-weight: bold;
-}
\ No newline at end of file
diff --git a/src/components/Atoms/Button/index.js b/src/components/Atoms/Button/index.js
index b96f0fb..576d5cd 100644
--- a/src/components/Atoms/Button/index.js
+++ b/src/components/Atoms/Button/index.js
@@ -1,30 +1,23 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import './button.css';
+import styled from 'styled-components';
 
-const Button = (props) => {
-  const { children, className, ...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;
+  }`;
 
-    const buttonClasses = classNames(
-      'button',
-      className
-    );
-  return (
-    <button className={buttonClasses} {...other} >
-      {children}
-    </button>
-  );
-};
-
-Button.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string
-};
-
-Button.defaultProps = {
-  children: null,
-  className: ''
-};
-
-export default Button;
+export const SuperLike = styled(Button)`
+  font-size: 25px;
+  font-weight: bold;
+`
\ No newline at end of file
diff --git a/src/components/Atoms/Content/index.js b/src/components/Atoms/Content/index.js
index b3133bc..cd18414 100644
--- a/src/components/Atoms/Content/index.js
+++ b/src/components/Atoms/Content/index.js
@@ -6,7 +6,7 @@ const Content = (props) => {
 
 
   return (
-    <article className="content"  dangerouslySetInnerHTML={{ __html: blogText }} />
+    <article dangerouslySetInnerHTML={{ __html: blogText }} />
   );
 };
 
diff --git a/src/components/Atoms/ContentList/index.js b/src/components/Atoms/ContentList/index.js
index 4bb757e..962eba5 100644
--- a/src/components/Atoms/ContentList/index.js
+++ b/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>
           )
diff --git a/src/components/Atoms/TextField/index.js b/src/components/Atoms/TextField/index.js
index 36cde7a..c0fd91c 100644
--- a/src/components/Atoms/TextField/index.js
+++ b/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;
diff --git a/src/components/Atoms/TextField/textField.css b/src/components/Atoms/TextField/textField.css
deleted file mode 100644
index 51ec71a..0000000
--- a/src/components/Atoms/TextField/textField.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.textField {
-  width: 800px;
-  height: 250px;
-  display: block;
-}
\ No newline at end of file
diff --git a/src/components/Molecules/Comments/index.js b/src/components/Molecules/Comments/index.js
index 665f46c..583591a 100644
--- a/src/components/Molecules/Comments/index.js
+++ b/src/components/Molecules/Comments/index.js
@@ -1,23 +1,47 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
 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>
   );
 };
diff --git a/src/components/Organisms/CommentArea/comments.css b/src/components/Organisms/CommentArea/comments.css
deleted file mode 100644
index b9cdf72..0000000
--- a/src/components/Organisms/CommentArea/comments.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.comment__form {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.comment {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  background-color: white;
-}
-
-.comment__avatar {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  border-top-right-radius: 50%;
-  border-bottom-right-radius: 50%;
-  background-color: ivory;
-}
-
-.comment__content {
-  background-color: white;
-  padding: 40px;
-  border-radius: 10%;
-}
-
-.comment__form__actions {
-  display: flex;
-  justify-content: center;
-  width: 800px;
-}
-
-.comment__form__actions__btn {
-  margin: 20px 5px;
-}
diff --git a/src/components/Organisms/CommentArea/index.js b/src/components/Organisms/CommentArea/index.js
index 950eb58..b197348 100644
--- a/src/components/Organisms/CommentArea/index.js
+++ b/src/components/Organisms/CommentArea/index.js
@@ -1,25 +1,40 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Comments from  '../../Molecules/Comments';
-import Button from '../../Atoms/Button';
+import {Button} from '../../Atoms/Button';
+import styled from 'styled-components';
 import TextField from '../../Atoms/TextField';
-import './comments.css';
 
 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}/>
-    <hr className="divider"/>
-    <form className="comment__form">
-      <TextField />
-      <div className="comment__form__actions">
-        <Button className="comment__form__actions__btn">Submit</Button>
-        <Button className="secondary comment__form__actions__btn">Decline</Button>
-      </div>
-    </form>
-  </section>
+      <Comments comments={comments}/>
+      <CommentForm onSubmit={()=>(console.log('submitted'))}>
+        <TextField />
+        <CommentFormActions>
+          <CommentFormActionsButton>Submit</CommentFormActionsButton>
+          <CommentFormActionsButton secondary>Decline</CommentFormActionsButton>
+        </CommentFormActions>
+      </CommentForm>
+    </section>
   );
 };
 
diff --git a/src/components/Organisms/Footer/index.js b/src/components/Organisms/Footer/index.js
index add1a32..3ecd82e 100644
--- a/src/components/Organisms/Footer/index.js
+++ b/src/components/Organisms/Footer/index.js
@@ -1,9 +1,15 @@
 import React from 'react';
+import styled from 'styled-components';
+
+const FooterStyle = styled.footer`
+ grid-area: footer;
+`
+
 const Footer = () => {
   return (
-  <footer className="footer">
+  <FooterStyle>
   made by <a href="https://github.com/Lelith/playground-styled" target="_blank" rel="noopener noreferrer" info="github repository"> Kathrin </a>
-  </footer>
+  </FooterStyle>
   );
 };
 
diff --git a/src/components/Organisms/Header/header.css b/src/components/Organisms/Header/header.css
deleted file mode 100644
index 3efa158..0000000
--- a/src/components/Organisms/Header/header.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.header {
-  background: rgba(224, 100, 230, 0.3);
-}
\ No newline at end of file
diff --git a/src/components/Organisms/Header/index.js b/src/components/Organisms/Header/index.js
index 2e8f60d..c934f3a 100644
--- a/src/components/Organisms/Header/index.js
+++ b/src/components/Organisms/Header/index.js
@@ -1,12 +1,16 @@
 import React from 'react';
 import Logo from './logo.png';
-import './header.css';
+import styled from 'styled-components';
 
+const HeaderStyle = styled.header`
+  grid-area: header;
+  background: rgba(224, 100, 230, 0.3);
+`;
 const Header = () => {
   return (
-  <header className="header">
+  <HeaderStyle>
     <img src={Logo} alt="Pawclub" className="header__logo"/>
-  </header>
+  </HeaderStyle>
   );
 };
 
diff --git a/src/components/Organisms/Profile/index.js b/src/components/Organisms/Profile/index.js
new file mode 100644
index 0000000..7540d06
--- /dev/null
+++ b/src/components/Organisms/Profile/index.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {SuperLike} from '../../Atoms/Button';
+import styled from 'styled-components';
+
+const Profile = (props) => {
+  const {image, imageAlt} = props;
+
+  const ProfileWrapper = styled.div`
+    position: relative;
+  `;
+
+  const ProfileButton = styled(SuperLike)`
+    position: absolute;
+    left: 20px;
+    bottom: 20px;
+  `
+  const ProfileImage = styled.img`
+    max-width: 800px;
+    display: inline-block;
+    border: 3px solid silver;
+    border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%;
+    position: relative;
+    &:before {
+      content: '';
+      border: 2px solid #353535;
+      display: block;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg);
+      border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%;
+    }
+  `
+  return (
+    <ProfileWrapper>
+      <ProfileImage src={image} alt={imageAlt} />
+      <ProfileButton>
+        <span aria-label="heart black" role="img">
+          🖤
+        </span>
+      </ProfileButton>
+    </ProfileWrapper>
+  );
+};
+
+Profile.propTypes = {
+  image: PropTypes.string,
+  imageAlt: PropTypes.string
+};
+
+Profile.defaultProps = {
+  image: '/images/placeholder.png',
+  imageAlt: 'Pawclub Member'
+};
+
+export default Profile;
diff --git a/src/components/index.js b/src/components/index.js
index 7a251f2..6d0e4a2 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,5 +1,4 @@
 import Avatar from './Atoms/Avatar';
-import Button from './Atoms/Button';
 import ContentList from './Atoms/ContentList';
 import Content from './Atoms/Content';
 import TextField from './Atoms/TextField';
@@ -7,15 +6,16 @@ import Comments from './Molecules/Comments';
 import CommentArea from './Organisms/CommentArea';
 import Header from './Organisms/Header';
 import Footer from './Organisms/Footer';
+import Profile from './Organisms/Profile';
 
 export {
   Avatar,
-  Button,
   ContentList,
   Content,
   TextField,
   Comments,
   CommentArea,
+  Profile,
   Header,
   Footer
 };
\ No newline at end of file
diff --git a/src/containers/Blog/blog.css b/src/containers/Blog/blog.css
deleted file mode 100644
index 3366f8b..0000000
--- a/src/containers/Blog/blog.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.blogContainer {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 20px;
-}
\ No newline at end of file
diff --git a/src/containers/Blog/index.js b/src/containers/Blog/index.js
index eb7f48c..1f035b1 100644
--- a/src/containers/Blog/index.js
+++ b/src/containers/Blog/index.js
@@ -1,24 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {ContentList, Content, CommentArea, Button } from '../../components';
-import './blog.css';
-import './profile.css';
+import {ContentList, Content, CommentArea, Profile} from '../../components';
+
+import styled from 'styled-components'
+
+const BlogContainer = styled.section`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+`
 const Blog = (props) => {
   const { content } = props;
   return (
-    <section className="blogContainer">
-      <div className="profile">
-        <img className="profile__image" src={content.image} alt={content.imageAlt} />
-        <Button className="superlike profile__button">
-          <span aria-label="heart black" role="img">
-            🖤
-          </span>
-        </Button>
-      </div>
+    <BlogContainer>
+      <Profile image = {content.image} imageAlt={content.imageAlt}/>
       <ContentList listElements={content.list} />
       <Content blogText={content.blogText} />
       <CommentArea comments={content.comments}/>
-    </section>
+    </BlogContainer>
   );
 };
 
diff --git a/src/containers/Blog/profile.css b/src/containers/Blog/profile.css
deleted file mode 100644
index a314cdd..0000000
--- a/src/containers/Blog/profile.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.profile {
-  position: relative;
-}
-
-.profile__button {
-  position: absolute;
-  left: 20px;
-  bottom: 20px;
-}
-.profile__image {
-  max-width: 800px;
-  display: inline-block;
-  border: 3px solid silver;
-  border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%;
-  position: relative;
-}
-
-.profile__image::before {
-    content: '';
-    border: 2px solid #353535;
-    display: block;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg);
-    border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%;
-}
\ No newline at end of file
diff --git a/src/grid.css b/src/grid.css
deleted file mode 100644
index e4063ab..0000000
--- a/src/grid.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.grid {
-  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"
-}
-
-.header {
-  grid-area: header;
-}
-
-.footer {
-  grid-area: footer;
-}
-
-.main {
-  grid-area: main;
-}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index 4a1df4d..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}
diff --git a/src/index.js b/src/index.js
index 87d1be5..82c1a6b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
diff --git a/yarn.lock b/yarn.lock
index e5eceb2..c68688f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -814,6 +814,23 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-9.0.1.tgz#c27b391d8457d1e893f1eddeaf5e5412d12ffbb5"
   integrity sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA==
 
+"@emotion/is-prop-valid@^0.8.1":
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.2.tgz#b9692080da79041683021fcc32f96b40c54c59dc"
+  integrity sha512-ZQIMAA2kLUWiUeMZNJDTeCwYRx1l8SQL0kHktze4COT22occKpDML1GDUXP5/sxhOMrZO8vZw773ni4H5Snrsg==
+  dependencies:
+    "@emotion/memoize" "0.7.2"
+
+"@emotion/memoize@0.7.2":
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.2.tgz#7f4c71b7654068dfcccad29553520f984cc66b30"
+  integrity sha512-hnHhwQzvPCW1QjBWFyBtsETdllOM92BfrKWbUTmh9aeOlcVOiXvlPsK4104xH8NsaKfg86PTFsWkueQeUfMA/w==
+
+"@emotion/unitless@^0.7.0":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677"
+  integrity sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==
+
 "@hapi/address@2.x.x":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.0.tgz#d86223d40c73942cc6151838d9f264997e6673f9"
@@ -1844,6 +1861,21 @@ babel-plugin-named-asset-import@^0.3.3:
   resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.3.tgz#9ba2f3ac4dc78b042651654f07e847adfe50667c"
   integrity sha512-1XDRysF4894BUdMChT+2HHbtJYiO7zx5Be7U6bT8dISy7OdyETMGIAQBMPQCsY1YRf0xcubwnKKaDr5bk15JTA==
 
+"babel-plugin-styled-components@>= 1":
+  version "1.10.6"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz#f8782953751115faf09a9f92431436912c34006b"
+  integrity sha512-gyQj/Zf1kQti66100PhrCRjI5ldjaze9O0M3emXRPAN80Zsf8+e1thpTpaXJXVHXtaM4/+dJEgZHyS9Its+8SA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0"
+    "@babel/helper-module-imports" "^7.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.11"
+
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
+
 babel-plugin-syntax-object-rest-spread@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
@@ -2245,6 +2277,11 @@ camelcase@^5.0.0, camelcase@^5.2.0, camelcase@^5.3.1:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
+camelize@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
+  integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
+
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -2739,6 +2776,11 @@ css-blank-pseudo@^0.1.4:
   dependencies:
     postcss "^7.0.5"
 
+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+  integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
+
 css-color-names@0.0.4, css-color-names@^0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -2809,6 +2851,15 @@ css-select@^2.0.0:
     domutils "^1.7.0"
     nth-check "^1.0.2"
 
+css-to-react-native@^2.2.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.3.2.tgz#e75e2f8f7aa385b4c3611c52b074b70a002f2e7d"
+  integrity sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^3.3.0"
+
 css-tree@1.0.0-alpha.29:
   version "1.0.0-alpha.29"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.29.tgz#3fa9d4ef3142cbd1c301e7664c1f352bd82f5a39"
@@ -5045,6 +5096,11 @@ is-typedarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
+is-what@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.3.1.tgz#79502181f40226e2d8c09226999db90ef7c1bcbe"
+  integrity sha512-seFn10yAXy+yJlTRO+8VfiafC+0QJanGLMPTBWLrJm/QPauuchy0UXh8B6H5o9VA8BAzk0iYievt6mNp6gfaqA==
+
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -5979,6 +6035,11 @@ mem@^4.0.0:
     mimic-fn "^2.0.0"
     p-is-promise "^2.0.0"
 
+memoize-one@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
+  integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
+
 memory-fs@^0.4.0, memory-fs@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -5987,6 +6048,13 @@ memory-fs@^0.4.0, memory-fs@^0.4.1:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
+merge-anything@^2.2.4:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/merge-anything/-/merge-anything-2.4.1.tgz#e9bccaec1e49ec6cb5f77ca78c5770d1a35315e6"
+  integrity sha512-dYOIAl9GFCJNctSIHWOj9OJtarCjsD16P8ObCl6oxrujAG+kOvlwJuOD9/O9iYZ9aTi1RGpGTG9q9etIvuUikQ==
+  dependencies:
+    is-what "^3.3.1"
+
 merge-deep@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/merge-deep/-/merge-deep-3.0.2.tgz#f39fa100a4f1bd34ff29f7d2bf4508fbb8d83ad2"
@@ -7714,7 +7782,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.3"
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.4, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -7928,7 +7996,7 @@ react-error-overlay@^6.0.1:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.1.tgz#b8d3cf9bb991c02883225c48044cb3ee20413e0f"
   integrity sha512-V9yoTr6MeZXPPd4nV/05eCBvGH9cGzc52FN8fs0O0TVQ3HYYf1n7EgZVtHbldRq5xU9zEzoXIITjYNIfxDDdUw==
 
-react-is@^16.8.1, react-is@^16.8.4:
+react-is@^16.6.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.9.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
   integrity sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==
@@ -9031,6 +9099,25 @@ style-loader@1.0.0:
     loader-utils "^1.2.3"
     schema-utils "^2.0.1"
 
+styled-components@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.3.2.tgz#4ca81918c812d3006f60ac5fdec7d6b64a9509cc"
+  integrity sha512-NppHzIFavZ3TsIU3R1omtddJ0Bv1+j50AKh3ZWyXHuFvJq1I8qkQ5mZ7uQgD89Y8zJNx2qRo6RqAH1BmoVafHw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.0.0"
+    "@emotion/is-prop-valid" "^0.8.1"
+    "@emotion/unitless" "^0.7.0"
+    babel-plugin-styled-components ">= 1"
+    css-to-react-native "^2.2.2"
+    memoize-one "^5.0.0"
+    merge-anything "^2.2.4"
+    prop-types "^15.5.4"
+    react-is "^16.6.0"
+    stylis "^3.5.0"
+    stylis-rule-sheet "^0.0.10"
+    supports-color "^5.5.0"
+
 stylehacks@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
@@ -9040,12 +9127,22 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
+stylis-rule-sheet@^0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
+  integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==
+
+stylis@^3.5.0:
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
+  integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
   integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
 
-supports-color@^5.3.0:
+supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==

From 5a420a0f8d29a6196e1c88abec92a6b0f5e474bd Mon Sep 17 00:00:00 2001
From: Kathrin Holzmann <lelith@gmx.de>
Date: Sun, 15 Sep 2019 07:57:16 +0200
Subject: [PATCH 6/9] use styled macro babe

---
 package.json                                  | 6 ++++--
 src/App.js                                    | 2 +-
 src/components/Atoms/Avatar/index.js          | 2 +-
 src/components/Atoms/Button/index.js          | 2 +-
 src/components/Molecules/Comments/index.js    | 2 +-
 src/components/Organisms/CommentArea/index.js | 2 +-
 src/components/Organisms/Footer/index.js      | 2 +-
 src/components/Organisms/Header/index.js      | 2 +-
 src/components/Organisms/Profile/index.js     | 2 +-
 yarn.lock                                     | 2 +-
 10 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 6a65a81..b21016e 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,7 @@
     "classnames": "^2.2.6",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "react-scripts": "3.1.1",
-    "styled-components": "^4.3.2"
+    "react-scripts": "3.1.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -29,5 +28,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "babel-plugin-macros": "^2.6.1"
   }
 }
diff --git a/src/App.js b/src/App.js
index e576b51..f4fb7d4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import BlogPostContent from './BlogPostContent';
 import { Header, Footer } from './components';
 import Blog from './containers/Blog';
diff --git a/src/components/Atoms/Avatar/index.js b/src/components/Atoms/Avatar/index.js
index 8cbbd34..29247f5 100644
--- a/src/components/Atoms/Avatar/index.js
+++ b/src/components/Atoms/Avatar/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 const Avatar = (props) => {
   const { image, altText } = props;
diff --git a/src/components/Atoms/Button/index.js b/src/components/Atoms/Button/index.js
index 576d5cd..32a01d4 100644
--- a/src/components/Atoms/Button/index.js
+++ b/src/components/Atoms/Button/index.js
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 export const Button = styled.button`
   background:  ${props => props.secondary ? "#fff" : "#5CBCFF"};
diff --git a/src/components/Molecules/Comments/index.js b/src/components/Molecules/Comments/index.js
index 583591a..ccd4420 100644
--- a/src/components/Molecules/Comments/index.js
+++ b/src/components/Molecules/Comments/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import Avatar from './../../Atoms/Avatar';
 
 const Comments = (props) => {
diff --git a/src/components/Organisms/CommentArea/index.js b/src/components/Organisms/CommentArea/index.js
index b197348..3a24052 100644
--- a/src/components/Organisms/CommentArea/index.js
+++ b/src/components/Organisms/CommentArea/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Comments from  '../../Molecules/Comments';
 import {Button} from '../../Atoms/Button';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import TextField from '../../Atoms/TextField';
 
 const CommentArea = (props) => {
diff --git a/src/components/Organisms/Footer/index.js b/src/components/Organisms/Footer/index.js
index 3ecd82e..836de18 100644
--- a/src/components/Organisms/Footer/index.js
+++ b/src/components/Organisms/Footer/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 const FooterStyle = styled.footer`
  grid-area: footer;
diff --git a/src/components/Organisms/Header/index.js b/src/components/Organisms/Header/index.js
index c934f3a..63c967b 100644
--- a/src/components/Organisms/Header/index.js
+++ b/src/components/Organisms/Header/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Logo from './logo.png';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 const HeaderStyle = styled.header`
   grid-area: header;
diff --git a/src/components/Organisms/Profile/index.js b/src/components/Organisms/Profile/index.js
index 7540d06..e97258f 100644
--- a/src/components/Organisms/Profile/index.js
+++ b/src/components/Organisms/Profile/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {SuperLike} from '../../Atoms/Button';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 const Profile = (props) => {
   const {image, imageAlt} = props;
diff --git a/yarn.lock b/yarn.lock
index c68688f..112b4ac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1847,7 +1847,7 @@ babel-plugin-jest-hoist@^24.9.0:
   dependencies:
     "@types/babel__traverse" "^7.0.6"
 
-babel-plugin-macros@2.6.1:
+babel-plugin-macros@2.6.1, babel-plugin-macros@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.6.1.tgz#41f7ead616fc36f6a93180e89697f69f51671181"
   integrity sha512-6W2nwiXme6j1n2erPOnmRiWfObUhWH7Qw1LMi9XZy8cj+KtESu3T6asZvtk5bMQQjX8te35o7CFueiSdL/2NmQ==

From 0464255c05e542a4562d8b7e1a776f7b9a4cd510 Mon Sep 17 00:00:00 2001
From: Kathrin Holzmann <lelith@gmx.de>
Date: Mon, 16 Sep 2019 13:04:31 +0200
Subject: [PATCH 7/9] keep styled components itself

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b21016e..5915cdf 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
     "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",

From a2866a66a03505208ffbb2946f9f48838fb018e0 Mon Sep 17 00:00:00 2001
From: Kathrin Holzmann <lelith@gmx.de>
Date: Sun, 22 Sep 2019 09:49:46 +0200
Subject: [PATCH 8/9] Wrappocalypse

---
 src/components/Molecules/Profile/index.js | 20 ++++++++++++++++++++
 src/containers/Blog/index.js              |  8 +++++++-
 src/containers/Wrapper.js                 |  6 ++++++
 src/containers/WrapperComponent.js        | 18 ++++++++++++++++++
 4 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Molecules/Profile/index.js
 create mode 100644 src/containers/Wrapper.js
 create mode 100644 src/containers/WrapperComponent.js

diff --git a/src/components/Molecules/Profile/index.js b/src/components/Molecules/Profile/index.js
new file mode 100644
index 0000000..8c82773
--- /dev/null
+++ b/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;
diff --git a/src/containers/Blog/index.js b/src/containers/Blog/index.js
index 1f035b1..aaebf29 100644
--- a/src/containers/Blog/index.js
+++ b/src/containers/Blog/index.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {ContentList, Content, CommentArea, Profile} from '../../components';
+import WrapperComponent from '../WrapperComponent';
 
-import styled from 'styled-components'
+import styled from 'styled-components/macro';
 
 const BlogContainer = styled.section`
   display: flex;
@@ -11,10 +12,15 @@ const BlogContainer = styled.section`
   align-items: center;
   padding: 20px;
 `
+const Wrapper = styled(WrapperComponent)`
+  background-color: SkyBlue;
+`;
+
 const Blog = (props) => {
   const { content } = props;
   return (
     <BlogContainer>
+      <Wrapper headline="hello">CSSConf Budapest!</Wrapper>
       <Profile image = {content.image} imageAlt={content.imageAlt}/>
       <ContentList listElements={content.list} />
       <Content blogText={content.blogText} />
diff --git a/src/containers/Wrapper.js b/src/containers/Wrapper.js
new file mode 100644
index 0000000..818be2a
--- /dev/null
+++ b/src/containers/Wrapper.js
@@ -0,0 +1,6 @@
+import styled from 'styled-components/macro';
+
+const Wrapper = styled.div`
+  border: solid 1px purple
+`
+export default Wrapper
\ No newline at end of file
diff --git a/src/containers/WrapperComponent.js b/src/containers/WrapperComponent.js
new file mode 100644
index 0000000..c0cd05e
--- /dev/null
+++ b/src/containers/WrapperComponent.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Wrapper from './Wrapper';
+import styled from 'styled-components/macro';
+
+const WrapperComponent = ({headline, children}) => {
+
+const Headline = styled.h3`
+  color: Plum;
+`
+  return (
+      <Wrapper>
+        <Headline>{headline}</Headline>
+        {children}
+      </Wrapper>
+  );
+};
+export default WrapperComponent;

From 4143c3e139c82fa0480ab149bd24101b458f467e Mon Sep 17 00:00:00 2001
From: Kathrin Holzmann <lelith@gmx.de>
Date: Sun, 22 Sep 2019 10:01:42 +0200
Subject: [PATCH 9/9] Wrapocalypse Pt.2

---
 src/containers/Blog/index.js       | 1 +
 src/containers/Wrapper.js          | 2 +-
 src/containers/WrapperComponent.js | 9 ++++++---
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/containers/Blog/index.js b/src/containers/Blog/index.js
index aaebf29..dbb1f4c 100644
--- a/src/containers/Blog/index.js
+++ b/src/containers/Blog/index.js
@@ -14,6 +14,7 @@ const BlogContainer = styled.section`
 `
 const Wrapper = styled(WrapperComponent)`
   background-color: SkyBlue;
+  margin: 25px;
 `;
 
 const Blog = (props) => {
diff --git a/src/containers/Wrapper.js b/src/containers/Wrapper.js
index 818be2a..2b523e4 100644
--- a/src/containers/Wrapper.js
+++ b/src/containers/Wrapper.js
@@ -1,6 +1,6 @@
 import styled from 'styled-components/macro';
 
 const Wrapper = styled.div`
-  border: solid 1px purple
+  border: solid 1px purple;
 `
 export default Wrapper
\ No newline at end of file
diff --git a/src/containers/WrapperComponent.js b/src/containers/WrapperComponent.js
index c0cd05e..6c282a0 100644
--- a/src/containers/WrapperComponent.js
+++ b/src/containers/WrapperComponent.js
@@ -3,16 +3,19 @@ import PropTypes from 'prop-types';
 import Wrapper from './Wrapper';
 import styled from 'styled-components/macro';
 
-const WrapperComponent = ({headline, children}) => {
+const WrapperComponent = ({headline, children, ...other}) => {
 
+const StyledWrapper = styled(Wrapper)`
+  display: flex;
+`
 const Headline = styled.h3`
   color: Plum;
 `
   return (
-      <Wrapper>
+      <StyledWrapper {...other}>
         <Headline>{headline}</Headline>
         {children}
-      </Wrapper>
+      </StyledWrapper>
   );
 };
 export default WrapperComponent;