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

fix: tooltip overflow and cursor (#3271)

Browse Source 
* fix: tooltip cursor

* fix: only clip dialog

* nit: clean up class name
This commit is contained in:
Zach Pomerantz 2022-02-09 15:35:50 -08:00 committed by GitHub
parent 828967031f
commit c9c59698de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/Dialog.tsx
View File

@ -106,7 +106,7 @@ export default function Dialog({ color, children, onClose = () => void 0 }: Dial
context.element && context.element &&
createPortal( createPortal(
<ThemeProvider> <ThemeProvider>
<Modal className="dialog" color={color} ref={dialog}> <Modal color={color} ref={dialog}>
<OnCloseContext.Provider value={onClose}>{children}</OnCloseContext.Provider> <OnCloseContext.Provider value={onClose}>{children}</OnCloseContext.Provider>
</Modal> </Modal>
</ThemeProvider>, </ThemeProvider>,

4
src/lib/components/Tooltip.tsx
View File

@ -21,9 +21,7 @@ export function useTooltip(): [boolean, (show: boolean) => void, TooltipHandlers
} }
const IconTooltip = styled(IconButton)` const IconTooltip = styled(IconButton)`
:hover { cursor: help;
cursor: help;
}
` `
interface TooltipProps { interface TooltipProps {

13
src/lib/components/Widget.tsx
View File

@ -10,18 +10,20 @@ import styled, { keyframes, Theme, ThemeProvider } from 'lib/theme'
import { PropsWithChildren, StrictMode, useState } from 'react' import { PropsWithChildren, StrictMode, useState } from 'react'
import { Provider as ReduxProvider } from 'react-redux' import { Provider as ReduxProvider } from 'react-redux'
import { Provider as DialogProvider } from './Dialog' import { Modal, Provider as DialogProvider } from './Dialog'
import ErrorBoundary, { ErrorHandler } from './Error/ErrorBoundary' import ErrorBoundary, { ErrorHandler } from './Error/ErrorBoundary'
import WidgetPropValidator from './Error/WidgetsPropsValidator' import WidgetPropValidator from './Error/WidgetsPropsValidator'
import Web3Provider from './Web3Provider' import Web3Provider from './Web3Provider'
const slideDown = keyframes` const slideDown = keyframes`
to { to {
height: 0;
top: calc(100% - 0.25em); top: calc(100% - 0.25em);
} }
` `
const slideUp = keyframes` const slideUp = keyframes`
from { from {
height: 0;
top: calc(100% - 0.25em); top: calc(100% - 0.25em);
} }
` `
@ -41,15 +43,10 @@ const WidgetWrapper = styled.div<{ width?: number | string }>`
font-variant: none; font-variant: none;
height: 368px; height: 368px;
min-width: 300px; min-width: 300px;
overflow-y: hidden;
padding: 0.25em; padding: 0.25em;
position: relative; position: relative;
width: ${({ width }) => width && (isNaN(Number(width)) ? width : `${width}px`)}; width: ${({ width }) => width && (isNaN(Number(width)) ? width : `${width}px`)};
@supports (overflow: clip) {
overflow-y: clip;
}
* { * {
box-sizing: border-box; box-sizing: border-box;
font-family: ${({ theme }) => theme.fontFamily}; font-family: ${({ theme }) => theme.fontFamily};
@ -60,11 +57,11 @@ const WidgetWrapper = styled.div<{ width?: number | string }>`
} }
} }
.dialog { ${Modal} {
animation: ${slideUp} 0.25s ease-in-out; animation: ${slideUp} 0.25s ease-in-out;
} }
.dialog.${UNMOUNTING} { ${Modal}.${UNMOUNTING} {
animation: ${slideDown} 0.25s ease-in-out; animation: ${slideDown} 0.25s ease-in-out;
} }
` `