Skip to content

Commit

Permalink
fix: settings icon alignment and bugs (#499)
Browse files Browse the repository at this point in the history 
* fix: settings icon alignment and bugs

* fix: update snapshot
  • Loading branch information
@just-toby
just-toby authored Feb 24, 2023
1 parent e9ca70b commit b4c051e
Show file tree
Hide file tree
Showing 8 changed files with 32 additions and 25 deletions.
2 changes: 1 addition & 1 deletion src/components/BottomSheetModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export function BottomSheetModal({ children, onClose, open, title }: BottomSheet
<RootElement ref={setRootElement} open={open} />
<DialogProvider value={rootElement}>
{open && (
<Dialog color="dialog" onClose={onClose}>
<Dialog color="dialog" onClose={onClose} forceContain>
<>
{title && <Header title={<Trans>{title}</Trans>} closeButton={<StyledXButton />} />}
{children}
Expand Down
6 changes: 4 additions & 2 deletions src/components/Popover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,10 @@ const PopoverContainer = styled.div<{ show: boolean }>`
`

const Reference = styled.div`
display: inline-block;
height: 1em;
align-items: center;
display: flex;
justify-content: center;
min-height: 1em;
`

const Arrow = styled.div`
Expand Down
9 changes: 7 additions & 2 deletions src/components/Swap/Settings/MaxSlippageSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const Option = forwardRef<HTMLButtonElement, OptionProps>(function Option(
) {
return (
<Wrapper selected={selected} onClick={onSelect} ref={ref} tabIndex={tabIndex} data-testid={testid}>
<Row gap={0.5} flex grow flow="nowrap" justify={justify}>
<Row gap={0.5} flex grow flow="nowrap" justify={justify} align="center">
{children}
{icon ? icon : <LargeIcon icon={Check} size={1.25} color={selected ? 'active' : 'hint'} />}
</Row>
Expand Down Expand Up @@ -104,7 +104,12 @@ export default function MaxSlippageSelect() {
},
[onSlippageChange, setSlippageBase]
)
const setAutoSlippage = useCallback(() => setSlippage({ ...slippage, auto: true }), [setSlippage, slippage])
const setAutoSlippage = useCallback(() => {
setSlippage({
auto: true,
max: undefined,
})
}, [setSlippage])
const [maxSlippageInput, setMaxSlippageInput] = useState(slippage.max?.toString() || '')

const option = useRef<HTMLButtonElement>(null)
Expand Down
2 changes: 1 addition & 1 deletion src/components/Swap/Settings/RouterPreferenceToggle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export default function RouterPreferenceToggle() {

return (
<ThemedText.Subhead2 color="secondary">
<Row>
<Row flex align="center">
<Label
name={<Trans>Auto Router API</Trans>}
// TODO (tina): clicking on this tooltip on mobile shouldn't open/close expando
Expand Down
2 changes: 1 addition & 1 deletion src/components/Swap/Settings/components.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ interface LabelProps {

export function Label({ name, tooltip }: LabelProps) {
return (
<Row gap={0.5} justify="flex-start">
<Row gap={0.5} justify="flex-start" flex align="center">
<ThemedText.Subhead2>{name}</ThemedText.Subhead2>
{tooltip && (
<Tooltip placement="top" contained icon={Info}>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Swap/Settings/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,10 @@ const SettingsButton = styled(IconButton)`
export default function Settings() {
const [open, setOpen] = useState(false)
const [wrapper, setWrapper] = useState<HTMLDivElement | null>(null)
useOutsideClickHandler(wrapper, () => setOpen(false))
const isMobile = useIsMobileWidth()
useOutsideClickHandler(isMobile ? null : wrapper, () => setOpen(false))
useOnEscapeHandler(() => setOpen(false))

const isMobile = useIsMobileWidth()
return (
<div ref={setWrapper}>
{isMobile ? (
Expand Down
12 changes: 6 additions & 6 deletions src/components/Swap/Toolbar/__snapshots__/ToolbarOrderRouting.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Object {
Order routing
</div>
<div
class="Popover__Reference-sc-1liex6z-1 dxsTSY"
class="Popover__Reference-sc-1liex6z-1 dFwFDV"
>
<div
class="Row-sc-1nzvhrh-0 ckykgM"
Expand Down Expand Up @@ -54,7 +54,7 @@ Object {
Order routing
</div>
<div
class="Popover__Reference-sc-1liex6z-1 dxsTSY"
class="Popover__Reference-sc-1liex6z-1 dFwFDV"
>
<div
class="Row-sc-1nzvhrh-0 ckykgM"
Expand Down Expand Up @@ -147,7 +147,7 @@ Object {
Order routing
</div>
<div
class="Popover__Reference-sc-1liex6z-1 dxsTSY"
class="Popover__Reference-sc-1liex6z-1 dFwFDV"
>
<div
class="Row-sc-1nzvhrh-0 ckykgM"
Expand Down Expand Up @@ -183,7 +183,7 @@ Object {
Order routing
</div>
<div
class="Popover__Reference-sc-1liex6z-1 dxsTSY"
class="Popover__Reference-sc-1liex6z-1 dFwFDV"
>
<div
class="Row-sc-1nzvhrh-0 ckykgM"
Expand Down Expand Up @@ -276,7 +276,7 @@ Object {
Order routing
</div>
<div
class="Popover__Reference-sc-1liex6z-1 dxsTSY"
class="Popover__Reference-sc-1liex6z-1 dFwFDV"
>
<div
class="Row-sc-1nzvhrh-0 ckykgM"
Expand Down Expand Up @@ -312,7 +312,7 @@ Object {
Order routing
</div>
<div
class="Popover__Reference-sc-1liex6z-1 dxsTSY"
class="Popover__Reference-sc-1liex6z-1 dFwFDV"
>
<div
class="Row-sc-1nzvhrh-0 ckykgM"
Expand Down
20 changes: 10 additions & 10 deletions src/components/__snapshots__/Header.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ Object {
>
<div>
<div
class="Popover__Reference-sc-1liex6z-1 dxsTSY"
class="Popover__Reference-sc-1liex6z-1 dFwFDV"
>
<button
class="Button__BaseButton-sc-1soikk5-0 Button__transparentButton-sc-1soikk5-2 Button__StyledIconButton-sc-1soikk5-3 gleKKe jBWboA jwaziW Settings__SettingsButton-sc-1hvqnx5-1 evHSmT"
Expand Down Expand Up @@ -87,15 +87,15 @@ Object {
class="Row-sc-1nzvhrh-0 houru"
>
<div
class="Row-sc-1nzvhrh-0 iKBbTz"
class="Row-sc-1nzvhrh-0 bAZdWs"
>
<div
class="type__TextWrapper-sc-16386l-0 jukanU subhead subhead-2 css-e17nie"
>
Max slippage
</div>
<div
class="Popover__Reference-sc-1liex6z-1 dxsTSY"
class="Popover__Reference-sc-1liex6z-1 dFwFDV"
>
<button
class="Button__BaseButton-sc-1soikk5-0 Button__transparentButton-sc-1soikk5-2 Button__StyledIconButton-sc-1soikk5-3 gleKKe jBWboA jwaziW Tooltip__IconTooltip-sc-tsxpgp-1 fPAwBP"
Expand Down Expand Up @@ -242,15 +242,15 @@ Object {
class="Expando__TitleHeader-sc-yzkwmi-2 gSKTNM"
>
<div
class="Row-sc-1nzvhrh-0 iKBbTz"
class="Row-sc-1nzvhrh-0 bAZdWs"
>
<div
class="type__TextWrapper-sc-16386l-0 jukanU subhead subhead-2 css-e17nie"
>
Transaction deadline
</div>
<div
class="Popover__Reference-sc-1liex6z-1 dxsTSY"
class="Popover__Reference-sc-1liex6z-1 dFwFDV"
>
<button
class="Button__BaseButton-sc-1soikk5-0 Button__transparentButton-sc-1soikk5-2 Button__StyledIconButton-sc-1soikk5-3 gleKKe jBWboA jwaziW Tooltip__IconTooltip-sc-tsxpgp-1 fPAwBP"
Expand Down Expand Up @@ -409,7 +409,7 @@ Object {
>
<div>
<div
class="Popover__Reference-sc-1liex6z-1 dxsTSY"
class="Popover__Reference-sc-1liex6z-1 dFwFDV"
>
<button
class="Button__BaseButton-sc-1soikk5-0 Button__transparentButton-sc-1soikk5-2 Button__StyledIconButton-sc-1soikk5-3 gleKKe jBWboA jwaziW Settings__SettingsButton-sc-1hvqnx5-1 evHSmT"
Expand Down Expand Up @@ -467,15 +467,15 @@ Object {
class="Row-sc-1nzvhrh-0 houru"
>
<div
class="Row-sc-1nzvhrh-0 iKBbTz"
class="Row-sc-1nzvhrh-0 bAZdWs"
>
<div
class="type__TextWrapper-sc-16386l-0 jukanU subhead subhead-2 css-e17nie"
>
Max slippage
</div>
<div
class="Popover__Reference-sc-1liex6z-1 dxsTSY"
class="Popover__Reference-sc-1liex6z-1 dFwFDV"
>
<button
class="Button__BaseButton-sc-1soikk5-0 Button__transparentButton-sc-1soikk5-2 Button__StyledIconButton-sc-1soikk5-3 gleKKe jBWboA jwaziW Tooltip__IconTooltip-sc-tsxpgp-1 fPAwBP"
Expand Down Expand Up @@ -622,15 +622,15 @@ Object {
class="Expando__TitleHeader-sc-yzkwmi-2 gSKTNM"
>
<div
class="Row-sc-1nzvhrh-0 iKBbTz"
class="Row-sc-1nzvhrh-0 bAZdWs"
>
<div
class="type__TextWrapper-sc-16386l-0 jukanU subhead subhead-2 css-e17nie"
>
Transaction deadline
</div>
<div
class="Popover__Reference-sc-1liex6z-1 dxsTSY"
class="Popover__Reference-sc-1liex6z-1 dFwFDV"
>
<button
class="Button__BaseButton-sc-1soikk5-0 Button__transparentButton-sc-1soikk5-2 Button__StyledIconButton-sc-1soikk5-3 gleKKe jBWboA jwaziW Tooltip__IconTooltip-sc-tsxpgp-1 fPAwBP"
Expand Down

1 comment on commit b4c051e

@vercel
Copy link

@vercel vercel bot commented on b4c051e Feb 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

widgets – ./

widgets-seven-tau.vercel.app
widgets-uniswap.vercel.app
widgets-git-main-uniswap.vercel.app

Please sign in to comment.