style: standardize fee tiers

Author: AnthonyMarin

src/components/nft-dashboard/Balance/components/SendForm/components/TieredFees/TieredFees.styles.ts

@@ -2,11 +2,12 @@ import styled, { css } from 'styled-components';
 import { BaseCard } from '@app/components/common/BaseCard/BaseCard';
 
 export const TierCard = styled(BaseCard)<{ $isMobile?: boolean }>`
-  width: 30%;
+  width: 33%;
+  min-width: 150px;
   ${(props) =>
     props.$isMobile &&
     css`
-      width: 100%;
+      width: 80%;
     `}
   background-color: var(--additional-background-color);
   cursor: pointer;
@@ -73,5 +74,6 @@ export const TiersWrapper = styled.div<ResponsiveProps>`
       display: flex;
       flex-direction: column;
       gap: 1rem;
+      align-items: center;
     `}
 `;

src/components/nft-dashboard/Balance/components/SendForm/components/TieredFees/TieredFees.tsx

@@ -83,7 +83,7 @@ const TieredFees: React.FC<TieredFeesProps> = ({ inValidAmount, handleFeeChange,
           <br />
           {`Priority`}
           <S.RateValueWrapper>
-            <span>{`${fees.low} sat/vB`}</span>
+          {`${fees.low}`} <br /> {`sat/vB`}
             <S.RateValue>{`${estimatedFee.low} Sats`}</S.RateValue> {/* Show estimated fee */}
           </S.RateValueWrapper>
         </S.TierCardContent>
@@ -101,7 +101,7 @@ const TieredFees: React.FC<TieredFeesProps> = ({ inValidAmount, handleFeeChange,
           <br />
           {`Priority`}
           <S.RateValueWrapper>
-            <span>{`${fees.med} sat/vB`}</span>
+          {`${fees.med}`} <br /> {`sat/vB`}
             <S.RateValue>{`${estimatedFee.med} Sats`}</S.RateValue> {/* Show estimated fee */}
           </S.RateValueWrapper>
         </S.TierCardContent>
@@ -119,7 +119,9 @@ const TieredFees: React.FC<TieredFeesProps> = ({ inValidAmount, handleFeeChange,
           <br />
           {`Priority`}
           <S.RateValueWrapper>
-            <span>{`${fees.high} sat/vB`}</span>
+            <span>
+              {`${fees.high}`} <br /> {`sat/vB`}
+            </span>
             <S.RateValue>{`${estimatedFee.high} Sats`}</S.RateValue> {/* Show estimated fee */}
           </S.RateValueWrapper>
         </S.TierCardContent>