From 4cde1d68e840dae5c767676d64816f68e7666c42 Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Mon, 5 Jun 2023 17:46:28 +0200
Subject: [PATCH] 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
---
 .../components/RightDrawerTopBar.tsx          |  1 +
 .../RightDrawerTopBarCloseButton.tsx          | 10 ++++--
 .../__stories__/RightDrawerTopBar.stories.tsx | 33 +++++++++++++++++++
 3 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 front/src/modules/ui/layout/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx

diff --git a/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx b/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx
index 3c0c87dbb..ca13d5a05 100644
--- a/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx
+++ b/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({
diff --git a/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton.tsx b/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton.tsx
index 38dd972f4..8d680bc1d 100644
--- a/front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton.tsx
+++ b/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>
   );
 }
diff --git a/front/src/modules/ui/layout/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx b/front/src/modules/ui/layout/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx
new file mode 100644
index 000000000..d2506da7f
--- /dev/null
+++ b/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: {},
+};