All files / src defaultStyles.ts

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
89
90
91
92
93
94
95
96
97
98
99
100
101
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
type StyleObject = { [key: string]: string | number };
 
interface BadgesModalStyles {
    overlay: StyleObject;
    content: StyleObject;
    title: StyleObject;
    badgeContainer: StyleObject;
    badge: StyleObject;
    badgeIcon: StyleObject;
    badgeTitle: StyleObject;
    badgeDescription: StyleObject;
    emptyState: StyleObject;
    button: StyleObject;
}
 
export interface Styles {
    badgesModal: BadgesModalStyles;
    badgesButton: StyleObject;
}
 
export const defaultStyles: Styles = {
    badgesModal: {
        overlay: {
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
        },
        content: {
            backgroundColor: '#ffffff',
            borderRadius: '8px',
            padding: '20px',
            maxWidth: '600px',
            width: '100%',
            maxHeight: '80vh',
            overflowY: 'auto',
        },
        title: {
            fontSize: '24px',
            fontWeight: 'bold',
            marginBottom: '20px',
        },
        badgeContainer: {
            display: 'flex',
            flexWrap: 'wrap',
            justifyContent: 'center',
        },
        badge: {
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            margin: '10px',
        },
        badgeIcon: {
            width: '50px',
            height: '50px',
            marginBottom: '5px',
        },
        badgeTitle: {
            fontSize: '14px',
            textAlign: 'center',
            marginBottom: '5px',
        },
        badgeDescription: {
            fontSize: '12px',
            textAlign: 'center',
            color: '#666',
        },
        emptyState: {
            fontSize: '16px',
            textAlign: 'center',
            color: '#666',
            margin: '20px 0',
        },
        button: {
            backgroundColor: '#007bff',
            color: '#ffffff',
            padding: '10px 20px',
            borderRadius: '4px',
            border: 'none',
            cursor: 'pointer',
            marginTop: '20px',
        },
    },
    badgesButton: {
        position: 'fixed',
        padding: '10px 20px',
        backgroundColor: '#007bff',
        color: '#ffffff',
        border: 'none',
        borderRadius: '4px',
        cursor: 'pointer',
        zIndex: 1000,
        transition: 'transform 0.2s ease-in-out',
    },
};