styled the default button and the mobile dropdown

This commit is contained in:
t1enne
2022-10-22 22:36:32 +02:00
parent b7795f275c
commit bddb895189
4 changed files with 42 additions and 34 deletions

View File

@ -7,8 +7,9 @@
display: flex;
align-items: center;
height: 100%;
padding-bottom: 16px; // to match antd nav margin-bottom
button {
color: currentColor;
height: 100%;
}
}
@ -19,7 +20,4 @@
.menu {
color: currentColor;
// border: none;
// background-color: transparent;
// margin: 8px;
}

View File

@ -1,6 +1,6 @@
import { FC } from 'react';
import { Button, Dropdown, Menu, Space } from 'antd';
import { DownOutlined, StarOutlined } from '@ant-design/icons';
import { Button, Dropdown, Menu } from 'antd';
import { DashOutlined, EllipsisOutlined } from '@ant-design/icons';
import styles from './ActionButtonMenu.module.scss';
import { ExternalAction } from '../../../interfaces/external-action';
@ -31,14 +31,14 @@ export const ActionButtonMenu: FC<ActionButtonMenuProps> = ({
const menu = <Menu items={items} onClick={onMenuClick} />;
return (
<Dropdown overlay={menu} trigger={['click']} className={styles.menu}>
<Dropdown overlay={menu} placement="bottomRight" trigger={['click']} className={styles.menu}>
<div className={styles.buttonWrap}>
<Button type="default" onClick={e => e.preventDefault()}>
<Space>
<StarOutlined />
<DownOutlined />
</Space>
</Button>
<Button
type="default"
onClick={e => e.preventDefault()}
size="large"
icon={<EllipsisOutlined size={6} style={{ rotate: '90deg' }} />}
/>
</div>
</Dropdown>
);