fix: regression on SocialButton component

Signed-off-by: clegirar <[email protected]>
TERITORI · Feb 21, 2024 · c543ca7 · c543ca7
1 parent 77c529c
commit c543ca7
Showing 1 changed file with 13 additions and 6 deletions.
diff --git a/packages/components/buttons/SocialButton.tsx b/packages/components/buttons/SocialButton.tsx
@@ -4,11 +4,12 @@ import { SvgProps } from "react-native-svg";
 
 import { BrandText } from "../BrandText";
 import { SVG } from "../SVG";
-import { SecondaryBox } from "../boxes/SecondaryBox";
+import { Box } from "../boxes/Box";
 
 import { neutral22, neutral33, withAlpha } from "@/utils/style/colors";
 import { fontMedium14 } from "@/utils/style/fonts";
 
+// TODO: remove uses of Box component directly in other components
 export const SocialButton: React.FC<{
   text: string;
   iconSvg: React.FC<SvgProps>;
@@ -17,26 +18,32 @@ export const SocialButton: React.FC<{
 }> = ({ text, onPress, iconSvg, style }) => {
   return (
     <TouchableOpacity onPress={onPress} style={style}>
-      <SecondaryBox
-        style={{ height: 44, backgroundColor: withAlpha(neutral22, 0.64) }}
+      <Box
+        style={{
+          height: 44,
+          backgroundColor: withAlpha(neutral22, 0.64),
+          justifyContent: "center",
+        }}
       >
         <View style={{ flexDirection: "row", alignItems: "center" }}>
-          <SecondaryBox
+          <Box
             style={{
               marginLeft: 6,
               backgroundColor: neutral33,
               borderRadius: 6,
               width: 32,
               height: 32,
+              justifyContent: "center",
+              alignItems: "center",
             }}
           >
             <SVG source={iconSvg} height={20} width={20} />
-          </SecondaryBox>
+          </Box>
           <BrandText style={[fontMedium14, { marginLeft: 8, marginRight: 16 }]}>
             {text}
           </BrandText>
         </View>
-      </SecondaryBox>
+      </Box>
     </TouchableOpacity>
   );
 };