Sammy/t 367 on comment drawer update top right close icon to match figma (#195)

* style: add a story for right drawer topbar

* style: use same cross from Tb but rotate it

front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx

@@ -18,6 +18,7 @@ const StyledRightDrawerTopBar = styled.div`
 const StyledTopBarTitle = styled.div`
   align-items: center;
   font-weight: 500;
+  margin-right: ${(props) => props.theme.spacing(1)};
 `;
 
 export function RightDrawerTopBar({

front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton.tsx

@@ -1,5 +1,5 @@
-import { FaTimes } from 'react-icons/fa';
 import styled from '@emotion/styled';
+import { IconPlus } from '@tabler/icons-react';
 import { useRecoilState } from 'recoil';
 
 import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
@@ -13,7 +13,7 @@ const StyledButton = styled.button`
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 8px;
+  padding: 3px;
 
   border-radius: 4px;
 
@@ -21,6 +21,10 @@ const StyledButton = styled.button`
   &:hover {
     background: ${(props) => props.theme.clickableElementBackgroundHover};
   }
+  svg {
+    color: ${(props) => props.theme.text40};
+    transform: rotate(45deg);
+  }
 `;
 
 export function RightDrawerTopBarCloseButton() {
@@ -32,7 +36,7 @@ export function RightDrawerTopBarCloseButton() {
 
   return (
     <StyledButton onClick={handleButtonClick}>
-      <FaTimes />
+      <IconPlus size={16} />
     </StyledButton>
   );
 }

front/src/modules/ui/layout/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { RightDrawerTopBar } from '../RightDrawerTopBar';
+
+const meta: Meta<typeof RightDrawerTopBar> = {
+  title: 'Components/RightDrawer/RightDrawerTopBar',
+  component: RightDrawerTopBar,
+  argTypes: {
+    title: {
+      control: { type: 'text' },
+      defaultValue: 'My Title',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof RightDrawerTopBar>;
+
+export const Default: Story = {
+  render: getRenderWrapperForComponent(
+    <div style={{ width: '500px' }}>
+      <RightDrawerTopBar title={'Title'} />
+    </div>,
+  ),
+  parameters: {
+    msw: graphqlMocks,
+    actions: { argTypesRegex: '^on.*' },
+  },
+  args: {},
+};