From 170b2b24ab89e03ce524e6a18ec493bed3ffe7a2 Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Sat, 25 Nov 2023 11:26:19 +0500
Subject: [PATCH] web: fix logged in status alignment

---
 apps/web/src/components/status-bar/index.tsx | 56 +++++++++-----------
 1 file changed, 25 insertions(+), 31 deletions(-)

diff --git a/apps/web/src/components/status-bar/index.tsx b/apps/web/src/components/status-bar/index.tsx
index 4b29a6652..436565ddf 100644
--- a/apps/web/src/components/status-bar/index.tsx
+++ b/apps/web/src/components/status-bar/index.tsx
@@ -34,7 +34,7 @@ import {
 import { useStore as useUserStore } from "../../stores/user-store";
 import { useStore as useAppStore } from "../../stores/app-store";
 import TimeAgo from "../time-ago";
-import { hardNavigate, hashNavigate, navigate } from "../../navigation";
+import { hardNavigate, hashNavigate } from "../../navigation";
 import { useAutoUpdater, UpdateStatus } from "../../hooks/use-auto-updater";
 import {
   showIssueDialog,
@@ -67,39 +67,33 @@ function StatusBar() {
       {isFocusMode ? (
         <Flex />
       ) : (
-        <Flex>
+        <Flex sx={{ gap: 1 }}>
           {isLoggedIn ? (
             <>
-              <Button
-                onClick={() =>
-                  user?.isEmailConfirmed
-                    ? navigate("/settings")
-                    : hashNavigate("/email/verify")
-                }
-                variant="statusitem"
-                sx={{
-                  alignItems: "center",
-                  justifyContent: "center",
-                  display: "flex"
-                }}
-              >
-                <Circle
-                  size={7}
-                  color={
-                    user?.isEmailConfirmed
-                      ? "var(--icon-success)"
-                      : "var(--icon-error)"
-                  }
-                />
-                <Text
-                  className="selectable"
-                  variant="subBody"
-                  ml={1}
-                  sx={{ color: "paragraph" }}
+              {user?.isEmailConfirmed ? (
+                <Circle size={7} color={"var(--icon-success)"} />
+              ) : (
+                <Button
+                  onClick={() => hashNavigate("/email/verify")}
+                  variant="statusitem"
+                  sx={{
+                    alignItems: "center",
+                    justifyContent: "center",
+                    display: "flex",
+                    height: "100%"
+                  }}
                 >
-                  {user?.isEmailConfirmed ? "" : "Email not confirmed"}
-                </Text>
-              </Button>
+                  <Circle size={7} color={"var(--icon-error)"} />
+                  <Text
+                    className="selectable"
+                    variant="subBody"
+                    ml={1}
+                    sx={{ color: "paragraph" }}
+                  >
+                    Email not confirmed
+                  </Text>
+                </Button>
+              )}
 
               <SyncStatus />
             </>