fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Picker: fix the dark theme styles

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-10-12 21:45:45 +03:00
parent 218e5d143b
commit 74c15aff03
5 changed files with 313 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/CustomBottomSheet/DatePickerBottomSheet.tsx
View File

@@ -47,13 +47,17 @@ export default function DatePickerBottomSheet({
label: (i + 1).toString(),
}));
const years = Array.from({ length: 21 }, (_, i) => {
const year = new Date().getFullYear() - 10 + i;
return {
value: year.toString(),
label: year.toString(),
};
});
const currentYear = new Date().getFullYear();
const years = Array.from(
{ length: currentYear - 10 - 1900 + 1 },
(_, i) => {
const year = 1900 + i;
return {
value: year.toString(),
label: year.toString(),
};
},
);
return {
month: months,
@@ -145,10 +149,12 @@ export default function DatePickerBottomSheet({
style={{
position: "relative",
display: "flex",
backgroundColor: "#ffffff",
backgroundColor: "var(--secondary-background)",
overflow: "hidden",
width: "100%",
height: 250,
border: "1px solid var(--border)",
borderRadius: "8px",
}}
aria-selected={false}
>
@@ -156,8 +162,8 @@ export default function DatePickerBottomSheet({
name="month"
style={{
flex: 1,
borderRight: "1px solid #e5e7eb",
backgroundColor: "#ffffff",
borderRight: "1px solid var(--border)",
backgroundColor: "var(--secondary-background)",
}}
>
{pickerOptions.month.map((option) => (
@@ -166,16 +172,22 @@ export default function DatePickerBottomSheet({
<div
style={{
fontWeight: selected ? "600" : "400",
color: selected ? "#171717" : "#9ca3af",
color: selected
? "var(--foreground)"
: "var(--text-color-gray)",
fontSize: "16px",
padding: "9px 0",
textAlign: "center",
opacity: selected ? 1 : 0.6,
opacity: selected ? 1 : 0.7,
transition: "all 0.2s ease",
lineHeight: "1.2",
height: 36,
width: "100%",
backgroundColor: selected ? "#f3f4f6" : "transparent",
backgroundColor: selected
? "var(--background)"
: "transparent",
borderRadius: selected ? "4px" : "0",
margin: selected ? "2px 4px" : "0",
}}
>
{option.label}
@@ -188,8 +200,8 @@ export default function DatePickerBottomSheet({
name="day"
style={{
flex: 1,
borderRight: "1px solid #e5e7eb",
backgroundColor: "#ffffff",
borderRight: "1px solid var(--border)",
backgroundColor: "var(--secondary-background)",
}}
>
{pickerOptions.day.map((option) => (
@@ -198,16 +210,22 @@ export default function DatePickerBottomSheet({
<div
style={{
fontWeight: selected ? "600" : "400",
color: selected ? "#171717" : "#9ca3af",
color: selected
? "var(--foreground)"
: "var(--text-color-gray)",
fontSize: "16px",
padding: "9px 0",
textAlign: "center",
opacity: selected ? 1 : 0.6,
opacity: selected ? 1 : 0.7,
transition: "all 0.2s ease",
lineHeight: "1.2",
height: 36,
width: "100%",
backgroundColor: selected ? "#f3f4f6" : "transparent",
backgroundColor: selected
? "var(--background)"
: "transparent",
borderRadius: selected ? "4px" : "0",
margin: selected ? "2px 4px" : "0",
}}
>
{option.label}
@@ -220,7 +238,7 @@ export default function DatePickerBottomSheet({
name="year"
style={{
flex: 1,
backgroundColor: "#ffffff",
backgroundColor: "var(--secondary-background)",
}}
>
{pickerOptions.year.map((option) => (
@@ -229,16 +247,22 @@ export default function DatePickerBottomSheet({
<div
style={{
fontWeight: selected ? "600" : "400",
color: selected ? "#171717" : "#9ca3af",
color: selected
? "var(--foreground)"
: "var(--text-color-gray)",
fontSize: "16px",
padding: "9px 0",
textAlign: "center",
opacity: selected ? 1 : 0.6,
opacity: selected ? 1 : 0.7,
transition: "all 0.2s ease",
lineHeight: "1.2",
height: 36,
width: "100%",
backgroundColor: selected ? "#f3f4f6" : "transparent",
backgroundColor: selected
? "var(--background)"
: "transparent",
borderRadius: selected ? "4px" : "0",
margin: selected ? "2px 4px" : "0",
}}
>
{option.label}