fix(stake-screen): Responsive styles

packages/components/buttons/PrimaryButtonOutline.tsx

@@ -11,6 +11,7 @@ import {
   borderRadiusButton,
   ButtonsSize,
   heightButton,
+  horizontalPaddingButton,
 } from "../../utils/style/buttons";
 import { primaryColor } from "../../utils/style/colors";
 import { fontSemibold14 } from "../../utils/style/fonts";
@@ -73,7 +74,7 @@ export const PrimaryButtonOutline: React.FC<{
           flexDirection: "row",
           borderRadius: borderRadiusButton(size),
           backgroundColor: "#000000",
-          paddingHorizontal: 20,
+          paddingHorizontal: horizontalPaddingButton(size),
           borderColor: color,
         }}
         {...boxProps}

packages/screens/Stake/StakeScreen.tsx

@@ -17,7 +17,7 @@ import useSelectedWallet from "../../hooks/useSelectedWallet";
 import { useValidators } from "../../hooks/useValidators";
 import { NetworkKind, UserKind, parseUserId } from "../../networks";
 import { ScreenFC } from "../../utils/navigation";
-import { fontSemibold28 } from "../../utils/style/fonts";
+import { fontSemibold20, fontSemibold28 } from "../../utils/style/fonts";
 import { layout } from "../../utils/style/layout";
 
 export const StakeScreen: ScreenFC<"Staking"> = ({ route: { params } }) => {
@@ -60,7 +60,6 @@ export const StakeScreen: ScreenFC<"Staking"> = ({ route: { params } }) => {
   const [selectedTab, setSelectedTab] = useState<keyof typeof tabs>("active");
   const areThereWallets = useAreThereWallets();
 
-  // functions
   const toggleDetailModal = (stakeData?: ValidatorInfo) => {
     setStakeDetailModalVisible(!stakeDetailModalVisible);
     setSelectedStake(stakeData);
@@ -83,7 +82,8 @@ export const StakeScreen: ScreenFC<"Staking"> = ({ route: { params } }) => {
 
   return (
     <ScreenContainer
-      fullWidth
+      headerChildren={<BrandText style={fontSemibold20}>Stake</BrandText>}
+      responsive
       forceNetworkKind={NetworkKind.Cosmos}
       forceNetworkId={multisigId && selectedNetworkId}
     >

packages/screens/Stake/components/ValidatorsList.tsx

@@ -36,7 +36,7 @@ const TABLE_ROWS: { [key in string]: TableRowHeading } = {
     flex: 2,
   },
   claimable: {
-    label: "Claimable reward",
+    label: "Claimable Reward",
     flex: 3,
   },
   actions: {
@@ -169,7 +169,7 @@ const ValidatorRow: React.FC<{
         style={{
           flex: TABLE_ROWS.claimable.flex,
           paddingRight: actions ? layout.spacing_x1 : 0,
-          flexDirection: "row",
+          flexDirection: isMobile ? "column" : "row",
           alignItems: "center",
         }}
       >
@@ -180,8 +180,12 @@ const ValidatorRow: React.FC<{
         )}
         {pendingRewards.length && (
           <PrimaryButtonOutline
-            size="XS"
-            style={{ paddingLeft: layout.spacing_x2 }}
+            size={isMobile ? "XXS" : "XS"}
+            style={
+              isMobile
+                ? { paddingTop: layout.spacing_x1 }
+                : { paddingLeft: layout.spacing_x2 }
+            }
             text="Claim"
             disabled={!userAddress}
             onPress={() => {
@@ -213,7 +217,7 @@ const ValidatorRow: React.FC<{
                   action.onPress(validator);
                 }}
                 text={action.label || ""}
-                size="XS"
+                size={isMobile ? "XXS" : "XS"}
               />
             ),
           )}

packages/utils/style/buttons.ts

@@ -1,4 +1,4 @@
-export type ButtonsSize = "XL" | "M" | "SM" | "XS";
+export type ButtonsSize = "XL" | "M" | "SM" | "XS" | "XXS";
 
 export const heightButton = (format: ButtonsSize) => {
   switch (format) {
@@ -10,6 +10,8 @@ export const heightButton = (format: ButtonsSize) => {
       return 40;
     case "XS":
       return 36;
+    case "XXS":
+      return 28;
   }
 };
 
@@ -39,3 +41,12 @@ export const cornerWidthDropdownButton = (format: ButtonsSize) => {
       return 8;
   }
 };
+
+export const horizontalPaddingButton = (format: ButtonsSize) => {
+  switch (format) {
+    case "XXS":
+      return 10;
+    default:
+      return 20;
+  }
+};