diff --git a/client/src/components/Planner/DayAddFooter.tsx b/client/src/components/Planner/DayAddFooter.tsx index 5d925bd1d..46a64ef1b 100644 --- a/client/src/components/Planner/DayAddFooter.tsx +++ b/client/src/components/Planner/DayAddFooter.tsx @@ -1,6 +1,6 @@ import { useId, useState } from 'react' import { CalendarPlus, Plus } from 'lucide-react' -import { formatDate } from '../../utils/formatters' +import { dayDate } from '../../utils/dayLabel' import type { DayAddControls } from '../../utils/dayAdd' interface DayAddFooterProps { @@ -15,10 +15,11 @@ interface DayAddFooterProps { /** One button size for the whole foot of the reorder dialog, the delete question's included. */ export const FOOTER_BTN = 'inline-flex min-h-9 flex-shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-lg px-3 py-1.5 text-body font-medium transition-colors disabled:cursor-default disabled:opacity-40' -const SECONDARY_BTN = `${FOOTER_BTN} border border-edge text-content-secondary hover:bg-surface-hover disabled:hover:bg-transparent` -const CLOSE_BTN = `${FOOTER_BTN} ml-auto border border-edge text-content-muted hover:bg-surface-hover hover:text-content` -/** The add that matters most, tinted from the accent instead of filled with it. */ -const MAIN_BTN = `${FOOTER_BTN} border border-[color:color-mix(in_srgb,var(--accent)_30%,transparent)] bg-[color:color-mix(in_srgb,var(--accent)_10%,transparent)] font-semibold text-accent-on hover:bg-[color:color-mix(in_srgb,var(--accent)_16%,transparent)] disabled:hover:bg-[color:color-mix(in_srgb,var(--accent)_10%,transparent)]` +/** Cancel, Close and the quiet add: one outline, one text colour, so none of them looks switched off beside another. */ +export const SECONDARY_BTN = `${FOOTER_BTN} border border-edge text-content-secondary hover:bg-surface-hover hover:text-content disabled:hover:bg-transparent` +const CLOSE_BTN = `${SECONDARY_BTN} ml-auto` +/** The add that matters most: drawn in the accent, not filled with it, so it leads without weighing on the row. */ +const MAIN_BTN = `${FOOTER_BTN} border border-accent-on bg-transparent font-semibold text-accent-on hover:bg-accent-subtle disabled:hover:bg-transparent` /** * The foot of the reorder dialog: close it, or add a day. @@ -45,7 +46,7 @@ export function DayAddFooter({ dayAdd, onAddDay, onClose, t, locale }: DayAddFoo if (!dayAdd?.nextDate) { return (
- {blocked &&

{blocked}

} + {blocked &&

{blocked}

}
@@ -101,9 +103,15 @@ export default function MDaysSheet({ planner, shell }: MTripSheetsProps) {
{date ? ( <> -