From 167ff1ff010d8e5c41841e046e2024010483551b Mon Sep 17 00:00:00 2001 From: r41ph Date: Mon, 9 Dec 2024 12:27:49 +0000 Subject: [PATCH] fix: update style for when user is not logged in --- web-components/src/components/header/index.tsx | 3 +++ web-components/src/components/mobile-menu/index.tsx | 5 +++-- .../src/components/organisms/ListProject/ListProject.tsx | 6 +++++- .../organisms/RegistryLayout/RegistryLayout.Header.tsx | 4 ++-- 4 files changed, 13 insertions(+), 5 deletions(-) diff --git a/web-components/src/components/header/index.tsx b/web-components/src/components/header/index.tsx index b416f2224b..efaca2f78f 100644 --- a/web-components/src/components/header/index.tsx +++ b/web-components/src/components/header/index.tsx @@ -33,6 +33,7 @@ export interface HeaderProps { websiteExtras?: JSX.Element; pathname?: string; transparent?: boolean; + isUserLoggedIn?: boolean; } export default function Header({ @@ -48,6 +49,7 @@ export default function Header({ pathname = '/', extras, websiteExtras, + isUserLoggedIn, }: HeaderProps): JSX.Element { const theme = useTheme(); const isTablet = useMediaQuery(theme.breakpoints.down('md')); @@ -107,6 +109,7 @@ export default function Header({ menuItems={menuItems} extras={extras} websiteExtras={websiteExtras} + isUserLoggedIn={isUserLoggedIn} /> diff --git a/web-components/src/components/mobile-menu/index.tsx b/web-components/src/components/mobile-menu/index.tsx index 591baa46fd..69f0c73858 100644 --- a/web-components/src/components/mobile-menu/index.tsx +++ b/web-components/src/components/mobile-menu/index.tsx @@ -20,6 +20,7 @@ type Props = { extras?: JSX.Element; linkComponent: React.FC>; websiteExtras?: JSX.Element; + isUserLoggedIn?: boolean; }; const MobileMenu: React.FC> = ({ @@ -29,7 +30,7 @@ const MobileMenu: React.FC> = ({ extras, websiteExtras, linkComponent: Link, - ...props + isUserLoggedIn, }) => { const { classes: styles, cx } = useMobileMenuStyles(); const theme = useTheme(); @@ -52,7 +53,7 @@ const MobileMenu: React.FC> = ({ onClick={handleOpen} width="29px" height="22px" - sx={{ ml: { xs: 0, sm: 4 } }} + sx={{ ml: { xs: isUserLoggedIn ? 0 : 2, sm: 4 } }} /> { const { _ } = useLingui(); const { wallet } = useWallet(); const { activeAccountId, activeAccount } = useAuth(); + const { noAccountAndNoWallet } = useAuthData(); const navigate = useNavigate(); const isConnectingRef = useRef(false); @@ -51,7 +53,9 @@ const ListProject = () => {
{!isLoadingIsIssuer && ( { const { _ } = useLingui(); const { pathname } = useLocation(); const { activeAccount, privActiveAccount } = useAuth(); - const { wallet, disconnect, isConnected, loginDisabled } = useWallet(); - const { accountOrWallet } = useAuthData(); + const { accountOrWallet, noAccountAndNoWallet } = useAuthData(); const theme = useTheme(); const headerColors = useMemo(() => getHeaderColors(theme), [theme]); const isTransparent = useMemo(() => getIsTransparent(pathname), [pathname]); @@ -161,6 +160,7 @@ const RegistryLayoutHeader: React.FC = () => { {clientConfig.loginButton && } } + isUserLoggedIn={!noAccountAndNoWallet} /> );