extract button component

components/Button.tsx

@@ -0,0 +1,50 @@
+import { FunctionComponent } from 'react'
+import xw, { cx } from 'xwind'
+
+interface ButtonProps {
+  onClick?: (x?) => void
+  disabled?: boolean
+  className?: string
+}
+
+const Button: FunctionComponent<ButtonProps> = ({
+  children,
+  onClick,
+  disabled = false,
+  className,
+  ...props
+}) => {
+  if (disabled) {
+    return (
+      <button
+        css={[
+          xw`w-full px-8 py-2 border border-mango-dark-lighter bg-mango-dark-light 
+          focus:outline-none`,
+          disabled && xw`cursor-not-allowed text-mango-med`,
+        ]}
+        disabled={disabled}
+      >
+        {children}
+      </button>
+    )
+  }
+
+  return (
+    <button
+      onClick={onClick}
+      css={[
+        xw`px-8 py-2 border border-mango-dark-lighter bg-mango-dark-light 
+          focus:outline-none`,
+        disabled
+          ? xw`cursor-not-allowed text-mango-med`
+          : xw`active:border-mango-yellow text-mango-yellow hover:bg-mango-dark-lighter`,
+      ]}
+      className={cx('group', className)}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+export default Button

components/DepositModal.tsx

@@ -2,7 +2,6 @@ import React, { useMemo, useState } from 'react'
 import xw from 'xwind'
 import { nativeToUi } from '@blockworks-foundation/mango-client/lib/utils'
 import Modal from './Modal'
-import { Button } from './styles'
 import AccountSelect from './AccountSelect'
 import useMangoStore from '../stores/useMangoStore'
 import useMarketList from '../hooks/useMarketList'
@@ -11,6 +10,7 @@ import useConnection from '../hooks/useConnection'
 import { deposit, initMarginAccountAndDeposit } from '../utils/mango'
 import { PublicKey } from '@solana/web3.js'
 import Loading from './Loading'
+import Button from './Button'
 
 const DepositModal = ({ isOpen, onClose }) => {
   const [inputAmount, setInputAmount] = useState('')
@@ -152,7 +152,6 @@ const DepositModal = ({ isOpen, onClose }) => {
               onChange={(e) => setInputAmount(e.target.value)}
             ></input>
             <Button
-              type="button"
               onClick={setMaxForSelectedAccount}
               css={xw`m-2 rounded py-1`}
             >
@@ -161,7 +160,7 @@ const DepositModal = ({ isOpen, onClose }) => {
           </div>
         </div>
         <div css={xw`mt-5 sm:mt-6 flex justify-center`}>
-          <Button type="button" onClick={handleDeposit}>
+          <Button onClick={handleDeposit}>
             <div css={xw`flex items-center`}>
               {submitting && <Loading />}
               Deposit

components/FeeDiscountsTable.tsx

@@ -2,7 +2,7 @@ import xw from 'xwind'
 import { percentFormat } from '../utils/index'
 import useSrmAccount from '../hooks/useSrmAccount'
 import useMangoStore from '../stores/useMangoStore'
-import { Button } from './styles'
+import Button from './Button'
 
 const FeeDiscountsTable = () => {
   const { totalSrm, rates } = useSrmAccount()

components/MarginBalances.tsx

@@ -6,17 +6,19 @@ import {
   InformationCircleIcon,
 } from '@heroicons/react/outline'
 import FloatingElement from './FloatingElement'
-import { Button, ElementTitle } from './styles'
+import { ElementTitle } from './styles'
 import useMangoStore from '../stores/useMangoStore'
 import useMarketList from '../hooks/useMarketList'
 import { tokenPrecision } from '../utils/index'
 import DepositModal from './DepositModal'
+import Button from './Button'
 
 export default function MarginStats() {
   const selectedMangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
   const selectedMarginAccount = useMangoStore(
     (s) => s.selectedMarginAccount.current
   )
+  const connected = useMangoStore((s) => s.wallet.connected)
   const { symbols } = useMarketList()
 
   const [showDepositModal, setShowDepositModal] = useState(false)
@@ -117,12 +119,19 @@ export default function MarginStats() {
         ) : null}
         <div css={xw`flex justify-around items-center mt-4`}>
           <div>
-            <Button onClick={() => setShowDepositModal(true)}>
+            <Button
+              onClick={() => setShowDepositModal(true)}
+              disabled={!connected}
+            >
               <span>Deposit</span>
             </Button>
           </div>
           <div>
-            <Button onClick={() => setShowWithdrawModal(true)} css={xw`ml-4`}>
+            <Button
+              onClick={() => setShowWithdrawModal(true)}
+              className="ml-4"
+              disabled={!connected}
+            >
               <span>Withdraw</span>
             </Button>
           </div>

components/TradeForm.tsx

@@ -14,24 +14,7 @@ import FloatingElement from './FloatingElement'
 import { roundToDecimal } from '../utils/index'
 import useMarginAccount from '../hooks/useMarginAcccount'
 import useMangoStore from '../stores/useMangoStore'
-
+import Button from './Button'
-const BuyButton = styled.button(xw`
-  w-full
-  py-2.5 mt-4
-  border border-mango-dark-lighter
-  bg-mango-dark-light
-  font-light text-mango-med
-  cursor-not-allowed
-`)
-
-const SellButton = styled.button(xw`
-  w-full
-  py-2.5 mt-4
-  border border-mango-dark-lighter
-  bg-mango-dark-light
-  font-light text-mango-med
-  cursor-not-allowed
-`)
 
 export default function TradeForm({
   setChangeOrderRef,
@@ -357,10 +340,10 @@ export default function TradeForm({
           </div>
         ) : null}
       </div>
-      <div css={xw`flex`}>
+      <div css={xw`flex mt-4`}>
         {ipAllowed ? (
           side === 'buy' ? (
-            <BuyButton
+            <Button
               disabled={
                 (!price && tradeType === 'Limit') ||
                 !baseSize ||
@@ -368,11 +351,12 @@ export default function TradeForm({
                 submitting
               }
               onClick={onSubmit}
+              css={[xw`bg-mango-green flex-grow text-mango-dark`]}
             >
               {connected ? `Buy ${baseCurrency}` : 'CONNECT WALLET TO TRADE'}
-            </BuyButton>
+            </Button>
           ) : (
-            <SellButton
+            <Button
               disabled={
                 (!price && tradeType === 'Limit') ||
                 !baseSize ||
@@ -380,9 +364,10 @@ export default function TradeForm({
                 submitting
               }
               onClick={onSubmit}
+              css={[xw`bg-mango-red flex-grow text-white`]}
             >
               {connected ? `Sell ${baseCurrency}` : 'CONNECT WALLET TO TRADE'}
-            </SellButton>
+            </Button>
           )
         ) : (
           <button css={xw`flex-grow border`} disabled>

components/styles.tsx

@@ -4,10 +4,3 @@ import xw from 'xwind'
 export const ElementTitle = styled.div(
   xw`flex justify-center mb-4 text-lg items-center`
 )
-
-export const Button = styled.button(xw`
-  px-8 py-2 
-  border border-mango-dark-lighter 
-  bg-mango-dark-light hover:bg-mango-dark-lighter
-  text-mango-yellow
-  focus:outline-none active:border-mango-yellow`)

styles/index.css

@@ -26,6 +26,10 @@
   background-color: #5b5868 !important;
 }
 
-.ant-switch-handle {
+.ant-switch-checked {
+  background-color: #f2c94c !important;
+}
+
+.ant-switch-handle::before {
   background-color: #ffffff !important;
 }