From a0858caccc579b27f631123065f8aa5b4574b3a0 Mon Sep 17 00:00:00 2001
From: thomarnauld <thomarnauld@gmail.com>
Date: Mon, 18 Dec 2023 12:22:12 +0000
Subject: [PATCH] fix: first replace of legacy boxes

---
 packages/components/Menu.tsx                  | 13 +++---
 packages/components/Pagination.tsx            | 15 +++---
 packages/components/boxes/Box.tsx             |  1 +
 packages/components/buttons/IconButton.tsx    | 30 ++++--------
 packages/components/buttons/SocialButton.tsx  | 32 ++++++-------
 .../buttons/SocialButtonSecondary.tsx         | 25 ++++------
 .../components/buttons/ToggleableButton.tsx   | 46 ++++++++-----------
 .../riotersFooter/NftAdjustments.tsx          |  1 -
 .../socialFeed/NewsFeed/NewsFeedInput.tsx     | 11 ++---
 .../screens/DAppStore/components/Dropdown.tsx | 13 +++---
 10 files changed, 79 insertions(+), 108 deletions(-)

diff --git a/packages/components/Menu.tsx b/packages/components/Menu.tsx
index 1e8a8f84d1..ecbc69aa4b 100644
--- a/packages/components/Menu.tsx
+++ b/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>
diff --git a/packages/components/Pagination.tsx b/packages/components/Pagination.tsx
index 8164e87917..210fd8b0b7 100644
--- a/packages/components/Pagination.tsx
+++ b/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>
diff --git a/packages/components/boxes/Box.tsx b/packages/components/boxes/Box.tsx
index 08f8cddea3..f103da8df9 100644
--- a/packages/components/boxes/Box.tsx
+++ b/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>;
diff --git a/packages/components/buttons/IconButton.tsx b/packages/components/buttons/IconButton.tsx
index 5b111e3070..637b6539c2 100644
--- a/packages/components/buttons/IconButton.tsx
+++ b/packages/components/buttons/IconButton.tsx
@@ -9,14 +9,15 @@ 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;
@@ -24,7 +25,6 @@ export const IconButton: React.FC<{
   iconColor?: string;
   backgroundColor?: string;
   borderColor?: string;
-  squaresBorderColor?: string;
   noBrokenCorners?: boolean;
 }> = ({
   // If no width, the buttons will fit the content including paddingHorizontal 20
@@ -33,41 +33,29 @@ 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}
@@ -75,7 +63,7 @@ export const IconButton: React.FC<{
           height={iconSize}
           color={iconColor}
         />
-      </LegacySecondaryBox>
+      </SecondaryBox>
     </TouchableOpacity>
   );
 };
diff --git a/packages/components/buttons/SocialButton.tsx b/packages/components/buttons/SocialButton.tsx
index 141c360ffb..87d0e2e4a7 100644
--- a/packages/components/buttons/SocialButton.tsx
+++ b/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>
   );
 };
diff --git a/packages/components/buttons/SocialButtonSecondary.tsx b/packages/components/buttons/SocialButtonSecondary.tsx
index 0858834dff..c2f1cdb314 100644
--- a/packages/components/buttons/SocialButtonSecondary.tsx
+++ b/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,23 +21,18 @@ 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}
@@ -45,7 +40,7 @@ export const SocialButtonSecondary: React.FC<{
               height={20}
               color={primaryTextColor}
             />
-          </LegacySecondaryBox>
+          </SecondaryBox>
           <BrandText
             style={[
               fontMedium14,
@@ -55,7 +50,7 @@ export const SocialButtonSecondary: React.FC<{
             {text}
           </BrandText>
         </View>
-      </LegacySecondaryBox>
+      </SecondaryBox>
     </TouchableOpacity>
   );
 };
diff --git a/packages/components/buttons/ToggleableButton.tsx b/packages/components/buttons/ToggleableButton.tsx
index caa0d07aa5..1c63cc6c7b 100644
--- a/packages/components/buttons/ToggleableButton.tsx
+++ b/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>
   );
 };
