fix: first replace of legacy boxes

packages/components/Menu.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { View, TouchableOpacity } from "react-native";
 
 import { BrandText } from "./BrandText";
-import { LegacyPrimaryBox } from "./boxes/LegacyPrimaryBox";
+import { PrimaryBox } from "./boxes/PrimaryBox";
 import { useDropdowns } from "../hooks/useDropdowns";
 import { neutral33 } from "../utils/style/colors";
 import { fontSemibold13 } from "../utils/style/fonts";
@@ -34,11 +34,12 @@ export const Menu: React.FC<MenuProps> = ({
       </TouchableOpacity>
       {isDropdownOpen && (
         <View ref={dropdownRef} collapsable={false}>
-          <LegacyPrimaryBox
-            width={width}
-            style={{ position: "absolute", right: 0, bottom: -20 }}
-            mainContainerStyle={{
+          <PrimaryBox
+            style={{
               position: "absolute",
+              right: 0,
+              bottom: -20,
+              width,
               paddingHorizontal: layout.spacing_x1_5,
             }}
           >
@@ -66,7 +67,7 @@ export const Menu: React.FC<MenuProps> = ({
                 </BrandText>
               </TouchableOpacity>
             ))}
-          </LegacyPrimaryBox>
+          </PrimaryBox>
         </View>
       )}
     </View>

packages/components/Pagination.tsx

@@ -3,8 +3,8 @@ import { StyleSheet, TouchableOpacity, View } from "react-native";
 
 import { BrandText } from "./BrandText";
 import { SVG } from "./SVG";
-import { LegacySecondaryBox } from "./boxes/LegacySecondaryBox";
 import { LegacyTertiaryBox } from "./boxes/LegacyTertiaryBox";
+import { SecondaryBox } from "./boxes/SecondaryBox";
 import { SpacerRow } from "./spacer";
 import chevronDownSVG from "../../assets/icons/chevron-down.svg";
 import chevronLeftDoubleSVG from "../../assets/icons/chevron-left-double.svg";
@@ -114,11 +114,12 @@ export const Pagination = ({
         </LegacyTertiaryBox>
 
         {isDropdownOpen && (
-          <LegacySecondaryBox
-            noBrokenCorners
-            width={80}
-            style={{ position: "absolute", top: 46, right: 0 }}
-            mainContainerStyle={{
+          <SecondaryBox
+            style={{
+              position: "absolute",
+              top: 46,
+              right: 0,
+              width: 80,
               paddingHorizontal: layout.spacing_x1_5,
               paddingTop: layout.spacing_x1_5,
               backgroundColor: neutral33,
@@ -147,7 +148,7 @@ export const Pagination = ({
                 </BrandText>
               </TouchableOpacity>
             ))}
-          </LegacySecondaryBox>
+          </SecondaryBox>
         )}
       </View>
     </View>

packages/components/boxes/Box.tsx

@@ -53,6 +53,7 @@ export type BoxStyle = Pick<
   | "top"
   | "bottom"
   | "flex"
+  | "zIndex"
 > & { borderRadius?: number; backgroundColor?: string; borderColor?: string };
 
 export type GradientParams = Omit<LinearGradientProps, keyof ViewProps>;

packages/components/buttons/IconButton.tsx

@@ -9,22 +9,22 @@ import {
 } from "../../utils/style/buttons";
 import { primaryColor } from "../../utils/style/colors";
 import { SVG } from "../SVG";
-import { LegacySecondaryBox } from "../boxes/LegacySecondaryBox";
+import { BoxStyle } from "../boxes/Box";
+import { SecondaryBox } from "../boxes/SecondaryBox";
 
 export const IconButton: React.FC<{
   width?: number;
   size: ButtonsSize;
   onPress?: (() => Promise<void>) | (() => void);
   squaresBackgroundColor?: string;
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<BoxStyle>;
   iconSVG: React.FC<SvgProps>;
   disabled?: boolean;
   fullWidth?: boolean;
   iconSize?: number;
   iconColor?: string;
   backgroundColor?: string;
   borderColor?: string;
-  squaresBorderColor?: string;
   noBrokenCorners?: boolean;
 }> = ({
   // If no width, the buttons will fit the content including paddingHorizontal 20
@@ -33,49 +33,37 @@ export const IconButton: React.FC<{
   onPress,
   style,
   iconSVG,
-  disabled = false,
   fullWidth = false,
   iconSize = 16,
   iconColor = "black",
   backgroundColor = primaryColor,
   borderColor,
-  squaresBorderColor,
-  noBrokenCorners,
 }) => {
-  const boxProps = {
-    style,
-    disabled,
-    width,
-    fullWidth,
-    noBrokenCorners,
-  };
-
   return (
     <TouchableOpacity
       onPress={onPress}
       style={{ width: fullWidth ? "100%" : width }}
     >
-      <LegacySecondaryBox
-        height={heightButton(size)}
-        mainContainerStyle={[
+      <SecondaryBox
+        style={[
+          style,
+          borderColor ? { borderWidth: 1, borderColor } : {},
           {
+            height: heightButton(size),
             flexDirection: "row",
             borderRadius: borderRadiusButton(size),
             backgroundColor,
             paddingHorizontal: 20,
           },
-          borderColor ? { borderWidth: 1, borderColor } : {},
         ]}
-        squaresBorderColor={squaresBorderColor}
-        {...boxProps}
       >
         <SVG
           source={iconSVG}
           width={iconSize}
           height={iconSize}
           color={iconColor}
         />
-      </LegacySecondaryBox>
+      </SecondaryBox>
     </TouchableOpacity>
   );
 };

packages/components/buttons/SocialButton.tsx

@@ -6,40 +6,36 @@ import { neutral22, neutral33, withAlpha } from "../../utils/style/colors";
 import { fontMedium14 } from "../../utils/style/fonts";
 import { BrandText } from "../BrandText";
 import { SVG } from "../SVG";
-import { LegacySecondaryBox } from "../boxes/LegacySecondaryBox";
+import { SecondaryBox } from "../boxes/SecondaryBox";
 
 export const SocialButton: React.FC<{
   text: string;
   iconSvg: React.FC<SvgProps>;
   onPress?: () => void;
   style?: StyleProp<ViewStyle>;
-  noBrokenCorners?: boolean;
-}> = ({ text, onPress, iconSvg, style, noBrokenCorners = true }) => {
+}> = ({ text, onPress, iconSvg, style }) => {
   return (
     <TouchableOpacity onPress={onPress} style={style}>
-      <LegacySecondaryBox
-        // We don't handle broken corners for now, because this button can be used on an image
-        noBrokenCorners={noBrokenCorners}
-        mainContainerStyle={{ backgroundColor: withAlpha(neutral22, 0.64) }}
-        height={44}
+      <SecondaryBox
+        style={{ height: 44, backgroundColor: withAlpha(neutral22, 0.64) }}
       >
         <View style={{ flexDirection: "row", alignItems: "center" }}>
-          <LegacySecondaryBox
-            noBrokenCorners={noBrokenCorners}
-            style={{ marginLeft: 6 }}
-            mainContainerStyle={{ backgroundColor: neutral33, borderRadius: 6 }}
-            width={32}
-            height={32}
-            squaresBackgroundColor={withAlpha(neutral22, 0.64)}
-            cornerWidth={5.5}
+          <SecondaryBox
+            style={{
+              marginLeft: 6,
+              backgroundColor: neutral33,
+              borderRadius: 6,
+              width: 32,
+              height: 32,
+            }}
           >
             <SVG source={iconSvg} height={20} width={20} />
-          </LegacySecondaryBox>
+          </SecondaryBox>
           <BrandText style={[fontMedium14, { marginLeft: 8, marginRight: 16 }]}>
             {text}
           </BrandText>
         </View>
-      </LegacySecondaryBox>
+      </SecondaryBox>
     </TouchableOpacity>
   );
 };

packages/components/buttons/SocialButtonSecondary.tsx

@@ -11,7 +11,7 @@ import {
 import { fontMedium14 } from "../../utils/style/fonts";
 import { BrandText } from "../BrandText";
 import { SVG } from "../SVG";
-import { LegacySecondaryBox } from "../boxes/LegacySecondaryBox";
+import { SecondaryBox } from "../boxes/SecondaryBox";
 
 export const SocialButtonSecondary: React.FC<{
   text: string;
@@ -21,31 +21,26 @@ export const SocialButtonSecondary: React.FC<{
 }> = ({ text, onPress, iconSvg, style }) => {
   return (
     <TouchableOpacity onPress={onPress} style={style}>
-      <LegacySecondaryBox
-        noBrokenCorners
-        mainContainerStyle={{ backgroundColor: withAlpha(neutral1A, 0.64) }}
-        height={44}
+      <SecondaryBox
+        style={{ height: 44, backgroundColor: withAlpha(neutral1A, 0.64) }}
       >
         <View style={{ flexDirection: "row", alignItems: "center" }}>
-          <LegacySecondaryBox
-            noBrokenCorners
-            style={{ marginLeft: 6 }}
-            mainContainerStyle={{
+          <SecondaryBox
+            style={{
+              marginLeft: 6,
               backgroundColor: primaryColor,
               borderRadius: 6,
+              width: 32,
+              height: 32,
             }}
-            width={32}
-            height={32}
-            squaresBackgroundColor={withAlpha(neutral1A, 0.64)}
-            cornerWidth={5.5}
           >
             <SVG
               source={iconSvg}
               width={20}
               height={20}
               color={primaryTextColor}
             />
-          </LegacySecondaryBox>
+          </SecondaryBox>
           <BrandText
             style={[
               fontMedium14,
@@ -55,7 +50,7 @@ export const SocialButtonSecondary: React.FC<{
             {text}
           </BrandText>
         </View>
-      </LegacySecondaryBox>
+      </SecondaryBox>
     </TouchableOpacity>
   );
 };

packages/components/buttons/ToggleableButton.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleProp, TouchableOpacity, ViewStyle } from "react-native";
+import { StyleProp, TouchableOpacity } from "react-native";
 
 import chevronDownSVG from "../../../assets/icons/chevron-down.svg";
 import chevronUpSVG from "../../../assets/icons/chevron-up.svg";
@@ -12,49 +12,43 @@ import { neutral33, secondaryColor } from "../../utils/style/colors";
 import { fontSemibold12 } from "../../utils/style/fonts";
 import { BrandText } from "../BrandText";
 import { SVG } from "../SVG";
-import { LegacySecondaryBox } from "../boxes/LegacySecondaryBox";
+import { BoxStyle } from "../boxes/Box";
+import { SecondaryBox } from "../boxes/SecondaryBox";
 
 // Same as _PrimaryButtonTest but with customizable color and backgroundColor
 export const ToggleableButton: React.FC<{
-  size?: ButtonsSize;
   textExpanded: string;
   textCompressed: string;
+  size?: ButtonsSize;
   width?: number;
   onPress?: () => void;
   squaresBackgroundColor?: string;
   isExpanded?: boolean;
   color?: string;
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<BoxStyle>;
 }> = ({
-  // If no width, the buttons will fit the content including paddingHorizontal 20
-  width,
-  size = "XS",
   textExpanded,
   textCompressed,
+  // If no width, the buttons will fit the content including paddingHorizontal 20
+  width,
   onPress,
-  squaresBackgroundColor,
   isExpanded = false,
   style,
 }) => {
-  const boxProps = {
-    style,
-    squaresBackgroundColor,
-    width,
-  };
-
   return (
     <TouchableOpacity onPress={onPress}>
-      <LegacySecondaryBox
-        cornerWidth={cornerWidthDropdownButton(size)}
-        height={heightDropdownButton(size)}
-        mainContainerStyle={{
-          flexDirection: "row",
-          borderRadius: 6,
-          backgroundColor: neutral33,
-          paddingRight: 6,
-          paddingLeft: 8,
-        }}
-        {...boxProps}
+      <SecondaryBox
+        style={[
+          style,
+          {
+            flexDirection: "row",
+            borderRadius: 6,
+            backgroundColor: neutral33,
+            paddingRight: 6,
+            paddingLeft: 8,
+            width,
+          },
+        ]}
       >
         <BrandText
           style={[
@@ -71,7 +65,7 @@ export const ToggleableButton: React.FC<{
           height={16}
           color={secondaryColor}
         />
-      </LegacySecondaryBox>
+      </SecondaryBox>
     </TouchableOpacity>
   );
 };

packages/components/riotersFooter/NftAdjustments.tsx

@@ -146,7 +146,6 @@ const NftAdjustments: React.FC<{
               backgroundColor="#F46F761A"
               style={{ borderWidth: 1, borderRadius: 6 }}
               borderColor={errorColor}
-              squaresBorderColor={errorColor}
             />
             <PrimaryButton
               width={128}