feat: styled expando wrapper and update callsites (#510)

* feat: styled expando wrapper and update callsites * fix: update snapshot * fix: inline functions
Uniswap · Feb 28, 2023 · 46a3572 · 46a3572 · vercel · Feb 28, 2023
1 parent b59ce50
commit 46a3572
Show file tree

Hide file tree

Showing 5 changed files with 326 additions and 353 deletions.
diff --git a/src/components/Expando.tsx b/src/components/Expando.tsx
@@ -5,12 +5,22 @@ import Rule from 'components/Rule'
 import useScrollbar from 'hooks/useScrollbar'
 import { Expando as ExpandoIcon } from 'icons'
 import { PropsWithChildren, ReactNode, useState } from 'react'
-import styled, { css } from 'styled-components/macro'
+import styled from 'styled-components/macro'
 import { AnimationSpeed, ThemedText } from 'theme'
 
 const HeaderColumn = styled(Column)`
   cursor: pointer;
-  transition: gap ${AnimationSpeed.Medium};
+  padding: 1.25em 1.5em;
+`
+
+const StyledWrapper = styled(Column)<{ expanded: boolean }>`
+  background-color: ${({ theme }) => theme.module};
+  border-radius: ${({ theme }) => theme.borderRadius.medium}rem;
+  overflow: hidden;
+
+  @supports (overflow: clip) {
+    overflow: clip;
+  }
 `
 
 const TitleRow = styled(Row)`
@@ -23,19 +33,7 @@ const TitleHeader = styled.div`
   justify-content: center;
 `
 
-const bottomCss = css`
-  :after {
-    background: linear-gradient(transparent, ${({ theme }) => theme.dialog});
-    bottom: 0;
-    content: '';
-    height: 0.75em;
-    pointer-events: none;
-    position: absolute;
-    width: calc(100% - 1em);
-  }
-`
-
-const MAX_HEIGHT = 20
+const MAX_HEIGHT = 20 // em
 
 function getExpandoContentHeight(height: number | undefined, maxHeight: number | undefined): number {
   return Math.min(height ?? MAX_HEIGHT, maxHeight ?? MAX_HEIGHT)
@@ -45,20 +43,18 @@ const ExpandoColumn = styled(Column)<{
   height?: number
   maxHeight?: number
   open: boolean
-  showBottomGradient: boolean
 }>`
   max-height: ${({ open, height, maxHeight }) => (open ? getExpandoContentHeight(height, maxHeight) : 0)}em;
   overflow: hidden;
   position: relative;
   transition: max-height ${AnimationSpeed.Medium}, padding ${AnimationSpeed.Medium};
-  ${({ showBottomGradient }) => showBottomGradient && bottomCss}
 `
 
 const InnerColumn = styled(Column)<{ height?: number; maxHeight?: number }>`
   max-height: ${({ height, maxHeight }) => getExpandoContentHeight(height, maxHeight)}em;
 `
 
-const IconPrefix = styled.div`
+export const IconPrefix = styled.div`
   color: ${({ theme }) => theme.primary};
 `
 
@@ -74,9 +70,7 @@ interface ExpandoProps extends ColumnProps {
   // If relying on auto-sizing, this should be something close to (but still larger than)
   // the content's height. Otherwise, the animation will feel fast.
   maxHeight?: number
-  hideRulers?: boolean
-  styledTitleWrapper?: boolean
-  showBottomGradient?: boolean
+  styledWrapper?: boolean
 }
 
 /** A scrollable Expando with an absolute height. */
@@ -88,37 +82,57 @@ export default function Expando({
   height,
   maxHeight,
   children,
-  hideRulers,
-  styledTitleWrapper = true,
-  showBottomGradient = true,
+  styledWrapper = true,
   ...rest
 }: PropsWithChildren<ExpandoProps>) {
   const [scrollingEl, setScrollingEl] = useState<HTMLDivElement | null>(null)
   const scrollbar = useScrollbar(scrollingEl, { hideScrollbar: true })
   return (
     <Column {...rest}>
-      {styledTitleWrapper ? (
-        <HeaderColumn onClick={onExpand} gap={open ? 0.5 : 0.75}>
-          {!hideRulers && <Rule />}
-          <ThemedText.Subhead2 color="secondary">
-            <TitleRow gap={1}>
-              <TitleHeader>{title}</TitleHeader>
-              <Row gap={0.2}>
-                {iconPrefix && <IconPrefix>{iconPrefix}</IconPrefix>}
-                <IconButton color="secondary" icon={ExpandoIcon} iconProps={{ open }} />
-              </Row>
-            </TitleRow>
-          </ThemedText.Subhead2>
-          {!hideRulers && open && <Rule />}
-        </HeaderColumn>
+      {styledWrapper ? (
+        <StyledWrapper expanded={open}>
+          <HeaderColumn onClick={onExpand}>
+            <ThemedText.ButtonSmall color="secondary">
+              <TitleRow gap={1}>
+                <TitleHeader>{title}</TitleHeader>
+                <Row gap={0.2}>
+                  {iconPrefix && <IconPrefix>{iconPrefix}</IconPrefix>}
+                  <IconButton color="secondary" icon={ExpandoIcon} iconProps={{ open }} />
+                </Row>
+              </TitleRow>
+            </ThemedText.ButtonSmall>
+          </HeaderColumn>
+          {open && <Rule padded />}
+          <ExpandoColumn open={open} height={height} maxHeight={maxHeight}>
+            <InnerColumn
+              flex
+              align="stretch"
+              height={height}
+              maxHeight={maxHeight}
+              ref={setScrollingEl}
+              css={scrollbar}
+            >
+              {children}
+            </InnerColumn>
+          </ExpandoColumn>
+        </StyledWrapper>
       ) : (
-        title
+        <>
+          {title}
+          <ExpandoColumn open={open} height={height} maxHeight={maxHeight}>
+            <InnerColumn
+              flex
+              align="stretch"
+              height={height}
+              maxHeight={maxHeight}
+              ref={setScrollingEl}
+              css={scrollbar}
+            >
+              {children}
+            </InnerColumn>
+          </ExpandoColumn>
+        </>
       )}
-      <ExpandoColumn open={open} height={height} maxHeight={maxHeight} showBottomGradient={showBottomGradient}>
-        <InnerColumn flex align="stretch" height={height} maxHeight={maxHeight} ref={setScrollingEl} css={scrollbar}>
-          {children}
-        </InnerColumn>
-      </ExpandoColumn>
     </Column>
   )
 }
diff --git a/src/components/Swap/Settings/MaxSlippageSelect.tsx b/src/components/Swap/Settings/MaxSlippageSelect.tsx
@@ -1,8 +1,9 @@
 import { Trans } from '@lingui/macro'
-import Expando from 'components/Expando'
+import Expando, { IconPrefix } from 'components/Expando'
 import Popover from 'components/Popover'
 import { useTooltip } from 'components/Tooltip'
 import { getSlippageWarning, toPercent } from 'hooks/useSlippage'
+import { Expando as ExpandoIcon } from 'icons'
 import { AlertTriangle, Check, Icon, LargeIcon, XOctagon } from 'icons'
 import { useAtom } from 'jotai'
 import { useAtomValue } from 'jotai/utils'
@@ -12,7 +13,7 @@ import { slippageAtom } from 'state/swap/settings'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 
-import { BaseButton, TextButton } from '../../Button'
+import { BaseButton, IconButton, TextButton } from '../../Button'
 import Column from '../../Column'
 import { DecimalInput, inputCss } from '../../Input'
 import Row from '../../Row'
@@ -147,10 +148,8 @@ export default function MaxSlippageSelect() {
   return (
     <Column gap={0.75}>
       <Expando
-        hideRulers
-        showBottomGradient={false}
         title={
-          <Row grow>
+          <Row style={{ cursor: 'pointer' }} grow justify="space-between" onClick={() => setOpen((open) => !open)}>
             <Label
               name={<Trans>Max slippage</Trans>}
               tooltip={
@@ -159,9 +158,13 @@ export default function MaxSlippageSelect() {
                 </Trans>
               }
             />
+            <Row gap={0.2} justify="flex-end" flex>
+              <IconPrefix>{slippage.auto ? <Trans>Auto</Trans> : `${maxSlippageInput}%`}</IconPrefix>
+              <IconButton color="secondary" icon={ExpandoIcon} iconProps={{ open }} />
+            </Row>
           </Row>
         }
-        iconPrefix={slippage.auto ? <Trans>Auto</Trans> : `${maxSlippageInput}%`}
+        styledWrapper={false}
         maxHeight={5}
         open={open}
         onExpand={() => setOpen(!open)}

diff --git a/src/components/Swap/Settings/TransactionTtlInput.tsx b/src/components/Swap/Settings/TransactionTtlInput.tsx
@@ -1,13 +1,15 @@
 import { Trans } from '@lingui/macro'
-import Expando from 'components/Expando'
+import { IconButton } from 'components/Button'
+import Column from 'components/Column'
+import Expando, { IconPrefix } from 'components/Expando'
+import { inputCss, IntegerInput } from 'components/Input'
+import Row from 'components/Row'
 import { useDefaultTransactionTtl, useTransactionTtl } from 'hooks/useTransactionDeadline'
+import { Expando as ExpandoIcon } from 'icons'
 import { useRef, useState } from 'react'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 
-import Column from '../../Column'
-import { inputCss, IntegerInput } from '../../Input'
-import Row from '../../Row'
 import { Label } from './components'
 
 const Input = styled(Row)`
@@ -44,19 +46,26 @@ export default function TransactionTtlInput() {
   return (
     <Column gap={0.75}>
       <Expando
-        hideRulers
-        showBottomGradient={false}
         maxHeight={4}
         open={open}
         onExpand={() => setOpen(!open)}
-        iconPrefix={<TtlValue>{ttlValue ?? placeholder}m</TtlValue>}
+        styledWrapper={false}
         title={
-          <Label
-            name={<Trans>Transaction deadline</Trans>}
-            tooltip={
-              <Trans>Your transaction will revert if it has been pending for longer than this period of time.</Trans>
-            }
-          />
+          <Row style={{ cursor: 'pointer' }} onClick={() => setOpen((open) => !open)}>
+            <Label
+              name={<Trans>Transaction deadline</Trans>}
+              // TODO (tina): clicking on this tooltip on mobile shouldn't open/close expando
+              tooltip={
+                <Trans>Your transaction will revert if it has been pending for longer than this period of time.</Trans>
+              }
+            />
+            <Row gap={0.2} justify="flex-end" flex>
+              <IconPrefix>
+                <TtlValue>{ttlValue ?? placeholder}m</TtlValue>
+              </IconPrefix>
+              <IconButton color="secondary" icon={ExpandoIcon} iconProps={{ open }} />
+            </Row>
+          </Row>
         }
       >
         <InputContainer flex grow justify="flex-end">

diff --git a/src/components/Swap/Toolbar/index.tsx b/src/components/Swap/Toolbar/index.tsx
@@ -174,8 +174,7 @@ function CaptionRow() {
           {caption}
         </ToolbarRow>
       }
-      styledTitleWrapper={false}
-      showBottomGradient={false}
+      styledWrapper={false}
       open={open}
       onExpand={maybeToggleOpen}
       maxHeight={16}