styling tweaks

components/Button.tsx

@@ -17,7 +17,6 @@ const Button: FunctionComponent<ButtonProps> = ({
   ...props
 }) => {
   if (disabled) {
-    console.log('grow', grow)
     return (
       <button
         css={[

components/FeeDiscountsTable.tsx

@@ -13,12 +13,17 @@ const FeeDiscountsTable = () => {
       <div
         css={xw`flex flex-col justify-center m-auto text-gray-300 text-base font-light text-center`}
       >
-        <div>Total SRM in Mango: {totalSrm}</div>
+        <div>
+          <span css={xw`font-bold mr-2`}>Total SRM deposits in Mango:</span>{' '}
+          {totalSrm}
+        </div>
         <div css={xw`mt-2`}>
-          Maker Fee: {rates ? percentFormat.format(rates.maker) : null}%
+          <span css={xw`mr-2`}>Maker Fee:</span>{' '}
+          {rates ? percentFormat.format(rates.maker) : null}%
         </div>
         <div>
-          Taker Fee: {rates ? percentFormat.format(rates.taker) : null}%
+          <span css={xw`mr-2`}>Taker Fee:</span>{' '}
+          {rates ? percentFormat.format(rates.taker) : null}%
         </div>
         <div css={xw`mt-6`}>
           {connected ? (

components/TradeForm.tsx

@@ -366,9 +366,9 @@ export default function TradeForm({
             </Button>
           )
         ) : (
-          <button css={xw`flex-grow border`} disabled>
-            <div css={xw`text-lg font-light p-2`}>Country Not Allowed</div>
-          </button>
+          <Button disabled grow>
+            <span css={xw`text-lg font-light`}>Country Not Allowed</span>
+          </Button>
         )}
       </div>
     </FloatingElement>