CRUD Place Button and Header components done

crud-place/src/App.js

@@ -1,3 +1,4 @@
+import Button from "./components/Button/Button";
 import Header from "./components/Header/Header";
 
 function App() {
@@ -5,6 +6,15 @@ function App() {
     <Header
       color={'rgb(123, 169, 255)'}
       text={'CRUD Place'}
+      additionalChildren={
+        <Button
+          text={'Back to Store'}
+          link={'http://www.google.com'}
+
+          color={'#fff'}
+          hoverColor={'#ccc'}
+        />
+      }
     />
   );
 }

crud-place/src/components/Button/Button.jsx

@@ -1,16 +1,47 @@
 import React from 'react'
+import styled, {css} from 'styled-components'
 
-const Button = ({text, action}, props) => {
+const Button = (props) => {
+
+    const LinkStyle = styled.a`
+
+        height: 6vh;
+        width: 15vw;
+
+        padding: 1vh 1vw 1vh 1vw;
+        margin: 0px 0px 1vh 0px;
+
+        border: none;
+        border-radius: 5px;
+
+        background-color: ${props.color};
+        transition: 0.4s ease-in-out;
+
+        color: #000;
+        font-weight: bold;
+        text-decoration: none;
+        
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &:hover {
+            
+            transition: 0.4s ease-in-out;
+            background-color: ${props.hoverColor};
+        }
+    `
 
-    console.log(action);
     return (
-        <button
-            onClick={
-                () => window.location = '../'
+        <>
+            {
+                props.link ?
+                    <LinkStyle href={props.link}>
+                        {props.text}
+                    </LinkStyle>
+                : null
             }
-        >
-            {text}
-        </button>
+        </>
     )
 }
 

crud-place/src/components/Header/Header.jsx

@@ -12,6 +12,17 @@ const Header = (props) => {
         display: flex;
         justify-content: center;
         align-items: center;
+
+        flex-direction: column;
+
+        color: #fff;
+
+        user-select: none;
+
+        h1 {
+
+            margin: 2vh 0px 1vh 0px;
+        }
     `
 
     return (

crud-place/src/globalStyles.css

@@ -0,0 +1,7 @@
+body {
+
+    margin: 0;
+    padding: 0;
+
+    font-family: Roboto, helveltica;
+}

crud-place/src/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import styles from './globalStyles.css'
 
 ReactDOM.render(
   <React.StrictMode>