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
This commit is contained in:
Sammy Teillet
2023-06-05 17:46:28 +02:00
committed by GitHub
parent 236437e4ff
commit 4cde1d68e8
3 changed files with 41 additions and 3 deletions

View File

@ -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>
);
}