fix: APP-383 align create project button (#2568)

regen-network · Dec 11, 2024 · d0457d3 · d0457d3
1 parent 49c42cd
commit d0457d3
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 9 deletions.
diff --git a/web-components/src/components/header/Header.styles.ts b/web-components/src/components/header/Header.styles.ts
@@ -70,7 +70,7 @@ export const useHeaderStyles = makeStyles<StyleProps>()(
         },
         '& li.MuiMenuItem-root, li.MuiMenuItem-root > div': {
           display: 'flex',
-          alignSelf: 'end',
+          alignSelf: 'center',
           backgroundColor: 'inherit',
           textDecoration: 'none',
         },

diff --git 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}
               />
             </Box>
           </Box>

diff --git 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<React.PropsWithChildren<NavLinkProps>>;
   websiteExtras?: JSX.Element;
+  isUserLoggedIn?: boolean;
 };
 
 const MobileMenu: React.FC<React.PropsWithChildren<Props>> = ({
@@ -29,7 +30,7 @@ const MobileMenu: React.FC<React.PropsWithChildren<Props>> = ({
   extras,
   websiteExtras,
   linkComponent: Link,
-  ...props
+  isUserLoggedIn,
 }) => {
   const { classes: styles, cx } = useMobileMenuStyles();
   const theme = useTheme();
@@ -52,7 +53,7 @@ const MobileMenu: React.FC<React.PropsWithChildren<Props>> = ({
           onClick={handleOpen}
           width="29px"
           height="22px"
-          sx={{ ml: 4 }}
+          sx={{ ml: { xs: isUserLoggedIn ? 0 : 2, sm: 4 } }}
         />
       </Center>
       <Drawer

diff --git a/web-marketplace/src/components/organisms/ListProject/ListProject.tsx b/web-marketplace/src/components/organisms/ListProject/ListProject.tsx
@@ -48,10 +48,10 @@ const ListProject = () => {
   );
 
   return (
-    <div>
+    <>
       {!isLoadingIsIssuer && (
         <Body
-          className="text-[11px] sm:text-base font-bold bg-clip-text cursor-pointer pt-[2px] pr-10 sm:pr-25 bg-[linear-gradient(202deg,#4FB573_14.67%,#B9E1C7_97.14%)]"
+          className="text-[11px] sm:text-base font-bold bg-clip-text cursor-pointer mb-3 pr-10 sm:pr-25 bg-[linear-gradient(202deg,#4FB573_14.67%,#B9E1C7_97.14%)] text-right"
           sx={{
             textFillColor: 'transparent',
           }}
@@ -77,7 +77,7 @@ const ListProject = () => {
         modalState={modalState}
         redirectRoute="project-pages/draft/basic-info"
       />
-    </div>
+    </>
   );
 };
 

diff --git a/web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.Header.tsx b/web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.Header.tsx
@@ -45,9 +45,8 @@ const RegistryLayoutHeader: React.FC = () => {
   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<Theme>();
   const headerColors = useMemo(() => getHeaderColors(theme), [theme]);
   const isTransparent = useMemo(() => getIsTransparent(pathname), [pathname]);
@@ -134,7 +133,7 @@ const RegistryLayoutHeader: React.FC = () => {
             {clientConfig.listProject && <ListProject />}
             <LanguageSwitcher
               className={cn(
-                'mr-25 hidden lg:block',
+                'mr-25 mt-1 hidden lg:block',
                 isHome && 'text-sc-button-text-icon-light',
               )}
             />
@@ -161,6 +160,7 @@ const RegistryLayoutHeader: React.FC = () => {
             {clientConfig.loginButton && <LoginButton />}
           </Box>
         }
+        isUserLoggedIn={!noAccountAndNoWallet}
       />
     </>
   );