From 992cb1756a6fa7e1557ff2def541a1ecc6a1fed6 Mon Sep 17 00:00:00 2001
From: msosic97 <msosic97@gmail.com>
Date: Mon, 14 Mar 2022 12:14:03 +0100
Subject: [PATCH 1/2] add category btns

---
 .../src/components/Button/StandardBtn.js      |  3 +--
 kivi-cars/src/components/Button/button.css    |  3 ++-
 .../components/CategoryBtns/categorybtns.css  |  0
 .../components/CategoryBtns/categorybtns.js   | 19 +++++++++++++++++++
 kivi-cars/src/containers/App.js               |  8 ++++----
 5 files changed, 26 insertions(+), 7 deletions(-)
 create mode 100644 kivi-cars/src/components/CategoryBtns/categorybtns.css
 create mode 100644 kivi-cars/src/components/CategoryBtns/categorybtns.js

diff --git a/kivi-cars/src/components/Button/StandardBtn.js b/kivi-cars/src/components/Button/StandardBtn.js
index ec7c55c..6b77082 100644
--- a/kivi-cars/src/components/Button/StandardBtn.js
+++ b/kivi-cars/src/components/Button/StandardBtn.js
@@ -1,11 +1,10 @@
 import './button.css'
 
-var title = "DALJE";
 const StandardBtn = (props) => {
     return (
         <div className='standard-btn'>
 
-           <button className='standardBtn'>{title}</button>
+           <button className='standardBtn'>{props.title}</button>
         </div>
     )
 }
diff --git a/kivi-cars/src/components/Button/button.css b/kivi-cars/src/components/Button/button.css
index fc51116..1d671ef 100644
--- a/kivi-cars/src/components/Button/button.css
+++ b/kivi-cars/src/components/Button/button.css
@@ -1,9 +1,10 @@
 .standard-btn {
     text-align: center;
+    margin-bottom: 20px;
 }
 
 .standardBtn {
-    width: fit-content;
+    width: 150px;
     background-color: #02ADBA;
     font-size: 15px;
     padding: 7px 20px 7px 20px;
diff --git a/kivi-cars/src/components/CategoryBtns/categorybtns.css b/kivi-cars/src/components/CategoryBtns/categorybtns.css
new file mode 100644
index 0000000..e69de29
diff --git a/kivi-cars/src/components/CategoryBtns/categorybtns.js b/kivi-cars/src/components/CategoryBtns/categorybtns.js
new file mode 100644
index 0000000..9c3042f
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/kivi-cars/src/containers/App.js b/kivi-cars/src/containers/App.js
index a3425fd..ebd4ddf 100644
--- a/kivi-cars/src/containers/App.js
+++ b/kivi-cars/src/containers/App.js
@@ -3,17 +3,17 @@ import React from 'react';
 import Filters from '../components/Filters';
 import Header from '../components/Header/Header';
 import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar';
-import StandardBtn from '../components/Button/StandardBtn'
+import CategoryBtns from '../components/CategoryBtns/categorybtns'
 function App() {
 
-  const info = 'Dobrodosli na stranicu kivi!'
+  const naslov = 'Dobrodosli na stranicu kivi!'
 
 
   return (
     <div className="App">
-      <Header header={info}/>
+      <Header header={naslov}/>
       <ButtonsToolbar/>
-      <StandardBtn/>
+      <CategoryBtns/>
       
     </div>
  

From a738f089058f73e9bec2142ca50053effc311aae Mon Sep 17 00:00:00 2001
From: msosic97 <msosic97@gmail.com>
Date: Mon, 14 Mar 2022 12:22:36 +0100
Subject: [PATCH 2/2] edit css categorybtns

---
 kivi-cars/src/components/Button/button.css | 33 ++++++++++++++++++----
 kivi-cars/src/components/Header/Header.css |  2 +-
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/kivi-cars/src/components/Button/button.css b/kivi-cars/src/components/Button/button.css
index 1d671ef..09472cb 100644
--- a/kivi-cars/src/components/Button/button.css
+++ b/kivi-cars/src/components/Button/button.css
@@ -4,7 +4,7 @@
 }
 
 .standardBtn {
-    width: 150px;
+    width:300px;
     background-color: #02ADBA;
     font-size: 15px;
     padding: 7px 20px 7px 20px;
@@ -21,13 +21,36 @@
     padding: 5px;
 }
 .left-button:hover {
-    background-color:#9eedf3 
+    background-color:#9eedf3; 
 }
 
 .right-button {
     padding: 5px;
 }
 .right-button:hover {
-    background-color:#9eedf3 
- 
-}
\ No newline at end of file
+    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;
+    }
+  }  
\ No newline at end of file
diff --git a/kivi-cars/src/components/Header/Header.css b/kivi-cars/src/components/Header/Header.css
index f06f163..520e4c1 100644
--- a/kivi-cars/src/components/Header/Header.css
+++ b/kivi-cars/src/components/Header/Header.css
@@ -13,7 +13,7 @@ header {
     font-size: 25px;
 }
 
-  @media screen and (max-width: 800px) {
+  @media screen and (max-width: 700px) {
     .title {
         font-size: 20px;
     }