add buttons, buttonstoolbar

kivi-cars/src/components/Button/leftBtn.js

@@ -0,0 +1,13 @@
+import './button.css'
+import { ReactComponent as ArrowLeft } from '../../assets/arrow-left.svg';
+
+const leftBtn = (props) => {
+    return ( 
+        <div className='left-button'>
+            <ArrowLeft/>
+        </div>
+        
+     );
+}
+
+export default leftBtn

kivi-cars/src/components/Button/rightBtn.js

@@ -0,0 +1,10 @@
+import './button.css'
+import { ReactComponent as ArrowRight } from '../../assets/arrow-right.svg';
+
+const rightBtn = (props) => {
+    return ( 
+        <ArrowRight/>
+     );
+}
+
+export default rightBtn

kivi-cars/src/components/ButtonsToolbar/ButtonsToolbar.css

@@ -0,0 +1,20 @@
+.buttons-toolbar {
+    display: flex;
+    justify-content: space-between;
+}
+
+.left-group {
+    display: flex;
+    flex: 1;
+    justify-content: flex-start;
+}
+
+.right-group {
+    display: flex;
+    flex: 1;
+    justify-content: flex-end;
+}
+
+
+
+

kivi-cars/src/components/ButtonsToolbar/ButtonsToolbar.js

@@ -0,0 +1,22 @@
+import './ButtonsToolbar.css';
+import ArrowLeft from '../Button/leftBtn';
+import ArrowRigh from '../Button/rightBtn';
+
+
+const ButtonsToolbar = (props) => {
+    return (
+        <div className='buttons-toolbar'>
+            <div className='left-group'>
+                <ArrowLeft />
+            </div>
+            <div className='right-group'>
+                <ArrowRigh/>
+            </div>
+        </div>
+    )
+} 
+
+export default ButtonsToolbar
+
+
+

kivi-cars/src/components/Header/Header.css

@@ -0,0 +1,26 @@
+header {
+    width: 100%;
+    height: 70px;
+    background-color: #02adba;
+    color: #fff;
+    text-align: center;
+    margin-bottom: 10px;
+}
+
+.title {
+    resize: both;
+    padding: 20px;
+    font-size: 25px;
+}
+
+  @media screen and (max-width: 800px) {
+    .title {
+        font-size: 20px;
+    }
+  }
+
+@media screen and (max-width: 300px) {
+    .title {
+        font-size: 17px;
+    }
+  }

kivi-cars/src/components/Header/Header.js

@@ -0,0 +1,12 @@
+import './Header.css'
+
+
+const Header = (props) => {
+    return (
+        <header>
+            <h3 className="title">{props.header}</h3>
+        </header>
+    )
+}
+
+export default Header

kivi-cars/src/components/Info/Info.css

@@ -1,10 +0,0 @@
-nav {
-    width: 100%;
-    min-width: 280px;
-    background-color: #02adba;
-    color: #fff;
-    height: 54px;
-    line-height: 54px;
-    text-align: center;
-}
-

kivi-cars/src/components/Info/Info.js

@@ -1,12 +0,0 @@
-import './Info.css'
-
-
-const Info = (props) => {
-    return (
-        <nav>
-            <h3 className="title">{props.info}</h3>
-        </nav>
-    )
-}
-
-export default Info