✨ Feat: Add IconProvider for consistent icon sizing

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/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

@@ -59,7 +59,7 @@ export const Header: FC<Props> = ({
           onClick={() => dispatch(viewSlice.actions.toggleSidebar())}
           shortcut="["
         >
-          <SidebarIcon size={25} isFocused={isSidebarOpen} />
+          <SidebarIcon isFocused={isSidebarOpen} />
         </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

@@ -32,14 +32,14 @@ export const SidebarIconRow = () => {
           shortcut="CMD + K"
           onClick={toggleCmdPalette}
         >
-          <CommandIcon isFocused={isCmdPaletteOpen} size={25} />
+          <CommandIcon isFocused={isCmdPaletteOpen} />
         </TooltipWrapper>
         <TooltipWrapper
           description="Open tasks"
           shortcut="SHIFT + 1"
           onClick={() => dispatch(viewSlice.actions.updateSidebarTab("tasks"))}
         >
-          <TodoIcon isFocused={tab === "tasks"} size={25} />
+          <TodoIcon isFocused={tab === "tasks"} />
         </TooltipWrapper>
         <TooltipWrapper
           description="Open month"
@@ -48,7 +48,7 @@ export const SidebarIconRow = () => {
             dispatch(viewSlice.actions.updateSidebarTab("monthWidget"))
           }
         >
-          <CalendarIcon isFocused={tab === "monthWidget"} size={25} />
+          <CalendarIcon isFocused={tab === "monthWidget"} />
         </TooltipWrapper>
       </LeftIconGroup>
     </IconRow>