diff --git a/client/package.json b/client/package.json index aefcc63..f78699e 100644 --- a/client/package.json +++ b/client/package.json @@ -5,6 +5,7 @@ "dependencies": { "axios": "^0.18.0", "jwt-decode": "^2.2.0", + "polished": "^3.2.0", "react": "^16.7.0", "react-dom": "^16.7.0", "react-redux": "^6.0.0", diff --git a/client/src/App.js b/client/src/App.js index 99d2d1d..00eb03b 100755 --- a/client/src/App.js +++ b/client/src/App.js @@ -44,13 +44,15 @@ class App extends Component {
- - - - - - - +
+ + + + + + + +
diff --git a/client/src/Global.js b/client/src/Global.js index 44a6c33..9e205f0 100644 --- a/client/src/Global.js +++ b/client/src/Global.js @@ -1,19 +1,29 @@ import {createGlobalStyle} from 'styled-components' +import {normalize} from 'polished' const GlobalStyle = createGlobalStyle` + ${normalize()} + html { + box-sizing: border-box; + } + + *, *:before, *:after { + box-sizing: inherit; + } + body { margin: 0; padding: 90px 0 0; - box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - a:link, a:visited { - text-decoration: none; - list-style: none; - color: inherit; + main { + max-width: 1264px; + width: 100%; + height: 100%; + margin: 0 auto; } `; diff --git a/client/src/components/homepage/Homepage.js b/client/src/components/homepage/Homepage.js index 791a6df..6fa0a20 100644 --- a/client/src/components/homepage/Homepage.js +++ b/client/src/components/homepage/Homepage.js @@ -22,7 +22,7 @@ class Homepage extends Component { return (
- Full Stack Musician + Recent Questions {name ?

Hi {name}

: null}
) } } diff --git a/client/src/elements/Buttons.js b/client/src/elements/Buttons.js index 4aaa66a..4cbc520 100644 --- a/client/src/elements/Buttons.js +++ b/client/src/elements/Buttons.js @@ -1,12 +1,21 @@ import styled from 'styled-components' +import {darken} from 'polished' +import {blue, elevation} from '../utils' export const Button = styled.button` padding: 5px 20px; border-radius: 4px; color: white; - font-size: 2rem; + font-size: 1rem; border: none; - background: indigo; + background: ${blue}; + ${elevation[1]}; + transition: 0.3s ease all; + + &:hover { + ${elevation[2]}; + background: ${darken(0.2, blue)}; + } `; export const CancelButton = styled(Button)` diff --git a/client/src/elements/Cards.js b/client/src/elements/Cards.js new file mode 100644 index 0000000..18a4581 --- /dev/null +++ b/client/src/elements/Cards.js @@ -0,0 +1,7 @@ +import styled from 'styled-components' +import {lighterblack} from '../utils' + +export const Card = styled.div` + padding: 12px 8px; + border-bottom: 1px solid ${lighterblack}; +`; \ No newline at end of file diff --git a/client/src/elements/index.js b/client/src/elements/index.js index 03b163b..f273ce1 100644 --- a/client/src/elements/index.js +++ b/client/src/elements/index.js @@ -1,2 +1,3 @@ export * from './Headings' -export * from './Buttons' \ No newline at end of file +export * from './Buttons' +export * from './Cards' \ No newline at end of file diff --git a/client/src/utils/Colors.js b/client/src/utils/Colors.js index 92fe60c..0c603bb 100644 --- a/client/src/utils/Colors.js +++ b/client/src/utils/Colors.js @@ -2,4 +2,5 @@ export const green = '#92EEC4' export const blue = '#85DAEF' export const lightblue = '#8EEEEF' export const black = '#242729' -export const lightblack = '#848d95' \ No newline at end of file +export const lightblack = '#848d95' +export const lighterblack = '#eff0f1' \ No newline at end of file