diff --git a/extension/src/popup/components/SlideupModal/index.tsx b/extension/src/popup/components/SlideupModal/index.tsx index 4396696b23..42e7c45f37 100644 --- a/extension/src/popup/components/SlideupModal/index.tsx +++ b/extension/src/popup/components/SlideupModal/index.tsx @@ -68,10 +68,10 @@ export const SlideupModal = ({ { 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 313c1507ba..77cfd3121b 100644 --- a/extension/src/popup/components/SlideupModal/styles.scss +++ b/extension/src/popup/components/SlideupModal/styles.scss @@ -8,17 +8,15 @@ 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; overflow: hidden; transition: - transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), - opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), - height 0.2s cubic-bezier(0.4, 0, 0.2, 1); - will-change: transform, opacity, height; + 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 { border: 0; @@ -27,13 +25,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(null); - - useEffect(() => { - if (dropdownRef.current != null) { - dropdownRef.current.style.maxHeight = isDropdownOpen - ? `calc(100vh - 1rem)` - : "0"; - } - }, [isDropdownOpen]); - - return ( - <> - {icon} -
-
{children}
-
- - ); -}; +}: AccountHeaderModalProps) => ( + <> + {icon} +
+
{children}
+
+ +); 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; } }