@cometchat/chat-uikit-react-native
Version:
Ready-to-use Chat UI Components for React Native
449 lines • 15.1 kB
JavaScript
import { deepMerge } from "../shared/helper/helperFunctions";
export const getGroupMemberStyleLight = (color, spacing, typography) => {
return {
headerContainerStyle: {
alignItems: "flex-start",
justifyContent: "center",
width: "100%",
borderRadius: 0,
paddingHorizontal: 0,
},
titleSeparatorStyle: {
borderBottomWidth: 1,
borderBottomColor: color.borderLight,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
width: "100%",
},
containerStyle: {
backgroundColor: color.background1,
flex: 1,
},
itemStyle: {
containerStyle: {
flexDirection: "row",
paddingHorizontal: spacing.padding.p4,
paddingVertical: spacing.padding.p2,
gap: spacing.spacing.s3,
},
titleStyle: {
color: color.textPrimary,
...typography.heading4.medium,
},
subtitleStyle: {
color: color.textSecondary,
...typography.body.regular,
},
statusIndicatorStyle: {},
avatarStyle: {
containerStyle: {},
textStyle: {},
imageStyle: {},
},
headViewContainerStyle: {},
titleSubtitleContainerStyle: {
alignSelf: "center",
},
trailingViewContainerStyle: {
alignSelf: "center",
},
},
ownerBadgeStyle: {
containerStyle: {
paddingVertical: 5,
paddingHorizontal: 10,
borderRadius: 28,
backgroundColor: color.primaryButtonBackground,
borderColor: color.borderHighlight,
borderWidth: 1,
},
textStyle: {
...typography.caption1.regular,
color: color.staticWhite,
},
},
adminBadgeStyle: {
containerStyle: {
backgroundColor: color.extendedPrimary100,
borderWidth: 1,
borderColor: color.borderHighlight,
paddingVertical: 5,
paddingHorizontal: 10,
borderRadius: 28,
},
textStyle: {
...typography.caption1.medium,
color: color.textHighlight,
},
},
moderatorBadgeStyle: {
containerStyle: {
paddingVertical: 5,
paddingHorizontal: 10,
borderRadius: 28,
backgroundColor: color.extendedPrimary100,
},
textStyle: {
...typography.caption1.medium,
color: color.textHighlight,
},
},
removeModalStyle: {
containerStyle: {
backgroundColor: color.background1,
position: "absolute",
top: "35%",
left: "4%",
right: "4%",
borderRadius: 16,
padding: 20,
elevation: 5,
zIndex: 1000,
},
iconContainerStyle: {
backgroundColor: color.background2,
width: spacing.spacing.s18,
height: spacing.spacing.s18,
borderRadius: spacing.spacing.s18 / 2,
justifyContent: "center",
alignItems: "center",
alignSelf: "center",
},
iconStyle: {
tintColor: color.error,
height: 45,
width: 45,
},
titleTextStyle: {
...typography.heading2.bold,
color: color.textPrimary,
marginBottom: 10,
alignSelf: "center",
marginTop: 20,
},
subTitleTextStyle: {
...typography.heading4.regular,
color: color.textSecondary,
textAlign: "center",
marginBottom: 10,
},
cancelStyle: {
containerStyle: {
flex: 1,
paddingVertical: 10,
borderRadius: 5,
marginHorizontal: 5,
borderWidth: 1,
alignItems: "center",
borderColor: color.borderDefault,
},
textStyle: {
...typography.heading4.bold,
color: color.secondaryButtonText,
},
},
confirmStyle: {
containerStyle: {
flex: 1,
marginHorizontal: 5,
paddingVertical: 10,
borderRadius: 5,
alignItems: "center",
backgroundColor: color.error,
},
textStyle: {
...typography.heading4.bold,
color: color.primaryButtonText,
},
},
alertContainer: {
flexDirection: "row",
width: "100%",
marginTop: 10,
flex: 1,
paddingVertical: 10,
borderRadius: 5,
marginHorizontal: 5,
alignItems: "center",
borderColor: color.borderDefault,
},
},
banModalStyle: {
containerStyle: {
backgroundColor: color.background1,
position: "absolute",
top: "35%",
left: "4%",
right: "4%",
borderRadius: 16,
padding: 20,
elevation: 5,
zIndex: 1000,
},
iconContainerStyle: {
backgroundColor: color.background2,
width: spacing.spacing.s18,
height: spacing.spacing.s18,
borderRadius: spacing.spacing.s18 / 2,
justifyContent: "center",
alignItems: "center",
alignSelf: "center",
},
iconStyle: {
tintColor: color.error,
height: 45,
width: 45,
},
titleTextStyle: {
...typography.heading2.bold,
color: color.textPrimary,
marginBottom: 10,
alignSelf: "center",
marginTop: 20,
},
subTitleTextStyle: {
...typography.heading4.regular,
color: color.textSecondary,
textAlign: "center",
marginBottom: 10,
},
cancelStyle: {
containerStyle: {
flex: 1,
paddingVertical: 10,
borderRadius: 5,
marginHorizontal: 5,
borderWidth: 1,
alignItems: "center",
borderColor: color.borderDefault,
},
textStyle: {
...typography.heading4.bold,
color: color.secondaryButtonText,
},
},
confirmStyle: {
containerStyle: {
flex: 1,
marginHorizontal: 5,
paddingVertical: 10,
borderRadius: 5,
alignItems: "center",
backgroundColor: color.error,
},
textStyle: {
...typography.heading4.bold,
color: color.primaryButtonText,
},
},
alertContainer: {
flexDirection: "row",
width: "100%",
marginTop: 10,
flex: 1,
paddingVertical: 10,
borderRadius: 5,
marginHorizontal: 5,
alignItems: "center",
borderColor: color.borderDefault,
},
},
changeScope: {
container: { paddingHorizontal: 15, marginBottom: 15 },
iconContainerStyle: {
backgroundColor: color.background2,
width: spacing.spacing.s18,
height: spacing.spacing.s18,
borderRadius: spacing.spacing.s18 / 2,
justifyContent: "center",
alignItems: "center",
alignSelf: "center",
},
iconStyle: {
tintColor: color.primary,
height: 45,
width: 45,
alignSelf: "center",
},
titleStyle: {
...typography.heading2.bold,
alignSelf: "center",
paddingTop: 20,
color: color.textPrimary,
},
subTitleStyle: {
...typography.heading4.regular,
alignSelf: "center",
paddingTop: 10,
color: color.textSecondary,
textAlign: "center",
marginBottom: 10,
},
actionBox: {
borderWidth: 1,
borderColor: color.borderLight,
padding: 10,
borderRadius: 8,
},
confirmStyle: {
containerStyle: {
marginLeft: 2,
flex: 1,
paddingVertical: 10,
borderWidth: 1,
borderRadius: 8,
alignItems: "center",
borderColor: color.borderLight,
backgroundColor: color.primary,
},
textStyle: {
...typography.heading4.regular,
color: color.staticWhite,
},
},
actionListStyle: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
paddingVertical: 10,
},
cancelStyle: {
containerStyle: {
marginRight: 2,
flex: 1,
paddingVertical: 10,
borderWidth: 1,
borderRadius: 8,
alignItems: "center",
borderColor: color.borderLight,
backgroundColor: color.background1,
},
textStyle: {
...typography.heading4.regular,
color: color.primary,
},
},
buttonContainer: {
flexDirection: "row",
justifyContent: "space-between",
paddingVertical: 10,
marginBottom: 10,
},
},
confirmSelectionStyle: {},
selectionCancelStyle: {},
loadingIconTint: color.primary,
sectionHeaderTextStyle: {
marginHorizontal: spacing.spacing.s5,
color: color.primary,
...typography.heading4.medium,
},
onlineStatusColor: color.success,
titleViewStyle: {
paddingVertical: spacing.spacing.s3,
paddingLeft: spacing.spacing.s3,
margin: spacing.spacing.s0,
},
titleStyle: {
color: color.textPrimary,
...typography.heading1.bold,
},
backButtonIconStyle: {
tintColor: color.iconPrimary,
height: spacing.spacing.s6,
width: spacing.spacing.s6,
},
searchStyle: {
textStyle: {
color: color.textPrimary,
...typography.heading4.regular,
textAlignVertical: "center",
paddingVertical: 0,
height: spacing.spacing.s7,
},
containerStyle: {
backgroundColor: color.background3,
paddingVertical: spacing.spacing.s3,
marginTop: spacing.spacing.s3,
width: "95%",
gap: spacing.spacing.s1,
alignContent: "space-around",
alignSelf: "center",
flexDirection: "row",
alignItems: "center",
},
icon: undefined,
iconStyle: {
tintColor: color.iconSecondary,
},
placehodlerTextStyle: {
color: color.textTertiary,
},
},
emptyStateStyle: {
titleStyle: {
color: color.textPrimary,
...typography.heading3.bold,
marginBottom: spacing.margin.m1,
},
subTitleStyle: {
color: color.textSecondary,
textAlign: "center",
...typography.body.regular,
},
containerStyle: {
justifyContent: "center",
display: "none",
alignItems: "center",
padding: spacing.padding.p3,
},
iconStyle: {
tintColor: color.neutral300,
height: 150,
width: 150,
},
},
errorStateStyle: {
titleStyle: {
color: color.textPrimary,
...typography.heading3.bold,
marginBottom: spacing.margin.m1,
},
subTitleStyle: {
color: color.textSecondary,
textAlign: "center",
...typography.body.regular,
},
containerStyle: {
justifyContent: "center",
alignItems: "center",
padding: spacing.padding.p3,
},
iconStyle: {
tintColor: color.neutral300,
height: 150,
width: 150,
},
},
skeletonStyle: {
backgroundColor: color.background3,
linearGradientColors: ["#E8E8E8", "#F5F5F5"],
shimmerBackgroundColor: color.staticBlack,
shimmerOpacity: 0.01,
speed: 1,
},
};
};
export const getGroupMemberStyleDark = (color, spacing, typography) => {
return deepMerge(getGroupMemberStyleLight(color, spacing, typography), {
skeletonStyle: {
backgroundColor: color.background3,
linearGradientColors: ["#383838", "#272727"],
shimmerBackgroundColor: color.staticWhite,
shimmerOpacity: 0.01,
speed: 1,
},
});
};
//# sourceMappingURL=style.js.map