[FRE 1162] Mobile styling updates

examples/nextjs/pages/index.tsx

@@ -39,9 +39,13 @@ const Home = () => {
       </button>
       <div
         style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
           position: 'absolute',
           top: '50%',
           transform: 'translateY(-185px)',
+          width: '100%'
         }}
       >
         <Widget theme={theme === 'dark' ? defaultTheme : lightTheme} />

packages/widget/src/components/Button.tsx

@@ -62,8 +62,27 @@ export const Button = styled.button<FlexProps>`
   ${flexProps};
 `;
 
+export const PillButton = styled(Button)`
+  padding: 5px 10px;
+  height: 28px;
+  border-radius: 30px;
+  box-sizing: border-box;
+  background-color: ${({ theme }) => theme.secondary.background.normal};
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+`;
+
 export const Link = styled(Button).attrs({
   as: "a",
 })`
+  color: ${({ theme }) => theme.primary.text.lowContrast};
   text-decoration: none;
 `;
+
+export const PillButtonLink = styled(PillButton).attrs({
+  as: "a",
+})`
+  color: ${({ theme }) => theme.primary.text.lowContrast};
+  text-decoration: none;
+`;

packages/widget/src/components/MainButton.tsx

@@ -135,7 +135,7 @@ const StyledMainButton = styled(Row).attrs({
   background-color: ${({ theme, backgroundColor }) =>
     backgroundColor ?? theme.brandColor};
   height: 70px;
-  width: 480px;
+  width: 100%;
   border-radius: 25px;
   overflow: hidden;
 
@@ -194,7 +194,7 @@ const StyledTimeRemaining = styled(Row)`
 const StyledOverlay = styled(Row) <{ backgroundColor?: string }>`
   position: absolute;
   height: 66px;
-  width: 476px;
+  width: 100%;
   border-radius: 24px;
   background-color: ${({ theme }) => theme.primary.background.normal};
 `;

packages/widget/src/components/Modal.tsx

@@ -212,8 +212,12 @@ const StyledContent = styled(Dialog.Content) <{
   drawer?: boolean;
   open?: boolean;
 }>`
-  min-width: 300px;
+  max-width: 600px;
+  width: 100%;
   border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   z-index: 100;
   animation: ${({ drawer, open }) =>
     open

packages/widget/src/components/ModalHeader.tsx

@@ -34,7 +34,8 @@ export const StyledModalContainer = styled(Column)`
   position: relative;
   padding: 10px;
   gap: 10px;
-  width: 580px;
+  width: calc(100% - 20px);
+  max-height: 600px;
   border-radius: 20px;
   background-color: ${({ theme }) => theme.primary.background.normal};
   overflow: hidden;

packages/widget/src/components/RenderWalletList.tsx

@@ -215,8 +215,8 @@ export const RenderWalletList = ({
 
     return (
       <VirtualList
-        listItems={walletList}
         height={height}
+        listItems={walletList}
         itemHeight={ITEM_HEIGHT + ITEM_GAP}
         renderItem={renderItem}
         itemKey={(item) => item.walletName}

packages/widget/src/components/VirtualList.tsx

@@ -4,10 +4,11 @@ import styled, { useTheme } from "styled-components";
 import { useEffect, useRef, useState } from "react";
 import { Column } from "./Layout";
 import { SmallText } from "./Typography";
+import { useIsMobileScreenSize } from "@/hooks/useIsMobileScreenSize";
 
 export type VirtualListProps<T> = {
   listItems: T[];
-  height: number;
+  height?: number;
   itemHeight: number;
   bufferSize?: number;
   renderItem: (item: T, index: number) => React.ReactNode;
@@ -20,6 +21,9 @@ export type VirtualListProps<T> = {
   };
 };
 
+const MAX_MODAL_HEIGHT = 600;
+const MOBILE_VERTICAL_MARGIN = 100;
+
 export const VirtualList = <T,>({
   listItems,
   height,
@@ -31,9 +35,23 @@ export const VirtualList = <T,>({
 }: VirtualListProps<T>) => {
   const theme = useTheme();
   const [currentlyFocusedElement, setCurrentlyFocusedElement] = useState<HTMLElement>();
+  const [virtualListHeight, setVirtualListHeight] = useState(MAX_MODAL_HEIGHT - itemHeight);
+  const isMobileScreenSize = useIsMobileScreenSize();
 
   const listRef = useRef<ListRef>(null);
 
+  useEffect(() => {
+    const calculateHeight = () => {
+      if (isMobileScreenSize) {
+        return window.innerHeight - itemHeight - MOBILE_VERTICAL_MARGIN * 2;
+      }
+      return MAX_MODAL_HEIGHT - itemHeight;
+    };
+
+    setVirtualListHeight(calculateHeight());
+
+  }, [isMobileScreenSize, itemHeight]);
+
   useEffect(() => {
     const listElement = listRef.current?.nativeElement?.getElementsByClassName("rc-virtual-list-holder-inner")?.[0];
     const firstElementInList = (listElement?.firstChild as HTMLElement);
@@ -91,7 +109,7 @@ export const VirtualList = <T,>({
     <List
       ref={listRef}
       data={listItems}
-      height={height}
+      height={height ?? virtualListHeight}
       itemHeight={itemHeight}
       itemKey={itemKey}
       virtual

packages/widget/src/devMode/global.css

@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  min-height: 100vh;
+}

packages/widget/src/devMode/loadWidget.tsx

@@ -1,7 +1,7 @@
 import { StrictMode, useState } from "react";
 import { createRoot } from "react-dom/client";
 import { ShowWidget, Widget } from "@/widget/Widget";
-import { Row, Column } from "@/components/Layout";
+import { Column } from "@/components/Layout";
 
 const DevMode = () => {
   const [theme, setTheme] = useState<"dark" | "light">("dark");
@@ -14,7 +14,13 @@ const DevMode = () => {
     }
   };
   return (
-    <Row gap={20}>
+    <Column>
+      <Column gap={5} style={{ width: 200 }}>
+        <ShowWidget />
+        <button onClick={() => toggleTheme()}>
+          Toggle theme (current theme: {theme})
+        </button>
+      </Column>
       <Widget
         theme={theme}
         defaultRoute={{
@@ -28,13 +34,7 @@ const DevMode = () => {
           slippage: 5,
         }}
       />
-      <Column gap={5}>
-        <ShowWidget />
-        <button onClick={() => toggleTheme()}>
-          Toggle theme (current theme: {theme})
-        </button>
-      </Column>
-    </Row>
+    </Column>
   );
 };
 

packages/widget/src/hooks/useIsMobileScreenSize.ts

@@ -0,0 +1,23 @@
+import { useState, useEffect } from "react";
+
+const MAX_MOBILE_SCREEN_WIDTH = 767;
+
+export const useIsMobileScreenSize = () => {
+  const [isMobileScreenSize, setIsMobileScreenSize] = useState(window.innerWidth <= MAX_MOBILE_SCREEN_WIDTH);
+
+  useEffect(() => {
+    const handleResize = () => {
+      const isMobileScreenSize = window.innerWidth <= MAX_MOBILE_SCREEN_WIDTH;
+      setIsMobileScreenSize(isMobileScreenSize);
+    };
+
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  return isMobileScreenSize;
+};

packages/widget/src/icons/ChevronIcon.tsx

@@ -1,20 +1,26 @@
 type IconProps = {
   color?: string;
   backgroundColor?: string;
+  noBackground?: boolean;
 };
 
 export const ChevronIcon = ({
   color = "currentColor",
   backgroundColor = "transparent",
-}: IconProps) => (
+  noBackground = false,
+  ...props
+}: IconProps & React.SVGProps<SVGSVGElement>) => (
   <svg
     width="40"
     height="40"
-    viewBox="0 0 40 40"
+    viewBox={noBackground ? "8 13 24 14" : "0 0 40 40"}
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    {...props}
   >
-    <rect width="40" height="40" rx="10" fill={backgroundColor} />
+    {
+      !noBackground && <rect width="40" height="40" rx="10" fill={backgroundColor} />
+    }
     <path
       d="M11.9383 15.031L9.5 17.4693L17.0773 25.0449C17.0785 25.0461 17.0798 25.0474 17.081 25.0486L20.0023 27.9692L29.281 18.6907C29.2832 18.6884 29.2855 18.6861 29.2878 18.6838L30.5 17.4716L28.0617 15.0333L22.9273 20.1692C22.9246 20.1719 22.922 20.1745 22.9193 20.1771C21.3072 21.7811 18.7025 21.7826 17.0887 20.1813C17.0847 20.1774 17.0808 20.1736 17.0769 20.1696L11.9383 15.031Z"
       fill={color}

packages/widget/src/icons/CopyIcon.tsx

@@ -0,0 +1,22 @@
+type IconProps = {
+  color?: string;
+};
+
+export const CopyIcon = ({
+  color = "currentColor",
+  ...props
+}: IconProps & React.SVGProps<SVGSVGElement>) => (
+  <svg
+    width="13"
+    height="12"
+    viewBox="0 0 13 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M11.0806 0H5.09468C4.75744 0 4.47173 0.117095 4.23754 0.351288C4.00335 0.585481 3.88625 0.871193 3.88625 1.20843V3.59719H1.49749C1.16026 3.59719 0.874544 3.71428 0.640351 3.94848C0.406157 4.18267 0.289062 4.46838 0.289062 4.80562V10.7916C0.289062 11.1288 0.406157 11.4145 0.640351 11.6487C0.874544 11.8829 1.16026 12 1.49749 12H7.48344C7.82068 12 8.10639 11.8829 8.34058 11.6487C8.57478 11.4145 8.69187 11.1288 8.69187 10.7916V8.40281H11.0806C11.4179 8.40281 11.7036 8.28572 11.9378 8.05152C12.172 7.81733 12.2891 7.53162 12.2891 7.19438V1.20843C12.2891 0.871193 12.172 0.585481 11.9378 0.351288C11.7036 0.117095 11.4179 0 11.0806 0ZM1.49749 10.7916V4.80562H7.48344V10.7916H1.49749ZM11.0806 7.19438H8.69187V4.80562C8.69187 4.46838 8.57478 4.18267 8.34058 3.94848C8.10639 3.71428 7.82068 3.59719 7.48344 3.59719H5.09468V1.20843H11.0806V7.19438Z"
+      fill={color}
+    />
+  </svg>
+);

packages/widget/src/icons/XIcon.tsx

@@ -2,13 +2,14 @@ type IconProps = {
   color?: string;
 };
 
-export const XIcon = ({ color = "currentColor" }: IconProps) => (
+export const XIcon = ({ color = "currentColor", ...props }: IconProps & React.SVGProps<SVGSVGElement>) => (
   <svg
     width="10"
     height="10"
     viewBox="0 0 10 10"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    {...props}
   >
     <path
       d="M8.29234 0.740229L8.27336 0.721238L5.83563 3.15897C5.31942 3.67517 4.4821 3.67517 3.96589 3.15897L1.52643 0.719513L0.61056 1.63539L0.591572 1.65524L3.0293 4.09297C3.54551 4.60918 3.54551 5.4465 3.0293 5.9627L0.589844 8.40216L1.50572 9.31804L1.52471 9.33616L3.96244 6.89843C4.47865 6.38223 5.31597 6.38223 5.83217 6.89843L8.27163 9.33789L9.1875 8.42201L9.20649 8.40216L6.76877 5.96443C6.25256 5.44823 6.25256 4.6109 6.76877 4.0947L9.20822 1.65524L8.29234 0.739367V0.740229Z"

packages/widget/src/modals/AssetAndChainSelectorModal/AssetAndChainSelectorModal.tsx

@@ -1,6 +1,5 @@
 import { createModal, ModalProps } from "@/components/Modal";
 import { Column } from "@/components/Layout";
-import { styled } from "styled-components";
 import { useAtomValue } from "jotai";
 import {
   ClientAsset,
@@ -21,6 +20,7 @@ import { useFilteredAssets } from "./useFilteredAssets";
 import { useGroupedAssetByRecommendedSymbol } from "./useGroupedAssetsByRecommendedSymbol";
 import NiceModal, { useModal } from "@ebay/nice-modal-react";
 import { Modals } from "../registerModals";
+import { StyledModalContainer } from "@/components/ModalHeader";
 
 export type GroupedAsset = {
   id: string;
@@ -47,6 +47,9 @@ export type AssetAndChainSelectorModalProps = ModalProps & {
   context: SelectorContext;
 };
 
+const ITEM_HEIGHT = 60;
+const ITEM_GAP = 5;
+
 export const AssetAndChainSelectorModal = createModal(
   (modalProps: AssetAndChainSelectorModalProps) => {
     const modal = useModal();
@@ -152,8 +155,9 @@ export const AssetAndChainSelectorModal = createModal(
         setGroupedAssetSelected(null);
       }
     };
+
     return (
-      <StyledContainer>
+      <StyledModalContainer>
         <AssetAndChainSelectorModalSearchInput
           onSearch={handleSearch}
           onClickBack={onClickBack}
@@ -171,8 +175,7 @@ export const AssetAndChainSelectorModal = createModal(
         ) : (
           <VirtualList
             listItems={listOfAssetsOrChains ?? []}
-            height={530}
-            itemHeight={70}
+            itemHeight={ITEM_HEIGHT + ITEM_GAP}
             itemKey={(item) => isGroupedAsset(item) ? item.id : `${item.chainID}-${item.asset.denom}`}
             renderItem={renderItem}
             empty={{
@@ -181,17 +184,8 @@ export const AssetAndChainSelectorModal = createModal(
             }}
           />
         )}
-      </StyledContainer>
+      </StyledModalContainer>
     );
   }
 );
 
-const StyledContainer = styled(Column)`
-  padding: 10px;
-  gap: 10px;
-  width: 580px;
-  height: 600px;
-  border-radius: 20px;
-  background-color: ${({ theme }) => theme.primary.background.normal};
-  overflow: hidden;
-`;