diff --git a/packages/components/riotersFooter/NftAdjustments.tsx b/packages/components/riotersFooter/NftAdjustments.tsx
index 144c865acb..6e8623cc18 100644
--- a/packages/components/riotersFooter/NftAdjustments.tsx
+++ b/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}
diff --git a/packages/components/socialFeed/NewsFeed/NewsFeedInput.tsx b/packages/components/socialFeed/NewsFeed/NewsFeedInput.tsx
index e09dcdaf83..34a4b87958 100644
--- a/packages/components/socialFeed/NewsFeed/NewsFeedInput.tsx
+++ b/packages/components/socialFeed/NewsFeed/NewsFeedInput.tsx
@@ -73,7 +73,7 @@ import FlexRow from "../../FlexRow";
 import { IconBox } from "../../IconBox";
 import { OmniLink } from "../../OmniLink";
 import { SVG } from "../../SVG";
-import { LegacyPrimaryBox } from "../../boxes/LegacyPrimaryBox";
+import { PrimaryBox } from "../../boxes/PrimaryBox";
 import { PrimaryButton } from "../../buttons/PrimaryButton";
 import { SecondaryButtonOutline } from "../../buttons/SecondaryButtonOutline";
 import { FileUploader } from "../../fileUploader";
@@ -327,15 +327,12 @@ export const NewsFeedInput = React.forwardRef<
         style={[{ width }, style]}
         onLayout={(e) => setViewWidth(e.nativeEvent.layout.width)}
       >
-        <LegacyPrimaryBox
-          fullWidth
+        <PrimaryBox
           style={{
             zIndex: 9,
-          }}
-          mainContainerStyle={{
             backgroundColor: appMode === "mini" ? neutral00 : neutral22,
+            width: "100%",
           }}
-          noRightBrokenBorder
         >
           <Pressable
             onPress={focusInput}
@@ -453,7 +450,7 @@ export const NewsFeedInput = React.forwardRef<
               }
             }}
           />
-        </LegacyPrimaryBox>
+        </PrimaryBox>
         <View
           style={{
             backgroundColor: appMode === "mini" ? neutral00 : neutral17,
diff --git a/packages/screens/DAppStore/components/Dropdown.tsx b/packages/screens/DAppStore/components/Dropdown.tsx
index c3e7ef0a28..eb532bad14 100644
--- a/packages/screens/DAppStore/components/Dropdown.tsx
+++ b/packages/screens/DAppStore/components/Dropdown.tsx
@@ -7,7 +7,7 @@ import chevronDownSVG from "../../../../assets/icons/chevron-down.svg";
 import chevronUpSVG from "../../../../assets/icons/chevron-up.svg";
 import { BrandText } from "../../../components/BrandText";
 import { SVG } from "../../../components/SVG";
-import { LegacySecondaryBox } from "../../../components/boxes/LegacySecondaryBox";
+import { SecondaryBox } from "../../../components/boxes/SecondaryBox";
 import { useDropdowns } from "../../../hooks/useDropdowns";
 import {
   selectAvailableApps,
@@ -99,11 +99,10 @@ export const DropdownDappsStoreFilter: React.FC = () => {
       </TouchableOpacity>
 
       {isDropdownOpen && (
-        <LegacySecondaryBox
-          noBrokenCorners
-          width={248}
-          style={{ position: "absolute", top: 29, right: -14 }}
-          mainContainerStyle={{
+        <SecondaryBox
+          style={{
+            position: "absolute",
+            width: 248,
             paddingHorizontal: layout.spacing_x1_5,
             paddingTop: layout.spacing_x1_5,
             backgroundColor: neutral33,
@@ -118,7 +117,7 @@ export const DropdownDappsStoreFilter: React.FC = () => {
               id={option.id}
             />
           ))}
-        </LegacySecondaryBox>
+        </SecondaryBox>
       )}
     </View>
   );