From 073fe2e1d566c6b6e7d8900d33aafeb1a3291465 Mon Sep 17 00:00:00 2001 From: nicholas llerandi Date: Thu, 2 May 2019 08:45:39 -0400 Subject: [PATCH 1/6] styling nav --- .DS_Store | Bin 0 -> 8196 bytes client/src/App.js | 48 +++-- client/src/Global.js | 39 +--- client/src/components/layout/Navbar.js | 201 ++++++++++-------- .../src/components/questions/AllQuestions.js | 8 +- client/src/elements/Buttons.js | 10 +- client/src/elements/Cards.js | 4 +- client/src/img/SVG/magnifying-glass.svg | 5 + client/src/img/sprite.svg | 8 + client/src/utils/Colors.js | 11 +- 10 files changed, 182 insertions(+), 152 deletions(-) create mode 100644 .DS_Store create mode 100755 client/src/img/SVG/magnifying-glass.svg create mode 100755 client/src/img/sprite.svg diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..2e6d09f9530a0037dc5477e95a668a2ad926fd1b GIT binary patch literal 8196 zcmeI1O>7%Q6oB7z(qwo0lSxSF*6EKG6E#4Z+DSn# z+D;o%a^g?Dwy5O>y`W0`NpRrjzy-mD3l%L~5C<*@IB?<0o1JykIL#H1vLnsB*?I5n z%zOKJN3#Y194u;a02Kfvs$8<|)I6kcJ+B)|$RDXCiR2GpftxKmi&@joZm|4Ajm+Ff&W7WXwT+F+GO7s+Mo?G5M*FWW`MsRB2>9d_;OW9@6|z#cLX5Gj{shw zKAi(RpNKCLzFZa3bESKV(*ydh=pQjqxRXA@%}FMFxhkY^2Ndpr{>gpv)k(8av#nilAPPrMk z=nQ5G7x>jk#+}dl{W04%*ZP_4grS$ytT}00ZpN_mg6C{#I+@H)8kT042koMzIo^Fz zLLo`AB&V6WyxiM$tRvDBKeo~lS?=qLQNO!)Wkr_uw8i_+T*_a*vi$PO)te$N^xqB8 zP!;E`>L5+0loTH+LitLN_bWll%64_QQ8_(j(B()$FHt;`IomAe zEho(ya~U&NG&8O~V4B?6nR4|dm-l8IyWl20!!%<>M<3P6&M4_aWKFJ3{7&Z=UBkAV z3BBNuj3#1Y>GGW&yTb>g?T5SiP9*N`+||Gun-pb+vSYc%3x-}8FB_UWKb>)Mx}_P` z++@jcjI61TS(&`vh#j)*c|E#ERi}zsTFrNOtW8zM9Eyo$e8b0|P?WI+dVI|Br|LYSsN-fPtD8)d#XQ|TiaJ>m zp|NNE!J|!zI+e5Yc?!kx$4>UE>hpZsvl+)dzo=WZq;LGW2WUytTsNR;d_ht)(e5XS z@m*stv_cP@gb|nq4a#s0uEPy@2kyY9@CAGg-@*6r1KflA@C*C~zr!E!C;W}IScml} zVI%Ix19%YI@h~327{>89p27hf#3Y`@Q5?f@oWL~Bp@A>r0=l?@SMe2m9pA#6cnjag z+xR|yfFI&V_!)jK78a_2_>8!&wD=|U*8SQDME`49X!KzqhKHM#L;op=Kkg9pJ<`1U zK(xIh-g_dk_VlVA**c^iq{u@@u;DRNVZwv;E-|_{+@kESAY6_1I8mlANgQfcFRUZs zR*3*%l6R@Jg%8PuFhikj3qL7IEF^TD;h0R+vKpc5R-TfGPqs~Hk1EGyBAC?*ZNG9# zB2ZbK(6%T^S!VD6ahvk?9()X65o6!vDD z0zYdA*{X;;o{|EcON8Z+M F{sC97zPJDY literal 0 HcmV?d00001 diff --git a/client/src/App.js b/client/src/App.js index bb670ee..75f12c4 100755 --- a/client/src/App.js +++ b/client/src/App.js @@ -2,6 +2,7 @@ import React, {Component} from 'react'; import {BrowserRouter as Router, Route} from "react-router-dom"; import {Provider} from "react-redux"; import jwtDecode from "jwt-decode"; +import styled from 'styled-components'; // Utils / Actions import {setAuthToken} from "./utils/setAuthToken"; @@ -12,6 +13,7 @@ import store from "./store"; // CSS / Global Styles import GlobalStyle from './Global' +import {black, white} from './utils' // Components // Layout @@ -42,10 +44,13 @@ class App extends Component { return ( -
+ -
-
+ + + Navigation + + @@ -53,23 +58,38 @@ class App extends Component { -
-
-
- I'm an ad -
-
- I'm also an ad -
-
-
+ +
-
+ ); } } +const AppWrapper = styled.div` + max-width: 125rem; + margin: 4rem auto; + background-color: ${white}; + min-height: 100vh; +`; + +const ContentWrapper = styled.div` + display: flex; + margin-top: 30rem; +`; + +const SidebarWrapper = styled.div` + background-color: ${black}; + flex: 0 0 18%; + color: ${white}; +`; + +const MainbarWrapper = styled.div` + background-color: ${white}; + flex: 1; +`; + export default App; diff --git a/client/src/Global.js b/client/src/Global.js index c685b4b..abecc38 100644 --- a/client/src/Global.js +++ b/client/src/Global.js @@ -1,6 +1,6 @@ import {createGlobalStyle} from 'styled-components' import {normalize} from 'polished' -import {elevation} from './utils' +import {black, white} from './utils' const GlobalStyle = createGlobalStyle` ${normalize()} @@ -10,45 +10,26 @@ const GlobalStyle = createGlobalStyle` padding: 0; } - *, *:before, *:after { + *, + *:before, + *:after { box-sizing: inherit; } html { box-sizing: border-box; + font-size: 62.5%; } body { - padding: 90px 0 0; font-family: Arial, Helvetica, sans-serif; + font-weight: 400; + line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - } - - .App { - max-width: 1264px; - width: 90%; - height: 100%; - margin: 0 auto; - - .mainbar { - width: 75%; - float: left; - } - - .sidebar { - width: 25%; - float: right; - } - } - - .ad { - padding: 1rem; - margin: 1rem; - height: 11rem; - width: 15rem; - border: 1px solid #d6d9dc; - ${elevation[1]}; + background-color: ${white}; + color: ${black}; + min-height: 100vh; } `; diff --git a/client/src/components/layout/Navbar.js b/client/src/components/layout/Navbar.js index 14d8dde..9cac78c 100644 --- a/client/src/components/layout/Navbar.js +++ b/client/src/components/layout/Navbar.js @@ -2,15 +2,32 @@ import React, {Component} from "react"; import {Link} from "react-router-dom"; import {connect} from "react-redux"; import styled from 'styled-components' +import {darken} from 'polished' +// REDUX ACTIONS import {logoutUser} from "../../actions/authActions"; import {clearCurrentProfile} from "../../actions/profileActions"; +// ASSETS import fsmLogo from '../../img/fsm-green2.png' -import {lightblack, green, elevation, fixed} from '../../utils' +import mag from '../../img/sprite.svg' + +// UTILS import {Button} from '../../elements' +import {primary, lighterblack} from '../../utils' class Navbar extends Component { + constructor() { + super(); + this.state = { + search__input: "" + }; + } + + onChange = (e) => { + this.setState({[e.target.name]: e.target.value}) + }; + onLogoutClick = (e) => { e.preventDefault(); this.props.clearCurrentProfile(); @@ -22,126 +39,122 @@ class Navbar extends Component { const {user} = this.props.authReducer; const outState = ( -
    -
  • - Login -
    • +
+ + ); const inState = ( -
    -
  • +
    • -
  • + +
    Logout -
    • -
+ + ); return ( - -
-
- - Full Stack Musician - -
- {isAuthenticated ? inState : outState} -
- + + + Full Stack Musician + +
+ + +
+ {isAuthenticated ? inState : outState} + ) } } +const NavbarStyled = styled.header` + height: 9rem; + background-color: ${lighterblack}; + border-bottom: 1px solid ${primary}; + display: flex; + justify-content: space-between; + align-items: center; + + .logo { + height: 3.25rem; + margin-left: 3rem; + } -const StyledNavbar = styled.header` - min-width: auto; - ${elevation[1]}; - width: 100%; - background-color: #fafafb; - height: 90px; - border-top: 3px solid ${green}; - ${fixed()}; - - .container { - max-width: 1264px; - width: 100%; - height: 100%; - margin: 0 auto; - position: relative; - display: flex; - flex-flow: row nowrap; - align-items: center; - - .main { - height: 100%; - - .logo { - padding: 0 8px; - height: 100%; - display: flex; - align-items: center; - transition: background-color - cubic-bezier(.165, .84, .44, 1) .25s; - - &:hover { - background-color: rgba(239,240,241,0.75); - } - - .fsm_logo { - height: 100%; - } + .search { + background-color: orangered; + flex: 0 0 40%; + + &__input { + font-family: inherit; + font-size: inherit; + background-color: ${lighterblack}; + border: none; + color: inherit; + padding: .7rem 2rem; + border-radius: 100px; + width: 90%; + transition: all .2s; + margin-right: -3.5rem; + + &:focus { + outline: none; + width: 100%; + background-color: ${darken(0.09, lighterblack)}; } } - ul { - height: 100%; - display: flex; - list-style: none; - margin: 0; - padding: 0; - padding-left: 48px; - align-items: center; - flex-grow: 1; - justify-content: flex-end; - - li { - flex-shrink: 0; - display: inline-flex; - height: 100%; - - a { - color: ${lightblack}; - display: inline-flex; - align-items: center; - padding: 0 10px; - text-decoration: none; - white-space: nowrap; - transition: background-color - cubic-bezier(.165, .84, .44, 1) .25s,color cubic-bezier(.165, .84, .44, 1) .25s; - - &:hover { - color: #3b4045; - background-color: #eff0f1; - } - } + &__button { + border: none; + background-color: ${lighterblack}; + + &:focus { + outline: none; + } + + &:active { + transform: translateY(2px); } } + + &__icon { + height: 2rem; + width: 2rem; + } + } + + .user-nav { + background-color: greenyellow; } `; diff --git a/client/src/components/questions/AllQuestions.js b/client/src/components/questions/AllQuestions.js index 5b0b3de..04cb1d9 100644 --- a/client/src/components/questions/AllQuestions.js +++ b/client/src/components/questions/AllQuestions.js @@ -3,7 +3,7 @@ import {Link} from "react-router-dom"; import styled from 'styled-components' // Styled Components / Utils -import {lighterblack, black, blue} from '../../utils' +import {lighterblack, black, primary} from '../../utils' import {darken} from 'polished' // import {Card} from '../../elements' @@ -78,7 +78,7 @@ const Card = styled.div` } a:hover { - color: ${blue} + color: ${primary} } } @@ -90,10 +90,10 @@ const Card = styled.div` a { text-decoration: none; - color: ${blue}; + color: ${primary}; &:hover { - color: ${darken(0.2, blue)}; + color: ${darken(0.2, primary)}; } } } diff --git a/client/src/elements/Buttons.js b/client/src/elements/Buttons.js index ea3e9d1..4f58931 100644 --- a/client/src/elements/Buttons.js +++ b/client/src/elements/Buttons.js @@ -1,6 +1,6 @@ import styled from 'styled-components' import {darken} from 'polished' -import {blue, green, elevation} from '../utils' +import {secondary, primary, elevation} from '../utils' export const Button = styled.button` padding: 5px 20px; @@ -8,24 +8,24 @@ export const Button = styled.button` color: white; font-size: 1rem; border: none; - background: ${blue}; + background: ${secondary}; cursor: pointer; ${elevation[1]}; transition: 0.3s ease all; &:hover { ${elevation[2]}; - background: ${darken(0.2, blue)}; + background: ${darken(0.2, secondary)}; } &:focus {outline:0;} `; const SignUpButton = styled(Button)` - background: ${green}; + background: ${secondary}; &:hover { - background: ${darken(0.2, green)}; + background: ${darken(0.2, primary)}; } `; diff --git a/client/src/elements/Cards.js b/client/src/elements/Cards.js index 3be0a15..ebb9e22 100644 --- a/client/src/elements/Cards.js +++ b/client/src/elements/Cards.js @@ -1,5 +1,5 @@ import styled from 'styled-components' -import {black, lighterblack, blue} from '../utils' +import {black, lighterblack, primary} from '../utils' export const Card = styled.div` padding: 12px 8px; @@ -11,6 +11,6 @@ export const Card = styled.div` } a:hover { - color: ${blue} + color: ${primary} } `; \ No newline at end of file diff --git a/client/src/img/SVG/magnifying-glass.svg b/client/src/img/SVG/magnifying-glass.svg new file mode 100755 index 0000000..1c253da --- /dev/null +++ b/client/src/img/SVG/magnifying-glass.svg @@ -0,0 +1,5 @@ + + +magnifying-glass + + diff --git a/client/src/img/sprite.svg b/client/src/img/sprite.svg new file mode 100755 index 0000000..371f8ba --- /dev/null +++ b/client/src/img/sprite.svg @@ -0,0 +1,8 @@ + diff --git a/client/src/utils/Colors.js b/client/src/utils/Colors.js index a0a9339..72a75b9 100644 --- a/client/src/utils/Colors.js +++ b/client/src/utils/Colors.js @@ -1,6 +1,9 @@ -export const green = '#5EC5B6' -export const blue = '#85DAEF' -export const lightblue = '#8EEEEF' +export const primary = '#5EC5B6' +export const secondary = '#85DAEF' +export const secondary_light = '#8EEEEF' + export const black = '#242729' export const lightblack = '#848d95' -export const lighterblack = '#eff0f1' \ No newline at end of file +export const lighterblack = '#eff0f1' + +export const white = '#ffffff' \ No newline at end of file From 120d243517854eec835b51271a4469d99f9003eb Mon Sep 17 00:00:00 2001 From: nicholas llerandi Date: Thu, 2 May 2019 19:05:07 -0400 Subject: [PATCH 2/6] Setup-grid-system#76; nav styling --- client/src/components/layout/Navbar.js | 66 +++++++++++++++++++------- client/src/elements/Buttons.js | 2 +- 2 files changed, 51 insertions(+), 17 deletions(-) diff --git a/client/src/components/layout/Navbar.js b/client/src/components/layout/Navbar.js index 9cac78c..6d77b6d 100644 --- a/client/src/components/layout/Navbar.js +++ b/client/src/components/layout/Navbar.js @@ -2,7 +2,7 @@ import React, {Component} from "react"; import {Link} from "react-router-dom"; import {connect} from "react-redux"; import styled from 'styled-components' -import {darken} from 'polished' +import {darken, lighten} from 'polished' // REDUX ACTIONS import {logoutUser} from "../../actions/authActions"; @@ -14,7 +14,7 @@ import mag from '../../img/sprite.svg' // UTILS import {Button} from '../../elements' -import {primary, lighterblack} from '../../utils' +import {primary, black, lightblack, lighterblack, white} from '../../utils' class Navbar extends Component { constructor() { @@ -40,10 +40,10 @@ class Navbar extends Component { const outState = (