enx-uikit-react-native/src/style/EnxConfirmationViewStyle.js

It is a react native component for Enablex users.

import { StyleSheet} from 'react-native';
import {Dimensions} from "react-native";

// Enhanced responsive breakpoints for better device support
const screenData = Dimensions.get("window");
const { width: screenWidth, height: screenHeight } = screenData;

// Device size categories
const isTablet = screenWidth >= 768; // iPad/tablet size
const isLargePhone = screenWidth >= 414 && screenWidth < 768; // iPhone Plus/Max
const isSmallPhone = screenWidth < 375; // Smaller phones
const isFoldable = screenWidth > screenHeight && screenWidth >= 720; // Foldable unfolded

const styles = StyleSheet.create({
    floatingButton: {
        position: 'absolute',
        top: isTablet ? 30 : 20, // More spacing on tablets
        left: isTablet ? 30 : 20,
        backgroundColor: 'transparent',
        padding: isTablet ? 15 : 10, // Larger touch target on tablets
        borderRadius: 25,
        elevation: 5,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.8,
        shadowRadius: 2,
        zIndex: 1000,
    },
      containerPortrate: {
        flex: 1,
        flexDirection : "column",
      },
      containerLandScape: {
        flex: 1,
        flexDirection : "row",
      },
      firstPart : {
        backgroundColor : "#f0f0f0",
        justifyContent : "center",
        alignItems : "center"
      },
      secondPart : {
        backgroundColor : "#F4FAFC",
        justifyContent : "center",
        alignItems : "center",
      },

      noVideoPreview: {
        flex: 1,
      },
      videoContainer: {
        position: "absolute",
        width: '100%', 
        height: '100%',
      },
      bottomOptionContainerPrortare: {
        width: isTablet 
          ? Math.min(500, screenWidth * 0.8) // Larger but constrained on tablets
          : isLargePhone 
            ? screenWidth * 0.95 
            : Math.min(400, screenWidth * 0.95), // Original logic for smaller devices
        maxWidth: isTablet ? 500 : 400, // Hard limit for very large screens
        backgroundColor : "#f3f6f4",
        bottom: 0,
        left: 0,
        right: 0,
        borderRadius: 20,
        overflow: "hidden",
        borderColor: "grey", 
        alignSelf: "center", 
        marginTop : isTablet ? 15 : 30, // More spacing on tablets
        marginBottom : isTablet ? 15 : 10,
        paddingHorizontal: isTablet ? 20 : 10, // More padding on tablets
      },
      bottomOptionContainerLandScape: {
        width : 300,
        height : 160,
        backgroundColor : "#f3f6f4",
        borderRadius: 20,
        overflow: "hidden",
        borderColor: "grey", 
        alignSelf: "center", 

      },
      bottomOptTopContainerPrortare: {
        flexDirection:'row', 
        margin : 15, 
        alignItems: 'top',
        justifyContent: 'top',
        borderColor: "grey", 
        borderWidth: 1, 
        borderRadius: 10,
        padding:10
      },
      bottomOptTopContainerlandScape: {
        width:270,
        flexDirection:'row', 
        alignItems: 'center',
        justifyContent: 'center',
        borderColor: "grey", 
        borderWidth: 1, 
        borderRadius: 10,
        margin : 10,
        alignSelf: "center", 
      },
      bottonOptAudio: {
        flex:.8,
      },
      bottonOptVideo:{
        flex:.8,
        borderLeftWidth:1,
      },
      bottonOptAudioOnly: {
        flex:1.7,
      },
      bottonOptInSideAudioOnly: {
        flexDirection:'row', 
        borderLeftWidth:1, 
        alignItems: 'center',
        justifyContent: 'center'
      },
      bottonAudioOnlyInSide: {
        width: 40, 
        alignSelf: "center", 
        height: 40,
      },

      joinNowContainerPortrate: {
        height: 40,
        width: 120,
        borderColor: "grey",
        backgroundColor: "#e60073",
        borderWidth: 1,
        borderRadius: 20,
        marginBottom: 10,
        alignSelf: "center"
    },
    joinNowContainerlandScape: {
      height: 40,
      width: 120,
      borderColor: "grey",
      backgroundColor: "#e60073",
      borderWidth: 1,
      borderRadius: 20,
      marginTop: 20,
      alignSelf: "center"
  },
    joinNowtext: {
        color: "white", 
        fontSize: 16, 
        fontWeight:"600", 
        marginTop:5, 
        textAlign:"center",
    }

})
export { styles }