Fixed styling of Overlay and WidgetFrame

airswap · Oct 18, 2024 · cbe7e29 · cbe7e29
1 parent 7077944
commit cbe7e29
Show file tree

Hide file tree

Showing 11 changed files with 48 additions and 42 deletions.
diff --git a/src/components/InformationModals/subcomponents/OrderTypesModal/OrderTypesModal.styles.tsx b/src/components/InformationModals/subcomponents/OrderTypesModal/OrderTypesModal.styles.tsx
@@ -3,9 +3,9 @@ import styled from "styled-components/macro";
 import { OverlayActionButton } from "../../../Overlay/Overlay.styles";
 
 export const Container = styled.div`
-  padding-bottom: 2rem;
+  padding-bottom: 3rem;
 `;
 
 export const StyledCloseButton = styled(OverlayActionButton)`
-  margin-top: 1.5rem;
+  margin-top: 3rem;
 `;
diff --git a/src/components/Overlay/Overlay.styles.tsx b/src/components/Overlay/Overlay.styles.tsx
@@ -1,4 +1,3 @@
-import { motion } from "framer-motion";
 import { css } from "styled-components";
 import styled from "styled-components/macro";
 
@@ -64,7 +63,7 @@ export const TitleContainer = styled.div`
   align-items: center;
   flex-direction: row;
   justify-content: space-between;
-  margin-block-end: 1rem;
+  margin-block-end: 2rem;
   padding-block-start: ${sizes.tradeContainerPadding};
   transition: background ease-in-out 0.3s;
 

diff --git a/src/components/Overlay/Overlay.tsx b/src/components/Overlay/Overlay.tsx
@@ -56,28 +56,23 @@ const Overlay: FC<OverlayProps> = ({
   const { t } = useTranslation();
   const ref = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
-  const shouldReduceMotion = useReducedMotion();
-  const [initialized, setInitialized] = useState(false);
-  const animationIsDisabled = !shouldAnimate || (!isHidden && !initialized);
 
   const { showOverlay, setShowOverlay } = useContext(InterfaceContext);
+  const [isAnimatedOut, setIsAnimatedOut] = useState(false);
   const { height: containerHeight } = useWindowSize();
   const { height: contentHeight } = useElementSize(contentRef);
-  const [, hasOverflow] = useIsOverflowing(ref, [showOverlay, isHidden]);
   const paddingBlock = 32;
   const contentY = Math.max(
     0,
     (containerHeight - paddingBlock * 2 - contentHeight) / 2
   );
-  console.log(ref.current, hasOverflow);
 
   useKeyPress(onClose, ["Escape"]);
+  console.log("isAnimatedOut", isAnimatedOut);
 
   useEffect(() => {
-    setInitialized(true);
-  }, []);
+    setIsAnimatedOut(false);
 
-  useEffect(() => {
     if (isHidden) {
       setShowOverlay(false);
     }
@@ -87,6 +82,10 @@ const Overlay: FC<OverlayProps> = ({
     () => {
       // Make sure the animation ended before setting the showOverlay state
       setShowOverlay(!isHidden);
+
+      if (isHidden) {
+        setIsAnimatedOut(true);
+      }
     },
     250,
     [isHidden]
@@ -99,6 +98,9 @@ const Overlay: FC<OverlayProps> = ({
       hasOverflow={!contentY}
       isHidden={isHidden}
       showScrollbar={!!showOverlay && !isHidden}
+      style={{
+        visibility: isAnimatedOut ? "hidden" : "visible",
+      }}
       className={className}
     >
       <ContentContainer

diff --git a/src/components/Page/Page.styles.tsx b/src/components/Page/Page.styles.tsx
@@ -12,6 +12,7 @@ export const InnerContainer = styled.div<{ $isScrollLocked?: boolean }>`
   position: relative;
   width: 100%;
   height: 100%;
