Skip to content

Commit 7bc6189

Browse files
ramsribramsrib
committed
fixed the theme in constent form
1 parent 91b2703 commit 7bc6189

File tree

1 file changed

+115
-35
lines changed

1 file changed

+115
-35
lines changed

‎src/components/widget/ConsentForm.tsx‎

Lines changed: 115 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ interface StyleConfig {
1313
theme: 'light' | 'dark';
1414
}
1515

16-
const radiusClasses = {
17-
none: 'rounded-none',
18-
small: 'rounded-lg',
19-
medium: 'rounded-2xl',
20-
large: 'rounded-3xl',
16+
const radiusStyles = {
17+
none: { borderRadius: '0' },
18+
small: { borderRadius: '0.5rem' },
19+
medium: { borderRadius: '1rem' },
20+
large: { borderRadius: '1.5rem' },
2121
};
2222

2323
export interface ConsentFormProps {
@@ -37,47 +37,127 @@ const ConsentForm: React.FC<ConsentFormProps> = ({
3737
styles,
3838
radius,
3939
}) => {
40+
// Use the configured base color and derive other colors based on theme
41+
const isDark = styles.theme === 'dark';
42+
const borderColor = isDark ? '#1F2937' : '#E5E7EB';
43+
const headingColor = isDark ? '#FFFFFF' : '#111827';
44+
const textColor = isDark ? '#D1D5DB' : '#4B5563';
45+
46+
const containerStyle: React.CSSProperties = {
47+
...radiusStyles[radius],
48+
backgroundColor: colors.baseColor, // Use configured base color
49+
border: `1px solid ${borderColor}`,
50+
boxShadow: isDark
51+
? '0 25px 50px -12px rgba(0, 0, 0, 0.5)'
52+
: '0 25px 50px -12px rgb(0 0 0 / 0.25)',
53+
padding: '1rem',
54+
maxWidth: '360px',
55+
minWidth: '300px',
56+
};
57+
58+
const headingStyle: React.CSSProperties = {
59+
color: headingColor,
60+
fontSize: '1rem',
61+
fontWeight: '600',
62+
marginBottom: '0.75rem',
63+
margin: '0 0 0.75rem 0',
64+
};
65+
66+
const termsContentStyle: React.CSSProperties = {
67+
color: textColor,
68+
fontSize: '0.75rem',
69+
lineHeight: '1.5',
70+
marginBottom: '1rem',
71+
maxHeight: '120px',
72+
overflowY: 'auto',
73+
// Custom scrollbar styling for dark mode
74+
scrollbarWidth: 'thin',
75+
scrollbarColor: isDark ? '#4B5563 transparent' : '#CBD5E1 transparent',
76+
};
77+
78+
const buttonContainerStyle: React.CSSProperties = {
79+
display: 'flex',
80+
alignItems: 'center',
81+
justifyContent: 'flex-end',
82+
gap: '0.5rem',
83+
};
84+
85+
const cancelButtonStyle: React.CSSProperties = {
86+
...radiusStyles[radius],
87+
backgroundColor: 'transparent',
88+
border: isDark ? 'none' : `1px solid #D1D5DB`, // No border in dark mode
89+
color: isDark ? '#9CA3AF' : '#4B5563',
90+
padding: '0.5rem 1rem',
91+
fontSize: '0.75rem',
92+
fontWeight: '500',
93+
cursor: 'pointer',
94+
transition: 'all 0.2s ease-in-out',
95+
};
96+
97+
const acceptButtonStyle: React.CSSProperties = {
98+
...radiusStyles[radius],
99+
// Invert colors based on theme - white bg in dark mode, use configured colors in light mode
100+
backgroundColor: isDark
101+
? colors.buttonAccentColor || '#FFFFFF'
102+
: colors.buttonBaseColor || '#000000',
103+
color: isDark
104+
? colors.buttonBaseColor || '#000000'
105+
: colors.buttonAccentColor || '#FFFFFF',
106+
border: 'none',
107+
padding: '0.5rem 1rem',
108+
fontSize: '0.75rem',
109+
fontWeight: '500',
110+
cursor: 'pointer',
111+
transition: 'all 0.2s ease-in-out',
112+
};
113+
40114
return (
41-
<div
42-
className={`${radiusClasses[radius]} shadow-2xl p-4 ${
43-
styles.theme === 'dark' ? 'shadow-black/50' : 'shadow-xl'
44-
}`}
45-
style={{
46-
backgroundColor: colors.baseColor,
47-
borderColor: styles.theme === 'dark' ? '#1F2937' : '#E5E7EB',
48-
border: '1px solid',
49-
maxWidth: '360px',
50-
minWidth: '300px',
51-
}}
52-
>
53-
<h3
54-
className={`text-base font-semibold mb-3 ${styles.theme === 'dark' ? 'text-white' : 'text-gray-900'}`}
55-
>
56-
Terms and conditions
57-
</h3>
115+
<div style={containerStyle}>
116+
<style>{`
117+
/* Custom scrollbar styles for webkit browsers */
118+
.consent-terms-content::-webkit-scrollbar {
119+
width: 6px;
120+
}
121+
.consent-terms-content::-webkit-scrollbar-track {
122+
background: transparent;
123+
}
124+
.consent-terms-content::-webkit-scrollbar-thumb {
125+
background: ${isDark ? '#4B5563' : '#CBD5E1'};
126+
border-radius: 3px;
127+
}
128+
.consent-terms-content::-webkit-scrollbar-thumb:hover {
129+
background: ${isDark ? '#6B7280' : '#94A3B8'};
130+
}
131+
.consent-cancel-button:hover {
132+
background-color: ${isDark ? '#1F2937' : '#F9FAFB'} !important;
133+
${isDark ? '' : 'border-color: #9CA3AF !important;'}
134+
}
135+
.consent-accept-button:hover {
136+
opacity: 0.9;
137+
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
138+
}
139+
`}</style>
140+
141+
<h3 style={headingStyle}>Terms and conditions</h3>
142+
58143
<div
59-
className={`text-xs mb-4 leading-relaxed ${styles.theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}
60-
style={{ lineHeight: '1.5', maxHeight: '120px', overflowY: 'auto' }}
144+
className="consent-terms-content"
145+
style={termsContentStyle}
61146
dangerouslySetInnerHTML={{ __html: termsContent }}
62147
/>
63-
<div className="flex items-center justify-end space-x-2">
148+
149+
<div style={buttonContainerStyle}>
64150
<button
151+
className="consent-cancel-button"
65152
onClick={onCancel}
66-
className={`px-4 py-2 ${radiusClasses[radius]} border transition-all font-medium text-xs ${
67-
styles.theme === 'dark'
68-
? 'border-gray-600 text-gray-300 hover:bg-gray-800 hover:border-gray-500'
69-
: 'border-gray-300 text-gray-700 hover:bg-gray-50 hover:border-gray-400'
70-
}`}
153+
style={cancelButtonStyle}
71154
>
72155
Cancel
73156
</button>
74157
<button
158+
className="consent-accept-button"
75159
onClick={onAccept}
76-
className={`px-4 py-2 ${radiusClasses[radius]} transition-all font-medium text-xs hover:opacity-90 hover:shadow-md`}
77-
style={{
78-
backgroundColor: colors.buttonBaseColor || colors.accentColor,
79-
color: colors.buttonAccentColor || '#FFFFFF',
80-
}}
160+
style={acceptButtonStyle}
81161
>
82162
Accept
83163
</button>

0 commit comments

Comments
 (0)