fix: user hub placement

src/components/common/Extensions/UserHubButton/UserHubButton.tsx

@@ -9,6 +9,7 @@ import { ADDRESS_ZERO } from '~constants';
 import { useAnalyticsContext } from '~context/AnalyticsContext/AnalyticsContext.ts';
 import { useAppContext } from '~context/AppContext/AppContext.ts';
 import { useColonyContext } from '~context/ColonyContext/ColonyContext.ts';
+import { useTokensModalContext } from '~context/TokensModalContext/TokensModalContext.ts';
 import { useUserTransactionContext } from '~context/UserTransactionContext/UserTransactionContext.ts';
 import { TransactionStatus } from '~gql';
 import { useMobile } from '~hooks/index.ts';
@@ -48,6 +49,7 @@ const UserHubButton: FC = () => {
   const walletAddress = wallet?.address;
 
   const { setOpenItemIndex, mobileMenuToggle } = useNavigationSidebarContext();
+  const { isTokensModalOpen } = useTokensModalContext();
 
   const [, { toggleOff }] = mobileMenuToggle;
 
@@ -108,6 +110,13 @@ const UserHubButton: FC = () => {
     isUserHubOpen,
   ]);
 
+  useEffect(() => {
+    if (isTokensModalOpen) {
+      triggerRef?.click();
+      setIsUserHubOpen(false);
+    }
+  }, [isTokensModalOpen, triggerRef]);
+
   useDisableBodyScroll(visible && isMobile);
 
   const handleButtonClick = () => {

src/components/frame/Extensions/layouts/ColonyLayout.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { AnimatePresence } from 'framer-motion';
 import React, {
   type FC,
@@ -19,7 +20,7 @@ import { useColonyContext } from '~context/ColonyContext/ColonyContext.ts';
 import { useColonyCreatedModalContext } from '~context/ColonyCreateModalContext/ColonyCreatedModalContext.ts';
 import { useMemberModalContext } from '~context/MemberModalContext/MemberModalContext.ts';
 import { usePageHeadingContext } from '~context/PageHeadingContext/PageHeadingContext.ts';
-import { useTokensModalContext } from '~context/TokensModalContext/TokensModalContext.ts';
+import { useTablet } from '~hooks';
 import { TX_SEARCH_PARAM } from '~routes/index.ts';
 import ActionSidebar from '~v5/common/ActionSidebar/index.ts';
 import ColonyCreatedModal from '~v5/common/Modals/ColonyCreatedModal/index.ts';
@@ -56,6 +57,7 @@ const ColonyLayout: FC<PropsWithChildren> = ({ children }) => {
   const [isActionSidebarOpen, { toggleOn: toggleActionSidebarOn }] =
     actionSidebarToggle;
   const txButtons = useGetTxButtons();
+  const isTablet = useTablet();
 
   const {
     isMemberModalOpen,
@@ -67,7 +69,6 @@ const ColonyLayout: FC<PropsWithChildren> = ({ children }) => {
     useColonyCreatedModalContext();
   // const [isInviteMembersModalOpen, setIsInviteMembersModalOpen] =
   //   useState(false);
-  const { isTokensModalOpen } = useTokensModalContext();
 
   const { calamityBannerItems, canUpgrade } = useCalamityBannerInfo();
 
@@ -91,17 +92,22 @@ const ColonyLayout: FC<PropsWithChildren> = ({ children }) => {
   const userHub = useMemo(() => <UserHubButton />, []);
 
   const getUserNavigation = useCallback(
-    (isHidden?: boolean) =>
-      !isTokensModalOpen ? (
-        <UserNavigationWrapper
-          txButtons={txButtons}
-          userHub={userHub}
-          isHidden={isHidden}
-          extra={
-            <>
-              <JoinButton />
-              {/* Hide Initially */}
-              {/* {!isActionSidebarOpen ? (
+    (isHidden?: boolean) => (
+      <UserNavigationWrapper
+        txButtons={txButtons}
+        userHub={userHub}
+        className={clsx(
+          'modal-blur-navigation [.show-header-in-modal_&]:z-userNavModal',
+          {
+            'relative z-userNav': !isTablet,
+          },
+        )}
+        isHidden={isTablet && isHidden}
+        extra={
+          <>
+            <JoinButton />
+            {/* Hide Initially */}
+            {/* {!isActionSidebarOpen ? (
                 <Button
                   className="ml-1"
                   text={MSG.inviteMembers}
@@ -111,11 +117,11 @@ const ColonyLayout: FC<PropsWithChildren> = ({ children }) => {
                   onClick={() => setIsInviteMembersModalOpen(true)}
                 />
               ) : null} */}
-            </>
-          }
-        />
-      ) : null,
-    [isTokensModalOpen, txButtons, userHub],
+          </>
+        }
+      />
+    ),
+    [isTablet, txButtons, userHub],
   );
 
   return (
@@ -159,8 +165,9 @@ const ColonyLayout: FC<PropsWithChildren> = ({ children }) => {
           <ActionSidebar
             transactionId={transactionId || undefined}
             initialValues={actionSidebarInitialValues}
+            className="modal-blur"
           >
-            {getUserNavigation()}
+            {isTablet ? getUserNavigation() : undefined}
           </ActionSidebar>
         )}
       </AnimatePresence>

src/components/frame/Extensions/layouts/partials/UserNavigationWrapper/UserNavigationWrapper.tsx

@@ -13,6 +13,7 @@ const UserNavigationWrapper: FC<UserNavigationWrapperProps> = ({
   txButtons,
   extra,
   isHidden,
+  className,
 }) => {
   const userHubComponent = userHub || <HeaderAvatar />;
   const userNavigation = (
@@ -24,7 +25,7 @@ const UserNavigationWrapper: FC<UserNavigationWrapperProps> = ({
   );
 
   return (
-    <div className="flex w-full">
+    <div className={clsx(className, 'flex w-full')}>
       <div
         className={clsx('ml-auto transition-all', {
           'opacity-0': isHidden,

src/components/frame/Extensions/layouts/partials/UserNavigationWrapper/types.ts

@@ -5,4 +5,5 @@ export interface UserNavigationWrapperProps {
   userHub?: ReactNode;
   extra?: ReactNode;
   isHidden?: boolean;
+  className?: string;
 }

src/components/v5/common/ActionSidebar/ActionSidebar.tsx

@@ -50,6 +50,7 @@ const ActionSidebar: FC<PropsWithChildren<ActionSidebarProps>> = ({
   children,
   initialValues,
   transactionId,
+  className,
 }) => {
   const {
     action,
@@ -226,6 +227,7 @@ const ActionSidebar: FC<PropsWithChildren<ActionSidebarProps>> = ({
       initial="hidden"
       animate="visible"
       className={clsx(
+        className,
         `
           fixed
           bottom-4

src/components/v5/common/ActionSidebar/types.ts

@@ -30,4 +30,5 @@ export type UseActionFormBaseHook = (
 export interface ActionSidebarProps {
   initialValues?: FieldValues;
   transactionId?: string;
+  className?: string;
 }

src/components/v5/frame/PageLayout/PageLayout.tsx

@@ -67,6 +67,7 @@ const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({
         pauseOnFocusLoss
         pauseOnHover
         closeButton={CloseButton}
+        className="modal-blur"
       />
       <div className="w-full md:flex md:h-screen md:flex-col" ref={wrapperRef}>
         {/* This div has to always be rendered, otherwise the height of the top content wrapper won't be calculated correctly */}
@@ -90,10 +91,13 @@ const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({
           ) : (
             <div className="w-full md:flex md:h-[calc(100vh-var(--top-content-height))] md:gap-8 md:pl-4 md:pt-4">
               <div
-                className={clsx('relative z-sidebar md:flex-shrink-0', {
-                  'md:w-[5.125rem]': !hasWideSidebar,
-                  'md:w-[17.5rem]': hasWideSidebar,
-                })}
+                className={clsx(
+                  'modal-blur relative z-sidebar md:flex-shrink-0',
+                  {
+                    'md:w-[5.125rem]': !hasWideSidebar,
+                    'md:w-[17.5rem]': hasWideSidebar,
+                  },
+                )}
               >
                 <div
                   className={clsx(
@@ -110,14 +114,14 @@ const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({
                   'gap-8': !isOnColonyRoute,
                 })}
               >
-                <div className="flex-shrink-0 pr-4 pt-5">
+                <div className="flex-shrink-0 pr-4 pt-4">
                   <PageHeader
                     {...headerProps}
                     className={clsx({ '!items-center': isOnColonyRoute })}
                   />
                 </div>
                 <div
-                  className="flex-grow overflow-auto pb-4 pr-4"
+                  className="modal-blur flex-grow overflow-auto pb-4 pr-4"
                   style={{ scrollbarGutter: 'stable' }}
                 >
                   <div className="w-full max-w-[79.875rem] xl:mx-auto">

src/components/v5/frame/PageLayout/partials/PageHeader/PageHeader.tsx

@@ -14,7 +14,7 @@ const PageHeader: FC<PageHeaderProps> = ({
 }) => {
   return (
     <header
-      className={clsx(className, 'flex items-start', {
+      className={clsx(className, 'flex', {
         'justify-between gap-4': pageHeadingProps && pageHeadingProps.title,
         'justify-end': !pageHeadingProps,
         'items-center':

src/components/v5/frame/PageLayout/partials/PageHeading/PageHeading.tsx

@@ -12,7 +12,7 @@ const PageHeading: FC<PageHeadingProps> = ({
   title,
   className,
 }) => (
-  <div className={className}>
+  <div className={clsx(className, 'modal-blur')}>
     <Breadcrumbs className={clsx({ 'mb-2': title })} items={breadcrumbs} />
     {title && <h1 className="text-gray-900 heading-3">{title}</h1>}
   </div>

src/components/v5/shared/Modal/Modal.tsx

@@ -2,14 +2,9 @@ import clsx from 'clsx';
 import React, { type FC, type PropsWithChildren } from 'react';
 import { useIntl } from 'react-intl';
 
-import UserHubButton from '~common/Extensions/UserHubButton/index.ts';
-import { useGetTxButtons } from '~frame/Extensions/layouts/hooks.tsx';
-import { UserNavigationWrapper } from '~frame/Extensions/layouts/index.ts';
-import { useMobile } from '~hooks/index.ts';
+import { useAddClassToElement } from '~hooks/useAddClassToElement.ts';
 import Button, { CloseButton } from '~v5/shared/Button/index.ts';
 
-import JoinButton from '../Button/JoinButton/index.ts';
-
 import ModalBase from './ModalBase.tsx';
 import { type ModalProps } from './types.ts';
 
@@ -30,15 +25,21 @@ const Modal: FC<PropsWithChildren<ModalProps>> = ({
   buttonMode = 'secondarySolid',
   isTopSectionWithBackground,
   shouldShowHeader = false,
+  isOpen,
   ...props
 }) => {
   const { formatMessage } = useIntl();
-  const txButtons = useGetTxButtons();
-  const isMobile = useMobile();
+
+  useAddClassToElement({
+    shouldAddClass: isOpen && shouldShowHeader,
+    className: 'show-header-in-modal',
+    element: document.body,
+  });
 
   return (
     <ModalBase
       onRequestClose={onClose}
+      isOpen={isOpen}
       {...{ isFullOnMobile, ...props }}
       isTopSectionWithBackground={isTopSectionWithBackground}
     >
@@ -60,17 +61,6 @@ const Modal: FC<PropsWithChildren<ModalProps>> = ({
         onClick={onClose}
         className="absolute right-4 top-4 text-gray-400 hover:text-gray-600"
       />
-      {!isMobile && shouldShowHeader && (
-        <div className="fixed right-4 top-9 z-top">
-          <div className="relative">
-            <UserNavigationWrapper
-              txButtons={txButtons}
-              userHub={<UserHubButton />}
-              extra={<JoinButton />}
-            />
-          </div>
-        </div>
-      )}
       <div
         className={clsx(
           'flex w-full flex-grow flex-col [-webkit-overflow-scrolling:touch]',

src/context/ActionSidebarContext/ActionSidebarContextProvider.tsx

@@ -8,7 +8,10 @@ import React, {
 } from 'react';
 import { type FieldValues } from 'react-hook-form';
 
+import { useTablet } from '~hooks';
 import useToggle from '~hooks/useToggle/index.ts';
+import { isChildOf } from '~utils/checks/isChildOf.ts';
+import { getElementWithSelector } from '~utils/elements.ts';
 
 import {
   useAnalyticsContext,
@@ -36,6 +39,7 @@ const ActionSidebarContextProvider: FC<PropsWithChildren> = ({ children }) => {
   const [actionSidebarInitialValues, setActionSidebarInitialValues] =
     useState<FieldValues>();
   const cancelModalToggle = useToggle();
+  const isTablet = useTablet();
   const [
     isActionSidebarOpen,
     {
@@ -51,7 +55,12 @@ const ActionSidebarContextProvider: FC<PropsWithChildren> = ({ children }) => {
 
   actionSidebarUseRegisterOnBeforeCloseCallback((element) => {
     const isClickedInside = isElementInsideModalOrPortal(element);
-    if (!isClickedInside) {
+    const navigationWrapper = getElementWithSelector('.modal-blur-navigation');
+
+    if (
+      !isClickedInside ||
+      (isChildOf(navigationWrapper, element) && !isTablet)
+    ) {
       return false;
     }
 

src/hooks/useAddClassToElement.ts

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+
+export const useAddClassToElement = ({
+  shouldAddClass,
+  element,
+  className,
+}: {
+  shouldAddClass: boolean;
+  element: HTMLElement;
+  className: string;
+}): void => {
+  useEffect(() => {
+    if (shouldAddClass && !element.classList.contains(className)) {
+      element.classList.add(className);
+    }
+
+    return () => {
+      element.classList.remove(className);
+    };
+  }, [shouldAddClass, element, className]);
+};

src/styles/main.css

@@ -20,11 +20,11 @@
 }
 
 .rts___tab {
-  @apply shadow-none border-0 relative inline-flex items-center justify-center px-0 pt-0 pb-2 text-md font-medium cursor-pointer border-b border-transparent transition-colors duration-normal ml-0 mr-6 last:mr-0 md:hover:text-blue-400 rounded-none gap-1;
+  @apply relative ml-0 mr-6 inline-flex cursor-pointer items-center justify-center gap-1 rounded-none border-0 border-b border-transparent px-0 pb-2 pt-0 text-md font-medium shadow-none transition-colors duration-normal last:mr-0 md:hover:text-blue-400;
 }
 
 .rts___tab___selected {
-  @apply shadow-none text-blue-400 border-blue-400;
+  @apply border-blue-400 text-blue-400 shadow-none;
 }
 
 .rts___nav___btn:hover {
@@ -49,7 +49,11 @@ button[disabled].rts___btn {
   @apply text-gray-900;
 }
 
-body.ReactModal__Body--open > #root {
+body.ReactModal__Body--open .modal-blur {
+  @apply blur-[0.125rem];
+}
+
+body.ReactModal__Body--open:not(.show-header-in-modal) .modal-blur-navigation {
   @apply blur-[0.125rem];
 }
 

src/utils/checks/isChildOf.ts

@@ -0,0 +1,2 @@
+export const isChildOf = (parent: Element | null, child: Element): boolean =>
+  !!parent && parent.contains(child);

src/utils/elements.ts

@@ -54,3 +54,6 @@ export const stripHTMLFromText = (text: string): string => {
 
   return tempDiv.textContent || tempDiv.innerText || '';
 };
+
+export const getElementWithSelector = (selector: string): HTMLElement | null =>
+  document.querySelector(selector);

tailwind.config.js

@@ -148,6 +148,8 @@ module.exports = {
         dropdown: '20',
         header: '100',
         top: '1000',
+        userNav: '11',
+        userNavModal: '1001',
       },
     },
   },