Fix buttons with missing text color and fix floating element radius
This commit is contained in:
parent
b22ac152bd
commit
232b839a55
|
@ -17,7 +17,7 @@ const Button: FunctionComponent<ButtonProps> = ({
|
|||
<button
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
className={`${className} px-6 py-2 border border-th-fgd-4 bg-th-bkg-2 rounded-md
|
||||
className={`${className} px-6 py-2 border border-th-fgd-4 bg-th-bkg-2 rounded-md text-th-fgd-1
|
||||
active:border-mango-yellow hover:bg-th-bkg-3 focus:outline-none disabled:bg-th-bkg-2
|
||||
disabled:text-th-fgd-4 disabled:cursor-not-allowed`}
|
||||
{...props}
|
||||
|
|
|
@ -130,7 +130,7 @@ const DepositSrmModal = ({ isOpen, onClose }) => {
|
|||
</div>
|
||||
</div>
|
||||
<div className={`mt-5 sm:mt-6 flex justify-center`}>
|
||||
<Button onClick={handleDeposit}>
|
||||
<Button onClick={handleDeposit} disabled={Number(inputAmount) <= 0}>
|
||||
<div className={`flex items-center`}>
|
||||
{submitting && <Loading />}
|
||||
Deposit
|
||||
|
|
|
@ -34,8 +34,9 @@ const FloatingElement: FunctionComponent<FloatingElementProps> = ({
|
|||
}) => {
|
||||
const { uiLocked } = useMangoStore((s) => s.settings)
|
||||
return (
|
||||
<div className="m-1 p-1 bg-th-bkg-2 rounded-lg h-full">
|
||||
<div
|
||||
className={`thin-scroll m-1 p-4 bg-th-bkg-2 rounded-lg overflow-auto overflow-x-hidden relative h-full ${className}`}
|
||||
className={`thin-scroll p-3 overflow-auto overflow-x-hidden relative h-full ${className}`}
|
||||
>
|
||||
{!uiLocked ? (
|
||||
<StyledDragWrapper className="absolute top-0 left-0 w-full h-full cursor-move z-50">
|
||||
|
@ -48,6 +49,7 @@ const FloatingElement: FunctionComponent<FloatingElementProps> = ({
|
|||
) : null}
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
@ -1,32 +1,12 @@
|
|||
import React, {
|
||||
FunctionComponent,
|
||||
ReactNode,
|
||||
useState,
|
||||
useEffect,
|
||||
useRef,
|
||||
} from 'react'
|
||||
import React, { FunctionComponent, ReactNode } from 'react'
|
||||
import Tippy from '@tippyjs/react'
|
||||
import 'tippy.js/animations/scale.css'
|
||||
|
||||
type TooltipProps = {
|
||||
content: ReactNode
|
||||
selector?: string
|
||||
}
|
||||
|
||||
const Tooltip: FunctionComponent<TooltipProps> = ({
|
||||
children,
|
||||
content,
|
||||
selector = '#tooltip',
|
||||
}) => {
|
||||
const ref = useRef()
|
||||
const [mounted, setMounted] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
ref.current = document.querySelector(selector)
|
||||
setMounted(true)
|
||||
}, [selector])
|
||||
console.log('selector', selector, mounted)
|
||||
|
||||
const Tooltip: FunctionComponent<TooltipProps> = ({ children, content }) => {
|
||||
return (
|
||||
<Tippy
|
||||
animation="scale"
|
||||
|
|
|
@ -115,11 +115,6 @@ input[type='number'] {
|
|||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.thin-scroll:hover {
|
||||
overflow: auto !important;
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.thin-scroll::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
|
|
Loading…
Reference in New Issue