🎨 Style: replace custom SVGs with phosphor icons (#138)

* deps(web): install @phosphor-icons/react

* feat(web): replace HamburgerMenu with List icon

* feat(web): replace MetaKey SVG with icon

* feat(web): replace sidebar toggle SVGs with icons

* style(web): use brightness transition filter

* feat(web): replace trash SVG with icon

* chore(web): delete MonthCalendarIcon

* chore(web): delete unused ToggleArrow

* chore(web): replace check SVG with icon

* chore(web): delete strawberry menu and trash SVGs

* chore: delete custom SVG component

* feat(web): replace repeat emoji with icon

packages/web/package.json

@@ -10,6 +10,7 @@
     "@compass/core": "1.0.0",
     "@floating-ui/react": "^0.19.2",
     "@hello-pangea/dnd": "^16.2.0",
+    "@phosphor-icons/react": "^2.1.7",
     "@popperjs/core": "^2.11.5",
     "@react-oauth/google": "^0.7.0",
     "@reduxjs/toolkit": "^1.6.1",

packages/web/src/components/CheckBox/CheckBox.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
-import { CheckIcon } from "@web/assets/svg";
 import { AlignItems, JustifyContent } from "@web/components/Flex/styled";
+import { Check } from "@phosphor-icons/react";
 
 import { Styled, StyledPlaceholder } from "./styled";
 
@@ -42,7 +42,7 @@ export const CheckBox: React.FC<Props> = ({
           onClick={onClick}
         />
       ) : (
-        <CheckIcon />
+        <Check />
       )}
     </Styled>
   );

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

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+import { ArrowLineLeft } from "@phosphor-icons/react";
+import { ColorNames } from "@core/types/color.types";
+import { getColor } from "@core/util/color.utils";
+import { ZIndex } from "@web/common/constants/web.constants";
+
+export const ArrowLineLeftIcon = styled(ArrowLineLeft)`
+  cursor: pointer;
+  color: ${getColor(ColorNames.GREY_6)};
+  position: absolute;
+  right: 7px;
+  bottom: 8px;
+  transition: filter 0.2s ease;
+  z-index: ${ZIndex.LAYER_1};
+
+  &:hover {
+    filter: brightness(130%);
+  }
+`;

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

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+import { ArrowLineRight } from "@phosphor-icons/react";
+import { ColorNames } from "@core/types/color.types";
+import { getColor } from "@core/util/color.utils";
+import { ZIndex } from "@web/common/constants/web.constants";
+
+export const ArrowLineRightIcon = styled(ArrowLineRight)`
+  cursor: pointer;
+  color: ${getColor(ColorNames.GREY_6)};
+  position: absolute;
+  right: 7px;
+  bottom: 8px;
+  transition: filter 0.2s ease;
+  z-index: ${ZIndex.LAYER_1};
+
+  &:hover {
+    filter: brightness(130%);
+  }
+`;

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

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+import { Command } from "@phosphor-icons/react";
+import { ColorNames } from "@core/types/color.types";
+import { getColor } from "@core/util/color.utils";
+
+export const StyledCommandIcon = styled(Command)`
+  color: ${getColor(ColorNames.GREY_5)};
+  transition: filter 0.2s ease;
+
+  &:hover {
+    filter: brightness(130%);
+  }
+`;

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

@@ -0,0 +1,12 @@
+import React from "react";
+
+import { TrashIcon } from "./Trash";
+
+interface Props {
+  onDelete: () => void;
+  title: string;
+}
+
+export const DeleteIcon: React.FC<Props> = ({ onDelete, title }) => {
+  return <TrashIcon onClick={onDelete} role="button" name={title} size={27} />;
+};

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

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+import { List } from "@phosphor-icons/react";
+import { ColorNames } from "@core/types/color.types";
+import { getColor } from "@core/util/color.utils";
+
+export const StyledListIcon = styled(List)`
+  color: ${getColor(ColorNames.GREY_5)};
+  transition: filter 0.2s ease;
+
+  &:hover {
+    cursor: pointer;
+    filter: brightness(130%);
+  }
+`;

