diff --git a/packages/core/src/util/color.utils.ts b/packages/core/src/util/color.utils.ts index 2715b694..c840cf4a 100644 --- 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 index b61f721b..cc69a2e1 100644 --- 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 index 99e8bff5..427d653d 100644 --- 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) => void; - view: "widget" | "picker"; + view: "sidebar" | "grid"; withTodayButton?: boolean; } @@ -35,6 +37,7 @@ export const DatePicker: React.FC = ({ autoFocus: _autoFocus = false, bgColor, calendarClassName, + inputColor, isOpen = true, onSelect = () => null, onInputBlur, @@ -45,6 +48,12 @@ export const DatePicker: React.FC = ({ ...props }) => { const datepickerRef = useRef(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 = ({ calendarContainer={(containerProps) => ( )} - customInput={} + customInput={} dateFormat={"M-d-yyyy"} formatWeekDay={(day) => day[0]} open={isOpen} @@ -105,7 +115,7 @@ export const DatePicker: React.FC = ({ justifyContent={JustifyContent.LEFT} > - + {selectedMonth} @@ -116,7 +126,7 @@ export const DatePicker: React.FC = ({ {"<"} @@ -124,7 +134,7 @@ export const DatePicker: React.FC = ({ {">"} diff --git a/packages/web/src/components/DatePicker/styled.ts b/packages/web/src/components/DatePicker/styled.ts index b379d720..bb235eaa 100644 --- 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) => ({ + bgColor: props.bgColor, + isDark: isDark(props.bgColor), + selectedColor: props.selectedColor, + view: props.view, +}))` + 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,7 +90,8 @@ 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; } @@ -87,7 +99,8 @@ export const StyledDatePicker = styled.div<{ &__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,12 +116,16 @@ 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 { @@ -116,22 +133,26 @@ export const StyledDatePicker = styled.div<{ } &--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 index b86c0821..2bcf8405 100644 --- 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 = ({ = ({ }} selected={selectedDate} shouldCloseOnSelect={false} - view="widget" + view="sidebar" withTodayButton={true} /> diff --git a/packages/web/src/views/Calendar/components/Sidebar/MonthTab/styled.ts b/packages/web/src/views/Calendar/components/Sidebar/MonthTab/styled.ts index da1a621c..b353ca9d 100644 --- 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 index 5e5806b1..61fa4066 100644 --- 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 = () => { 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 index 851c0352..5ada3c14 100644 --- 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; + inputColor?: string; isEndDatePickerOpen: boolean; isStartDatePickerOpen: boolean; - bgColor?: string; selectedEndDate?: Date; selectedStartDate?: Date; setEndTime: (value: SelectOption) => void; @@ -42,11 +44,12 @@ export interface Props { } export const DateTimeSection: FC = ({ - event, + bgColor, category, + event, + inputColor, isEndDatePickerOpen, isStartDatePickerOpen, - bgColor, selectedEndDate, selectedStartDate, setIsStartDatePickerOpen, @@ -282,8 +285,9 @@ export const DateTimeSection: FC = ({ onMouseDown={stopPropagation} > { @@ -307,8 +311,9 @@ export const DateTimeSection: FC = ({ onMouseDown={stopPropagation} > setIsEndDatePickerOpen(true)} diff --git a/packages/web/src/views/Forms/EventForm/EventForm.tsx b/packages/web/src/views/Forms/EventForm/EventForm.tsx index cca46056..0a738be0 100644 --- 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 = ({ />