From d56ea9b5380a5c6865b7d5fea181b5b64ce5480a Mon Sep 17 00:00:00 2001
From: Ostap Piatkovskyi <44294945+ost-ptk@users.noreply.github.com>
Date: Tue, 21 Jan 2025 20:00:24 +0200
Subject: [PATCH 1/2] Remove custom styles from popover on 'all accounts page'
 (#1116)

---
 src/apps/popup/pages/all-accounts/content.tsx |  1 +
 .../account-list/account-list-item.tsx        |  5 ++++-
 .../account-popover/account-popover.tsx       | 17 +++++++++-------
 src/libs/ui/components/popover/popover.tsx    | 20 +++++++++++++------
 4 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/apps/popup/pages/all-accounts/content.tsx b/src/apps/popup/pages/all-accounts/content.tsx
index 6155aa31..465a0a9d 100644
--- a/src/apps/popup/pages/all-accounts/content.tsx
+++ b/src/apps/popup/pages/all-accounts/content.tsx
@@ -94,6 +94,7 @@ export const AllAccountsContent = () => {
               accountsInfo={accountsInfo}
               accountLiquidBalance={accountLiquidBalance}
               isLoadingBalance={isLoadingBalance}
+              isAllAccountsPage={true}
             />
           );
         }}
diff --git a/src/libs/ui/components/account-list/account-list-item.tsx b/src/libs/ui/components/account-list/account-list-item.tsx
index cef60ca3..d5ef78cb 100644
--- a/src/libs/ui/components/account-list/account-list-item.tsx
+++ b/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>
diff --git a/src/libs/ui/components/account-popover/account-popover.tsx b/src/libs/ui/components/account-popover/account-popover.tsx
index c89ada24..4b70b4e4 100644
--- a/src/libs/ui/components/account-popover/account-popover.tsx
+++ b/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>
diff --git a/src/libs/ui/components/popover/popover.tsx b/src/libs/ui/components/popover/popover.tsx
index 52a5ccb4..a648e375 100644
--- a/src/libs/ui/components/popover/popover.tsx
+++ b/src/libs/ui/components/popover/popover.tsx
@@ -7,6 +7,7 @@ interface PopoverProps {
   children: JSX.Element;
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  isAllAccountsPage?: boolean;
 }
 
 export function Popover({
@@ -14,7 +15,8 @@ export function Popover({
   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}

From 676dd9859af49a41fc594560d0340cbbe0b91b43 Mon Sep 17 00:00:00 2001
From: Ostap Piatkovskyi <44294945+ost-ptk@users.noreply.github.com>
Date: Wed, 22 Jan 2025 11:34:40 +0200
Subject: [PATCH 2/2] Pass isAllAccountsPage prop to AccountList component
 (#1117)

---
 src/apps/popup/pages/all-accounts/content.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/apps/popup/pages/all-accounts/content.tsx b/src/apps/popup/pages/all-accounts/content.tsx
index 465a0a9d..265e7388 100644
--- a/src/apps/popup/pages/all-accounts/content.tsx
+++ b/src/apps/popup/pages/all-accounts/content.tsx
@@ -122,6 +122,7 @@ export const AllAccountsContent = () => {
                 accountsInfo={accountsInfo}
                 accountLiquidBalance={accountLiquidBalance}
                 isLoadingBalance={isLoadingBalance}
+                isAllAccountsPage={true}
               />
             );
           }}