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/Filters.css

@@ -1,28 +1,4 @@
-*{
-    margin: 0;
-    padding: 0;
-}
-
-nav {
-    width: 100%;
-    background-color: #02adba;
-    color: #fff;
-    height: 54px;
-    line-height: 54px;
-    text-align: center;
-}
-
-
 @media only screen and (min-width: 601px) {
-    nav {
-        text-align: center;
-        width: 100%;
-        background-color: #02adba;
-        color: #fff;
-        height: 64px;
-        line-height: 64px;
-    }
-
     .container {
         width: 80%;
         display: flex;

kivi-cars/src/components/Filters.js

@@ -10,10 +10,6 @@ const Filters = () => {
 
 
     return(
-        <div>
-            <nav>
-                <h3 className="title">Filteri za pretrazivanje</h3>
-            </nav>
             <div className="container">
                 <div className="filters-tabs">
                     <ul className="filters-links">
@@ -36,7 +32,6 @@ const Filters = () => {
                 <div className="container-advanced">
                     
                 </div>
-            </div>
 
 
         </div>

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/containers/App.css

@@ -1,3 +1,9 @@
+*{
+  padding: 0;
+  margin: 0;
+}
+
+
 .App{
   display: flex;
   flex-direction: column;

kivi-cars/src/containers/App.js

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