lots more color fixes (#22346)

frontend/src/metabase/components/Calendar.css

@@ -36,11 +36,6 @@
   padding: 10px;
 }
 
-.Calendar-day:hover {
-  background-color: var(--color-accent7);
-  color: white;
-}
-
 .Calendar-day-name {
   cursor: inherit;
 }

frontend/src/metabase/components/Calendar.styled.tsx

+import { alpha, color } from "metabase/lib/colors";
+import styled from "@emotion/styled";
+
+type CalendarDayProps = {
+  primaryColor?: string;
+  isSelected?: boolean;
+  isInRange?: boolean;
+};
+
+export const CalendarDay = styled.div<CalendarDayProps>`
+  background-color: ${({
+    primaryColor = color("brand"),
+    isSelected,
+    isInRange,
+  }) => {
+    if (isSelected) {
+      return primaryColor;
+    } else if (isInRange) {
+      return alpha(primaryColor, 0.1);
+    }
+    return "transparent";
+  }};
+  color: ${({ primaryColor = color("brand"), isSelected, isInRange }) =>
+    !isSelected && isInRange ? primaryColor : undefined};
+
+  &:hover {
+    background-color: ${({ primaryColor = color("brand") }) => primaryColor};
+    color: white;
+  }
+`;

frontend/src/metabase/components/Calendar.tsx

@@ -9,6 +9,7 @@ import moment, { Moment } from "moment";
 import { t } from "ttag";
 import Icon from "metabase/components/Icon";
 import { alpha, color } from "metabase/lib/colors";
+import { CalendarDay } from "./Calendar.styled";
 
 export type SelectAll = "after" | "before";
 
