Add mobile styling for history page and settings drawer (#458)

skip-mev · Nov 13, 2024 · 4d03b96 · 4d03b96
1 parent a0706f3
commit 4d03b96
Show file tree

Hide file tree

Showing 12 changed files with 139 additions and 69 deletions.
diff --git a/.changeset/moody-ghosts-invent.md b/.changeset/moody-ghosts-invent.md
@@ -0,0 +1,5 @@
+---
+'@skip-go/widget': patch
+---
+
+Add mobile styling for history and swap settings
diff --git a/examples/nextjs/pages/index.tsx b/examples/nextjs/pages/index.tsx
@@ -39,13 +39,9 @@ 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} />

diff --git a/packages/widget/src/components/Typography.tsx b/packages/widget/src/components/Typography.tsx
@@ -13,6 +13,7 @@ type TextProps = {
   mainButtonColor?: string;
   normalTextColor?: boolean;
   capitalize?: boolean;
+  overflowEllipsis?: boolean;
 };
 
 export const removeButtonStyles = css`
@@ -46,7 +47,8 @@ export const textProps = css<TextProps>`
   ${({ opacity }) => opacity && `opacity: ${opacity}`};
   ${({ lineHeight }) => lineHeight && `line-height: ${lineHeight}`};
   ${({ textWrap }) => textWrap && `text-wrap: ${textWrap}`};
-  ${({ monospace }) => monospace && "font-family: 'ABCDiatype-mono', monospace;"};
+  ${({ monospace }) =>
+    monospace && "font-family: 'ABCDiatype-mono', monospace;"};
   ${({ mainButtonColor }) =>
     mainButtonColor && `color: ${getBrandButtonTextColor(mainButtonColor)}`};
   ${({ capitalize }) =>
@@ -56,6 +58,12 @@ export const textProps = css<TextProps>`
         text-transform: capitalize;
       }
     `};
+  ${({ overflowEllipsis }) =>
+    overflowEllipsis &&
+    css`
+      text-overflow: ellipsis;
+      overflow: hidden;
+    `};
 `;
 
 export const SmallText = styled.p<TextProps>`

diff --git a/packages/widget/src/devMode/loadWidget.tsx b/packages/widget/src/devMode/loadWidget.tsx
@@ -27,7 +27,6 @@ const DevMode = () => {
         top: "50%",
         left: "50%",
         transform: "translate(-50%, -185px)",
-        width: "100%",
       }}
         align="center"
         justify="center"

diff --git a/packages/widget/src/icons/HistoryArrowIcon.tsx b/packages/widget/src/icons/HistoryArrowIcon.tsx
@@ -2,13 +2,14 @@ type IconProps = {
   color?: string;
 };
 
