|
|
@@ -15,16 +15,16 @@ import {
|
|
|
PopoverContent,
|
|
|
PopoverTrigger,
|
|
|
} from "@/components/ui/popover";
|
|
|
+import { Skeleton } from "@/components/ui/skeleton";
|
|
|
|
|
|
import { useSearchDateRangePicker } from "@/lib/frontend/search/useSearchDateRangePicker";
|
|
|
-import { DebouncedSkeleton } from "@/components/ui/debounced-skeleton";
|
|
|
|
|
|
function CalendarLoading() {
|
|
|
return (
|
|
|
<div className="space-y-3">
|
|
|
<div className="flex gap-4">
|
|
|
- <DebouncedSkeleton className="h-72 w-72 rounded-md" />
|
|
|
- <DebouncedSkeleton className="h-72 w-72 rounded-md" />
|
|
|
+ <Skeleton className="h-72 w-72" />
|
|
|
+ <Skeleton className="h-72 w-72" />
|
|
|
</div>
|
|
|
<p className="text-xs text-muted-foreground text-center">
|
|
|
Kalender lädt…
|
|
|
@@ -41,6 +41,14 @@ const Calendar = dynamic(
|
|
|
},
|
|
|
);
|
|
|
|
|
|
+// Preset chips should look identical in light/dark.
|
|
|
+// We intentionally keep them "white pill" style in both modes (consistent + readable).
|
|
|
+const PRESET_BADGE_CLASS = [
|
|
|
+ "bg-white text-black border-border",
|
|
|
+ "hover:bg-white/90",
|
|
|
+ "dark:bg-white dark:text-black",
|
|
|
+].join(" ");
|
|
|
+
|
|
|
export default function SearchDateRangePicker({
|
|
|
from,
|
|
|
to,
|
|
|
@@ -197,15 +205,7 @@ export default function SearchDateRangePicker({
|
|
|
|
|
|
<div className="flex flex-wrap gap-2">
|
|
|
{presetsRow1.map((p) => (
|
|
|
- <Badge
|
|
|
- key={p.key}
|
|
|
- asChild
|
|
|
- className={[
|
|
|
- "bg-white text-black border-border",
|
|
|
- "hover:bg-white/90",
|
|
|
- "dark:bg-white dark:text-black",
|
|
|
- ].join(" ")}
|
|
|
- >
|
|
|
+ <Badge key={p.key} asChild className={PRESET_BADGE_CLASS}>
|
|
|
<button
|
|
|
type="button"
|
|
|
className="cursor-pointer select-none disabled:opacity-60"
|
|
|
@@ -221,7 +221,7 @@ export default function SearchDateRangePicker({
|
|
|
|
|
|
<div className="flex flex-wrap gap-2">
|
|
|
{presetsRow2.map((p) => (
|
|
|
- <Badge key={p.key} asChild>
|
|
|
+ <Badge key={p.key} asChild className={PRESET_BADGE_CLASS}>
|
|
|
<button
|
|
|
type="button"
|
|
|
className="cursor-pointer select-none disabled:opacity-60"
|