Remove custom styles from popover on 'all accounts page' (#1116)

Author: ost-ptk

src/apps/popup/pages/all-accounts/content.tsx

@@ -94,6 +94,7 @@ export const AllAccountsContent = () => {
               accountsInfo={accountsInfo}
               accountLiquidBalance={accountLiquidBalance}
               isLoadingBalance={isLoadingBalance}
+              isAllAccountsPage={true}
             />
           );
         }}

src/libs/ui/components/account-list/account-list-item.tsx

@@ -59,6 +59,7 @@ interface AccountListItemProps {
   accountsInfo: Record<string, IAccountInfo> | undefined;
   accountLiquidBalance: string | undefined;
   isLoadingBalance: boolean;
+  isAllAccountsPage?: boolean;
 }
 
 export const AccountListItem = ({
@@ -70,7 +71,8 @@ export const AccountListItem = ({
   closeModal,
   accountsInfo,
   accountLiquidBalance,
-  isLoadingBalance
+  isLoadingBalance,
+  isAllAccountsPage = false
 }: AccountListItemProps) => {
   const popoverParentRef = useRef<HTMLDivElement | null>(null);
 
@@ -137,6 +139,7 @@ export const AccountListItem = ({
           showHideAccountItem={showHideAccountItem}
           onClick={closeModal}
           popoverParentRef={popoverParentRef}
+          isAllAccountsPage={isAllAccountsPage}
         />
       </AlignedSpaceBetweenFlexRow>
     </ListItemContainer>

src/libs/ui/components/account-popover/account-popover.tsx

@@ -35,12 +35,14 @@ interface AccountActionsMenuPopoverProps {
   onClick?: (e: React.MouseEvent) => void;
   showHideAccountItem?: boolean;
   popoverParentRef: React.MutableRefObject<HTMLDivElement | null>;
+  isAllAccountsPage?: boolean;
 }
 export const AccountActionsMenuPopover = ({
   account,
   onClick,
   showHideAccountItem,
-  popoverParentRef
+  popoverParentRef,
+  isAllAccountsPage = false
 }: AccountActionsMenuPopoverProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -59,6 +61,7 @@ export const AccountActionsMenuPopover = ({
   return (
     <Popover
       popoverParentRef={popoverParentRef}
+      isAllAccountsPage={isAllAccountsPage}
       isOpen={isOpen}
       setIsOpen={setIsOpen}
       content={() => (
@@ -80,7 +83,7 @@ export const AccountActionsMenuPopover = ({
                 marginRight="medium"
                 color="contentDisabled"
               />
-              <Typography type="body">
+              <Typography type="body" color="contentPrimary">
                 <Trans t={t}>Disconnect</Trans>
               </Typography>
             </PopoverLink>
@@ -104,7 +107,7 @@ export const AccountActionsMenuPopover = ({
                 marginRight="medium"
                 color="contentDisabled"
               />
-              <Typography type="body">
+              <Typography type="body" color="contentPrimary">
                 <Trans t={t}>Connect</Trans>
               </Typography>
             </PopoverLink>
@@ -126,7 +129,7 @@ export const AccountActionsMenuPopover = ({
               marginRight="medium"
               color="contentDisabled"
             />
-            <Typography type="body">
+            <Typography type="body" color="contentPrimary">
               <Trans t={t}>Rename</Trans>
             </Typography>
           </PopoverLink>
@@ -141,7 +144,7 @@ export const AccountActionsMenuPopover = ({
               marginRight="medium"
               color="contentDisabled"
             />
-            <Typography type="body">
+            <Typography type="body" color="contentPrimary">
               <Trans t={t}>View on CSPR.live</Trans>
             </Typography>
           </PopoverLink>
@@ -163,7 +166,7 @@ export const AccountActionsMenuPopover = ({
                 marginRight="medium"
                 color="contentDisabled"
               />
-              <Typography type="body">
+              <Typography type="body" color="contentPrimary">
                 {account.hidden ? (
                   <Trans t={t}>Show in list</Trans>
                 ) : (
@@ -189,7 +192,7 @@ export const AccountActionsMenuPopover = ({
               marginRight="medium"
               color="contentDisabled"
             />
-            <Typography type="body">
+            <Typography type="body" color="contentPrimary">
               <Trans t={t}>Manage</Trans>
             </Typography>
           </PopoverLink>

src/libs/ui/components/popover/popover.tsx

@@ -7,14 +7,16 @@ interface PopoverProps {
   children: JSX.Element;
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  isAllAccountsPage?: boolean;
 }
 
 export function Popover({
   content,
   children,
   popoverParentRef,
   isOpen,
-  setIsOpen
+  setIsOpen,
+  isAllAccountsPage = false
 }: PropsWithChildren<PopoverProps>) {
   useEffect(() => {
     // Get the container with class "ms-container"
@@ -48,11 +50,17 @@ export function Popover({
       isOpen={isOpen}
       onClickOutside={() => setIsOpen(false)}
       positions={['bottom', 'top']}
-      containerStyle={{
-        zIndex: '15'
-      }}
-      transform={{ top: 55, left: 135 }}
-      parentElement={popoverParentRef.current || undefined}
+      containerStyle={
+        isAllAccountsPage
+          ? undefined
+          : {
+              zIndex: '15'
+            }
+      }
+      transform={isAllAccountsPage ? undefined : { top: 55, left: 135 }}
+      parentElement={
+        isAllAccountsPage ? undefined : popoverParentRef.current || undefined
+      }
       content={content}
     >
       {children}