From 1904ab43b772167cef249b179d6c179bf9f63262 Mon Sep 17 00:00:00 2001
From: LemonAdam <adamalmounayar@hotmail.com>
Date: Fri, 27 Feb 2026 21:37:45 +0100
Subject: [PATCH] fade animations for modals

---
 .../popup/components/SlideupModal/index.tsx   |  4 +--
 .../popup/components/SlideupModal/styles.scss | 11 +++---
 .../account/AccountHeaderModal/index.tsx      | 35 ++++++-------------
 .../account/AccountHeaderModal/styles.scss    | 18 +++++++---
 4 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/extension/src/popup/components/SlideupModal/index.tsx b/extension/src/popup/components/SlideupModal/index.tsx
index 7308638651..9288fb79bf 100644
--- a/extension/src/popup/components/SlideupModal/index.tsx
+++ b/extension/src/popup/components/SlideupModal/index.tsx
@@ -33,10 +33,10 @@ export const SlideupModal = ({
       <LoadingBackground
         onClick={() => {
           setIsOpen(false);
-          // our dismiss transition is 200ms long
+          // our dismiss transition is 150ms long
           setTimeout(() => {
             setIsModalOpen(false);
-          }, 200);
+          }, 150);
         }}
         isActive={isOpen}
       />
diff --git a/extension/src/popup/components/SlideupModal/styles.scss b/extension/src/popup/components/SlideupModal/styles.scss
index cc4475c7cc..572d8d878a 100644
--- a/extension/src/popup/components/SlideupModal/styles.scss
+++ b/extension/src/popup/components/SlideupModal/styles.scss
@@ -8,14 +8,13 @@
   width: 100%;
   z-index: var(--z-index-modal);
 
-  /* Start hidden/offscreen and invisible */
-  transform: translateY(100%);
+  transform: scale(0.98);
   opacity: 0;
   pointer-events: none;
 
   transition:
-    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
-    opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    transform 0.15s cubic-bezier(0.16, 1, 0.3, 1),
+    opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1);
   will-change: transform, opacity;
 
   .View__inset {
@@ -25,13 +24,13 @@
 }
 
 .SlideupModal.open {
-  transform: translateY(0);
+  transform: scale(1);
   opacity: 1;
   pointer-events: auto;
 }
 
 .SlideupModal.closed {
-  transform: translateY(100%);
+  transform: scale(0.98);
   opacity: 0;
   pointer-events: none;
 }
diff --git a/extension/src/popup/components/account/AccountHeaderModal/index.tsx b/extension/src/popup/components/account/AccountHeaderModal/index.tsx
index a5315f29eb..0d08450a04 100644
--- a/extension/src/popup/components/account/AccountHeaderModal/index.tsx
+++ b/extension/src/popup/components/account/AccountHeaderModal/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React from "react";
 
 import "./styles.scss";
 
@@ -14,26 +14,13 @@ export const AccountHeaderModal = ({
   isDropdownOpen,
   icon,
   className,
-}: AccountHeaderModalProps) => {
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (dropdownRef.current != null) {
-      dropdownRef.current.style.maxHeight = isDropdownOpen
-        ? `calc(100vh - 1rem)`
-        : "0";
-    }
-  }, [isDropdownOpen]);
-
-  return (
-    <>
-      {icon}
-      <div
-        ref={dropdownRef}
-        className={`AccountHeaderModal ${className || ""}`}
-      >
-        <div className="AccountHeaderModal__content">{children}</div>
-      </div>
-    </>
-  );
-};
+}: AccountHeaderModalProps) => (
+  <>
+    {icon}
+    <div
+      className={`AccountHeaderModal ${isDropdownOpen ? "AccountHeaderModal--open" : ""} ${className || ""}`}
+    >
+      <div className="AccountHeaderModal__content">{children}</div>
+    </div>
+  </>
+);
diff --git a/extension/src/popup/components/account/AccountHeaderModal/styles.scss b/extension/src/popup/components/account/AccountHeaderModal/styles.scss
index f8469b64c0..8fb5caf597 100644
--- a/extension/src/popup/components/account/AccountHeaderModal/styles.scss
+++ b/extension/src/popup/components/account/AccountHeaderModal/styles.scss
@@ -1,15 +1,24 @@
 @use "../../../styles/utils.scss" as *;
 
 .AccountHeaderModal {
-  overflow: hidden;
   position: absolute;
   left: 0;
   top: 0;
   z-index: calc(var(--z-index-tooltip) + 1);
-  transition: max-height var(--dropdown-animation);
 
-  // default max-height on page load
-  max-height: 0;
+  /* Fade animation */
+  opacity: 0;
+  transform: scale(0.95);
+  pointer-events: none;
+  transition:
+    opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1),
+    transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+
+  &--open {
+    opacity: 1;
+    transform: scale(1);
+    pointer-events: auto;
+  }
 
   &__content {
     background: var(--sds-clr-gray-01);
@@ -17,5 +26,6 @@
     border: 1px solid var(--sds-clr-gray-06);
     max-height: calc(100vh - 1rem);
     padding: pxToRem(4px);
+    overflow: auto;
   }
 }