♻️ Refactor: Update icon color handling

This removes the isFocused props, resolving devtools error

Author: tyler-dane

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/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 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/Sidebar.tsx

@@ -52,7 +52,7 @@ export const Sidebar: FC<Props & React.HTMLAttributes<HTMLDivElement>> = ({
           />
         )}
       </SidebarTabContainer>
-      {/* <SidebarIconRow /> */}
+      <SidebarIconRow />
     </SidebarContainer>
   );
 };

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} />
+          <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"} />
+          <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"} />
+          <CalendarIcon
+            color={
+              tab === "monthWidget"
+                ? theme.color.text.light
+                : theme.color.text.darkPlaceholder
+            }
+          />
         </TooltipWrapper>
       </LeftIconGroup>
     </IconRow>