tambahan

constants/Colors.ts

@@ -3,13 +3,13 @@
  * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
  */
 
-const tintColorLight = '#0a7ea4';
+const tintColorLight = '#19345E';
 const tintColorDark = '#fff';
 
 export const Colors = {
   light: {
     text: '#11181C',
-    background: '#fff',
+    background: '#f4f9fd',
     tint: tintColorLight,
     icon: '#687076',
     tabIconDefault: '#687076',

constants/Headers.ts

@@ -0,0 +1,18 @@
+const bgColorDefault = '#19345E';
+
+export const Headers = {
+   shadow: {
+      headerStyle: {
+         backgroundColor: bgColorDefault,
+      },
+      headerTintColor: '#fff',
+      headerShadowVisible: true
+   },
+   noShadow: {
+      headerStyle: {
+         backgroundColor: bgColorDefault,
+      },
+      headerTintColor: '#fff',
+      headerShadowVisible: false
+   }
+}

constants/Styles.ts

@@ -0,0 +1,124 @@
+import { StyleSheet } from "react-native";
+
+const Styles = StyleSheet.create({
+   wrapLogin: {
+      flex: 1,
+      justifyContent: "flex-start",
+      alignItems: "stretch",
+      padding: 20,
+   },
+   textDefault: {
+      fontSize: 16,
+      lineHeight: 24,
+   },
+   textDefaultSemiBold: {
+      fontSize: 16,
+      lineHeight: 24,
+      fontWeight: '600',
+   },
+   textMediumNormal: {
+      fontSize: 13,
+      lineHeight: 24,
+   },
+   textMediumSemiBold: {
+      fontSize: 13,
+      lineHeight: 24,
+      fontWeight: '600',
+   },
+   textTitle: {
+      fontSize: 32,
+      fontWeight: 'bold',
+      lineHeight: 32,
+   },
+   textSubtitle: {
+      fontSize: 20,
+      fontWeight: 'bold',
+   },
+   textLink: {
+      lineHeight: 30,
+      fontSize: 16,
+      color: '#0a7ea4',
+   },
+   textInformation: {
+      fontSize: 12,
+      fontWeight: 'light',
+      marginTop: 5,
+   },
+   cError: {
+      color: '#DB1514'
+   },
+   cGray: {
+      color: 'gray'
+   },
+   cWhite: {
+      color: 'white'
+   },
+   cDefault: {
+      color: '#19345E'
+   },
+   mb15: {
+      marginBottom: 15
+   },
+   mb30: {
+      marginBottom: 30
+   },
+   round30: {
+      borderRadius: 30
+   },
+   btnIconHeader: {
+      backgroundColor: '#384288',
+      padding: 7,
+      borderRadius: 100,
+   },
+   btnRound: {
+      backgroundColor: '#19345E',
+      borderWidth: 0,
+      borderColor: '#19345E',
+      alignItems: 'center',
+      borderRadius: 30,
+      marginTop: 15,
+      paddingVertical: 10
+   },
+   inputRoundForm: {
+      borderRadius: 10,
+      borderColor: '#19345E',
+      borderWidth: 1,
+      paddingVertical: 10,
+      paddingHorizontal: 15,
+   },
+   inputRoundFormLeft: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: 0,
+   },
+   inputRoundFormRight: {
+      flexDirection: 'row-reverse',
+      alignItems: 'center',
+      paddingVertical: 0,
+      justifyContent: 'space-between'
+   },
+   verificationCell: {
+      width: 50,
+      height: 50,
+      lineHeight: 45,
+      fontSize: 24,
+      borderWidth: 1,
+      borderRadius: 15,
+      borderColor: 'gray',
+      textAlign: 'center',
+   },
+   verificationFocusCell: {
+      borderColor: '#19345E',
+   },
+   caraoselContent: {
+      flex: 1,
+      borderWidth: 1,
+      justifyContent: "center",
+      marginHorizontal: 15,
+      borderRadius: 15,
+      backgroundColor: '#19345E',
+      display: 'flex',
+   }
+})
+
+export default Styles;