react-native-timer-picker/src/components/TimerPickerModal/styles.ts at main · OmerToledo/react-native-timer-picker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import { StyleSheet } from "react-native";
import type { TextStyle, ViewStyle } from "react-native";

import type { CustomTimerPickerStyles } from "../TimerPicker/styles";

export interface CustomTimerPickerModalStyles extends CustomTimerPickerStyles {
    button?: TextStyle;
    buttonContainer?: ViewStyle;
    cancelButton?: TextStyle;
    confirmButton?: TextStyle;
    container?: ViewStyle;
    contentContainer?: ViewStyle;
    modalTitle?: TextStyle;
}

const DARK_MODE_BACKGROUND_COLOR = "#232323";
const DARK_MODE_TEXT_COLOR = "#E9E9E9";
const LIGHT_MODE_BACKGROUND_COLOR = "#F1F1F1";
const LIGHT_MODE_TEXT_COLOR = "#1B1B1B";

export const generateStyles = (
    customStyles: CustomTimerPickerModalStyles | undefined
) =>
    StyleSheet.create({
        container: {
            justifyContent: "center",
            alignItems: "center",
            overflow: "hidden",
            ...customStyles?.container,
        },
        contentContainer: {
            backgroundColor:
                customStyles?.backgroundColor ??
                (customStyles?.theme === "dark"
                    ? DARK_MODE_BACKGROUND_COLOR
                    : LIGHT_MODE_BACKGROUND_COLOR),
            justifyContent: "center",
            alignItems: "center",
            borderRadius: 20,
            padding: 20,
            ...customStyles?.contentContainer,
        },
        buttonContainer: {
            flexDirection: "row",
            marginTop: 25,
            ...customStyles?.buttonContainer,
        },
        button: {
            marginHorizontal: 12,
            paddingVertical: 10,
            paddingHorizontal: 20,
            borderWidth: 1,
            borderRadius: 10,
            fontSize: 16,
            overflow: "hidden",
            ...customStyles?.text,
            ...customStyles?.button,
        },
        cancelButton: {
            borderColor: "gray",
            color:
                customStyles?.theme === "dark" ? DARK_MODE_TEXT_COLOR : "gray",
            backgroundColor:
                customStyles?.theme === "dark" ? "gray" : undefined,
            ...customStyles?.text,
            ...customStyles?.cancelButton,
        },
        confirmButton: {
            borderColor: "green",
            color:
                customStyles?.theme === "dark" ? DARK_MODE_TEXT_COLOR : "green",
            backgroundColor:
                customStyles?.theme === "dark" ? "green" : undefined,
            ...customStyles?.text,
            ...customStyles?.confirmButton,
        },
        modalTitle: {
            fontSize: 24,
            fontWeight: "600",
            marginBottom: 15,
            color:
                customStyles?.theme === "dark"
                    ? DARK_MODE_TEXT_COLOR
                    : LIGHT_MODE_TEXT_COLOR,
            ...customStyles?.text,
            ...customStyles?.modalTitle,
        },
    });