style: make extension profile tabs smoother

PolkaGate · Nov 16, 2024 · 05c88fc · 05c88fc
1 parent 24100db
commit 05c88fc
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/packages/extension-polkagate/src/popup/home/ProfileTab.tsx b/packages/extension-polkagate/src/popup/home/ProfileTab.tsx
@@ -75,7 +75,7 @@ function ProfileTab ({ index, isContainerHovered, isSelected, orderedAccounts, t
   const onMouseLeave = useCallback(() => setIsHovered(false), []);
 
   return (
-    <Grid container item sx={{ transform: !isContainerHovered && !isSelected ? `translateY(${HIDDEN_PERCENT})` : undefined, transition: 'transform 0.2s', width: 'fit-content' }}>
+    <Grid container item sx={{ transform: !isContainerHovered && !isSelected ? `translateY(${HIDDEN_PERCENT})` : undefined, transition: 'transform 0.75s', width: 'fit-content' }}>
       <Collapse
         collapsedSize={COLLAPSED_SIZE}
         in={visibleContent}
@@ -92,7 +92,8 @@ function ProfileTab ({ index, isContainerHovered, isSelected, orderedAccounts, t
           cursor: 'pointer',
           height: COLLAPSED_SIZE,
           my: '2px',
-          opacity: isDarkMode ? (isContainerHovered || isSelected ? 1 : 0.3) : undefined
+          opacity: isDarkMode ? (isContainerHovered || isSelected ? 1 : 0.3) : undefined,
+          transition: visibleContent ? 'box-shadow 1s, opacity 1s' : 'box-shadow 0.2s'
         }}
       >
         <Grid alignItems='center' container item justifyContent='center' sx={{ display: 'flex', flexDirection: 'row', flexWrap: 'nowrap', minWidth: '40px', px: '8px', width: 'fit-content' }}>