style: Datepicker colors

SwitchbackTech · Nov 21, 2024 · 67f82c9 · 67f82c9
1 parent c87fd73
commit 67f82c9
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 39 deletions.
diff --git a/packages/core/src/util/color.utils.ts b/packages/core/src/util/color.utils.ts
@@ -7,3 +7,7 @@ export const brighten = (color: string, amount?: number) => {
 export const darken = (color: string, amount?: number) => {
   return tinycolor(color).darken(amount).toString();
 };
+
+export const isDark = (color: string) => {
+  return tinycolor(color).isDark();
+};
diff --git a/packages/web/src/common/constants/web.constants.ts b/packages/web/src/common/constants/web.constants.ts
@@ -12,6 +12,7 @@ export const ID_GRID_EVENTS_ALLDAY = "allDayEvents";
 export const ID_GRID_EVENTS_TIMED = "timedEvents";
 export const ID_GRID_MAIN = "mainGrid";
 export const ID_MAIN = "mainSection";
+export const ID_DATEPICKER_SIDEBAR = "sidebarDatePicker";
 export const ID_SOMEDAY_DRAFT = "somedayDraft";
 export const ID_SOMEDAY_EVENTS = "ID_SOMEDAY_EVENTS";
 export const ID_SOMEDAY_EVENT_FORM = "Someday Event Form";

diff --git a/packages/web/src/components/DatePicker/DatePicker.tsx b/packages/web/src/components/DatePicker/DatePicker.tsx
@@ -8,6 +8,7 @@ import { AlignItems, JustifyContent } from "@web/components/Flex/styled";
 import { Flex } from "@web/components/Flex";
 import { Input } from "@web/components/Input";
 import { theme } from "@web/common/styles/theme";
+import { isDark } from "@core/util/color.utils";
 
 import {
   ChangeDayButtonsStyledFlex,
@@ -19,10 +20,11 @@ import {
 
 export interface Props extends ReactDatePickerProps {
   animationOnToggle?: boolean;
-  bgColor: string;
+  bgColor?: string;
+  inputColor?: string;
   isOpen?: boolean;
   onInputBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
-  view: "widget" | "picker";
+  view: "sidebar" | "grid";
   withTodayButton?: boolean;
 }
 
@@ -35,6 +37,7 @@ export const DatePicker: React.FC<Props> = ({
   autoFocus: _autoFocus = false,
   bgColor,
   calendarClassName,
+  inputColor,
   isOpen = true,
   onSelect = () => null,
   onInputBlur,
@@ -45,6 +48,12 @@ export const DatePicker: React.FC<Props> = ({
   ...props
 }) => {
   const datepickerRef = useRef<CalendarRef>(null);
+  const headerColor =
+    view === "sidebar"
+      ? theme.color.text.light
+      : isDark(bgColor)
+      ? theme.color.text.lighter
+      : theme.color.text.dark;
 
   useEffect(() => {
     if (_autoFocus) {
@@ -64,11 +73,12 @@ export const DatePicker: React.FC<Props> = ({
       calendarContainer={(containerProps) => (
         <StyledDatePicker
           {...containerProps}
-          selectedColor={bgColor}
+          bgColor={bgColor}
+          selectedColor={theme.color.text.accent}
           view={view}
         />
       )}
-      customInput={<Input bgColor={bgColor} onBlurCapture={onInputBlur} />}
+      customInput={<Input bgColor={inputColor} onBlurCapture={onInputBlur} />}
       dateFormat={"M-d-yyyy"}
       formatWeekDay={(day) => day[0]}
       open={isOpen}
@@ -105,7 +115,7 @@ export const DatePicker: React.FC<Props> = ({
             justifyContent={JustifyContent.LEFT}
           >
             <MonthContainerStyled>
-              <Text color={theme.color.text.light} size="xl">
+              <Text color={headerColor} size="xl">
                 {selectedMonth}
               </Text>
             </MonthContainerStyled>
@@ -116,15 +126,15 @@ export const DatePicker: React.FC<Props> = ({
                   <Text
                     cursor="pointer"
                     onClick={decreaseMonth}
-                    color={theme.color.text.light}
+                    color={headerColor}
                     size="l"
                   >
                     {"<"}
                   </Text>
                   <Text
                     cursor="pointer"
                     onClick={increaseMonth}
-                    color={theme.color.text.light}
+                    color={headerColor}
                     size="l"
                   >
                     {">"}

diff --git a/packages/web/src/components/DatePicker/styled.ts b/packages/web/src/components/DatePicker/styled.ts
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { brighten, compliment, darken, isDark } from "@core/util/color.utils";
 import { Flex } from "@web/components/Flex";
 import { Text } from "@web/components/Text";
 import { SIDEBAR_MONTH_HEIGHT } from "@web/views/Calendar/layout.constants";
@@ -28,11 +29,21 @@ export const MonthContainerStyled = styled(Flex)`
   width: 97px;
 `;
 
-export const StyledDatePicker = styled.div<{
-  view: "widget" | "picker";
+interface Props {
+  bgColor: string;
+  isDark?: boolean;
   selectedColor: string;
-}>`
-  background-color: ${({ theme }) => theme.color.bg.primary};
+  view: "grid" | "sidebar";
+}
+
+export const StyledDatePicker = styled.div.attrs<Props>((props) => ({
+  bgColor: props.bgColor,
+  isDark: isDark(props.bgColor),
+  selectedColor: props.selectedColor,
+  view: props.view,
+}))<Props>`
+  background-color: ${({ bgColor, view }) =>
+    view === "sidebar" ? "transparent" : bgColor};
   border: none;
   border-radius: 2px;
   box-shadow: 0px 4px 4px ${({ theme }) => theme.color.shadow.default};
@@ -64,8 +75,8 @@ export const StyledDatePicker = styled.div<{
       width: 100%;
 
       &:hover {
-        ${({ view }) =>
-          view === "widget" &&
+        ${({ view, theme }) =>
+          view === "sidebar" &&
           `background-color: ${theme.color.fg.primaryDark}`};
       }
     }
@@ -79,15 +90,17 @@ export const StyledDatePicker = styled.div<{
 
     &__day-name {
       opacity: 0.8;
-      color: ${theme.color.text.light};
+      color: ${({ theme, isDark }) =>
+        isDark ? theme.color.text.light : theme.color.text.dark};
       font-size: 11px;
       margin: 0;
     }
 
     &__day {
       border: none !important;
       border-radius: 50% !important;
-      color: ${theme.color.text.lighter};
+      color: ${({ theme, isDark }) =>
+        isDark ? theme.color.text.lighter : theme.color.text.dark};
       margin: 0;
 
       &:hover {
@@ -103,35 +116,43 @@ export const StyledDatePicker = styled.div<{
       }
 
       &--selected {
-        color: ${theme.color.text.dark};
         background-color: ${({ selectedColor }) => selectedColor};
       }
 
       &--today {
-        color: ${({ selectedColor }) => selectedColor};
+        color: ${({ view }) =>
+          view === "sidebar" ? theme.color.text.accent : theme.color.text.dark};
+        text-decoration: underline;
+        text-decoration-color: ${({ view }) =>
+          view === "sidebar" ? theme.color.text.accent : theme.color.text.dark};
+        text-underline-offset: 3px;
       }
 
       &--keyboard-selected {
         background-color: ${theme.color.bg.primary};
       }
 
       &--outside-month {
-        color: ${theme.color.text.darkPlaceholder};
+        color: ${({ theme, isDark }) =>
+          isDark
+            ? darken(theme.color.text.light)
+            : brighten(theme.color.text.dark)};
+        opacity: 0.8;
       }
     }
-  }
 
-  &.calendar {
-    height: 0;
-    width: 414px;
-    overflow: hidden;
+    &.calendar {
+      height: 0;
+      width: 414px;
+      overflow: hidden;
 
-    &--open {
-      height: ${SIDEBAR_MONTH_HEIGHT}px;
-    }
+      &--open {
+        height: ${SIDEBAR_MONTH_HEIGHT}px;
+      }
 
-    &--animation {
-      transition: 0.3s;
+      &--animation {
+        transition: 0.3s;
+      }
     }
   }
 `;

diff --git a/packages/web/src/views/Calendar/components/Sidebar/MonthTab/MonthTab.tsx b/packages/web/src/views/Calendar/components/Sidebar/MonthTab/MonthTab.tsx
@@ -4,6 +4,7 @@ import weekPlugin from "dayjs/plugin/weekOfYear";
 import { DatePicker } from "@web/components/DatePicker";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { theme } from "@web/common/styles/theme";
+import { ID_DATEPICKER_SIDEBAR } from "@web/common/constants/web.constants";
 
 import { Styled } from "./styled";
 
@@ -33,8 +34,7 @@ export const MonthTab: React.FC<Props> = ({
     <Styled role="dialog" data-testid="Month Widget">
       <DatePicker
         animationOnToggle={false}
-        bgColor={theme.color.text.light}
-        calendarClassName="sidebarDatePicker"
+        calendarClassName={ID_DATEPICKER_SIDEBAR}
         inline
         isOpen={true}
         monthsShown={monthsShown}
@@ -44,7 +44,7 @@ export const MonthTab: React.FC<Props> = ({
         }}
         selected={selectedDate}
         shouldCloseOnSelect={false}
-        view="widget"
+        view="sidebar"
         withTodayButton={true}
       />
     </Styled>

diff --git a/packages/web/src/views/Calendar/components/Sidebar/MonthTab/styled.ts b/packages/web/src/views/Calendar/components/Sidebar/MonthTab/styled.ts
@@ -1,10 +1,11 @@
 import styled from "styled-components";
 import { Text } from "@web/components/Text";
+import { ID_DATEPICKER_SIDEBAR } from "@web/common/constants/web.constants";
 
 export const Styled = styled.div`
   position: relative;
 
-  & .sidebarDatePicker {
+  & .${ID_DATEPICKER_SIDEBAR} {
     width: 100%;
     box-shadow: none;
   }

diff --git a/packages/web/src/views/Calendar/components/Sidebar/SidebarIconRow/SidebarIconRow.tsx b/packages/web/src/views/Calendar/components/Sidebar/SidebarIconRow/SidebarIconRow.tsx
@@ -43,7 +43,7 @@ export const SidebarIconRow = () => {
           <TodoIcon isFocused={tab === "tasks"} size={25} />
         </TooltipWrapper>
         <TooltipWrapper
-          description="Open month widget"
+          description="Open month"
           shortcut="SHIFT + 2"
           onClick={() =>
             dispatch(viewSlice.actions.updateSidebarTab("monthWidget"))

diff --git a/packages/web/src/views/Forms/EventForm/DateTimeSection/DateTimeSection.tsx b/packages/web/src/views/Forms/EventForm/DateTimeSection/DateTimeSection.tsx
@@ -17,18 +17,20 @@ import {
   shouldAdjustComplimentTime,
 } from "@web/common/utils/web.date.util";
 import { Option_Time } from "@web/common/types/util.types";
+import { darken } from "@core/util/color.utils";
 
 import { StyledDateFlex, StyledDateTimeFlex, StyledTimeFlex } from "./styled";
 
 dayjs.extend(customParseFormat);
 
 export interface Props {
+  bgColor: string;
   category: Categories_Event;
   event: Schema_Event;
   endTime?: SelectOption<string>;
+  inputColor?: string;
   isEndDatePickerOpen: boolean;
   isStartDatePickerOpen: boolean;
-  bgColor?: string;
   selectedEndDate?: Date;
   selectedStartDate?: Date;
   setEndTime: (value: SelectOption<string>) => void;
@@ -42,11 +44,12 @@ export interface Props {
 }
 
 export const DateTimeSection: FC<Props> = ({
-  event,
+  bgColor,
   category,
+  event,
+  inputColor,
   isEndDatePickerOpen,
   isStartDatePickerOpen,
-  bgColor,
   selectedEndDate,
   selectedStartDate,
   setIsStartDatePickerOpen,
@@ -282,8 +285,9 @@ export const DateTimeSection: FC<Props> = ({
               onMouseDown={stopPropagation}
             >
               <DatePicker
-                bgColor={bgColor}
+                bgColor={darken(bgColor, 15)}
                 calendarClassName="startDatePicker"
+                inputColor={inputColor}
                 isOpen={isStartDatePickerOpen}
                 onCalendarClose={closeStartDatePicker}
                 onCalendarOpen={() => {
@@ -307,8 +311,9 @@ export const DateTimeSection: FC<Props> = ({
               onMouseDown={stopPropagation}
             >
               <DatePicker
-                bgColor={bgColor}
+                bgColor={darken(bgColor, 15)}
                 calendarClassName="endDatePicker"
+                inputColor={inputColor}
                 isOpen={isEndDatePickerOpen}
                 onCalendarClose={closeEndDatePicker}
                 onCalendarOpen={() => setIsEndDatePickerOpen(true)}

diff --git a/packages/web/src/views/Forms/EventForm/EventForm.tsx b/packages/web/src/views/Forms/EventForm/EventForm.tsx
@@ -289,10 +289,11 @@ export const EventForm: React.FC<FormProps> = ({
         />
 
         <DateTimeSection
-          bgColor={hoverColorByPriority[priority]}
+          bgColor={colorByPriority[priority]}
           event={event}
           category={category}
           endTime={endTime}
+          inputColor={hoverColorByPriority[priority]}
           isEndDatePickerOpen={isEndDatePickerOpen}
           isStartDatePickerOpen={isStartDatePickerOpen}
           selectedEndDate={selectedEndDate}