@@ -161,6 +162,7 @@ export default class Calendar extends Component<Props, State> {
           onClickDay={this.onClickDay}
           isRangePicker={this.props.isRangePicker}
           selected={this.props.selected}
+          primaryColor={this.props.primaryColor}
           selectedEnd={this.props.selectedEnd}
           selectAll={this.props.selectAll}
         />,
@@ -224,21 +226,22 @@ class Week extends Component<WeekProps> {
     for (let i = 0; i < 7; i++) {
       const isSelected =
         date.isSame(selected, "day") ||
-        (isRangePicker && date.isSame(selectedEnd, "day"));
-      let inRange = false;
+        (isRangePicker &&
+          selectedEnd?.isAfter(selected) &&
+          date.isSame(selectedEnd, "day"));
+      let isInRange = false;
       if (
         selected &&
         date.isAfter(selected, "day") &&
         selectedEnd &&
         selectedEnd.isAfter(date, "day")
       ) {
-        inRange = true;
+        isInRange = true;
       } else if (selectAll === "after") {
-        inRange = !!(selected && date.isAfter(selected, "day"));
+        isInRange = !!(selected && date.isAfter(selected, "day"));
       } else if (selectAll === "before") {
-        inRange = !!(selected && selected.isAfter(date, "day"));
+        isInRange = !!(selected && selected.isAfter(date, "day"));
       }
-      const bgColor = isSelected ? primaryColor : alpha(primaryColor, 0.1);
       const isEnd = selectAll === "before" && date.isSame(selected, "day");
       const classes = cx("Calendar-day cursor-pointer text-centered", {
         "Calendar-day--this-month": date.month() === month.month(),
@@ -249,7 +252,7 @@ class Week extends Component<WeekProps> {
         "Calendar-day--week-start": i === 0,
         "Calendar-day--week-end": i === 6,
         "Calendar-day--in-range":
-          (selectAll && inRange) ||
+          (selectAll && isInRange) ||
           (!(date.isSame(selected, "day") || date.isSame(selectedEnd, "day")) &&
             (date.isSame(selected, "day") ||
               date.isSame(selectedEnd, "day") ||
@@ -258,17 +261,16 @@ class Week extends Component<WeekProps> {
                 date.isAfter(selected, "day")))),
       });
       days.push(
-        <span
+        <CalendarDay
           key={date.toString()}
           className={classes}
           onClick={this.props.onClickDay.bind(null, date)}
-          style={{
-            backgroundColor: isSelected || inRange ? bgColor : undefined,
-            color: !isSelected && inRange ? primaryColor : undefined,
-          }}
+          isInRange={isInRange}
+          isSelected={isSelected}
+          primaryColor={this.props.primaryColor}
         >
           {date.date()}
-        </span>,
+        </CalendarDay>,
       );
       date = moment(date).add(1, "d");
     }

frontend/src/metabase/query_builder/components/filters/pickers/DatePicker/DatePicker.tsx

@@ -296,6 +296,7 @@ const DatePicker: React.FC<Props> = props => {
               filter={filter}
               onBack={onBack}
               operators={operators}
+              primaryColor={primaryColor}
               onFilterChange={onFilterChange}
             />
           ) : null}

frontend/src/metabase/query_builder/components/filters/pickers/DatePicker/DatePickerHeader.styled.tsx

@@ -23,18 +23,16 @@ export const TabButton = styled(Button)<TabButtonProps>`
   padding-right: 0;
   margin-left: ${space(2)};
   margin-right: ${space(2)};
-  border-bottom: ${props =>
-    props.selected
-      ? `2px solid ${props.primaryColor || color("brand")}`
-      : "2px solid transparent"};
+  border-bottom: ${({ primaryColor = defaultColor, selected }) =>
+    selected ? `2px solid ${primaryColor}` : "2px solid transparent"};
 
-  color: ${props =>
-    props.selected
-      ? `${props.primaryColor || color("brand")}`
-      : color("text-medium")};
+  color: ${({ primaryColor = defaultColor, selected }) =>
+    selected ? primaryColor : color("text-medium")};
 
   &:hover {
     background: none;
+    color: ${({ primaryColor = defaultColor }) => primaryColor};
+    border-color: ${({ primaryColor = defaultColor }) => primaryColor};
   }
 `;
 
@@ -45,6 +43,8 @@ export const BackButton = styled(TabButton)`
   color: ${color("text-medium")};
 
   &:hover {
-    color: ${props => props.primaryColor || color("brand")};
+    color: ${({ primaryColor }) => primaryColor};
   }
 `;
+
+const defaultColor = color("brand");

frontend/src/metabase/query_builder/components/filters/pickers/DatePicker/DatePickerShortcuts.tsx

@@ -149,6 +149,7 @@ export default function DatePickerShortcuts({
   filter,
   onCommit,
   onBack,
+  primaryColor,
 }: Props) {
   const dimension = filter.dimension?.();
   let title = "";
@@ -171,6 +172,7 @@ export default function DatePickerShortcuts({
       {DAY_OPTIONS.map(({ displayName, init }) => (
         <ShortcutButton
           key={displayName}
+          primaryColor={primaryColor}
           onClick={() => {
             onCommit(init(filter));
           }}
@@ -182,6 +184,7 @@ export default function DatePickerShortcuts({
       {MONTH_OPTIONS.map(({ displayName, init }) => (
         <ShortcutButton
           key={displayName}
+          primaryColor={primaryColor}
           onClick={() => {
             onCommit(init(filter));
           }}
@@ -193,6 +196,7 @@ export default function DatePickerShortcuts({
       {MISC_OPTIONS.map(({ displayName, init }) => (
         <ShortcutButton
           key={displayName}
+          primaryColor={primaryColor}
           onClick={() => {
             onFilterChange(init(filter));
           }}

frontend/src/metabase/query_builder/components/filters/pickers/DatePicker/RangeDatePicker.tsx

@@ -18,6 +18,7 @@ import SpecificDatePicker from "./SpecificDatePicker";
 type BetweenPickerProps = {
   isSidebar?: boolean;
   className?: string;
+  primaryColor?: string;
   filter: Filter;
   onFilterChange: (filter: any[]) => void;
 
@@ -30,6 +31,7 @@ export const BetweenPicker = ({
   filter: [op, field, startValue, endValue],
   onFilterChange,
   hideTimeSelectors,
+  primaryColor,
 }: BetweenPickerProps) => {
   let endDatetime = endValue;
   if (hasTimeComponent(startValue) && !hasTimeComponent(endValue)) {
@@ -45,6 +47,7 @@ export const BetweenPicker = ({
         <div>
           <SpecificDatePicker
             value={startValue}
+            primaryColor={primaryColor}
             hideTimeSelectors={hideTimeSelectors}
             onChange={value => onFilterChange([op, field, value, endValue])}
           />
@@ -52,6 +55,7 @@ export const BetweenPicker = ({
         <div>
           <SpecificDatePicker
             value={endValue}
+            primaryColor={primaryColor}
             hideTimeSelectors={hideTimeSelectors}
             onClear={() =>
               onFilterChange([
@@ -68,6 +72,7 @@ export const BetweenPicker = ({
       <div className="Calendar--noContext">
         <Calendar
           isRangePicker
+          primaryColor={primaryColor}
           initial={startValue}
           selected={startValue && moment(startValue)}
           selectedEnd={endValue && moment(endValue)}

frontend/src/metabase/query_builder/components/filters/pickers/DatePicker/SingleDatePicker.tsx

@@ -10,6 +10,7 @@ export type SingleDatePickerProps = {
   className?: string;
   filter: Filter;
   selectAll?: SelectAll;
+  primaryColor?: string;
   onFilterChange: (filter: any[]) => void;
 
   hideTimeSelectors?: boolean;
@@ -21,10 +22,12 @@ const SingleDatePicker = ({
   onFilterChange,
   hideTimeSelectors,
   selectAll,
+  primaryColor,
 }: SingleDatePickerProps) => (
   <SpecificDatePicker
     className={className}
     value={value}
+    primaryColor={primaryColor}
     selectAll={selectAll}
     onChange={value => onFilterChange([op, field, value])}
     onClear={() => onFilterChange([op, field, setTimeComponent(value)])}

frontend/src/metabase/query_builder/components/filters/pickers/DatePicker/SpecificDatePicker.tsx

@@ -15,6 +15,7 @@ import { getTimeComponent, setTimeComponent } from "metabase/lib/query_time";
 type Props = {
   className?: string;
   isSidebar?: boolean;
+  primaryColor?: string;
   calendar?: boolean;
   selectAll?: SelectAll;
 
@@ -40,6 +41,7 @@ const SpecificDatePicker: React.FC<Props> = props => {
     onClear,
     className,
     selectAll,
+    primaryColor,
   } = props;
   const [showCalendar, setShowCalendar] = React.useState(true);
 
@@ -103,6 +105,7 @@ const SpecificDatePicker: React.FC<Props> = props => {
             onChange={value => onChange(value, hours, minutes)}
             isRangePicker={false}
             selectAll={selectAll}
+            primaryColor={primaryColor}
           />
         </ExpandingContent>
       )}