feat(web): change icons for event migration buttons

resolves feedback for #574 (comment)

Author: that-one-arab

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

@@ -1,9 +1,22 @@
 import React from "react";
+import styled from "styled-components";
 import { ArrowLeft } from "@phosphor-icons/react";
 import { getMetaKey } from "@web/common/utils/shortcut.util";
 import { Text } from "@web/components/Text";
 import TooltipIconButton from "@web/components/TooltipIconButton/TooltipIconButton";
 
+const StyledMigrateBackwardButton = styled.div`
+  font-size: 25px;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+const StyledArrowLeft = styled(ArrowLeft)`
+  width: 15px;
+  height: 15px;
+`;
+
 export const MigrateBackwardButton = ({
   onClick,
   tooltipText = "Migrate Backward",
@@ -13,14 +26,18 @@ export const MigrateBackwardButton = ({
 }) => {
   return (
     <TooltipIconButton
-      icon={<ArrowLeft id="migrate-backward-button" />}
+      component={
+        <StyledMigrateBackwardButton id="migrate-backward-button" role="button">
+          {"<"}
+        </StyledMigrateBackwardButton>
+      }
       buttonProps={{ "aria-label": tooltipText }}
       tooltipProps={{
         description: tooltipText,
         onClick,
         shortcut: (
           <Text size="s" style={{ display: "flex", alignItems: "center" }}>
-            CTRL + {getMetaKey()} + Left
+            CTRL + {getMetaKey()} + <StyledArrowLeft />
           </Text>
         ),
       }}

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

@@ -1,9 +1,22 @@
 import React from "react";
+import styled from "styled-components";
 import { ArrowRight } from "@phosphor-icons/react";
 import { getMetaKey } from "@web/common/utils/shortcut.util";
 import { Text } from "@web/components/Text";
 import TooltipIconButton from "@web/components/TooltipIconButton/TooltipIconButton";
 
+const StyledMigrateForwardButton = styled.div`
+  font-size: 25px;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+const StyledArrowRight = styled(ArrowRight)`
+  width: 15px;
+  height: 15px;
+`;
+
 export const MigrateForwardButton = ({
   onClick,
   tooltipText = "Migrate Forward",
@@ -13,14 +26,18 @@ export const MigrateForwardButton = ({
 }) => {
   return (
     <TooltipIconButton
-      icon={<ArrowRight id="migrate-forward-button" />}
+      component={
+        <StyledMigrateForwardButton id="migrate-forward-button" role="button">
+          {">"}
+        </StyledMigrateForwardButton>
+      }
       buttonProps={{ "aria-label": tooltipText }}
       tooltipProps={{
         description: tooltipText,
         onClick,
         shortcut: (
           <Text size="s" style={{ display: "flex", alignItems: "center" }}>
-            CTRL + {getMetaKey()} + Right
+            CTRL + {getMetaKey()} + <StyledArrowRight />
           </Text>
         ),
       }}

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

@@ -1,28 +1,43 @@
 import React from "react";
+import styled from "styled-components";
 import { ArrowLeft } from "@phosphor-icons/react";
 import { getMetaKey } from "@web/common/utils/shortcut.util";
 import { Text } from "@web/components/Text";
 import TooltipIconButton from "@web/components/TooltipIconButton/TooltipIconButton";
 
+const StyledMoveToSidebarButton = styled.div`
+  font-size: 25px;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+const StyledArrowLeft = styled(ArrowLeft)`
+  width: 15px;
+  height: 15px;
+`;
+
 export const MoveToSidebarButton = ({
   onClick,
-  tooltipText = "Migrate Backward",
-  size = undefined,
+  tooltipText = "Move To Sidebar",
 }: {
   onClick: () => void;
-  tooltipText: string;
-  size?: number;
+  tooltipText?: string;
 }) => {
   return (
     <TooltipIconButton
-      icon={<ArrowLeft id="migrate-backward-button" size={size} />}
+      component={
+        <StyledMoveToSidebarButton id="migrate-backward-button" role="button">
+          {"<"}
+        </StyledMoveToSidebarButton>
+      }
       buttonProps={{ "aria-label": tooltipText }}
       tooltipProps={{
         description: tooltipText,
         onClick,
         shortcut: (
           <Text size="s" style={{ display: "flex", alignItems: "center" }}>
-            CTRL + {getMetaKey()} + Left
+            CTRL + {getMetaKey()} + <StyledArrowLeft />
           </Text>
         ),
       }}