Untitled

import {StyleSheet} from 'react-native';

import {isTablet} from 'react-native-device-info';

import {
  colorsV2,
  radius,
  sizes,
  spacing,
  spacingV2,
  colors as staticColor,
  typographics,
} from '@design-system';
import {ThemeType} from '@hooks/global/useTheme';
import {ColorItem} from '@hooks/global/useTheme/themeColors';
import {isAndroid} from '@utils/iPhoneXHelpers';

const getStyles = (colors: ColorItem, theme: keyof typeof ThemeType) =>
  StyleSheet.create({
    container: {
      width: '100%',
      justifyContent: 'flex-start',
      maxHeight: sizes.heightPercentageToDP('80%'),
    },
    walletCard: {
      width: '100%',
      backgroundColor:
        theme === 'LIGHT'
          ? colors.glass.glassWhite60.background
          : staticColor.primary.blackDM3,
      borderColor:
        theme === 'LIGHT' ? 'transparent' : staticColor.primary.whiteDM,
      borderWidth: 1,
      alignSelf: 'center',
      flexDirection: 'column',
      borderRadius: 24,
      paddingHorizontal: spacing[2],
      paddingVertical: spacing[2],
    },
    backgroundImage: {
      width: '100%',
      height: '100%',
    },
    avatar: {
      height: isTablet() ? 128 : 50,
      width: isTablet() ? 128 : 50,
      borderRadius: 60,
      backgroundColor: colors.shade.green,
      justifyContent: 'center',
      alignItems: 'center',
      flexDirection: 'row',
      zIndex: 20,
    },
    containerRight: {
      justifyContent: 'center',
      flexDirection: 'column',
      marginLeft: spacing[1.5],
      width: '85%',
    },
    avatarText: {
      ...typographics.captionBold,
      color: colors.constants.black,
    },
    fullNameText: {
      ...typographics.captionBold,
      color: colors.primary.black,
      flexWrap: 'wrap',
      width: '70%',
      textAlign: 'left',
    },
    nanoTagPhoneNumber: {
      ...typographics.captionBold,
      marginTop: spacing[0],
      color: colors.primary.black,
    },
    nanoTagBig: {
      ...typographics.paragraphBold,
    },
    nanoTagNotBold: {
      ...typographics.caption,
      color: colors.shade.darkGrey,
    },
    containerDrawer: {
      margin: spacing[2],
    },
    containerName: {
      flexDirection: 'row',
      justifyContent: 'space-between',
    },
    buttonContainerStyle: {
      marginTop: spacing[2],
      height: 40,
    },
    buttonTextStyle: {
      ...typographics.labelBold,
      color: colors.primary.black,
    },
    darkModeToggle: {
      backgroundColor: colors.constants.yellow,
      height: isTablet() ? 25 : 22,
      width: isTablet() ? 25 : 22,
      borderRadius: isTablet() ? 20 : 14,
      marginLeft: 1,
      marginBottom: 0.5,
      justifyContent: 'center',
      alignItems: 'center',
    },
    languageToggleDark: {
      marginLeft: 3,
    },
    languageToggle: {
      backgroundColor: staticColor.brand.purpleDM,
      height: isTablet() ? 25 : 22,
      width: isTablet() ? 25 : 22,
      borderRadius: isTablet() ? 20 : 14,
      marginLeft: 1,
      marginBottom: 0.5,
      paddingTop: isAndroid() ? 0 : 2,
      paddingLeft: isAndroid() ? 0 : 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    languageToggleId: {
      marginLeft: 3,
    },
    containerToggleStyle: {
      width: 55,
      height: isTablet() ? 34 : 28,
      borderRadius: radius[3],
    },
    actionIcon: {
      width: 24,
      height: 24,
    },
    textLanguangeToggle: {
      color: colors.constants.white,
      ...typographics.actionBold,
      fontSize: sizes.widthPercentageToDP('2.8%'),
    },
    hoverlayCircle: {
      width: 88,
      height: 88,
      backgroundColor: colors.product.shadeGreen,
      position: 'absolute',
      top: 100,
      left: sizes.widthPercentageToDP('39%'),
      zIndex: -10,
    },
    usernameContainer: {
      flexDirection: 'row',
      alignItems: 'center',
    },
    username: {
      ...typographics.textLink,
      color: colors.primary.black,
    },
    nanoIconUsername: {
      width: isTablet() ? 26 : 16,
      height: isTablet() ? 26 : 16,
      marginLeft: spacing[0],
    },

    nanoIconTag: {
      width: isTablet() ? 26 : 16,
      height: isTablet() ? 26 : 16,
    },
    verifyTag: {
      flexDirection: 'row',
      alignItems: 'center',
      alignContent: 'flex-end',
      width: '20%',
    },
    fullWidthName: {
      width: '80%',
    },
    verifyStatus: {
      ...typographics.labelBold,
      color: colors.constants.productGreen,
    },
    btnContainer: {
      width: '100%',
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'stretch',
      marginHorizontal: spacing[1],
      marginTop: spacing[3],
    },
    btnIconFlex: {
      flex: 1,
    },
    btnIconContainer: {
      minWidth: 156,
      flex: 1,
      paddingVertical: spacing[1],
      paddingHorizontal: spacing[2],
      backgroundColor: colors.glass.glassWhite50.background,
      borderColor: colors.glass.glassWhite50.border,
      borderWidth: 1,
      borderRadius: 40,
      justifyContent: 'flex-start',
    },
    btnIconContainerEdit: {
      marginRight: spacing[2],
    },
    btnIcon: {
      width: isTablet() ? 34 : 24,
      height: isTablet() ? 34 : 24,
      marginRight: spacing[1],
      borderRadius: 16,
    },
    btnText: {
      ...typographics.caption,
    },
    list: {
      marginTop: spacing[2],
      alignSelf: 'stretch',
      borderRadius: spacing[2],
      backgroundColor:
        theme === 'LIGHT'
          ? colors.glass.glassWhite50.background
          : staticColor.primary.blackDM3,
      borderColor:
        theme === 'LIGHT' ? colors.shade.grey2 : staticColor.primary.whiteDM,
      borderWidth: 1,
    },
    listItem: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      paddingHorizontal: 24,
      paddingTop: spacing[2],
      paddingBottom: spacing[1.5],
      borderBottomColor:
        theme === 'LIGHT'
          ? colors.shade.grey2
          : staticColor.primary.blackBorder,
      borderBottomWidth: 1,
    },
    noBorder: {
      borderBottomWidth: 0,
    },
    listItemImgContainer: {
      width: isTablet() ? 70 : 40,
      height: isTablet() ? 70 : 40,
      borderRadius: 40,
      backgroundColor: colors.shade.purple,
      marginRight: spacing[2],
      justifyContent: 'center',
      alignItems: 'center',
    },
    listItemImg: {
      width: isTablet() ? 40 : 24,
      height: isTablet() ? 40 : 24,
    },
    globeImageStyle: {
      marginTop: 4,
      width: isTablet() ? 40 : 30,
      height: isTablet() ? 40 : 30,
    },
    listItemTitle: {
      ...typographics.paragraph,
      color: colors.primary.black,
      flex: 1,
    },
    arrowIcon: {
      width: 8,
      height: 14,
      marginRight: 4,
    },
    versionText: {
      ...typographics.label,
      color: colors.shade.darkGrey,
      marginTop: spacing[3],
    },
    headerStyle: {
      height: sizes.heightPercentageToDP(13),
      backgroundColor:
        theme === 'LIGHT'
          ? colors.constants.white
          : colors.constants.darkViolet,
      shadowColor: 'transparent',
    },
    containerDevMode: {
      minHeight: 500,
      width: '100%',
      padding: spacing[2],
    },
    titleDevMode: {
      ...typographics.subTitle,
      color: colors.primary.black,
      marginBottom: spacing[4],
    },
    textDevMode: {
      ...typographics.label,
      color: colors.primary.black,
    },
    rowDevMode: {
      flexDirection: 'row',
      marginBottom: spacing[2],
      justifyContent: 'space-between',
    },
    textInActive: {
      position: 'absolute',
      top: isAndroid() ? 6 : 6.7,
      ...typographics.action,
      fontSize: sizes.widthPercentageToDP('2.8%'),
      color: staticColor.shade.darkGrey,
    },
    isEnglish: {
      right: 8,
    },
    isIndonesia: {
      left: 8,
    },
    cardInnerView: {
      flexDirection: 'row',
      justifyContent: 'center',
    },
    bannerImage: {
      width: 48,
      height: 48,
      alignSelf: 'center',
      marginRight: spacingV2(1, 'x'),
    },
    cardTextView: {
      flexDirection: 'column',
      width: '75%',
      alignSelf: 'center',
    },
    bannerDesc: {
      ...typographics.label,
      fontSize: sizes.heightPercentageToDP('1.5%'),
      lineHeight: sizes.heightPercentageToDP('2%'),
      color: colorsV2.shade.grey2,
    },
    bannerDescAmount: {
      fontWeight: '700',
      marginRight: spacingV2(0.5, 'x'),
    },
    icon: {
      alignSelf: 'center',
      marginLeft: spacingV2(1, 'x'),
    },
    cardView: {
      alignSelf: 'center',
      borderRadius: sizes.widthPercentageToDP(6),
      flexDirection: 'row',
      justifyContent: 'center',
      height: sizes.heightPercentageToDP('11%'),
      paddingHorizontal: 20,
      marginTop: spacingV2(3, 'x'),
    },
    maskedTextKYC: {
      height: 20,
    },
    textStepDescColor: {
      color: staticColor.brand.purpleDM,
    },
    textStepDescColorSelected: {
      fontFamily: 'Gilroy-Bold',
      marginTop: 2,
    },
    flexLinear: {flex: 1},
    textTitle: {
      ...typographics.labelBold,
      lineHeight: sizes.heightPercentageToDP('2%'),
      fontWeight: '700',
      color: colors.primary.black,
      fontFamily: 'Gilroy-Bold',
    },
    flexRowContainerAmount: {
      flexDirection: 'row',
    },
  });

export default getStyles;