diff --git a/play-node-go/public/index.html b/play-node-go/public/index.html index 142f76b..b8ee387 100644 --- a/play-node-go/public/index.html +++ b/play-node-go/public/index.html @@ -11,6 +11,7 @@ /> + Node Go diff --git a/play-node-go/public/stylesheets/partials/_mixins.scss b/play-node-go/public/stylesheets/partials/_mixins.scss index a727465..5f00e47 100644 --- a/play-node-go/public/stylesheets/partials/_mixins.scss +++ b/play-node-go/public/stylesheets/partials/_mixins.scss @@ -8,4 +8,10 @@ flex-direction: $direction; align-items: center; justify-content: space-around; +} + +@mixin gameViewLabel { + color: rgb(255,240,230); + background-color: rgba(0,0,0,0.7); + padding: 0.25em; } \ No newline at end of file diff --git a/play-node-go/public/stylesheets/partials/_variables.scss b/play-node-go/public/stylesheets/partials/_variables.scss index 43f4c62..281b82b 100644 --- a/play-node-go/public/stylesheets/partials/_variables.scss +++ b/play-node-go/public/stylesheets/partials/_variables.scss @@ -18,6 +18,12 @@ $break-points: ( $colors: ( "error": #aa3333, + "nav_bar": #6f3e68, + "nav_link": #dae1b7, + "sidebar": #3c013f, + "sidebar_link": #f2ce3d, + "main": #95acae, + "home": #444444 ); $backgrounds: ( diff --git a/play-node-go/src/components/Button/Game/Game.scss b/play-node-go/src/components/Button/Game/Game.scss index b5e73a9..5478166 100644 --- a/play-node-go/src/components/Button/Game/Game.scss +++ b/play-node-go/src/components/Button/Game/Game.scss @@ -1,3 +1,4 @@ +@import '../../../../public/stylesheets/partials/mixins'; div.GameButton { align-items: stretch; @@ -112,7 +113,7 @@ div.table__player-area { } div.GameButton__player-data { - background-color: rgba(255,255,255,0.65); + @include gameViewLabel; display: flex; justify-content: space-around; max-width: 100%; @@ -127,7 +128,10 @@ div.GameButton__player-data { } .GameButton__link { - background-color: rgba(255, 255, 255, 0.95); + @include gameViewLabel; margin: 0 auto; - padding: .5vw; + text-decoration: none; + &:hover { + text-decoration: underline; + } } \ No newline at end of file diff --git a/play-node-go/src/components/Form/Auth/Auth.js b/play-node-go/src/components/Form/Auth/Auth.js new file mode 100644 index 0000000..46cacc1 --- /dev/null +++ b/play-node-go/src/components/Form/Auth/Auth.js @@ -0,0 +1,35 @@ +import React, { useState } from 'react'; + +import Login from '../Login/Login'; +import Signup from '../Signup/Signup'; + +const Auth = (props) => { + const [ showForm, setShowForm ] = useState('login') + const { state, dispatch } = props; + + return ( + <> +

{setShowForm('login')}} + >Login

+ { + showForm === 'login' + ? + : <> + } + +

{setShowForm('signup')}} + >Signup

+ { + showForm === 'signup' + ? + : <> + } + + ); +} + +export default Auth; diff --git a/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.scss b/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.scss index 20013c5..3f01ddf 100644 --- a/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.scss +++ b/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.scss @@ -1,4 +1,5 @@ @import '../../../../public/stylesheets/partials/variables'; +@import '../../../../public/stylesheets/partials/mixins'; div.player-container { display: flex; @@ -92,10 +93,8 @@ div.player-container__name-space { align-items: center; h4 { + @include gameViewLabel; font-size: 120%; - color: rgb(255,240,230); - background-color: rgba(0,0,0,0.7); - padding: 0.25em; z-index: 1; } } diff --git a/play-node-go/src/index.scss b/play-node-go/src/index.scss index 066e123..4d5308a 100644 --- a/play-node-go/src/index.scss +++ b/play-node-go/src/index.scss @@ -3,17 +3,17 @@ html * { margin: 0; + font-size: 14px; @media #{map-get($break-points, "500")} { - font-size: 14px; + // font-size: 14px; } } body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", - sans-serif; + font-family: 'Oswald', sans-serif; + font-weight: 800; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; @@ -32,11 +32,12 @@ body { // ! dev settings aside { - background-color: map-get($dev-colors, "e"); + background-color: map-get($colors, "sidebar"); } main { - background-color: map-get($dev-colors, "d"); + background-color: map-get($colors, "main"); + font-weight: 100; } } diff --git a/play-node-go/src/pages/Home/Home.scss b/play-node-go/src/pages/Home/Home.scss index 1e2103d..ec08757 100644 --- a/play-node-go/src/pages/Home/Home.scss +++ b/play-node-go/src/pages/Home/Home.scss @@ -1,6 +1,12 @@ +@import '../../../public/stylesheets/partials/variables'; +@import '../../../public/stylesheets/partials/mixins'; + div.Home { + @include fullspan; display: flex; flex-flow: row wrap; align-items: flex-start; justify-content: flex-start; + background-color: map-get($colors, "home"); + overflow: scroll; } \ No newline at end of file diff --git a/play-node-go/src/pages/Home/HomeSidebar.js b/play-node-go/src/pages/Home/HomeSidebar.js index 4d8899d..09907a1 100644 --- a/play-node-go/src/pages/Home/HomeSidebar.js +++ b/play-node-go/src/pages/Home/HomeSidebar.js @@ -1,13 +1,12 @@ import React, { useState } from 'react'; -import Signup from '../../components/Form/Signup/Signup'; -import Login from '../../components/Form/Login/Login'; +import Auth from '../../components/Form/Auth/Auth'; import NewRoomButton from '../../components/Button/NewRoom/NewRoom'; import FindRoomForm from '../../components/Form/FindRoom/FindRoom'; import LibraryButton from '../../components/Button/Library/Library'; const HomeSidebar = (props) => { - const [ showForm, setShowForm ] = useState(''); + const { state, dispatch } = props; const ifUser = <> @@ -15,32 +14,12 @@ const HomeSidebar = (props) => { - const ifNoUser = <> -

{setShowForm('login')}} - >Login

- { - showForm === 'login' - ? - : <> - } - -

{setShowForm('signup')}} - >Signup

- { - showForm === 'signup' - ? - : <> - } - + const ifNoUser = return (