💄(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:
@@ -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 |
@@ -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={`
|
||||
|
||||
Reference in New Issue
Block a user