From fbf915b1f66bae978f9533a917ffb137171d34c6 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Thu, 7 Dec 2023 23:44:47 +0530
Subject: [PATCH 1/2] refactor(web): align-debug-component-content

---
 web/src/layout/Header/navbar/Debug.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/web/src/layout/Header/navbar/Debug.tsx b/web/src/layout/Header/navbar/Debug.tsx
index 7c1f0ec87..e1d2bcb44 100644
--- a/web/src/layout/Header/navbar/Debug.tsx
+++ b/web/src/layout/Header/navbar/Debug.tsx
@@ -8,6 +8,7 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   gap: 12px;
+  padding: 0px 3px;
 
   label,
   a {
@@ -22,11 +23,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 = () => (
-  <label>
+  <StyledLabel>
     v{RELEASE_VERSION}{" "}
     <a href={GIT_URL} target="_blank" rel="noreferrer">
       #{GIT_HASH}
@@ -34,7 +39,7 @@ const Version = () => (
     {GIT_BRANCH && GIT_BRANCH !== "HEAD" && ` ${GIT_BRANCH}`}
     {GIT_TAGS && ` ${GIT_TAGS}`}
     {GIT_DIRTY && ` dirty`}
-  </label>
+  </StyledLabel>
 );
 
 const ServicesStatus = () => {
@@ -54,7 +59,7 @@ const Phase = () => {
   const { data: phase } = useSortitionModulePhase({
     watch: true,
   });
-  return <>{phase !== undefined && <label>Phase: {Phases[phase]}</label>}</>;
+  return <>{phase !== undefined && <StyledLabel>Phase: {Phases[phase]}</StyledLabel>}</>;
 };
 
 const Debug: React.FC = () => {

From 27e7fd235f09996b0a3960a24ad1b72c853f3a6f Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Tue, 12 Dec 2023 21:14:15 +0530
Subject: [PATCH 2/2] refactor(web): use-better-conditional-rendering-syntax

---
 web/src/layout/Header/navbar/Debug.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/src/layout/Header/navbar/Debug.tsx b/web/src/layout/Header/navbar/Debug.tsx
index e1d2bcb44..0e6b91402 100644
--- a/web/src/layout/Header/navbar/Debug.tsx
+++ b/web/src/layout/Header/navbar/Debug.tsx
@@ -3,6 +3,7 @@ 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;
@@ -46,7 +47,7 @@ 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 {
@@ -59,7 +60,7 @@ const Phase = () => {
   const { data: phase } = useSortitionModulePhase({
     watch: true,
   });
-  return <>{phase !== undefined && <StyledLabel>Phase: {Phases[phase]}</StyledLabel>}</>;
+  return <>{isUndefined(phase) ? null : <StyledLabel>Phase: {Phases[phase]}</StyledLabel>}</>;
 };
 
 const Debug: React.FC = () => {