edit css categorybtns

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>
     )
 }

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

@@ -1,9 +1,10 @@
 .standard-btn {
     text-align: center;
+    margin-bottom: 20px;
 }
 
 .standardBtn {
-    width: fit-content;
+    width:300px;
     background-color: #02ADBA;
     font-size: 15px;
     padding: 7px 20px 7px 20px;
@@ -20,13 +21,36 @@
     padding: 5px;
 }
 .left-button:hover {
-    background-color:#9eedf3 
+    background-color:#9eedf3; 
 }
 
 .right-button {
     padding: 5px;
 }
 .right-button:hover {
-    background-color:#9eedf3 
- 
-}
+    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/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

@@ -13,7 +13,7 @@ header {
     font-size: 25px;
 }
 
-  @media screen and (max-width: 800px) {
+  @media screen and (max-width: 700px) {
     .title {
         font-size: 20px;
     }

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>