authentication component

components/Button/buttonStyles.ts

@@ -1,5 +1,6 @@
 // components/Button/buttonStyles.js
 
+import { MainColor } from "@/constants/color-palet";
 import { StyleSheet } from "react-native";
 
 export default function buttonStyles({
@@ -24,7 +25,7 @@ export default function buttonStyles({
       fontWeight: "600",
     },
     disabled: {
-      opacity: 0.5,
+      backgroundColor: MainColor.disabled,
     },
   });
 }

components/_ShareComponent/Spacing.tsx

@@ -0,0 +1,14 @@
+// src/components/Spacing.tsx
+import React from "react";
+import { View } from "react-native";
+
+interface SpacingProps {
+  width?: number;
+  height?: number;
+}
+
+const Spacing: React.FC<SpacingProps> = ({ width = 20, height = 20 }) => {
+  return <View style={{ height, width }} />;
+};
+
+export default Spacing;

components/_ShareComponent/ViewWrapper.tsx

@@ -0,0 +1,33 @@
+import { globalStyles } from "@/constants/global-styles";
+import { ImageBackground, ScrollView, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+interface ViewWrapperProps {
+  children: React.ReactNode;
+}
+
+const ViewWrapper = ({ children }: ViewWrapperProps) => {
+  const assetBackground = require("../../assets/images/main-background.png");
+
+  return (
+    <SafeAreaView
+      edges={[]}
+      style={{
+        flex: 1,
+        // paddingTop: StatusBar.currentHeight,
+      }}
+    >
+      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
+        <ImageBackground
+          source={assetBackground}
+          resizeMode="cover"
+          style={globalStyles.imageBackground}
+        >
+          <View style={globalStyles.container}>{children}</View>
+        </ImageBackground>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+export default ViewWrapper;