diff --git a/web/src/layout/Header/navbar/Debug.tsx b/web/src/layout/Header/navbar/Debug.tsx index 7c1f0ec87..0e6b91402 100644 --- a/web/src/layout/Header/navbar/Debug.tsx +++ b/web/src/layout/Header/navbar/Debug.tsx @@ -3,11 +3,13 @@ import styled from "styled-components"; import { useSortitionModulePhase } from "hooks/contracts/generated"; import { useToggleTheme } from "hooks/useToggleThemeContext"; import { GIT_BRANCH, GIT_DIRTY, GIT_HASH, GIT_TAGS, GIT_URL, RELEASE_VERSION } from "consts/index"; +import { isUndefined } from "utils/index"; const Container = styled.div` display: flex; flex-direction: column; gap: 12px; + padding: 0px 3px; label, a { @@ -22,11 +24,15 @@ const StyledIframe = styled.iframe` border: none; width: 100%; height: 30px; - border-radius: 300px; + border-radius: 3px; +`; + +const StyledLabel = styled.label` + padding-left: 8px; `; const Version = () => ( - + ); const ServicesStatus = () => { const [theme] = useToggleTheme(); const statusUrlParameters = useMemo(() => (theme === "light" ? "?theme=light" : "?theme=dark"), [theme]); const statusUrl = process.env.REACT_APP_STATUS_URL; - return ; + return ; }; enum Phases { @@ -54,7 +60,7 @@ const Phase = () => { const { data: phase } = useSortitionModulePhase({ watch: true, }); - return <>{phase !== undefined && }; + return <>{isUndefined(phase) ? null : Phase: {Phases[phase]}}; }; const Debug: React.FC = () => {