-export const HistoryArrowIcon = ({ color = "currentColor" }: IconProps) => (
+export const HistoryArrowIcon = ({ color = "currentColor", ...props }: IconProps & React.SVGProps<SVGSVGElement>) => (
   <svg
     width="10"
     height="9"
     viewBox="0 0 10 9"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    {...props}
   >
     <path
       d="M3.99905 8.941L7.36606 5.574H0.463055V4.196H7.36606L3.99905 0.828999H5.72806L9.78406 4.885L5.72806 8.941H3.99905Z"

diff --git a/packages/widget/src/modals/SwapSettingsDrawer/SwapSettingsDrawer.tsx b/packages/widget/src/modals/SwapSettingsDrawer/SwapSettingsDrawer.tsx
@@ -113,8 +113,7 @@ export const SwapSettingsDrawer = createModal(() => {
             </Row>
           </Row>
         )}
-        <SlippageSelector
-        />
+
       </Column>
       {(axelarFee || hyperlaneFee || smartRelayFee) && (
         <Column gap={10}>
@@ -147,6 +146,7 @@ export const SwapSettingsDrawer = createModal(() => {
           )}
         </Column>
       )}
+      <SlippageSelector />
       <SwapDetailText justify="space-between">
         <SwapPageFooterItems showRouteInfo />
       </SwapDetailText>
@@ -159,10 +159,10 @@ const StyledSwapPageSettings = styled(Column)`
   width: 100%;
   padding: 20px;
   border-radius: 20px;
+  margin: 0 10px;
   background-color: ${(props) => props.theme.primary.background.normal};
 `;
 
-
 const SwapDetailText = styled(Row).attrs({
   as: SmallText,
   normalTextColor: true,

diff --git a/packages/widget/src/pages/SwapPage/SlippageSelector.tsx b/packages/widget/src/pages/SwapPage/SlippageSelector.tsx
@@ -24,7 +24,7 @@ const SlippageSelector: React.FC = () => {
 
   return (
     <Container>
-      <SwapDetailText>
+      <SwapDetailText align="center">
         Max Slippage
         <Spacer width={5} />
         <QuestionMarkIcon
@@ -33,11 +33,12 @@ const SlippageSelector: React.FC = () => {
         />
         {showMaxSlippageTooltip && (
           <Tooltip>
-            If price changes unfavorably during the transaction by more than this amount, the transaction will revert.
+            If price changes unfavorably during the transaction by more than
+            this amount, the transaction will revert.
           </Tooltip>
         )}
       </SwapDetailText>
-      <Row gap={4}>
+      <StyledSlippageOptionsContainer gap={5}>
         {SLIPPAGE_OPTIONS.map((option) => (
           <StyledSlippageOptionLabel
             key={option}
@@ -49,7 +50,7 @@ const SlippageSelector: React.FC = () => {
           </StyledSlippageOptionLabel>
         ))}
         <CustomSlippageContainer>
-          {(isCustomSlippage || isInputFocused) ? (
+          {isCustomSlippage || isInputFocused ? (
             <>
               <CustomSlippageInput
                 type="number"
@@ -74,25 +75,39 @@ const SlippageSelector: React.FC = () => {
             <StyledSlippageOptionLabel
               monospace
               selected={isCustomSlippage && !isInputFocused}
-              onClick={() =>  setIsInputFocused(true)}
+              onClick={() => setIsInputFocused(true)}
             >
               Custom
             </StyledSlippageOptionLabel>
           )}
         </CustomSlippageContainer>
-      </Row>
+      </StyledSlippageOptionsContainer>
     </Container>
   );
 };
 
 const Container = styled(Row)`
-  max-height: 25px;
   justify-content: space-between;
+
+  @media (max-width: 767px) {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 15px;
+  }
+`;
+
+const StyledSlippageOptionsContainer = styled(Row)`
+  @media (max-width: 767px) {
+    width: 100%;
+  }
 `;
 
 const CustomSlippageContainer = styled.div`
   position: relative;
   width: 60px;
+  @media (max-width: 767px) {
+    width: 100%;
+  }
 `;
 
 const SwapDetailText = styled(Row).attrs({
@@ -117,10 +132,22 @@ const Tooltip = styled(SmallText).attrs({
   z-index: 1;
 `;
 
-const StyledSlippageOptionLabel = styled(SmallText)<{ selected?: boolean }>`
+const StyledSlippageOptionLabel = styled(SmallText) <{ selected?: boolean }>`
   border-radius: 7px;
   padding: 4px 7px;
   white-space: nowrap;
+
+  @media (max-width: 767px) {
+    background-color: ${({ theme }) => theme.secondary.background.transparent};
+    padding: 7px 15px;
+    border-radius: 15px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+  }
+
   color: ${({ selected, theme }) =>
     selected
       ? getBrandButtonTextColor(theme.brandColor)
@@ -133,21 +160,24 @@ const StyledSlippageOptionLabel = styled(SmallText)<{ selected?: boolean }>`
   ${({ selected, theme }) =>
     selected &&
     css`
-      background-color: ${theme.brandColor};
-      opacity: 1;
+      & {
+        background-color: ${theme.brandColor};
+        opacity: 1;
+      }
     `}
 `;
 
 const CustomSlippageInput = styled(SmallText).attrs({
   as: "input",
-})<{ selected?: boolean }>`
+}) <{ selected?: boolean }>`
   outline: none;
   background-color: ${({ theme }) => theme.primary.background.normal};
   border: 1px solid ${({ theme }) => theme.primary.text.normal};
   border-radius: 7px;
   color: ${({ theme }) => theme.primary.text.normal};
   width: 100%;
-  padding: 4px 5px;
+  height: 100%;
+  padding: 2px 5px;
   padding-right: 20px;
   box-sizing: border-box;
   text-align: center;
@@ -167,10 +197,15 @@ const CustomSlippageInput = styled(SmallText).attrs({
     css`
       color: ${getBrandButtonTextColor(theme.brandColor)};
       background-color: ${theme.brandColor};
+      border: none;
     `}
+
+  @media (max-width: 767px) {
+    border-radius: 15px;
+  }
 `;
 
-const CustomSlippageInputRightIcon = styled(SmallText)<{ selected?: boolean }>`
+const CustomSlippageInputRightIcon = styled(SmallText) <{ selected?: boolean }>`
   position: absolute;
   top: 50%;
   right: 8px;

diff --git a/packages/widget/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx b/packages/widget/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx
@@ -10,10 +10,12 @@ import { useAtomValue, useSetAtom } from "jotai";
 import { transactionHistoryAtom } from "@/state/history";
 import { TransactionHistoryPageHistoryItem } from "./TransactionHistoryPageHistoryItem";
 import { currentPageAtom, Routes } from "@/state/router";
+import { useIsMobileScreenSize } from "@/hooks/useIsMobileScreenSize";
 
 export const TransactionHistoryPage = () => {
   const theme = useTheme();
   const setCurrentPage = useSetAtom(currentPageAtom);
+  const isMobileScreenSize = useIsMobileScreenSize();
   const [itemIndexToShowDetail, setItemIndexToShowDetail] = useState<
     number | undefined
   >(undefined);
@@ -37,7 +39,7 @@ export const TransactionHistoryPage = () => {
         <VirtualList
           key={txHistory.length}
           listItems={historyList}
-          height={262}
+          height={isMobileScreenSize ? 0 : 262}
           empty={{
             details: "No transactions yet",
             icon: (