pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adjust context menu styles

Browse source
This commit is contained in:
jeffvli 2023-01-30 01:04:38 -08:00
parent 59f4f43e84
commit 5e693313d8
2 changed files with 21 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/renderer/components/context-menu/index.tsx
View file

@ -1,8 +1,7 @@
import { forwardRef, ReactNode, Ref } from 'react'; import { forwardRef, ReactNode, Ref } from 'react';
import { Portal } from '@mantine/core'; import { Portal, UnstyledButton } from '@mantine/core';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import styled from 'styled-components'; import styled from 'styled-components';
import { _Button } from '/@/renderer/components/button';
interface ContextMenuProps { interface ContextMenuProps {
children: ReactNode; children: ReactNode;
@ -23,17 +22,27 @@ const ContextMenuContainer = styled(motion.div)<Omit<ContextMenuProps, 'children
box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 40%); box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 40%);
`; `;
export const ContextMenuButton = styled(_Button)` export const ContextMenuButton = styled(UnstyledButton)`
padding: 0.5rem 1.5rem; padding: 1rem 1.5rem;
color: var(--dropdown-menu-fg);
font-weight: 500;
font-family: var(--content-font-family);
text-align: left;
background: var(--dropdown-menu-bg); background: var(--dropdown-menu-bg);
border: none;
cursor: default; cursor: default;
& .mantine-Button-inner { & .mantine-Button-inner {
justify-content: flex-start; justify-content: flex-start;
} }
&:hover {
background: var(--dropdown-menu-bg-hover);
}
&:disabled { &:disabled {
background: transparent; background: transparent;
opacity: 0.6;
} }
`; `;

10
src/renderer/features/context-menu/context-menu-provider.tsx
View file

@ -350,13 +350,19 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
return ( return (
<Fragment key={`context-menu-${item.id}`}> <Fragment key={`context-menu-${item.id}`}>
<ContextMenuButton <ContextMenuButton
as="button"
disabled={item.disabled} disabled={item.disabled}
variant="default"
onClick={contextMenuItems[item.id as keyof typeof contextMenuItems].onClick} onClick={contextMenuItems[item.id as keyof typeof contextMenuItems].onClick}
> >
{contextMenuItems[item.id as keyof typeof contextMenuItems].label} {contextMenuItems[item.id as keyof typeof contextMenuItems].label}
</ContextMenuButton> </ContextMenuButton>
{item.divider && <Divider key={`context-menu-divider-${item.id}`} />} {item.divider && (
<Divider
key={`context-menu-divider-${item.id}`}
color="rgb(62, 62, 62)"
size="sm"
/>
)}
</Fragment> </Fragment>
); );
})} })}