Align buttons in margin trade dialog (#1497)

* Align buttons in margin trade dialog * [Portfolio] - fix #1555 Co-authored-by: soulBit <its.soulBit@gmail.com> Co-authored-by: pietro-maximoff <pietro.maxim.official@protonmail.com> Co-authored-by: Victor Creed <69458664+creed-victor@users.noreply.github.com>
DistributedCollective · Jul 27, 2021 · 3dcd68d · 3dcd68d
1 parent 26403e1
commit 3dcd68d
Show file tree

Hide file tree

Showing 18 changed files with 40 additions and 34 deletions.
diff --git a/src/app/components/Form/DialogButton/index.tsx b/src/app/components/Form/DialogButton/index.tsx
@@ -22,15 +22,18 @@ export function DialogButton({
   return (
     <div className="tw-flex tw-justify-between tw-items-center tw-space-x-3">
       <button
-        className={cn('tw-btn-dialog', className)}
+        className={cn('tw-btn-dialog tw-truncate', className)}
         onClick={onConfirm}
         {...props}
       >
         {confirmLabel}
       </button>
       {cancelLabel && onCancel && (
         <button
-          className={cn('tw-btn-dialog tw-btn-dialog__secondary', className)}
+          className={cn(
+            'tw-btn-dialog tw-truncate tw-btn-dialog__secondary',
+            className,
+          )}
           onClick={onCancel}
           type="button"
         >

diff --git a/src/app/components/NotificationForm/NotificationFormContainer/index.tsx b/src/app/components/NotificationForm/NotificationFormContainer/index.tsx
@@ -155,7 +155,7 @@ export function NotificationForm(props: Props) {
         }
       /> */}
       <Dialog isOpen={showForm} onClose={onClickClose}>
-        <div className="tw-mw-320 tw-mx-auto">
+        <div className="tw-mw-340 tw-mx-auto">
           <h1 className="tw-text-white tw-tracking-normal">
             {t(translations.notificationFormContainer.dialog.title)}
           </h1>

diff --git a/src/app/components/OptOutDialog/index.tsx b/src/app/components/OptOutDialog/index.tsx
@@ -38,7 +38,7 @@ export default function OptOutDialog(props: OptOutProps) {
   return (
     <>
       <Dialog isOpen={props.open} onClose={props.onClose}>
-        <div className="tw-mw-320 tw-mx-auto">
+        <div className="tw-mw-340 tw-mx-auto">
           <h1 className="tw-mb-6 tw-text-white tw-text-center">
             {t(translations.analyticsDialog.title)}
           </h1>

diff --git a/src/app/components/UserAssets/index.tsx b/src/app/components/UserAssets/index.tsx
@@ -126,7 +126,7 @@ export function UserAssets() {
           setTransack(false);
         }}
       >
-        <div className="tw-mw-320 tw-mx-auto">
+        <div className="tw-mw-340 tw-mx-auto">
           <h1 className="tw-mb-6 tw-text-white tw-text-center">
             {t(translations.common.maintenance)}
           </h1>

diff --git a/src/app/components/UserAssets/useVestedStaking_balanceOf.ts b/src/app/components/UserAssets/useVestedStaking_balanceOf.ts
@@ -44,16 +44,6 @@ export function useVestedStaking_balanceOf(address: string) {
         [address],
       );
 
-      const babelFishVested = await contractReader.call<string>(
-        'lockedFund',
-        'getVestedBalance',
-        [address],
-      );
-
-      if (babelFishVested !== '0') {
-        setBabelFishVestedValue(babelFishVested);
-      }
-
       if (adr1 !== ethGenesisAddress) {
         const vested = await contractReader.call('staking', 'balanceOf', [
           adr1,
@@ -86,6 +76,19 @@ export function useVestedStaking_balanceOf(address: string) {
         setLMVestedValue(String(lmVested));
       }
 
+      const adr5 = await contractReader.call('lockedFund', 'getVestedBalance', [
+        address,
+      ]);
+
+      if (adr5 && adr5 !== '0') {
+        const babelFishVested = await contractReader.call<string>(
+          'lockedFund',
+          'getVestedBalance',
+          [adr5],
+        );
+        setBabelFishVestedValue(String(babelFishVested));
+      }
+
       if (
         adr1 === adr2 &&
         adr2 === adr3 &&

diff --git a/src/app/pages/LendingPage/components/LendingDialog/index.tsx b/src/app/pages/LendingPage/components/LendingDialog/index.tsx
@@ -191,7 +191,7 @@ export function LendingDialog({
   return (
     <>
       <Dialog isOpen={props.showModal} onClose={() => props.onCloseModal()}>
-        <div className="tw-mw-320 tw-mx-auto">
+        <div className="tw-mw-340 tw-mx-auto">
           <h1 className="tw-text-white tw-text-center tw-tracking-normal">
             {t(modalTranslation.title)}
           </h1>

diff --git a/src/app/pages/LiquidityMining/components/AddLiquidityDialog/AddLiquidityDialogV1.tsx b/src/app/pages/LiquidityMining/components/AddLiquidityDialog/AddLiquidityDialogV1.tsx
@@ -112,7 +112,7 @@ export function AddLiquidityDialogV1({ pool, ...props }: Props) {
   return (
     <>
       <Dialog isOpen={props.showModal} onClose={() => props.onCloseModal()}>
-        <div className="tw-mw-320 tw-mx-auto">
+        <div className="tw-mw-340 tw-mx-auto">
           <h1 className="tw-text-white tw-text-center tw-tracking-normal">
             {t(translations.liquidityMining.modals.deposit.title)}
           </h1>

diff --git a/src/app/pages/LiquidityMining/components/AddLiquidityDialog/index.tsx b/src/app/pages/LiquidityMining/components/AddLiquidityDialog/index.tsx
@@ -79,7 +79,7 @@ export function AddLiquidityDialog({ pool, ...props }: Props) {
   return (
     <>
       <Dialog isOpen={props.showModal} onClose={() => props.onCloseModal()}>
-        <div className="tw-mw-320 tw-mx-auto">
+        <div className="tw-mw-340 tw-mx-auto">
           <h1 className="tw-text-white tw-text-center tw-tracking-normal">
             {t(translations.liquidityMining.modals.deposit.title)}
           </h1>

diff --git a/src/app/pages/LiquidityMining/components/AmmPoolsBanner/PoolTransferDialog.tsx b/src/app/pages/LiquidityMining/components/AmmPoolsBanner/PoolTransferDialog.tsx
@@ -15,7 +15,7 @@ export function PoolTransferDialog({ ...props }: Props) {
   return (
     <>
       <Dialog isOpen={props.showModal} onClose={() => props.onCloseModal()}>
-        <div className="tw-mw-320 tw-mx-auto">
+        <div className="tw-mw-340 tw-mx-auto">
           <h1 className="tw-mb-6 tw-text-white tw-text-center">
             {t(translations.liquidity.PoolTransferDialog.title)}
           </h1>

diff --git a/src/app/pages/LiquidityMining/components/RemoveLiquidityDialog/RemoveLiquidityDialogV1.tsx b/src/app/pages/LiquidityMining/components/RemoveLiquidityDialog/RemoveLiquidityDialogV1.tsx
@@ -197,7 +197,7 @@ export function RemoveLiquidityDialogV1({ pool, ...props }: Props) {
   return (
     <>
       <Dialog isOpen={props.showModal} onClose={() => props.onCloseModal()}>
-        <div className="tw-mw-320 tw-mx-auto">
+        <div className="tw-mw-340 tw-mx-auto">
           <h1 className="tw-text-white tw-text-center tw-tracking-normal">
             {t(translations.liquidityMining.modals.withdraw.title)}
           </h1>

diff --git a/src/app/pages/LiquidityMining/components/RemoveLiquidityDialog/index.tsx b/src/app/pages/LiquidityMining/components/RemoveLiquidityDialog/index.tsx
@@ -127,7 +127,7 @@ export function RemoveLiquidityDialog({ pool, ...props }: Props) {
   return (
     <>
       <Dialog isOpen={props.showModal} onClose={() => props.onCloseModal()}>
-        <div className="tw-mw-320 tw-mx-auto">
+        <div className="tw-mw-340 tw-mx-auto">
           <h1 className="tw-text-white tw-text-center tw-tracking-normal">
             {t(translations.liquidityMining.modals.withdraw.title)}
           </h1>

diff --git a/src/app/pages/MarginTradePage/components/AddToMarginDialog/index.tsx b/src/app/pages/MarginTradePage/components/AddToMarginDialog/index.tsx
@@ -71,7 +71,7 @@ export function AddToMarginDialog(props: Props) {
   return (
     <>
       <Dialog isOpen={props.showModal} onClose={() => props.onCloseModal()}>
-        <div className="tw-mw-320 tw-mx-auto">
+        <div className="tw-mw-340 tw-mx-auto">
           <h1 className="tw-mb-6 tw-text-white tw-text-center">
             {t(translations.addToMargin.title)}
           </h1>

diff --git a/src/app/pages/MarginTradePage/components/ClosePositionDialog/index.tsx b/src/app/pages/MarginTradePage/components/ClosePositionDialog/index.tsx
@@ -99,7 +99,7 @@ export function ClosePositionDialog(props: Props) {
   return (
     <>
       <Dialog isOpen={props.showModal} onClose={() => props.onCloseModal()}>
-        <div className="tw-mw-320 tw-mx-auto">
+        <div className="tw-mw-340 tw-mx-auto">
           <h1 className="tw-mb-6 tw-text-white tw-text-center tw-tracking-normal">
             {t(translations.closeTradingPositionHandler.title)}
           </h1>

diff --git a/src/app/pages/MarginTradePage/components/TradeDialog/index.tsx b/src/app/pages/MarginTradePage/components/TradeDialog/index.tsx
@@ -98,7 +98,7 @@ export function TradeDialog() {
         isOpen={!!position}
         onClose={() => dispatch(actions.closeTradingModal())}
       >
-        <div className="tw-mw-320 tw-mx-auto">
+        <div className="tw-mw-340 tw-mx-auto">
           <h1 className="tw-mb-6 tw-text-white tw-text-center">
             {t(translations.marginTradePage.tradeDialog.title)}
           </h1>
@@ -227,6 +227,7 @@ export function TradeDialog() {
             disabled={openTradesLocked}
             cancelLabel={t(translations.common.cancel)}
             onCancel={() => dispatch(actions.closeTradingModal())}
+            className="tw-max-w-50"
           />
         </div>
       </Dialog>

diff --git a/src/app/pages/MarginTradePage/components/TradeForm/index.tsx b/src/app/pages/MarginTradePage/components/TradeForm/index.tsx
@@ -80,7 +80,7 @@ export function TradeForm() {
   return (
     <>
       <div className="tw-trading-form-card tw-bg-black tw-rounded-3xl tw-p-12 tw-mx-auto xl:tw-mx-0">
-        <div className="tw-mw-320 tw-mx-auto">
+        <div className="tw-mw-340 tw-mx-auto">
           <FormGroup
             label={t(translations.marginTradePage.tradeForm.labels.pair)}
             className="tw-mb-6"
@@ -146,7 +146,7 @@ export function TradeForm() {
           )}
         </div>
         {!openTradesLocked && (
-          <div className="tw-flex tw-flex-row tw-items-center tw-justify-between tw-space-x-4 tw-mw-320 tw-mx-auto">
+          <div className="tw-flex tw-flex-row tw-items-center tw-justify-between tw-space-x-4 tw-mw-340 tw-mx-auto">
             <Button
               text={t(translations.marginTradePage.tradeForm.buttons.long)}
               position={TradingPosition.LONG}

diff --git a/src/app/pages/SpotTradingPage/components/TradeForm/index.tsx b/src/app/pages/SpotTradingPage/components/TradeForm/index.tsx
@@ -98,7 +98,7 @@ export function TradeForm() {
         />
       )}
       <div className="tw-trading-form-card spot-form tw-bg-black tw-rounded-3xl tw-p-12 tw-mx-auto xl:tw-mx-0">
-        <div className="tw-mw-320 tw-mx-auto">
+        <div className="tw-mw-340 tw-mx-auto">
           <BuySell value={tradeType} onChange={setTradeType} />
 
           <FormGroup
@@ -187,7 +187,7 @@ export function TradeForm() {
           )}
         </div>
         {!spotLocked && (
-          <div className="tw-mw-320 tw-flex tw-flex-row tw-items-center tw-justify-between tw-space-x-4 tw-mx-auto">
+          <div className="tw-mw-340 tw-flex tw-flex-row tw-items-center tw-justify-between tw-space-x-4 tw-mx-auto">
             <Button
               text={t(
                 tradeType === TradingTypes.BUY

diff --git a/src/styles/components.css b/src/styles/components.css
@@ -85,9 +85,9 @@
     width: 100%;
   }
 
-  .tw-mw-320 {
+  .tw-mw-340 {
     @apply tw-w-full;
-    max-width: 320px;
+    max-width: 340px;
   }
   /* staking */
   .p-18 {
@@ -294,6 +294,6 @@
   outline: none;
 }
 
-.tw-mw-320 {
-  max-width: 320px;
+.tw-mw-340 {
+  max-width: 340px;
 }
diff --git a/src/styles/tailwindcss/components/inputs.css b/src/styles/tailwindcss/components/inputs.css
@@ -1,7 +1,7 @@
 @layer components {
   .tw-input-wrapper {
     height: 2.5rem;
-    max-width:320px;
+    max-width: 340px;
     @apply tw-bg-white tw-flex tw-flex-row tw-justify-center tw-items-center tw-space-x-4 tw-rounded;
     @apply tw-font-semibold tw-font-body tw-text-black;
     @apply tw-w-full;
@@ -16,7 +16,6 @@
 
   .tw-input-label {
     @apply tw-text-white;
-
   }
   .tw-input-append {
     @apply tw-text-black;