🐛 Fix: isFocused devtools warning (#285)

* 🧹 Chore: fix types in DateTimeSection

* ✨ Feat: Add IconProvider for consistent icon sizing

* ♻️ Refactor: Update icon color handling

This removes the isFocused props, resolving devtools error

Author: tyler-dane

packages/web/src/App.tsx

@@ -14,6 +14,7 @@ import { sagaMiddleware } from "@web/common/store/middlewares";
 import { GlobalStyle } from "@web/components/GlobalStyle";
 import { sagas } from "@web/store/sagas";
 import { theme } from "./common/styles/theme";
+import { IconProvider } from "./components/IconProvider/IconProvider";
 import { RootRouter } from "./routers";
 import { store } from "./store";
 
@@ -39,7 +40,9 @@ export const App = () => {
             <SuperTokensWrapper>
               <GlobalStyle />
               <ThemeProvider theme={theme}>
-                <RootRouter />
+                <IconProvider>
+                  <RootRouter />
+                </IconProvider>
                 <ToastContainer
                   position="bottom-left"
                   autoClose={5000}

packages/web/src/components/IconProvider/IconProvider.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { IconContext } from "@phosphor-icons/react";
+
+export const IconProvider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <IconContext.Provider
+      value={{
+        size: 25,
+      }}
+    >
+      {children}
+    </IconContext.Provider>
+  );
+};

packages/web/src/components/Icons/styled.ts

@@ -1,13 +1,7 @@
 import { css } from "styled-components";
 import { IconProps } from "@phosphor-icons/react";
 
-interface Props extends IconProps {
-  isFocused: boolean;
-}
-
-export const iconStyles = css<Props>`
-  color: ${({ theme, isFocused }) =>
-    isFocused ? theme.color.text.light : theme.color.text.lightInactive};
+export const iconStyles = css<IconProps>`
   transition: filter 0.2s ease;
 
   &:hover {

packages/web/src/views/Calendar/components/Dedication/Dedication.tsx

@@ -41,7 +41,7 @@ export const Dedication = () => {
           justifyContent={JustifyContent.SPACE_BETWEEN}
         >
           <h2>For Derek</h2>
-          <StyledXIcon size={20} onClick={close} />
+          <StyledXIcon onClick={close} />
         </Flex>
         <StyledDedicationText>
           This app is dedicated to Derek John Benton (1993-2014).

packages/web/src/views/Calendar/components/Header/Header.tsx

@@ -1,5 +1,6 @@
 import dayjs, { Dayjs } from "dayjs";
 import React, { FC } from "react";
+import { theme } from "@web/common/styles/theme";
 import { getCalendarHeadingLabel } from "@web/common/utils/web.date.util";
 import { AlignItems } from "@web/components/Flex/styled";
 import { SidebarIcon } from "@web/components/Icons/Sidebar";
@@ -59,7 +60,13 @@ export const Header: FC<Props> = ({
           onClick={() => dispatch(viewSlice.actions.toggleSidebar())}
           shortcut="["
         >
-          <SidebarIcon size={25} isFocused={isSidebarOpen} />
+          <SidebarIcon
+            color={
+              isSidebarOpen
+                ? theme.color.text.light
+                : theme.color.text.lightInactive
+            }
+          />
         </TooltipWrapper>
         <StyledLeftGroup>
           <StyledHeaderLabel aria-level={1} role="heading">

packages/web/src/views/Calendar/components/Sidebar/SidebarIconRow/SidebarIconRow.tsx

@@ -1,4 +1,6 @@
 import React from "react";
+import { Command } from "@phosphor-icons/react";
+import { theme } from "@web/common/styles/theme";
 import { CalendarIcon } from "@web/components/Icons/Calendar";
 import { CommandIcon } from "@web/components/Icons/Command";
 import { TodoIcon } from "@web/components/Icons/Todo";
@@ -32,14 +34,26 @@ export const SidebarIconRow = () => {
           shortcut="CMD + K"
           onClick={toggleCmdPalette}
         >
-          <CommandIcon isFocused={isCmdPaletteOpen} size={25} />
+          <CommandIcon
+            color={
+              isCmdPaletteOpen
+                ? theme.color.text.darkPlaceholder
+                : theme.color.text.light
+            }
+          />
         </TooltipWrapper>
         <TooltipWrapper
           description="Open tasks"
           shortcut="SHIFT + 1"
           onClick={() => dispatch(viewSlice.actions.updateSidebarTab("tasks"))}
         >
-          <TodoIcon isFocused={tab === "tasks"} size={25} />
+          <TodoIcon
+            color={
+              tab === "tasks"
+                ? theme.color.text.light
+                : theme.color.text.darkPlaceholder
+            }
+          />
         </TooltipWrapper>
         <TooltipWrapper
           description="Open month"
@@ -48,7 +62,13 @@ export const SidebarIconRow = () => {
             dispatch(viewSlice.actions.updateSidebarTab("monthWidget"))
           }
         >
-          <CalendarIcon isFocused={tab === "monthWidget"} size={25} />
+          <CalendarIcon
+            color={
+              tab === "monthWidget"
+                ? theme.color.text.light
+                : theme.color.text.darkPlaceholder
+            }
+          />
         </TooltipWrapper>
       </LeftIconGroup>
     </IconRow>

packages/web/src/views/Forms/EventForm/DateTimeSection/DatePickers/DatePickers.tsx

@@ -159,7 +159,9 @@ export const DatePickers: FC<Props> = ({
             }}
             onChange={() => null}
             onInputClick={() => {
-              isEndDatePickerOpen && setIsEndDatePickerOpen(false);
+              if (isEndDatePickerOpen) {
+                setIsEndDatePickerOpen(false);
+              }
               setIsStartDatePickerOpen(true);
             }}
             onKeyDown={(e) => onPickerKeyDown("start", e)}
@@ -182,7 +184,9 @@ export const DatePickers: FC<Props> = ({
             onCalendarOpen={() => setIsEndDatePickerOpen(true)}
             onChange={() => null}
             onInputClick={() => {
-              isStartDatePickerOpen && setIsStartDatePickerOpen(false);
+              if (isStartDatePickerOpen) {
+                setIsStartDatePickerOpen(false);
+              }
               setIsEndDatePickerOpen(true);
             }}
             onKeyDown={(e) => onPickerKeyDown("end", e)}

packages/web/src/views/Forms/EventForm/DateTimeSection/DateTimeSection.tsx

@@ -1,6 +1,6 @@
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
-import React, { FC, SetStateAction, useRef } from "react";
+import React, { FC, SetStateAction } from "react";
 import { Categories_Event, Schema_Event } from "@core/types/event.types";
 import { SelectOption } from "@web/common/types/component.types";
 import { AlignItems } from "@web/components/Flex/styled";