ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tweaking the slippage tabs for mobile again

Browse Source
This commit is contained in:
Moody Salem 2020-07-13 10:49:04 -04:00
parent 6570beef32
commit 1fd6b1e659
No known key found for this signature in database
GPG Key ID: 8CB5CD10385138DB
2 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Settings/index.tsx
View File

@ -156,7 +156,7 @@ export default function SettingsTab() {
return ( return (
<StyledMenu ref={node}> <StyledMenu ref={node}>
<Modal isOpen={showConfirmation} onDismiss={() => setShowConfirmation(false)}> <Modal isOpen={showConfirmation} onDismiss={() => setShowConfirmation(false)} maxHeight={100}>
<ModalContentWrapper> <ModalContentWrapper>
<AutoColumn gap="lg"> <AutoColumn gap="lg">
<RowBetween style={{ padding: '0 2rem' }}> <RowBetween style={{ padding: '0 2rem' }}>
@ -233,7 +233,10 @@ export default function SettingsTab() {
toggleExpertMode() toggleExpertMode()
setShowConfirmation(false) setShowConfirmation(false)
} }
: () => setShowConfirmation(true) : () => {
toggle()
setShowConfirmation(true)
}
} }
/> />
</RowBetween> </RowBetween>

19
src/components/SlippageTabs/index.tsx
View File

@ -21,15 +21,15 @@ enum DeadlineError {
const FancyButton = styled.button` const FancyButton = styled.button`
color: ${({ theme }) => theme.text1}; color: ${({ theme }) => theme.text1};
align-items: center; align-items: center;
min-width: 40px;
height: 2rem; height: 2rem;
border-radius: 36px; border-radius: 36px;
font-size: 12px; font-size: 12px;
width: auto;
min-width: 3rem;
border: 1px solid ${({ theme }) => theme.bg3}; border: 1px solid ${({ theme }) => theme.bg3};
outline: none; outline: none;
background: ${({ theme }) => theme.bg1}; background: ${({ theme }) => theme.bg1};
:hover { :hover {
cursor: inherit;
border: 1px solid ${({ theme }) => theme.bg4}; border: 1px solid ${({ theme }) => theme.bg4};
} }
:focus { :focus {
@ -48,9 +48,8 @@ const Option = styled(FancyButton)<{ active: boolean }>`
const Input = styled.input` const Input = styled.input`
background: ${({ theme }) => theme.bg1}; background: ${({ theme }) => theme.bg1};
flex-grow: 1;
font-size: 16px; font-size: 16px;
min-width: 60px; width: auto;
outline: none; outline: none;
&::-webkit-outer-spin-button, &::-webkit-outer-spin-button,
&::-webkit-inner-spin-button { &::-webkit-inner-spin-button {
@ -64,6 +63,7 @@ const OptionCustom = styled(FancyButton)<{ active?: boolean; warning?: boolean }
height: 2rem; height: 2rem;
position: relative; position: relative;
padding: 0 0.75rem; padding: 0 0.75rem;
flex: 1;
border: ${({ theme, active, warning }) => active && `1px solid ${warning ? theme.red1 : theme.primary1}`}; border: ${({ theme, active, warning }) => active && `1px solid ${warning ? theme.red1 : theme.primary1}`};
:hover { :hover {
border: ${({ theme, active, warning }) => border: ${({ theme, active, warning }) =>
@ -78,6 +78,13 @@ const OptionCustom = styled(FancyButton)<{ active?: boolean; warning?: boolean }
} }
` `
const SlippageEmojiContainer = styled.span`
color: #f3841e;
${({ theme }) => theme.mediaWidth.upToSmall`
display: none;
`}
`
export interface SlippageTabsProps { export interface SlippageTabsProps {
rawSlippage: number rawSlippage: number
setRawSlippage: (rawSlippage: number) => void setRawSlippage: (rawSlippage: number) => void
@ -182,9 +189,11 @@ export default function SlippageTabs({ rawSlippage, setRawSlippage, deadline, se
<RowBetween> <RowBetween>
{!!slippageInput && {!!slippageInput &&
(slippageError === SlippageError.RiskyLow || slippageError === SlippageError.RiskyHigh) ? ( (slippageError === SlippageError.RiskyLow || slippageError === SlippageError.RiskyHigh) ? (
<span role="img" aria-label="warning" style={{ color: '#F3841E' }}> <SlippageEmojiContainer>
<span role="img" aria-label="warning">
⚠️ ⚠️
</span> </span>
</SlippageEmojiContainer>
) : null} ) : null}
<Input <Input
ref={inputRef} ref={inputRef}