packages/web/src/components/Icons/MetaKeyIcon.tsx → packages/web/src/components/Icons/MetaKey.tsx

@@ -1,12 +1,10 @@
 import React from "react";
-import { getColor } from "@core/util/color.utils";
-import { ColorNames } from "@core/types/color.types";
 import { useAppDispatch, useAppSelector } from "@web/store/store.hooks";
 import { settingsSlice } from "@web/ducks/settings/slices/settings.slice";
 import { selectIsCmdPaletteOpen } from "@web/ducks/settings/selectors/settings.selectors";
 
-import { StyledMetaKeyIcon } from "../Svg";
 import { TooltipWrapper } from "../Tooltip/TooltipWrapper";
+import { StyledCommandIcon } from "./Command";
 
 export const MetaKeyIcon = () => {
   const dispatch = useAppDispatch();
@@ -15,7 +13,8 @@ export const MetaKeyIcon = () => {
 
   return (
     <TooltipWrapper
-      description="Open command palette (Cmd + K)"
+      description="Open command palette"
+      shortcut="Cmd + K"
       onClick={() => {
         if (isCmdPaletteOpen) {
           dispatch(settingsSlice.actions.closeCmdPalette());
@@ -24,7 +23,7 @@ export const MetaKeyIcon = () => {
         }
       }}
     >
-      <StyledMetaKeyIcon hovercolor={getColor(ColorNames.WHITE_1)} />
+      <StyledCommandIcon size={25} />
     </TooltipWrapper>
   );
 };

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

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+import { Repeat } from "@phosphor-icons/react";
+
+export const RepeatIcon = styled(Repeat)`
+  transition: filter 0.2s ease;
+
+  &:hover {
+    filter: brightness(130%);
+  }
+`;

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

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+import { Trash } from "@phosphor-icons/react";
+
+export const TrashIcon = styled(Trash)`
+  transition: filter 0.2s ease;
+  &:hover {
+    cursor: pointer;
+    filter: brightness(50%);
+  }
+`;

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

@@ -17,7 +17,7 @@ import { settingsSlice } from "@web/ducks/settings/slices/settings.slice";
 import { selectIsRightSidebarOpen } from "@web/ducks/settings/selectors/settings.selectors";
 import { Util_Scroll } from "@web/views/Calendar/hooks/grid/useScroll";
 import { TooltipWrapper } from "@web/components/Tooltip/TooltipWrapper";
-import { HamburgerIcon } from "@web/components/Icons/HamburgerIcon";
+import { StyledListIcon } from "@web/components/Icons/List";
 
 import {
   StyledHeaderRow,
@@ -135,7 +135,7 @@ export const Header: FC<Props> = ({
             }}
             shortcut="]"
           >
-            <HamburgerIcon />
+            <StyledListIcon size={28} />
           </TooltipWrapper>
         </StyledRightGroup>
       </StyledHeaderRow>

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

@@ -23,7 +23,7 @@ export const LeftSidebar: FC<Props & React.HTMLAttributes<HTMLDivElement>> = (
   const weekStart = props.weekProps.component.startOfView;
   const weekEnd = props.weekProps.component.endOfView;
 
-  const SidebarToggleIcon = getSidebarToggleIcon(props.prefs.isLeftSidebarOpen);
+  const ToggleSidebarIcon = getSidebarToggleIcon(props.prefs.isLeftSidebarOpen);
 
   return (
     <Styled
@@ -38,9 +38,7 @@ export const LeftSidebar: FC<Props & React.HTMLAttributes<HTMLDivElement>> = (
         onClick={() => prefs.toggleSidebar("left")}
         shortcut="["
       >
-        <div role="button">
-          <SidebarToggleIcon cursor="pointer" />
-        </div>
+        <ToggleSidebarIcon size={28} />
       </TooltipWrapper>
 
       <SomedaySection