refactor: adjust grid layout and button text in LiteserversTiersSection and RestApiTiersSection for improved UI consistency; update padding and font size in SimpleTierCard for better readability

Author: mois-ilya

src/features/tonapi/pricing/ui/LiteserversTiersSection.tsx

@@ -78,7 +78,7 @@ export const LiteserversTiersSection: FC = observer(() => {
                     </Text>
                 </Flex>
 
-                <Grid gap="4" templateColumns="repeat(auto-fit, minmax(290px, 1fr))">
+                <Grid gap="4" templateColumns="repeat(auto-fit, minmax(225px, 1fr))">
                     {liteserverTiers?.map(tier => {
                         const price = new UsdCurrencyAmount(tier.usd_price);
                         const isCurrent = currentLiteserverTier?.id === tier.id;
@@ -105,7 +105,7 @@ export const LiteserversTiersSection: FC = observer(() => {
                         rps="∞"
                         priceDescription="Contact us"
                         onSelect={openFeedbackModal('unlimited-liteservers')}
-                        buttonText="Make request"
+                        buttonText="Request"
                         buttonVariant="contrast"
                     />
                 </Grid>

src/features/tonapi/pricing/ui/RestApiTiersSection.tsx

@@ -84,7 +84,7 @@ export const RestApiTiersSection: FC = observer(() => {
                     </Text>
                 </Flex>
 
-                <Grid gap="4" templateColumns="repeat(auto-fit, minmax(290px, 1fr))">
+                <Grid gap="4" templateColumns="repeat(auto-fit, minmax(225px, 1fr))">
                     {sortedTiers.map(tier => {
                         const isCurrent = currentRestApiTier?.id === tier.id;
                         const isFree = tier.price.amount.eq(0);
@@ -117,7 +117,7 @@ export const RestApiTiersSection: FC = observer(() => {
                         rps="∞"
                         priceDescription="Contact us"
                         onSelect={openFeedbackModal('unlimited-tonapi')}
-                        buttonText="Make request"
+                        buttonText="Request"
                         buttonVariant="contrast"
                     />
                 </Grid>

src/features/tonapi/pricing/ui/SimpleTierCard.tsx

@@ -30,7 +30,7 @@ export const SimpleTierCard: FC<SimpleTierCardProps> = ({
         <Card
             pos="relative"
             direction="column"
-            p="4"
+            p="2"
             border={isCurrent ? '2px solid' : '1px solid'}
             borderColor={isCurrent ? 'text.secondary' : 'gray.200'}
             transition="all 0.2s"
@@ -59,11 +59,11 @@ export const SimpleTierCard: FC<SimpleTierCardProps> = ({
             )}
 
             <Flex justify="space-between" gap="4">
-                <Flex direction="column" flex="1" gap="1">
+                <Flex direction="column" flex="1">
                     <Text textStyle="label2" color="text.secondary">
                         {name}
                     </Text>
-                    <H2>{price}</H2>
+                    <H2 fontSize={24}>{price}</H2>
                     {priceDescription && (
                         <Text textStyle="body2" color="text.secondary">
                             {priceDescription}
@@ -82,11 +82,11 @@ export const SimpleTierCard: FC<SimpleTierCardProps> = ({
                             {buttonText}
                         </Button>
                     ) : (
-                        <Flex align="flex-end" direction="column" gap="1">
+                        <Flex align="flex-end" direction="column">
                             <Text textStyle="label2" color="text.secondary">
                                 RPS
                             </Text>
-                            <H2>{rps}</H2>
+                            <H2 fontSize={24}>{rps}</H2>
                         </Flex>
                     )}
                 </Flex>