✨ Feat: Update layout

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();
+};

packages/web/src/common/constants/web.constants.ts

@@ -12,7 +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_SIDEBAR = "sidebar";
+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";

packages/web/src/common/styles/theme.ts

@@ -41,7 +41,7 @@ export const theme: DefaultTheme = {
     border: {
       primary: c.gray800,
       primaryDark: c.gray900,
-      secondary: c.gray700,
+      secondary: c.gray100,
     },
     fg: {
       primary: c.gray100,

packages/web/src/common/utils/grid.util.ts

@@ -16,7 +16,6 @@ import { Category } from "@web/ducks/events/event.types";
 import {
   DIVIDER_GRID,
   GRID_X_PADDING_TOTAL,
-  SIDEBAR_CLOSED_WIDTH,
   SIDEBAR_OPEN_WIDTH,
 } from "@web/views/Calendar/layout.constants";
 import { Schema_GridEvent } from "@web/common/types/web.event.types";
@@ -470,10 +469,11 @@ export const getWidthInPixels = (
 };
 
 export const getX = (e: MouseEvent | number, isSidebarOpen: boolean) => {
-  const xOffset = isSidebarOpen ? SIDEBAR_OPEN_WIDTH : SIDEBAR_CLOSED_WIDTH;
+  const x = typeof e === "number" ? e : e.clientX;
 
-  const origX = typeof e === "number" ? e : e.clientX;
-  const x = origX - xOffset;
+  if (isSidebarOpen) {
+    return x - SIDEBAR_OPEN_WIDTH;
+  }
   return x;
 };
 

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"
                   >
                     {">"}

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;
+      }
     }
   }
 `;

packages/web/src/components/Icons/Calendar.tsx

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+import { CalendarDots } from "@phosphor-icons/react";
+
+import { iconStyles } from "./styled";
+
+export const CalendarIcon = styled(CalendarDots)`
+  ${iconStyles}
+`;

packages/web/src/components/Icons/Command.tsx

@@ -1,11 +1,8 @@
 import styled from "styled-components";
 import { Command } from "@phosphor-icons/react";
 
-export const StyledCommandIcon = styled(Command)`
-  color: ${({ theme }) => theme.color.text.lighter};
-  transition: filter 0.2s ease;
+import { iconStyles } from "./styled";
 
-  &:hover {
-    filter: brightness(130%);
-  }
+export const CommandIcon = styled(Command)`
+  ${iconStyles}
 `;

packages/web/src/components/Icons/Delete.tsx

@@ -1,6 +1,14 @@
 import React from "react";
+import styled from "styled-components";
+import { Trash } from "@phosphor-icons/react";
 
-import { TrashIcon } from "./Trash";
+export const TrashIcon = styled(Trash)`
+  transition: filter 0.2s ease;
+  &:hover {
+    cursor: pointer;
+    filter: brightness(50%);
+  }
+`;
 
 interface Props {
   onDelete: () => void;

packages/web/src/components/Icons/Sidebar.tsx

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+import { Sidebar } from "@phosphor-icons/react";
+
+import { iconStyles } from "./styled";
+
+export const SidebarIcon = styled(Sidebar)`
+  ${iconStyles}
+`;

packages/web/src/components/Icons/Todo.tsx

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+import { CheckCircle } from "@phosphor-icons/react";
+
+import { iconStyles } from "./styled";
+
+export const TodoIcon = styled(CheckCircle)`
+  ${iconStyles}
+`;

packages/web/src/components/Icons/icon.types.ts

@@ -0,0 +1,5 @@
+import { IconProps as PhosphorIconProps } from "@phosphor-icons/react";
+
+export interface IconProps extends PhosphorIconProps {
+  ref?: React.Ref<SVGSVGElement>;
+}