diff --git a/.env.example b/.env.example index f7793ed23..909bba5c1 100644 --- a/.env.example +++ b/.env.example @@ -27,8 +27,8 @@ VITE_STATIC_ASSETS_URL=https://sendou-assets.nyc3.cdn.digitaloceanspaces.com TWITCH_CLIENT_ID= TWITCH_CLIENT_SECRET= -// Discord webhook new user reports are posted to (skipped when unset) -USER_REPORT_DISCORD_WEBHOOK_URL= +// Discord webhook mod events (user reports, bans) are posted to (skipped when unset) +MOD_DISCORD_WEBHOOK_URL= SKALOP_SYSTEM_MESSAGE_URL=http://localhost:5900/system SKALOP_TOKEN=secret diff --git a/app/components/elements/Calendar.module.css b/app/components/elements/Calendar.module.css index 1281f1833..54c0a4c86 100644 --- a/app/components/elements/Calendar.module.css +++ b/app/components/elements/Calendar.module.css @@ -78,3 +78,39 @@ outline: initial; } } + +.weekSelection { + & .grid { + /* the week band has to run unbroken across the row, including the empty cells of a month's first and last week */ + border-spacing: 0; + } + + & tr:hover td, + & tr:has([data-selected]) td { + background-color: var(--color-bg-high); + } + + & tr:hover td:first-child, + & tr:has([data-selected]) td:first-child { + border-start-start-radius: var(--radius-field); + border-end-start-radius: var(--radius-field); + } + + & tr:hover td:last-child, + & tr:has([data-selected]) td:last-child { + border-start-end-radius: var(--radius-field); + border-end-end-radius: var(--radius-field); + } + + & .cell { + &:hover { + background-color: transparent; + } + + /* the week is what gets selected, so the day it was picked from is not called out */ + &[data-selected] { + background-color: transparent; + color: inherit; + } + } +} diff --git a/app/components/elements/Calendar.tsx b/app/components/elements/Calendar.tsx index 930919629..c99383f02 100644 --- a/app/components/elements/Calendar.tsx +++ b/app/components/elements/Calendar.tsx @@ -17,14 +17,22 @@ import styles from "./Calendar.module.css"; export interface SendouCalendarProps extends CalendarProps { className?: string; + /** Highlights the whole week row rather than a single day, for pickers where choosing a day means choosing the week it belongs to. */ + weekSelection?: boolean; } export function SendouCalendar({ className, + weekSelection, ...rest }: SendouCalendarProps) { return ( - +