From 66db2d5645629a763dd1e0ad02dac7c9f83a671d Mon Sep 17 00:00:00 2001
From: alecdwm <alec@owls.io>
Date: Thu, 13 Jul 2023 00:58:45 +0000
Subject: [PATCH] fix: folder design in portfolio account selector

---
 .../ui/domains/Portfolio/AccountSelect.tsx    | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/apps/extension/src/ui/domains/Portfolio/AccountSelect.tsx b/apps/extension/src/ui/domains/Portfolio/AccountSelect.tsx
index 95eb9ab8d5..34f888fbd2 100644
--- a/apps/extension/src/ui/domains/Portfolio/AccountSelect.tsx
+++ b/apps/extension/src/ui/domains/Portfolio/AccountSelect.tsx
@@ -267,6 +267,8 @@ const Item = forwardRef<HTMLDivElement, ItemProps>(function Item(
   const isAccount = item && item.type === "account"
   const isFolder = item && item.type === "folder"
 
+  if (isFolder) return <FolderItem {...{ ref, item, collapsed }} />
+
   const icon = isAllAccounts ? (
     <AllAccountsIcon className="shrink-0 text-3xl" />
   ) : isAccount ? (
@@ -280,7 +282,7 @@ const Item = forwardRef<HTMLDivElement, ItemProps>(function Item(
       {t("All Accounts")}
     </div>
   ) : (
-    <div className="flex items-center gap-2">
+    <div className="flex w-full items-center gap-2">
       <div className="overflow-hidden text-ellipsis whitespace-nowrap text-sm">{item.name}</div>
       {isAccount && <AccountTypeIcon className="text-primary" origin={item.origin} />}
     </div>
@@ -328,3 +330,25 @@ const Item = forwardRef<HTMLDivElement, ItemProps>(function Item(
     </div>
   )
 })
+
+type FolderItemProps = {
+  item?: AccountSelectFolderItem
+  collapsed?: boolean
+}
+const FolderItem = forwardRef<HTMLDivElement, FolderItemProps>(function FolderItem(
+  { item, collapsed },
+  ref
+) {
+  return (
+    <div
+      ref={ref}
+      className="text-body-disabled bg-grey-850 flex w-full cursor-pointer items-center gap-2 p-2 text-sm"
+    >
+      <ChevronDownIcon
+        className={classNames("shrink-0 transition-transform", collapsed && "-rotate-90")}
+      />
+      <div className="flex-grow overflow-hidden text-ellipsis whitespace-nowrap">{item?.name}</div>
+      <div className="text-xs">{item?.addresses.length}</div>
+    </div>
+  )
+})