edit css categorybtns

add standard button

See merge request saburly/marketalarm/kivi-za-auta-react!8

kivi-cars/src/assets/arrow-left.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>chevron-left</title>
+<path d="M11 16l13-13v-3l-16 16 16 16v-3l-13-13z"></path>
+</svg>

kivi-cars/src/assets/arrow-right.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>chevron-right</title>
+<path d="M21 16l-13 13v3l16-16-16-16v3l13 13z"></path>
+</svg>

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

@@ -0,0 +1,12 @@
+import './button.css'
+
+const StandardBtn = (props) => {
+    return (
+        <div className='standard-btn'>
+
+           <button className='standardBtn'>{props.title}</button>
+        </div>
+    )
+}
+
+export default StandardBtn

kivi-cars/src/components/Button/button.css

@@ -0,0 +1,56 @@
+.standard-btn {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.standardBtn {
+    width:300px;
+    background-color: #02ADBA;
+    font-size: 15px;
+    padding: 7px 20px 7px 20px;
+    color: white;
+    border: #02ADBA;
+}
+
+.standardBtn:hover {
+    background-color:#3eced8 ;
+    color: white;
+}
+
+.left-button {
+    padding: 5px;
+}
+.left-button:hover {
+    background-color:#9eedf3; 
+}
+
+.right-button {
+    padding: 5px;
+}
+.right-button:hover {
+    background-color:#9eedf3;
+}
+
+@media screen and (max-width: 700px) {
+    .standardBtn {
+        width: 200px;
+        background-color: #02ADBA;
+        font-size: 15px;
+        padding: 7px 20px 7px 20px;
+        color: white;
+        border: #02ADBA;
+    }
+  }
+
+  
+
+  @media screen and (max-width: 400px) {
+    .standardBtn {
+        width: 150px;
+        background-color: #02ADBA;
+        font-size: 15px;
+        padding: 7px 20px 7px 20px;
+        color: white;
+        border: #02ADBA;
+    }
+  }  

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

@@ -0,0 +1,12 @@
+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,13 @@
+import './button.css'
+import { ReactComponent as ArrowRight } from '../../assets/arrow-right.svg';
+
+const rightBtn = (props) => {
+    return ( 
+        <div className='right-button'>
+            <ArrowRight/>
+        </div>
+        
+     );
+}
+
+export default rightBtn

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

@@ -0,0 +1,22 @@
+.buttons-toolbar {
+    display: flex;
+    justify-content: space-between;
+}
+
+.left-group {
+    padding-left: 10px;
+    display: flex;
+    flex: 1;
+    justify-content: flex-start;
+}
+
+.right-group {
+    padding-right: 10px;
+    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/CategoryBtns/categorybtns.js

@@ -0,0 +1,19 @@
+import './categorybtns.css'
+import StandardBtn from '../Button/StandardBtn'
+
+var auto = 'AUTO';
+var motor = 'MOTOR';
+var kamion = 'KAMION';
+
+const CategoryBtns = (props) => {
+    return ( 
+        <div className='category-btns'>
+            <StandardBtn title={auto}/>
+            <StandardBtn title={motor}/>
+            <StandardBtn title={kamion}/>
+        </div>
+    )
+
+}
+
+export default CategoryBtns

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: 700px) {
+    .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

kivi-cars/src/containers/App.js

@@ -1,16 +1,20 @@
 import './App.css';
 import React from 'react';
 import Filters from '../components/Filters';
-import Info from '../components/Info/Info';
-
-
+import Header from '../components/Header/Header';
+import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar';
+import CategoryBtns from '../components/CategoryBtns/categorybtns'
 function App() {
 
-  const info = 'Dobrodosli'
+  const naslov = 'Dobrodosli na stranicu kivi!'
+
 
   return (
     <div className="App">
-      <Info info={info}/>
+      <Header header={naslov}/>
+      <ButtonsToolbar/>
+      <CategoryBtns/>
+      
     </div>
  
   );