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 = () => {