diff --git a/src/components/NetworkStatus/NetworkStatus.styl b/src/components/NetworkStatus/NetworkStatus.styl index 4059afd2e2..0fd9fca5ce 100644 --- a/src/components/NetworkStatus/NetworkStatus.styl +++ b/src/components/NetworkStatus/NetworkStatus.styl @@ -25,6 +25,19 @@ padding-right: 1rem; border-radius: 0.3rem; + // if we're not on the game page, we make this more discreet... + &.non-game { + transform: scale(0.5); + top: -0.75rem; // its peculiar why 0 doesn't work - something about scaling after positioning? + themed color reject + background-color: transparent !important; // important needed to override "theme" specifier + min-width: 0; + padding-right: 0; + .icon { + margin-right: 0; + } + } + .icon { position: relative; display: inline-flex; diff --git a/src/components/NetworkStatus/NetworkStatus.tsx b/src/components/NetworkStatus/NetworkStatus.tsx index 1c31c6fdcb..0dfb7b29a0 100644 --- a/src/components/NetworkStatus/NetworkStatus.tsx +++ b/src/components/NetworkStatus/NetworkStatus.tsx @@ -16,6 +16,7 @@ */ import * as React from "react"; +import { useLocation } from "react-router-dom"; import { _ } from "translate"; import { socket } from "sockets"; @@ -31,6 +32,9 @@ export function NetworkStatus(): JSX.Element { const stateRef = React.useRef(state); + const location = useLocation(); + const on_game_page = location.pathname.includes("/game/"); + React.useEffect(() => { stateRef.current = state; // needed so we can refer to the current value in the async timer below }, [state]); @@ -74,22 +78,20 @@ export function NetworkStatus(): JSX.Element { } return ( - // This funky little thing builds an icon that is intended to say - // "no wifi!", by superimposing a large "ban" icon over a normal sized - // "wifi" icon. - // We don't show this if they're 'connected' (see above, return null) - -