Comment section

src/components/CommentsSection/CommentsSection.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import './CommentsSection.scss';
+import burger from '../../assets/icons/burger.svg';
+import burger2 from '../../assets/icons/burger-2.svg';
+
+const CommentsSection = (props) => {
+    return(
+        <div className="comments">
+        <h1 className="Header">Komentarze</h1>
+        <div className="Comment">  
+            <h3 className="Username">Dominik</h3>
+            <div className="burgers">
+                <img src={burger2} alt="icon-1" className="burger" />
+                <img src={burger2} alt="icon-1" className="burger" />
+                <img src={burger} alt="icon-1" className="burger" />
+                <img src={burger} alt="icon-1" className="burger" />
+                <img src={burger} alt="icon-1" className="burger" />
+            </div>
+            <span className="date">20-09-2019</span>
+            <p className="Commenttext" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua.</p>
+        </div>
+        <div className="Comment">  
+            <h3 className="Username">Dominik</h3>
+            <div className="burgers">
+                <img src={burger2} alt="icon-1" className="burger" />
+                <img src={burger2} alt="icon-1" className="burger" />
+                <img src={burger2} alt="icon-1" className="burger" />
+                <img src={burger2} alt="icon-1" className="burger" />
+                <img src={burger} alt="icon-1" className="burger" />
+            </div>
+            <span className="date">20-09-2019</span>
+            <p className="Commenttext" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua.</p>
+        </div>
+        <div className="Comment">
+            <h3>Zostaw komentarz:</h3>    
+                <input className="name" placeholder="Imię"></input>
+                <div className="burgers">
+                    <img src={burger} alt="icon-1" className="burger" />
+                    <img src={burger} alt="icon-1" className="burger" />
+                    <img src={burger} alt="icon-1" className="burger" />
+                    <img src={burger} alt="icon-1" className="burger" />
+                    <img src={burger} alt="icon-1" className="burger" />
+                </div>
+            <textarea className="Area" placeholder="Remember, be nice!" rows="8"></textarea>
+            <button type="submit" className="btn">Wyślij</button>
+        </div>
+        </div>
+    );
+};
+export default CommentsSection;

src/components/CommentsSection/CommentsSection.scss

@@ -0,0 +1,96 @@
+@import '../../assets/styles/_colors.scss';
+
+
+.comments {
+
+    margin: 0 ;
+
+}
+.header {
+    color: $accent;
+    margin: 0 0 0 15px;
+}
+.Comment {
+    position: relative;
+    display: block;
+    width: 100%;
+    padding: 5%;
+    border-radius: 5px;
+    background-color: $comment;
+    margin:5% 0;
+
+
+}
+.burgers {
+    padding: 0 5% ;
+    padding-top: 2.5%;
+    width: 60%;
+
+}
+.name+.burgers{
+    float: right;
+    padding: auto 0;
+    padding-right: 0;
+    text-align: right;
+
+
+}
+.burger {
+    margin: 0 1%;
+
+}
+.Commenttext {
+    padding: 5%;
+    background:$comment;  
+}
+.date {
+    position: absolute;
+    right: 4px;
+    top: 4px;
+
+}
+.Username {
+    position: relative;
+    padding: 0 5%;
+}
+
+.Area {
+    position: relative;
+    width: 100%;
+    height: auto;
+    margin: 0 auto;
+    font-family: 'Montserrat', sans-serif;
+    padding: 5%;
+    resize: none;
+    outline: none;
+    border-radius: 5px;
+    border: none;   
+}
+.name {
+    padding:2.5%;
+    margin: 2.5% 0;
+    border-radius: 15px;
+    width: 40%;
+    border: none;
+    font-size: 16px;
+
+}
+.btn {
+    position: relative;
+    top:5px;
+    width: 100%;
+    border-radius: 15px;
+    background-color: $accent;
+    font-family: 'Montserrat', sans-serif;
+    color: $white;
+    font-weight: 500;
+    font-size: 16px;
+    border: none;
+    padding: 5px 0 5px;
+}
+::-webkit-input-placeholder { 
+    font-family: 'Montserrat', sans-serif;
+    font-size: 16px;
+
+
+  }

src/pages/RestaurantPageInfo/RestaurantPageInfo.js

@@ -5,6 +5,7 @@ import RestaurantPicture from '../../assets/images/restaurant.jpg';
 import './RestaurantPageInfo.scss';
 import BackButton from '../../components/BackButton/BackButton';
 import MenuBlock from '../../components/MenuBlock/MenuBlock';
+import CommentsSection from '../../components/CommentsSection/CommentsSection';
 
 export default function RestaurantInfoPage() {
   return (
@@ -28,9 +29,7 @@ export default function RestaurantInfoPage() {
           <OpeningHours />
         </div>
         <MenuBlock />
-        <div className="comments">
-          <h3>Komentarze</h3>
-        </div>
+          <CommentsSection />
       </div>
 
       <BackButton />

src/pages/RestaurantPageInfo/RestaurantPageInfo.scss

@@ -7,7 +7,7 @@
 
 .restaurant-info-content {
   background-color: $white;
-  padding: 40px;
+  padding: 15px;
   border-radius: 20px 20px 0 0;
   position: relative;
   top: -25px;