diff --git a/crud-place/public/index.html b/crud-place/public/index.html index aa069f2..959e6b0 100644 --- a/crud-place/public/index.html +++ b/crud-place/public/index.html @@ -9,7 +9,9 @@ name="description" content="Web site created using create-react-app" /> - + + + - React App + CRUD Place diff --git a/crud-place/src/App.js b/crud-place/src/App.js index 52d0a21..f0cdb6a 100644 --- a/crud-place/src/App.js +++ b/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() {
+ } /> ); } diff --git a/crud-place/src/components/Button/Button.jsx b/crud-place/src/components/Button/Button.jsx index 5b68b1d..b642e73 100644 --- a/crud-place/src/components/Button/Button.jsx +++ b/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 ( - + ) } diff --git a/crud-place/src/components/Header/Header.jsx b/crud-place/src/components/Header/Header.jsx index 0070fbc..2842af7 100644 --- a/crud-place/src/components/Header/Header.jsx +++ b/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 ( diff --git a/crud-place/src/globalStyles.css b/crud-place/src/globalStyles.css new file mode 100644 index 0000000..94eee38 --- /dev/null +++ b/crud-place/src/globalStyles.css @@ -0,0 +1,7 @@ +body { + + margin: 0; + padding: 0; + + font-family: Roboto, helveltica; +} \ No newline at end of file diff --git a/crud-place/src/index.js b/crud-place/src/index.js index 7998135..ab2f7ff 100644 --- a/crud-place/src/index.js +++ b/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(