@oxy.so/services 11.2.0-oxy-one.2 → 11.2.0-oxy-one.4

package/src/ui/components/payment/paymentStyles.ts

@@ -1,389 +1,390 @@
 import { StyleSheet } from 'react-native';
 import type { PaymentColors } from './types';
 
-export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create({
+export const createPaymentStyles = (colors: PaymentColors) =>
+  StyleSheet.create({
     container: {
-        flex: 1,
+      flex: 1,
     },
     content: {
-        flex: 1,
-        padding: 16,
+      flex: 1,
+      padding: 16,
     },
     stepContainer: {
-        justifyContent: 'flex-start',
-        alignItems: 'flex-start',
-        width: '100%',
+      justifyContent: 'flex-start',
+      alignItems: 'flex-start',
+      width: '100%',
     },
     section: {
-        marginBottom: 24,
-        width: '100%',
+      marginBottom: 24,
+      width: '100%',
     },
     sectionTitle: {
-        fontSize: 16,
-        fontWeight: '600',
-        color: colors.text,
-        marginBottom: 12,
+      fontSize: 16,
+      fontWeight: '600',
+      color: colors.text,
+      marginBottom: 12,
     },
     errorContainer: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        padding: 32,
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: 32,
     },
     errorText: {
-        fontSize: 18,
-        color: colors.error ?? '#EF4444',
-        marginBottom: 24,
+      fontSize: 18,
+      color: colors.error ?? '#EF4444',
+      marginBottom: 24,
     },
     // Summary card styles
     summaryCard: {
-        backgroundColor: colors.card ?? colors.background ?? '#fff',
-        borderRadius: 16,
-        padding: 24,
-        marginBottom: 24,
-        alignItems: 'center',
-        width: '100%',
+      backgroundColor: colors.card ?? colors.background ?? '#fff',
+      borderRadius: 16,
+      padding: 24,
+      marginBottom: 24,
+      alignItems: 'center',
+      width: '100%',
     },
     summaryCardContent: {
-        alignItems: 'center',
-        width: '100%',
+      alignItems: 'center',
+      width: '100%',
     },
     summaryCardIcon: {
-        marginBottom: 8,
+      marginBottom: 8,
     },
     summaryCardMainTitle: {
-        fontWeight: 'bold',
-        fontSize: 28,
-        color: colors.text,
-        marginBottom: 2,
-        textAlign: 'center',
-        letterSpacing: 0.5,
+      fontWeight: 'bold',
+      fontSize: 28,
+      color: colors.text,
+      marginBottom: 2,
+      textAlign: 'center',
+      letterSpacing: 0.5,
     },
     summaryCardSubtitle: {
-        fontSize: 16,
-        color: colors.textSecondary,
-        textAlign: 'center',
-        marginBottom: 24,
-        width: '100%',
+      fontSize: 16,
+      color: colors.textSecondary,
+      textAlign: 'center',
+      marginBottom: 24,
+      width: '100%',
     },
     summaryCardItems: {
-        width: '100%',
-        marginBottom: 16,
+      width: '100%',
+      marginBottom: 16,
     },
     summaryItemPrice: {
-        color: colors.text,
-        fontWeight: '600',
-        fontSize: 16,
+      color: colors.text,
+      fontWeight: '600',
+      fontSize: 16,
     },
     summaryCardAmount: {
-        alignItems: 'center',
-        width: '100%',
-        marginBottom: 16,
+      alignItems: 'center',
+      width: '100%',
+      marginBottom: 16,
     },
     summaryCardAmountLabel: {
-        fontSize: 16,
-        color: colors.textSecondary,
-        textAlign: 'center',
-        marginBottom: 8,
+      fontSize: 16,
+      color: colors.textSecondary,
+      textAlign: 'center',
+      marginBottom: 8,
     },
     summaryCardAmountValue: {
-        fontSize: 32,
-        fontWeight: 'bold',
-        color: colors.text,
-        textAlign: 'center',
-        marginBottom: 8,
+      fontSize: 32,
+      fontWeight: 'bold',
+      color: colors.text,
+      textAlign: 'center',
+      marginBottom: 8,
     },
     summaryCardAmountDescription: {
-        fontSize: 14,
-        color: colors.textSecondary,
-        textAlign: 'center',
-        lineHeight: 20,
+      fontSize: 14,
+      color: colors.textSecondary,
+      textAlign: 'center',
+      lineHeight: 20,
     },
     summaryCardDivider: {
-        height: 1,
-        backgroundColor: colors.border,
-        marginVertical: 16,
-        width: '100%',
+      height: 1,
+      backgroundColor: colors.border,
+      marginVertical: 16,
+      width: '100%',
     },
     summaryCardTotalSection: {
-        width: '100%',
-        marginBottom: 8,
+      width: '100%',
+      marginBottom: 8,
     },
     summaryCardTotalRow: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        paddingVertical: 4,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingVertical: 4,
     },
     summaryCardTotalLabel: {
-        fontSize: 16,
-        color: colors.textSecondary,
-        fontWeight: '500',
+      fontSize: 16,
+      color: colors.textSecondary,
+      fontWeight: '500',
     },
     summaryCardTotalValue: {
-        fontSize: 16,
-        color: colors.text,
-        fontWeight: '600',
+      fontSize: 16,
+      color: colors.text,
+      fontWeight: '600',
     },
     // Card payment styles
     cardPaymentCard: {
-        backgroundColor: colors.card ?? colors.background ?? '#fff',
-        borderRadius: 16,
-        padding: 24,
-        marginBottom: 24,
-        alignItems: 'center',
-        width: '100%',
+      backgroundColor: colors.card ?? colors.background ?? '#fff',
+      borderRadius: 16,
+      padding: 24,
+      marginBottom: 24,
+      alignItems: 'center',
+      width: '100%',
     },
     cardPaymentContent: {
-        alignItems: 'center',
-        width: '100%',
+      alignItems: 'center',
+      width: '100%',
     },
     cardPaymentIcon: {
-        marginBottom: 8,
+      marginBottom: 8,
     },
     cardPaymentMainTitle: {
-        fontWeight: 'bold',
-        fontSize: 28,
-        color: colors.text,
-        marginBottom: 2,
-        textAlign: 'center',
-        letterSpacing: 0.5,
+      fontWeight: 'bold',
+      fontSize: 28,
+      color: colors.text,
+      marginBottom: 2,
+      textAlign: 'center',
+      letterSpacing: 0.5,
     },
     cardPaymentSubtitle: {
-        fontSize: 16,
-        color: colors.textSecondary,
-        textAlign: 'center',
-        marginBottom: 24,
-        width: '100%',
+      fontSize: 16,
+      color: colors.textSecondary,
+      textAlign: 'center',
+      marginBottom: 24,
+      width: '100%',
     },
     cardPaymentFields: {
-        width: '100%',
-        marginBottom: 16,
+      width: '100%',
+      marginBottom: 16,
     },
     cardPaymentWaiting: {
-        fontSize: 14,
-        color: colors.textSecondary,
-        textAlign: 'center',
-        marginBottom: 8,
+      fontSize: 14,
+      color: colors.textSecondary,
+      textAlign: 'center',
+      marginBottom: 8,
     },
     cardRowInfo: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        marginBottom: 16,
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: 16,
     },
     cardRowIcon: {
-        marginRight: 8,
+      marginRight: 8,
     },
     cardRowText: {
-        fontSize: 15,
-        color: colors.textSecondary,
+      fontSize: 15,
+      color: colors.textSecondary,
     },
     cardFieldContainer: {
-        marginBottom: 16,
+      marginBottom: 16,
     },
     cardFieldRow: {
-        flexDirection: 'row',
-        gap: 12,
+      flexDirection: 'row',
+      gap: 12,
     },
     cardFieldHalfLeft: {
-        flex: 1,
-        marginRight: 6,
+      flex: 1,
+      marginRight: 6,
     },
     cardFieldHalfRight: {
-        flex: 1,
-        marginLeft: 6,
+      flex: 1,
+      marginLeft: 6,
     },
     // Peable styles
     peableCard: {
-        backgroundColor: colors.card ?? colors.background ?? '#fff',
-        borderRadius: 16,
-        padding: 24,
-        marginBottom: 24,
-        alignItems: 'center',
-        width: '100%',
+      backgroundColor: colors.card ?? colors.background ?? '#fff',
+      borderRadius: 16,
+      padding: 24,
+      marginBottom: 24,
+      alignItems: 'center',
+      width: '100%',
     },
     peableContent: {
-        alignItems: 'center',
-        width: '100%',
+      alignItems: 'center',
+      width: '100%',
     },
     peableIcon: {
-        marginBottom: 8,
+      marginBottom: 8,
     },
     peableMainTitle: {
-        fontWeight: 'bold',
-        fontSize: 28,
-        color: colors.text,
-        marginBottom: 2,
-        textAlign: 'center',
-        letterSpacing: 0.5,
+      fontWeight: 'bold',
+      fontSize: 28,
+      color: colors.text,
+      marginBottom: 2,
+      textAlign: 'center',
+      letterSpacing: 0.5,
     },
     peableSubtitle: {
-        fontSize: 16,
-        color: colors.textSecondary,
-        textAlign: 'center',
-        marginBottom: 8,
+      fontSize: 16,
+      color: colors.textSecondary,
+      textAlign: 'center',
+      marginBottom: 8,
     },
     peableBalanceBox: {
-        backgroundColor: `${colors.primary}22`,
-        borderRadius: 12,
-        padding: 8,
-        marginTop: 8,
+      backgroundColor: `${colors.primary}22`,
+      borderRadius: 12,
+      padding: 8,
+      marginTop: 8,
     },
     peableBalanceText: {
-        color: colors.primary,
-        fontWeight: '600',
+      color: colors.primary,
+      fontWeight: '600',
     },
     peableWaiting: {
-        fontSize: 14,
-        color: colors.textSecondary,
-        textAlign: 'center',
-        marginBottom: 8,
+      fontSize: 14,
+      color: colors.textSecondary,
+      textAlign: 'center',
+      marginBottom: 8,
     },
     // FairCoin styles
     faircoinCard: {
-        backgroundColor: colors.card ?? colors.background ?? '#fff',
-        borderRadius: 16,
-        padding: 24,
-        marginBottom: 24,
-        alignItems: 'center',
-        width: '100%',
+      backgroundColor: colors.card ?? colors.background ?? '#fff',
+      borderRadius: 16,
+      padding: 24,
+      marginBottom: 24,
+      alignItems: 'center',
+      width: '100%',
     },
     faircoinContent: {
-        alignItems: 'center',
-        width: '100%',
+      alignItems: 'center',
+      width: '100%',
     },
     faircoinIcon: {
-        marginBottom: 8,
+      marginBottom: 8,
     },
     faircoinMainTitle: {
-        fontWeight: 'bold',
-        fontSize: 28,
-        color: '#1b1f0a',
-        marginBottom: 2,
-        textAlign: 'center',
-        letterSpacing: 0.5,
+      fontWeight: 'bold',
+      fontSize: 28,
+      color: '#1b1f0a',
+      marginBottom: 2,
+      textAlign: 'center',
+      letterSpacing: 0.5,
     },
     faircoinSubtitle: {
-        color: '#1b1f0a',
-        fontWeight: '700',
-        fontSize: 17,
-        marginBottom: 18,
-        textAlign: 'center',
-        letterSpacing: 0.2,
+      color: '#1b1f0a',
+      fontWeight: '700',
+      fontSize: 17,
+      marginBottom: 18,
+      textAlign: 'center',
+      letterSpacing: 0.2,
     },
     faircoinScanText: {
-        color: '#1b1f0a',
-        fontWeight: '600',
-        fontSize: 15,
-        marginBottom: 8,
+      color: '#1b1f0a',
+      fontWeight: '600',
+      fontSize: 15,
+      marginBottom: 8,
     },
     faircoinQRCard: {
-        width: 200,
-        height: 200,
-        backgroundColor: '#fff',
-        borderRadius: 32,
-        justifyContent: 'center',
-        alignItems: 'center',
-        marginBottom: 16,
-        padding: 16,
-        borderWidth: 3,
-        borderColor: '#9ffb50',
-        shadowColor: '#9ffb50',
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.25,
-        shadowRadius: 12,
-        elevation: 8,
-        position: 'relative',
+      width: 200,
+      height: 200,
+      backgroundColor: '#fff',
+      borderRadius: 32,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginBottom: 16,
+      padding: 16,
+      borderWidth: 3,
+      borderColor: '#9ffb50',
+      shadowColor: '#9ffb50',
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.25,
+      shadowRadius: 12,
+      elevation: 8,
+      position: 'relative',
     },
     faircoinQRBadge: {
-        position: 'absolute',
-        bottom: 12,
-        right: 12,
-        backgroundColor: '#fff',
-        borderRadius: 16,
-        padding: 4,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 4,
-        elevation: 2,
+      position: 'absolute',
+      bottom: 12,
+      right: 12,
+      backgroundColor: '#fff',
+      borderRadius: 16,
+      padding: 4,
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.1,
+      shadowRadius: 4,
+      elevation: 2,
     },
     faircoinTitle: {
-        fontSize: 16,
-        marginBottom: 8,
-        color: colors.text,
-        fontWeight: '600',
-        textAlign: 'center',
+      fontSize: 16,
+      marginBottom: 8,
+      color: colors.text,
+      fontWeight: '600',
+      textAlign: 'center',
     },
     faircoinAddress: {
-        color: colors.textSecondary,
-        fontSize: 13,
-        textAlign: 'center',
-        marginTop: 6,
-        marginBottom: 2,
+      color: colors.textSecondary,
+      fontSize: 13,
+      textAlign: 'center',
+      marginTop: 6,
+      marginBottom: 2,
     },
     faircoinButton: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        alignSelf: 'center',
-        backgroundColor: `${colors.primary}11`,
-        borderRadius: 16,
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-        marginTop: 6,
-        marginBottom: 2,
+      flexDirection: 'row',
+      alignItems: 'center',
+      alignSelf: 'center',
+      backgroundColor: `${colors.primary}11`,
+      borderRadius: 16,
+      paddingHorizontal: 16,
+      paddingVertical: 8,
+      marginTop: 6,
+      marginBottom: 2,
     },
     faircoinButtonText: {
-        color: colors.primary,
-        fontWeight: '600',
-        fontSize: 15,
+      color: colors.primary,
+      fontWeight: '600',
+      fontSize: 15,
     },
     faircoinWaiting: {
-        fontSize: 14,
-        color: colors.textSecondary,
-        textAlign: 'center',
-        marginBottom: 8,
+      fontSize: 14,
+      color: colors.textSecondary,
+      textAlign: 'center',
+      marginBottom: 8,
     },
     faircoinPlaceholder: {
-        fontSize: 13,
-        color: colors.textSecondary,
-        textAlign: 'center',
+      fontSize: 13,
+      color: colors.textSecondary,
+      textAlign: 'center',
     },
     // Success styles
     successCard: {
-        backgroundColor: colors.card ?? colors.background ?? '#fff',
-        borderRadius: 16,
-        padding: 24,
-        marginBottom: 24,
-        alignItems: 'center',
-        width: '100%',
+      backgroundColor: colors.card ?? colors.background ?? '#fff',
+      borderRadius: 16,
+      padding: 24,
+      marginBottom: 24,
+      alignItems: 'center',
+      width: '100%',
     },
     successContent: {
-        alignItems: 'center',
-        width: '100%',
+      alignItems: 'center',
+      width: '100%',
     },
     successIcon: {
-        marginBottom: 8,
+      marginBottom: 8,
     },
     successMainTitle: {
-        fontWeight: 'bold',
-        fontSize: 28,
-        color: colors.success || '#4BB543',
-        marginBottom: 2,
-        textAlign: 'center',
-        letterSpacing: 0.5,
+      fontWeight: 'bold',
+      fontSize: 28,
+      color: colors.success || '#4BB543',
+      marginBottom: 2,
+      textAlign: 'center',
+      letterSpacing: 0.5,
     },
     successSubtitle: {
-        fontSize: 16,
-        color: colors.text,
-        textAlign: 'center',
-        marginBottom: 8,
-        width: '100%',
+      fontSize: 16,
+      color: colors.text,
+      textAlign: 'center',
+      marginBottom: 8,
+      width: '100%',
     },
     successMessage: {
-        fontSize: 14,
-        color: colors.textSecondary,
-        textAlign: 'center',
-        marginBottom: 8,
+      fontSize: 14,
+      color: colors.textSecondary,
+      textAlign: 'center',
+      marginBottom: 8,
     },
-});
+  });