✨ Feat(web): better UI for migrate event buttons (#574)

* feat(web): switch migrate buttons to phosphor icons, capitalize 'Ctrl' key for better UI

* fix(web): add margin between icons and title field

things were looking a little too tight after we changed migrate buttons icons to phosphoricons

* feat(web): add ids to migrate buttons

helps with making sure the tests pass since some tests depends on querying the id of the element

* feat(web): update grid event form's move to sidebar button icon to be consistent with migrate buttons in someday event form

* 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,5 +1,6 @@
 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";
@@ -11,6 +12,11 @@ const StyledMigrateBackwardButton = styled.div`
   }
 `;
 
+const StyledArrowLeft = styled(ArrowLeft)`
+  width: 15px;
+  height: 15px;
+`;
+
 export const MigrateBackwardButton = ({
   onClick,
   tooltipText = "Migrate Backward",
@@ -31,7 +37,7 @@ export const MigrateBackwardButton = ({
         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,5 +1,6 @@
 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";
@@ -11,6 +12,11 @@ const StyledMigrateForwardButton = styled.div`
   }
 `;
 
+const StyledArrowRight = styled(ArrowRight)`
+  width: 15px;
+  height: 15px;
+`;
+
 export const MigrateForwardButton = ({
   onClick,
   tooltipText = "Migrate Forward",
@@ -31,7 +37,7 @@ export const MigrateForwardButton = ({
         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,25 +1,46 @@
 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 { TooltipWrapper } from "@web/components/Tooltip/TooltipWrapper";
-import { StyledMigrateArrowInForm } from "@web/views/Calendar/components/Sidebar/SomedayTab/SomedayEvents/SomedayEventContainer/styled";
+import TooltipIconButton from "@web/components/TooltipIconButton/TooltipIconButton";
 
-export const MoveToSidebarButton = ({ onClick }: { onClick: () => void }) => {
-  const getShortcut = () => {
-    return (
-      <Text size="s" style={{ display: "flex", alignItems: "center" }}>
-        {getMetaKey()} +{" SHIFT "} + {","}
-      </Text>
-    );
-  };
+const StyledMoveToSidebarButton = styled.div`
+  font-size: 25px;
+  &:hover {
+    cursor: pointer;
+  }
+`;
 
+const StyledArrowLeft = styled(ArrowLeft)`
+  width: 15px;
+  height: 15px;
+`;
+
+export const MoveToSidebarButton = ({
+  onClick,
+  tooltipText = "Move To Sidebar",
+}: {
+  onClick: () => void;
+  tooltipText?: string;
+}) => {
   return (
-    <TooltipWrapper
-      onClick={onClick}
-      description="Move to sidebar"
-      shortcut={getShortcut()}
-    >
-      <StyledMigrateArrowInForm role="button">{"<"}</StyledMigrateArrowInForm>
-    </TooltipWrapper>
+    <TooltipIconButton
+      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()} + <StyledArrowLeft />
+          </Text>
+        ),
+      }}
+    />
   );
 };

packages/web/src/views/Forms/EventForm/styled.ts

@@ -42,6 +42,7 @@ export const StyledIconRow = styled(Flex)`
   align-items: center;
   gap: 30px;
   justify-content: end;
+  margin-bottom: 10px;
 `;
 
 export const StyledSubmitButton = styled(PriorityButton)`