Merge pull request #1356 from kleros/refactor(web)/align-debug-component

refactor(web): align-debug-component-content

Author: alcercu

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,26 +24,30 @@ 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 = () => (
-  <label>
+  <StyledLabel>
     v{RELEASE_VERSION}{" "}
     <a href={GIT_URL} target="_blank" rel="noreferrer">
       #{GIT_HASH}
     </a>
     {GIT_BRANCH && GIT_BRANCH !== "HEAD" && ` ${GIT_BRANCH}`}
     {GIT_TAGS && ` ${GIT_TAGS}`}
     {GIT_DIRTY && ` dirty`}
-  </label>
+  </StyledLabel>
 );
 
 const ServicesStatus = () => {
   const [theme] = useToggleTheme();
   const statusUrlParameters = useMemo(() => (theme === "light" ? "?theme=light" : "?theme=dark"), [theme]);
   const statusUrl = process.env.REACT_APP_STATUS_URL;
-  return <label>{statusUrl && <StyledIframe src={`${statusUrl + statusUrlParameters}`} />}</label>;
+  return <label>{isUndefined(statusUrl) ? null : <StyledIframe src={`${statusUrl + statusUrlParameters}`} />}</label>;
 };
 
 enum Phases {
@@ -54,7 +60,7 @@ const Phase = () => {
   const { data: phase } = useSortitionModulePhase({
     watch: true,
   });
-  return <>{phase !== undefined && <label>Phase: {Phases[phase]}</label>}</>;
+  return <>{isUndefined(phase) ? null : <StyledLabel>Phase: {Phases[phase]}</StyledLabel>}</>;
 };
 
 const Debug: React.FC = () => {