Fix buttons with missing text color and fix floating element radius

components/Button.tsx

@@ -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}

components/DepositSrmModal.tsx

@@ -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

components/FloatingElement.tsx

@@ -34,19 +34,21 @@ const FloatingElement: FunctionComponent<FloatingElementProps> = ({
 }) => {
   const { uiLocked } = useMangoStore((s) => s.settings)
   return (
-    <div
-      className={`thin-scroll m-1 p-4 bg-th-bkg-2 rounded-lg 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">
-          <StyledDragWrapperContent className="relative flex flex-col items-center justify-center text-th-fgd-3 h-full z-50">
-            <MoveIcon className="w-8 h-8" />
-            <div className="mt-2">Drag to reposition</div>
-          </StyledDragWrapperContent>
-          <StyledDragBkg className="absolute top-0 left-0 rounded-lg w-full h-full bg-th-bkg-3" />
-        </StyledDragWrapper>
-      ) : null}
-      {children}
+    <div className="m-1 p-1 bg-th-bkg-2 rounded-lg h-full">
+      <div
+        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">
+            <StyledDragWrapperContent className="relative flex flex-col items-center justify-center text-th-fgd-3 h-full z-50">
+              <MoveIcon className="w-8 h-8" />
+              <div className="mt-2">Drag to reposition</div>
+            </StyledDragWrapperContent>
+            <StyledDragBkg className="absolute top-0 left-0 rounded-lg w-full h-full bg-th-bkg-3" />
+          </StyledDragWrapper>
+        ) : null}
+        {children}
+      </div>
     </div>
   )
 }

components/Tooltip.tsx

@@ -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"

styles/index.css

@@ -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;