From b507d9c65f8718f80ca663e6b7befb7b8738e444 Mon Sep 17 00:00:00 2001 From: nicholas llerandi Date: Wed, 24 Apr 2019 14:00:32 -0400 Subject: [PATCH] Nav-styles#71; 4.24 200 --- client/src/components/layout/Navbar.js | 128 +++++++++++++------------ client/src/elements/Headings.js | 4 +- client/src/img/fsm-green2.png | Bin 0 -> 4786 bytes client/src/utils/Breakpoints.js | 4 +- client/src/utils/Colors.js | 5 + client/src/utils/Elevation.js | 5 + client/src/utils/Position.js | 27 ++++++ client/src/utils/index.js | 8 +- 8 files changed, 115 insertions(+), 66 deletions(-) create mode 100644 client/src/img/fsm-green2.png create mode 100644 client/src/utils/Colors.js create mode 100644 client/src/utils/Elevation.js create mode 100644 client/src/utils/Position.js diff --git a/client/src/components/layout/Navbar.js b/client/src/components/layout/Navbar.js index 634efc6..80da410 100644 --- a/client/src/components/layout/Navbar.js +++ b/client/src/components/layout/Navbar.js @@ -6,15 +6,74 @@ import styled from 'styled-components' import {logoutUser} from "../../actions/authActions"; import {clearCurrentProfile} from "../../actions/profileActions"; -import fsmLogo from '../../img/fsm-green.png' +import fsmLogo from '../../img/fsm-green2.png' +import {lightblack, green, elevation, fixed} from '../../utils' + +class Navbar extends Component { + onLogoutClick = (e) => { + e.preventDefault(); + this.props.clearCurrentProfile(); + this.props.logoutUser(); + }; + + render() { + const {isAuthenticated} = this.props.authReducer; + const {user} = this.props.authReducer; + + const outState = ( + + ); + + const inState = ( + + ); + + + return ( + +
+
+ + Full Stack Musician + +
+ {isAuthenticated ? inState : outState} +
+ + ) + } +} const HeaderNav = styled.header` min-width: auto; - box-shadow: 0 1px 0 rgba(12,13,14,0.1), 0 1px 6px rgba(59,64,69,0.1); + ${elevation[1]}; width: 100%; background-color: #fafafb; height: 90px; - border-top: 3px solid #6BD7DB; + border-top: 3px solid ${green}; + ${fixed()}; .container { max-width: 1264px; @@ -40,6 +99,10 @@ const HeaderNav = styled.header` &:hover { background-color: rgba(239,240,241,0.75); } + + .fsm_logo { + height: 100%; + } } } @@ -60,7 +123,7 @@ const HeaderNav = styled.header` height: 100%; a { - color: #848d95; + color: ${lightblack}; display: inline-flex; align-items: center; padding: 0 10px; @@ -79,63 +142,6 @@ const HeaderNav = styled.header` } `; -class Navbar extends Component { - onLogoutClick = (e) => { - e.preventDefault(); - this.props.clearCurrentProfile(); - this.props.logoutUser(); - }; - - render() { - const {isAuthenticated} = this.props.authReducer; - const {user} = this.props.authReducer; - - const outState = ( - - ); - - const inState = ( - - ); - - - return ( - -
-
- - Full Stack Musician - -
- {isAuthenticated ? inState : outState} -
- - ) - } -} - const mapStateToProps = state => ({ authReducer: state.authReducer }); diff --git a/client/src/elements/Headings.js b/client/src/elements/Headings.js index f97c0e6..1adf85f 100644 --- a/client/src/elements/Headings.js +++ b/client/src/elements/Headings.js @@ -3,7 +3,7 @@ import {above} from '../utils' export const Heading = styled.h1` font-size: 2rem; - ${above.small` - color:blue + ${above.large` + color:black; `} `; \ No newline at end of file diff --git a/client/src/img/fsm-green2.png b/client/src/img/fsm-green2.png new file mode 100644 index 0000000000000000000000000000000000000000..8a31ca4189e549bd39b97a64a3353d37031d5c3f GIT binary patch literal 4786 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 { acc[label] = (...args) => css` - @media (max-width: ${sizes[label] / 16}em) { + @media (min-width: ${sizes[label]}px) { ${css(...args)} } ` @@ -17,7 +17,7 @@ export const above = Object.keys(sizes).reduce((acc, label) => { export const below = Object.keys(sizes).reduce((acc, label) => { acc[label] = (...args) => css` - @media (max-width: ${sizes[label] / 16}em) { + @media (max-width: ${sizes[label]}px) { ${css(...args)} } ` diff --git a/client/src/utils/Colors.js b/client/src/utils/Colors.js new file mode 100644 index 0000000..92fe60c --- /dev/null +++ b/client/src/utils/Colors.js @@ -0,0 +1,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 diff --git a/client/src/utils/Elevation.js b/client/src/utils/Elevation.js new file mode 100644 index 0000000..41693e3 --- /dev/null +++ b/client/src/utils/Elevation.js @@ -0,0 +1,5 @@ +export default [ + 'box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7)', + 'box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)', + 'box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)', +] \ No newline at end of file diff --git a/client/src/utils/Position.js b/client/src/utils/Position.js new file mode 100644 index 0000000..8033d83 --- /dev/null +++ b/client/src/utils/Position.js @@ -0,0 +1,27 @@ +import {css} from 'styled-components' + +export const fixed = ({ + x = 0, + y = 0, + yProp = 'top', + xProp = 'left' +} = {}) => { + return css` + position: fixed; + ${yProp}: ${y}; + ${xProp}: ${x}; + `; +} + +export const absolute = ({ + x = 0, + y = 0, + yProp = 'top', + xProp = 'left' +} = {}) => { + return css` + position: absolute; + ${yProp}: ${y}; + ${xProp}: ${x}; + `; +} \ No newline at end of file diff --git a/client/src/utils/index.js b/client/src/utils/index.js index 96d34a0..9464ace 100644 --- a/client/src/utils/index.js +++ b/client/src/utils/index.js @@ -1 +1,7 @@ -export * from './Breakpoints' \ No newline at end of file +import elevation from './Elevation' + +export * from './Breakpoints' +export * from './Colors' +export * from './Position' + +export {elevation}; \ No newline at end of file