Restyle the date mention calendar picker

The react-day-picker base stylesheet isn't loaded in the editor, so day
cells fell back to default browser button styling. Style the calendar
from scratch to match the rest of the app: reset button chrome, show
outside (previous/next month) days clearly de-emphasised, render the
selected day as a solid accent-filled circle, and emphasise today with
the accent colour. Enable showOutsideDays and fixedWeeks for a stable
6-week grid.

shared/editor/components/Mentions.tsx

@@ -13,7 +13,7 @@ import { DayPicker } from "react-day-picker";
 import { useTranslation } from "react-i18next";
 import { RemoveScroll } from "react-remove-scroll";
 import { Link } from "react-router-dom";
-import styled, { useTheme } from "styled-components";
+import styled from "styled-components";
 import { depths, s } from "../../styles";
 import {
   dateLocale,
@@ -530,7 +530,6 @@ export const MentionDate = observer(function MentionDate_(props: DateProps) {
   const { isSelected, isEditable, node, onChangeDate } = props;
   const { t } = useTranslation();
   const { auth } = useStores();
-  const theme = useTheme();
   const [open, setOpen] = React.useState(false);
   const { className, unfurl, ...attrs } = getAttributesFromNode(node);
 
@@ -539,20 +538,6 @@ export const MentionDate = observer(function MentionDate_(props: DateProps) {
   const display = dateToRelativeReadable(iso, t, language);
   const selectedDate = parseISODate(iso) ?? undefined;
 
-  const styles = React.useMemo(
-    () =>
-      ({
-        "--rdp-caption-font-size": "16px",
-        "--rdp-cell-size": "34px",
-        "--rdp-selected-text": theme.accentText,
-        "--rdp-accent-color": theme.accent,
-        "--rdp-accent-color-dark": theme.accent,
-        "--rdp-background-color": theme.listItemHoverBackground,
-        "--rdp-background-color-dark": theme.listItemHoverBackground,
-      }) as React.CSSProperties,
-    [theme]
-  );
-
   const handleSelect = React.useCallback(
     (date: Date) => {
       setOpen(false);
@@ -600,10 +585,11 @@ export const MentionDate = observer(function MentionDate_(props: DateProps) {
               <DayPicker
                 required
                 mode="single"
+                showOutsideDays
+                fixedWeeks
                 selected={selectedDate}
                 defaultMonth={selectedDate}
                 onSelect={handleSelect}
-                style={styles}
                 locale={dateLocale(language)}
               />
             </DatePopoverContent>
@@ -645,9 +631,10 @@ const DatePopoverContent = styled.div`
   z-index: ${depths.modal};
   background: ${s("menuBackground")};
   box-shadow: ${s("menuShadow")};
-  border-radius: 6px;
+  border-radius: 8px;
   outline: none;
-  padding: 6px 12px;
+  padding: 12px;
+  color: ${s("text")};
 
   &[data-state="open"] {
     animation: fadeIn 150ms ease;
@@ -661,6 +648,145 @@ const DatePopoverContent = styled.div`
       opacity: 1;
     }
   }
+
+  /* react-day-picker is styled from scratch here as its base stylesheet is
+     not loaded in the editor; this gives us full control over the look. */
+  .rdp {
+    margin: 0;
+  }
+
+  /* Visually-hidden accessibility labels (would otherwise show without the
+     base stylesheet). */
+  .rdp-vhidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+    appearance: none;
+  }
+
+  .rdp-month {
+    width: 100%;
+  }
+
+  .rdp-caption {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 2px 8px;
+  }
+
+  .rdp-caption_label {
+    font-size: 14px;
+    font-weight: 600;
+    color: ${s("text")};
+  }
+
+  .rdp-nav {
+    display: flex;
+    gap: 2px;
+  }
+
+  .rdp-nav_button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 0;
+    background: none;
+    border-radius: 4px;
+    color: ${s("textSecondary")};
+    cursor: pointer;
+    transition: background 100ms ease;
+
+    &:hover {
+      background: ${s("listItemHoverBackground")};
+    }
+  }
+
+  .rdp-nav_icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  .rdp-table {
+    border-collapse: collapse;
+    width: 100%;
+  }
+
+  .rdp-head_cell {
+    font-size: 11px;
+    font-weight: 500;
+    text-transform: none;
+    color: ${s("textTertiary")};
+    padding: 4px 0;
+    text-align: center;
+  }
+
+  .rdp-cell {
+    padding: 1px;
+    text-align: center;
+  }
+
+  .rdp-day {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    border: 0;
+    background: none;
+    border-radius: 50%;
+    font-family: inherit;
+    font-size: 13px;
+    font-variant-numeric: tabular-nums;
+    color: ${s("text")};
+    cursor: pointer;
+    transition: background 100ms ease;
+
+    &:hover:not([disabled]):not(.rdp-day_selected) {
+      background: ${s("listItemHoverBackground")};
+    }
+
+    &:focus-visible:not([disabled]) {
+      outline: 2px solid ${s("accent")};
+      outline-offset: -2px;
+    }
+  }
+
+  /* Today, when not selected, is emphasised with the accent colour. */
+  .rdp-day_today:not(.rdp-day_selected) {
+    font-weight: 700;
+    color: ${s("accent")};
+  }
+
+  /* Days belonging to the previous/next month are clearly de-emphasised. */
+  .rdp-day_outside {
+    color: ${s("textTertiary")};
+    opacity: 0.5;
+  }
+
+  .rdp-day[disabled] {
+    color: ${s("textTertiary")};
+    opacity: 0.4;
+    cursor: default;
+  }
+
+  /* The selected day is a solid accent-filled circle. */
+  .rdp-day_selected,
+  .rdp-day_selected:hover,
+  .rdp-day_selected:focus-visible {
+    background: ${s("accent")};
+    color: ${s("accentText")};
+    font-weight: 500;
+    opacity: 1;
+  }
 `;
 
 const StyledWarningIcon = styled(WarningIcon)`