+  flex-grow: 1;
 
   @media ${breakPoints.phoneOnly}, ${breakPoints.shallowScreenOnly} {
     justify-content: flex-start;
@@ -25,9 +26,14 @@ export const InnerContainer = styled.div<{ $isScrollLocked?: boolean }>`
 `;
 
 export const StyledPage = styled.div<{ showOverlay?: boolean }>`
+  display: flex;
+  flex-direction: column;
   position: relative;
   min-width: 18rem;
-  min-height: ${(props) => (props.showOverlay ? "unset" : "37.5rem")};
+  min-height: ${(props) => (props.showOverlay ? "unset" : "100vh")};
+  max-height: ${(props) => (props.showOverlay ? "100vh" : "unset")};
+  overflow-x: hidden;
+  overflow-y: ${(props) => (props.showOverlay ? "hidden" : "unset")};
 
   @media (min-height: 29rem) and (max-width: ${breakpointSizes.phone}) {
     display: flex;
@@ -39,7 +45,6 @@ export const StyledPage = styled.div<{ showOverlay?: boolean }>`
 
   @media ${breakPoints.phoneOnly} {
     width: 100%;
-    min-height: ${sizes.widgetMobileSize};
     padding: 0 ${sizes.pageMobilePadding};
   }
 `;

diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx
@@ -69,11 +69,7 @@ const Page: FC<PageProps> = ({ children, className }): ReactElement => {
   }, []);
 
   return (
-    <StyledPage
-      showOverlay={showOverlay}
-      style={{ height: `${pageHeight}px` }}
-      className={className}
-    >
+    <StyledPage showOverlay={showOverlay} className={className}>
       <HelmetContainer title={t("app.title")} />
       <InnerContainer>
         <Toaster open={transactionsTabIsOpen} />

diff --git a/src/components/TransactionsTab/TransactionsTab.styles.tsx b/src/components/TransactionsTab/TransactionsTab.styles.tsx
@@ -23,7 +23,7 @@ export const Container = styled(motion.div)`
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-width: ${sizes.widgetMobileSize};
+  max-width: ${sizes.widgetMobileWidth};
   height: 100%;
   padding: 1.5rem 1.5rem 0;
   background-color: ${(props) => props.theme.colors.black};

diff --git a/src/components/WalletProviderList/WalletProviderList.styles.tsx b/src/components/WalletProviderList/WalletProviderList.styles.tsx
@@ -4,7 +4,7 @@ export const StyledWalletProviderList = styled.div`
   display: flex;
   flex-direction: column;
   margin-block-start: 3rem;
-  padding-block-end: 2rem;
+  padding-block-end: 3rem;
 `;
 
 export const TitleContainer = styled.div`

diff --git a/src/components/WidgetFrame/WidgetFrame.styles.tsx b/src/components/WidgetFrame/WidgetFrame.styles.tsx
@@ -2,17 +2,15 @@ import styled from "styled-components/macro";
 
 import breakPoints from "../../style/breakpoints";
 import { sizes } from "../../style/sizes";
-import { Container as OverlayContainer } from "../Overlay/Overlay.styles";
 
 export const WidgetFrameWrapper = styled.div`
   display: flex;
   flex-direction: column;
   position: relative;
   border-radius: 0.25rem;
   margin: 0 ${sizes.pageMobilePadding};
-  width: ${sizes.widgetSize};
+  width: ${sizes.widgetWidth};
   height: fit-content;
-  min-height: ${sizes.widgetSize};
   padding: ${sizes.tradeContainerPadding};
   transition: box-shadow 0.3s ease-in-out;
   will-change: transform;
@@ -23,7 +21,6 @@ export const WidgetFrameWrapper = styled.div`
 
   @media ${breakPoints.phoneOnly} {
     width: 100%;
-    min-height: ${sizes.widgetMobileSize};
     margin: 0;
     padding: ${sizes.tradeContainerMobilePadding};
   }
@@ -40,23 +37,17 @@ export const StyledWidgetFrame = styled.div<StyledTradeContainerProps>`
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-grow: 1;
   width: 100%;
   height: fit-content;
-  // min-height: ${(props) =>
-    props.$isOverlayOpen ? "unset" : sizes.widgetSize};
   overflow-y: ${(props) => (props.$isOverlayOpen ? "hidden" : "unset")};
 
   @media ${breakPoints.tabletPortraitUp} {
     transition: transform 0.3s ease-in-out;
     transform: ${(props) => (props.$isOpen ? "translate(-6.5rem, 0rem)" : "0")};
   }
 
-  @media ${breakPoints.phoneOnly}, ${breakPoints.shallowScreenOnly} {
-    margin-bottom: 1.5rem;
-  }
-
   @media ${breakPoints.phoneOnly} {
     margin-bottom: 0;
-    min-height: ${sizes.widgetMobileSize};
   }
 `;
diff --git a/src/hooks/useElementSize.ts b/src/hooks/useElementSize.ts
@@ -1,4 +1,4 @@
-import { RefObject, useEffect, useState } from "react";
+import { RefObject, useCallback, useEffect, useState } from "react";
 
 interface Size {
   width: number;
@@ -20,19 +20,32 @@ const useElementSize = (
     top: 0,
   });
 
-  let resizeObserver: ResizeObserver;
+  // Add debounce function
+  const debounce = (func: Function, delay: number) => {
+    let timeoutId: NodeJS.Timeout;
+    return (...args: any[]) => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => func(...args), delay);
+    };
+  };
+
+  // Create a memoized, debounced version of setSize
+  const debouncedSetSize = useCallback(
+    debounce((newSize: Size) => {
+      setSize(newSize);
+    }, 100),
+    []
+  );
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: More dependencies not needed
   useEffect(
     (): (() => void) => {
-      resizeObserver = new ResizeObserver((entries): void => {
-        for (let i = 0; i < entries.length; i += 1) {
-          const entry = entries[i];
-
+      const resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
           const { scrollWidth, scrollHeight } = entry.target;
           const { width, height, top } = entry.target.getBoundingClientRect();
 
-          setSize({ width, height, scrollWidth, scrollHeight, top });
+          debouncedSetSize({ width, height, scrollWidth, scrollHeight, top });
         }
       });
 

diff --git a/src/style/sizes.ts b/src/style/sizes.ts
@@ -4,6 +4,6 @@ export const sizes = {
   toolbarMaxHeight: "44rem",
   tradeContainerPadding: "3.75rem",
   tradeContainerMobilePadding: "2rem",
-  widgetSize: "37.5rem",
-  widgetMobileSize: "27.75rem",
+  widgetWidth: "37.5rem",
+  widgetMobileWidth: "27.75rem",
 };
diff --git a/src/styled-components/Modal/Modal.tsx b/src/styled-components/Modal/Modal.tsx
@@ -13,7 +13,7 @@ export const ModalParagraph = styled(InfoSubHeading)`
 `;
 
 export const ModalSubTitle = styled(Title)`
-  margin: 2.5rem 0 0.5rem;
+  margin: 2rem 0 0.5rem;
   font-size: 1rem;
 
   &:first-child {