💄(app-impress) re-design icon close panel

We deleted the menu, so we have to retouch
a bit the icon close panel to fit the new design.
We change the icon to have something more
intuitive by using material icons.
This commit is contained in:
Anthony LC
2024-05-14 10:07:11 +02:00
committed by Anthony LC
parent 944385c83f
commit c0d919ae52
2 changed files with 13 additions and 21 deletions

View File

@@ -1,14 +0,0 @@
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle
cx="12"
cy="12"
r="11.5"
transform="rotate(-180 12 12)"
fill="white"
stroke="currentColor"
/>
<path
d="M14.1683 16.232C14.4803 15.92 14.4803 15.416 14.1683 15.104L11.0643 12L14.1683 8.896C14.4803 8.584 14.4803 8.08 14.1683 7.768C13.8563 7.456 13.3523 7.456 13.0403 7.768L9.36834 11.44C9.05634 11.752 9.05634 12.256 9.36834 12.568L13.0403 16.24C13.3443 16.544 13.8563 16.544 14.1683 16.232Z"
fill="currentColor"
/>
</svg>

Before

Width:  |  Height:  |  Size: 542 B

View File

@@ -4,8 +4,6 @@ import { useTranslation } from 'react-i18next';
import { Box, BoxButton, Text } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
import IconOpenClose from '../assets/icon-open-close.svg';
import { PadList } from './PadList';
import { PanelActions } from './PanelActions';
@@ -38,20 +36,28 @@ export const Panel = () => {
{...closedOverridingStyles}
>
<BoxButton
className="material-icons"
aria-label={
isOpen ? t('Close the pads panel') : t('Open the pads panel')
}
$background="white"
$color={colorsTokens()['primary-600']}
$radius="100%"
$padding="0.3rem"
$position="absolute"
onClick={() => setIsOpen(!isOpen)}
$css={`
position: absolute;
right: -1.2rem;
top: 1.03rem;
right: ${isOpen ? '-1.3' : '-2.8'}rem;
top: ${isOpen ? '0.7' : '0.25'}rem;
transform: rotate(${isOpen ? '0' : '180'}deg);
transition: ${transition};
font-size: 1.8rem;
border: 1px solid #fafafa;
box-shadow: ${isOpen ? '1px 1px' : '-1px -1px'} 3px #dfdfdf;
z-index: 1;
`}
onClick={() => setIsOpen(!isOpen)}
>
<IconOpenClose width={24} height={24} />
menu_open
</BoxButton>
<Box
$css={`