tradeform input styles

components/AccountSelect.jsx

@@ -47,10 +47,10 @@ const AccountSelect = ({
         {({ open }) => (
           <>
             <Listbox.Button
-              className={`border border-th-fgd-4 focus:outline-none focus:ring-1 focus:ring-mango-yellow p-2 w-full`}
+              className={`border border-th-fgd-4 bg-th-bkg-1 rounded-md default-transition hover:border-th-primary focus:outline-none focus:ring-1 focus:ring-th-primary p-2 h-10 w-full font-normal`}
             >
               <div
-                className={`flex items-center text-base justify-between font-light`}
+                className={`flex items-center text-th-fgd-1 justify-between`}
               >
                 {selectedAccount ? (
                   <div className={`flex items-center flex-grow`}>
@@ -61,12 +61,15 @@ const AccountSelect = ({
                       src={`/assets/icons/${getSymbolForTokenMintAddress(
                         selectedAccount?.account?.mint.toString()
                       ).toLowerCase()}.svg`}
-                      className={`mr-4`}
+                      className={`mr-2`}
                     />
-                    {abbreviateAddress(selectedAccount?.publicKey)}
+                    {getSymbolForTokenMintAddress(
+                      selectedAccount?.account.mint.toString()
+                    )}
+                    {/* abbreviateAddress(selectedAccount?.publicKey) */}
                     {!hideBalance ? (
-                      <div className={`ml-4 text-sm text-right flex-grow`}>
-                        ({getBalanceForAccount(selectedAccount)})
+                      <div className={`ml-4 text-right flex-grow`}>
+                        Bal: {getBalanceForAccount(selectedAccount)}
                       </div>
                     ) : null}
                   </div>
@@ -74,9 +77,9 @@ const AccountSelect = ({
                   'No wallet addresses found'
                 )}
                 {open ? (
-                  <ChevronUpIcon className={`h-5 w-5 ml-2`} />
+                  <ChevronUpIcon className={`h-5 w-5 ml-2 text-th-primary`} />
                 ) : (
-                  <ChevronDownIcon className={`h-5 w-5 ml-2`} />
+                  <ChevronDownIcon className={`h-5 w-5 ml-2 text-th-primary`} />
                 )}
               </div>
             </Listbox.Button>

components/DepositModal.tsx

@@ -1,7 +1,9 @@
 import React, { useMemo, useState } from 'react'
 import { nativeToUi } from '@blockworks-foundation/mango-client/lib/utils'
 import Modal from './Modal'
+import Input from './Input'
 import AccountSelect from './AccountSelect'
+import { ElementTitle } from './styles'
 import useMangoStore from '../stores/useMangoStore'
 import useMarketList from '../hooks/useMarketList'
 import {
@@ -118,57 +120,53 @@ const DepositModal = ({ isOpen, onClose }) => {
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <Modal.Header>
-        <div className={`text-th-fgd-3 flex-shrink invisible`}>X</div>
-        <div
-          className={`text-th-fgd-3 flex-grow text-center flex items-center justify-center`}
-        >
-          <div className={`flex-initial`}>Select: </div>
-          <div className={`ml-4 flex-grow`}>
-            <AccountSelect
-              accounts={depositAccounts}
-              selectedAccount={selectedAccount}
-              onSelectAccount={setSelectedAccount}
-            />
-          </div>
-        </div>
-
+        {/* not sure what the below div os for? */}
+        <div className={`text-th-fgd-3 flex-shrink invisible w-5`}>X</div>
+        <ElementTitle noMarignBottom>Deposit</ElementTitle>
         <button
           onClick={onClose}
-          className={`text-th-fgd-3 mr-2 ml-4 hover:text-th-primary`}
+          className={`text-th-fgd-1 hover:text-th-primary`}
         >
-          <XIcon className={`h-6 w-6`} />
+          <XIcon className={`h-5 w-5`} />
         </button>
       </Modal.Header>
       <div className={`pb-6 px-8`}>
-        <div className={`mt-3 text-center sm:mt-5`}>
-          <div className={`mt-6 bg-th-bkg-3 rounded-md flex items-center`}>
-            {selectedAccount ? (
-              <img
-                alt=""
-                width="20"
-                height="20"
-                src={`/assets/icons/${getSymbolForTokenMintAddress(
-                  selectedAccount?.account?.mint.toString()
-                ).toLowerCase()}.svg`}
-                className={`ml-3`}
-              />
-            ) : null}
-            <input
-              type="number"
-              min="0"
-              className={`outline-none bg-th-bkg-3 w-full py-4 mx-3 text-2xl text-th-fgd-2 flex-grow`}
-              placeholder="0.00"
-              value={inputAmount}
-              onChange={(e) => setInputAmount(e.target.value)}
-            ></input>
-            <Button
-              onClick={setMaxForSelectedAccount}
-              className={`m-2 rounded py-1`}
-            >
-              Max
-            </Button>
+        <div className={`text-th-fgd-1 pb-2`}>Token</div>
+        <AccountSelect
+          accounts={depositAccounts}
+          selectedAccount={selectedAccount}
+          onSelectAccount={setSelectedAccount}
+        />
+        <div className="flex justify-between pb-2 pt-4">
+          <div className={`text-th-fgd-1`}>Amount</div>
+          <div
+            className="text-th-fgd-1 underline cursor-pointer default-transition hover:text-th-primary hover:no-underline"
+            onClick={setMaxForSelectedAccount}
+          >
+            Max
           </div>
         </div>
+        <div className="flex items-center">
+          {/* {selectedAccount ? (
+            <img
+              alt=""
+              width="20"
+              height="20"
+              src={`/assets/icons/${getSymbolForTokenMintAddress(
+                selectedAccount?.account?.mint.toString()
+              ).toLowerCase()}.svg`}
+              className={`absolute ml-2`}
+            />
+          ) : null} */}
+          <Input
+            type="number"
+            min="0"
+            className={`border border-th-fgd-4 flex-grow`}
+            placeholder="0.00"
+            value={inputAmount}
+            onChange={(e) => setInputAmount(e.target.value)}
+          />
+        </div>
         <div className={`mt-5 sm:mt-6 flex justify-center`}>
           <Button onClick={handleDeposit}>
             <div className={`flex items-center`}>

components/Input.tsx

@@ -1,3 +1,9 @@
+import styled from '@emotion/styled'
+
+const StyledInput = styled.input`
+  padding-bottom: 1px;
+`
+
 interface InputProps {
   type: string
   value: any
@@ -8,11 +14,7 @@ interface InputProps {
 }
 
 const Group = ({ children, className }) => {
-  return (
-    <div className={`flex border border-th-fgd-4 rounded ${className}`}>
-      {children}
-    </div>
-  )
+  return <div className={`flex ${className}`}>{children}</div>
 }
 
 const Input = ({
@@ -20,41 +22,34 @@ const Input = ({
   value,
   onChange,
   className,
+  wrapperClassName = 'w-full',
   disabled,
   prefix,
   suffix,
   ...props
 }: InputProps) => {
   return (
-    <div
-      className={`flex items-center h-10 rounded ${
-        disabled ? 'bg-th-bkg-3' : 'bg-th-bkg-1'
-      } ${className}`}
-    >
+    <div className={`flex relative ${wrapperClassName}`}>
       {prefix ? (
-        <div className="flex items-center justify-end border-r border-th-fgd-4 bg-th-bkg-2 p-2 h-full text-sm rounded rounded-r-none w-14 text-right">
+        <div className="flex items-center justify-end p-2 border border-r-0 border-th-fgd-4 bg-th-bkg-2 h-full text-xs rounded rounded-r-none w-14 text-right">
           {prefix}
         </div>
       ) : null}
-      <div className="flex items-center h-full border border-transparent hover:border-th-primary">
-        <input
-          type={type}
-          value={value}
-          onChange={onChange}
-          className={`bg-transparent tracking-wider w-full focus:outline-none ${
-            disabled ? 'opacity-20 cursor-not-allowed' : ''
-          } ${type === 'number' ? 'text-right mr-1' : ''} ${
-            value.toString().length > 9 ? 'text-xs' : ''
-          }`}
-          disabled={disabled}
-          {...props}
-        />
-        {suffix ? (
-          <span className="text-xs pl-0.5 pr-1 bg-transparent text-th-fgd-4">
-            {suffix}
-          </span>
-        ) : null}
-      </div>
+      <StyledInput
+        type={type}
+        value={value}
+        onChange={onChange}
+        className={`${className} px-2 w-full bg-th-bkg-1 rounded h-10 text-th-fgd-1 border border-th-fgd-4 default-transition hover:border-th-primary focus:border-th-primary focus:outline-none ${
+          disabled ? 'bg-th-bkg-3 cursor-not-allowed hover:border-th-fgd-4' : ''
+        } ${value.toString().length > 9 ? 'text-xs' : ''}`}
+        disabled={disabled}
+        {...props}
+      />
+      {suffix ? (
+        <span className="absolute right-0 text-xs flex items-center pr-2 h-full bg-transparent text-th-fgd-4">
+          {suffix}
+        </span>
+      ) : null}
     </div>
   )
 }

components/Modal.tsx

@@ -12,7 +12,7 @@ const Modal = ({ isOpen, onClose, children }) => {
         <div className="flex items-end min-h-screen px-4 pb-20 text-center sm:block sm:p-0">
           {isOpen ? (
             <div
-              className="fixed inset-0 bg-black bg-opacity-40 transition-opacity"
+              className="fixed inset-0 bg-black bg-opacity-70 transition-opacity"
               aria-hidden="true"
               onClick={onClose}
             ></div>
@@ -27,9 +27,9 @@ const Modal = ({ isOpen, onClose, children }) => {
 
           {isOpen ? (
             <div
-              className="inline-block align-bottom bg-th-bkg-1 border border-th-bkg-3 
+              className="inline-block align-bottom bg-th-bkg-2 
               rounded-lg text-left overflow-hidden shadow-lg transform transition-all 
-              sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+              sm:my-8 sm:align-middle sm:max-w-md sm:w-full"
             >
               {children}
             </div>
@@ -42,7 +42,9 @@ const Modal = ({ isOpen, onClose, children }) => {
 
 const Header = ({ children }) => {
   return (
-    <div className={`flex items-center bg-th-bkg-3 py-4 px-4`}>{children}</div>
+    <div className={`flex items-center justify-between bg-th-bkg-2 py-4 px-4`}>
+      {children}
+    </div>
   )
 }
 

components/TradeForm.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect, useRef } from 'react'
+import styled from '@emotion/styled'
 import useMarket from '../hooks/useMarket'
 import useIpAddress from '../hooks/useIpAddress'
 import useConnection from '../hooks/useConnection'
@@ -15,6 +16,10 @@ import TradeType from './TradeType'
 import Input from './Input'
 import Switch from './Switch'
 
+const StyledRightInput = styled(Input)`
+  border-left: 1px solid transparent;
+`
+
 export default function TradeForm() {
   const { baseCurrency, quoteCurrency, market, marketAddress } = useMarket()
   const set = useMangoStore((s) => s.set)
@@ -208,9 +213,6 @@ export default function TradeForm() {
     }
   }
 
-  const disabled =
-    (!price && tradeType === 'Limit') || !baseSize || !connected || submitting
-
   return (
     <FloatingElement>
       <div>
@@ -220,7 +222,7 @@ export default function TradeForm() {
             className={`flex-1 outline-none focus:outline-none`}
           >
             <div
-              className={`hover:text-th-green pb-1 transition-colors duration-500
+              className={`hover:text-th-fgd-1 pb-1 transition-colors duration-500
                 ${
                   side === 'buy' &&
                   `text-th-green hover:text-th-green border-b-2 border-th-green`
@@ -234,7 +236,7 @@ export default function TradeForm() {
             className={`flex-1 outline-none focus:outline-none`}
           >
             <div
-              className={`hover:text-th-red pb-1 transition-colors duration-500
+              className={`hover:text-th-fgd-1 pb-1 transition-colors duration-500
                 ${
                   side === 'sell' &&
                   `text-th-red hover:text-th-red border-b-2 border-th-red`
@@ -254,12 +256,13 @@ export default function TradeForm() {
             disabled={tradeType === 'Market'}
             prefix={'Price'}
             suffix={quoteCurrency}
-            className="w-3/5 rounded-r-none"
+            className="rounded-none"
+            wrapperClassName="w-3/5"
           />
           <TradeType
             onChange={handleTradeTypeChange}
             value={tradeType}
-            className="w-2/5 hover:border-th-primary"
+            className="hover:border-th-primary flex-grow"
           />
         </Input.Group>
 
@@ -269,21 +272,23 @@ export default function TradeForm() {
             step={market?.minOrderSize || 1}
             onChange={(e) => onSetBaseSize(parseFloat(e.target.value))}
             value={baseSize}
-            className="flex-grow w-3/5 rounded-r-none"
+            className="rounded-none"
+            wrapperClassName="w-3/5"
             prefix={'Size'}
             suffix={baseCurrency}
           />
-          <Input
+          <StyledRightInput
             type="number"
             step={market?.minOrderSize || 1}
             onChange={(e) => onSetQuoteSize(parseFloat(e.target.value))}
             value={quoteSize}
-            className="border-l border-th-fgd-4 rounded-l-none w-2/5"
+            className="rounded-l-none"
+            wrapperClassName="w-2/5"
             suffix={quoteCurrency}
           />
         </Input.Group>
         {tradeType !== 'Market' ? (
-          <div className="flex items-center mt-4 text-sm">
+          <div className="flex items-center mt-4">
             <Switch checked={postOnly} onChange={postOnChange}>
               POST
             </Switch>
@@ -299,27 +304,29 @@ export default function TradeForm() {
         {ipAllowed ? (
           side === 'buy' ? (
             <Button
-              disabled={disabled}
+              disabled={
+                (!price && tradeType === 'Limit') ||
+                !baseSize ||
+                !connected ||
+                submitting
+              }
               onClick={onSubmit}
-              className={`rounded text-lg ${
-                !disabled && 'border-th-green hover:border-th-red-green'
-              } text-th-green hover:text-th-fgd-1 hover:bg-th-green-dark hover:border-th-green-dark flex-grow`}
+              className="rounded text-lg bg-th-green text-th-bkg-1 hover:bg-th-primary flex-grow"
             >
-              {connected
-                ? `Buy ${baseSize > 0 ? baseSize : ''} ${baseCurrency}`
-                : 'Connect Wallet'}
+              {connected ? `Buy ${baseCurrency}` : 'Connect Wallet'}
             </Button>
           ) : (
             <Button
-              disabled={disabled}
+              disabled={
+                (!price && tradeType === 'Limit') ||
+                !baseSize ||
+                !connected ||
+                submitting
+              }
               onClick={onSubmit}
-              className={`rounded text-lg ${
-                !disabled && 'border-th-red hover:border-th-red-dark'
-              } text-th-red hover:text-th-fgd-1 hover:bg-th-red-dark flex-grow`}
+              className="rounded text-lg bg-th-red text-white hover:bg-th-primary flex-grow"
             >
-              {connected
-                ? `Sell ${baseSize > 0 ? baseSize : ''} ${baseCurrency}`
-                : 'Connect Wallet'}
+              {connected ? `Sell ${baseCurrency}` : 'Connect Wallet'}
             </Button>
           )
         ) : (

components/TradeType.jsx

@@ -1,6 +1,11 @@
 import { Listbox } from '@headlessui/react'
+import styled from '@emotion/styled'
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/solid'
 
+const StyledListbox = styled(Listbox.Button)`
+  border-left: 1px solid transparent;
+`
+
 const TRADE_TYPES = ['Limit', 'Market']
 
 const TradeType = ({ value, onChange, className = '' }) => {
@@ -9,8 +14,8 @@ const TradeType = ({ value, onChange, className = '' }) => {
       <Listbox value={value} onChange={onChange}>
         {({ open }) => (
           <>
-            <Listbox.Button
-              className={`font-normal h-full w-full bg-th-bkg-1 border-l border-th-fgd-4 rounded rounded-l-none focus:outline-none focus:ring-1 focus:ring-th-primary`}
+            <StyledListbox
+              className={`font-normal h-full w-full bg-th-bkg-1 border border-th-fgd-4 hover:border-th-primary rounded rounded-l-none focus:outline-none focus:border-th-primary`}
             >
               <div
                 className={`flex items-center justify-between space-x-4 pl-2 pr-1`}
@@ -22,7 +27,7 @@ const TradeType = ({ value, onChange, className = '' }) => {
                   <ChevronDownIcon className={`h-5 w-5 mr-1 text-th-primary`} />
                 )}
               </div>
-            </Listbox.Button>
+            </StyledListbox>
             {open ? (
               <Listbox.Options
                 static

components/styles.tsx

@@ -1,5 +1,9 @@
-export const ElementTitle = ({ children }) => (
-  <div className="flex justify-center mb-4 text-lg font-semibold items-center text-th-fgd-1">
+export const ElementTitle = ({ children, noMarignBottom }) => (
+  <div
+    className={`flex justify-center ${
+      noMarignBottom ? 'mb-0' : 'mb-4'
+    } text-lg font-semibold items-center text-th-fgd-1`}
+  >
     {children}
   </div>
 )

styles/index.css

@@ -56,6 +56,10 @@ button {
   @apply font-semibold;
 }
 
+.default-transition {
+  @apply transition-all duration-300;
+}
+
 .TVChartContainer {
   height: 100%;
   width: 100%;