diff --git a/ui/components/header/auth.js b/ui/components/header/auth.js index 0e00e50..eb8a45f 100644 --- a/ui/components/header/auth.js +++ b/ui/components/header/auth.js @@ -7,6 +7,7 @@ import styled from 'styled-components' import { Hide } from '../../kit/media' import Link from 'next/link' import { connect } from 'react-redux' +import { getCurrentServerState } from '../../stores/currentServer' const temporaryServer = { id: '423497622876061707', @@ -47,10 +48,10 @@ const StyledAvatar = styled.img` const ServerSelector = (props) =>
- +
- { temporaryServer.name } + { props.name }
@@ -73,22 +74,27 @@ const StyledUserSection = styled(UserSection)` text-align: right; ` -const HeaderBarAuth: React.StatelessFunctionalComponent<{ user: User }> = ({ user }) => ( +const Spacer = styled.div` + flex: 1; +` + +const HeaderBarAuth: React.StatelessFunctionalComponent<{ user: User, isOnServer: boolean, currentServer: * }> = ({ user, isOnServer, currentServer = temporaryServer }) => ( <> - + - + { isOnServer ? : } ) -const mapStateToProps = state => { - -} +const mapStateToProps = (state, { router }) => ({ + isOnServer: router.pathname === '/_internal/_server', + currentServer: router.pathname === '/_internal/_server' ? getCurrentServerState(state, router.query.id).server : {} +}) export default connect(mapStateToProps)(HeaderBarAuth) diff --git a/ui/components/header/common.js b/ui/components/header/common.js index 790f6e4..05414e4 100644 --- a/ui/components/header/common.js +++ b/ui/components/header/common.js @@ -17,7 +17,7 @@ const Header = styled.div` top: 0; left: 0; right: 0; - z-index: 100; + z-index: 5; ` const HeaderInner = styled.div` diff --git a/ui/components/layout.js b/ui/components/layout.js index d4a0987..065dacd 100644 --- a/ui/components/layout.js +++ b/ui/components/layout.js @@ -23,11 +23,11 @@ const ContentBox = styled.div` /* max-height: calc(100vh - 50px); */ ` -const Layout = ({ children, user, noBackground }: {children: React.Element, user: User, noBackground: boolean }) => <> +const Layout = ({ children, user, noBackground, router }: {children: React.Element, user: User, noBackground: boolean, router: * }) => <> - + {children} diff --git a/ui/pages/_app.js b/ui/pages/_app.js index 98bc364..a5889d1 100644 --- a/ui/pages/_app.js +++ b/ui/pages/_app.js @@ -56,7 +56,11 @@ class RoleypolyApp extends App { catchFOUC () { setTimeout(() => { if (document.documentElement) document.documentElement.className += ' force-active' - }, 1500) + }, 700) + } + + componentDidMount () { + this.catchFOUC() } render () { @@ -87,7 +91,7 @@ class RoleypolyApp extends App { ` }} /> - +