fix: spacing issues in the grid

forbole · Mar 11, 2024 · 3aeb0cf · 3aeb0cf
1 parent d3443f0
commit 3aeb0cf
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 42 deletions.
diff --git a/src/features/staking/components/delegation-details.tsx b/src/features/staking/components/delegation-details.tsx
@@ -70,8 +70,8 @@ export const DetailsTrigger = ({
 
 const gridStyle = {
   gap: "16px",
-  gridTemplateColumns: "2fr repeat(4, 1fr)",
-  minWidth: 800,
+  gridTemplateColumns: "1.5fr repeat(4, 1.05fr)",
+  minWidth: 1000,
   overflow: "auto",
 };
 
@@ -221,15 +221,8 @@ const UnbondingRow = ({
 
   return (
     <div className={rowStyle} style={gridStyle}>
-      <div className="flex items-center justify-start">
-        <img
-          alt="Validator logo"
-          className="block w-[50px] rounded-full"
-          src={logo}
-          style={{ height: 50, width: 50 }}
-        />
-      </div>
       <div className="flex flex-1 flex-row justify-start gap-4">
+        <ValidatorLogo logo={logo} />
         <div className="flex flex-col justify-start gap-2 text-left">
           <div className="text-[14px] font-bold leading-[20px]">
             {validator?.description.moniker || ""}
@@ -421,9 +414,7 @@ const DelegationDetails = () => {
           return (
             <div className={wrapperStyle}>
               <div className={headerStyle} style={gridStyle}>
-                <UnbondingHeaderTitle rigthAlign>
-                  Unstakings
-                </UnbondingHeaderTitle>
+                <UnbondingHeaderTitle>Unstakings</UnbondingHeaderTitle>
                 <UnbondingHeaderTitle
                   onSort={setUnbondingsSortMethod}
                   rigthAlign

diff --git a/src/features/staking/components/validator-delegation.tsx b/src/features/staking/components/validator-delegation.tsx
@@ -166,40 +166,42 @@ export default function ValidatorDelegation() {
         <div>
           <Heading8>Unstakings (XION)</Heading8>
           <div className="mb-[8px] mt-[12px]">
-            <Heading2>
-              {userTotalUnbondings
-                ? formatToSmallDisplay(
-                    new BigNumber(userTotalUnbondings.amount),
-                  )
-                : "-"}
-            </Heading2>
+            <div className="flex flex-row items-center gap-[12px]">
+              <Heading2>
+                {userTotalUnbondings
+                  ? formatToSmallDisplay(
+                      new BigNumber(userTotalUnbondings.amount),
+                    )
+                  : "-"}
+              </Heading2>
+              {!!unbondings?.length && (
+                <div className="flex h-full flex-row items-end justify-end text-right">
+                  <span>
+                    <ButtonPill
+                      className="text-[14px]"
+                      onClick={() => {
+                        staking.dispatch(
+                          setModalOpened({
+                            content: {
+                              unbondings,
+                            },
+                            type: "cancel-unstaking",
+                          }),
+                        );
+                      }}
+                      variant="danger"
+                    >
+                      Cancel Unstake
+                    </ButtonPill>
+                  </span>
+                </div>
+              )}
+            </div>
           </div>
           <BodyMedium>
             {userTotalUnbondings ? formatXionToUSD(userTotalUnbondings) : "-"}
           </BodyMedium>
         </div>
-        {!!unbondings?.length && (
-          <div className="flex h-full flex-row items-end justify-end text-right">
-            <span>
-              <ButtonPill
-                className="text-[14px]"
-                onClick={() => {
-                  staking.dispatch(
-                    setModalOpened({
-                      content: {
-                        unbondings,
-                      },
-                      type: "cancel-unstaking",
-                    }),
-                  );
-                }}
-                variant="danger"
-              >
-                Cancel Unstake
-              </ButtonPill>
-            </span>
-          </div>
-        )}
       </div>
     </div>
   );