Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-09 23:15:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

Buttons styling

Browse Source
This commit is contained in:
ajnart
2023-01-06 01:07:09 +09:00
parent e2da386fda
commit 50bcd29271
2 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/layout/header/Actions/AddElementAction/AddElementAction.tsx
View File

@@ -2,6 +2,7 @@ import { ActionIcon, Button, Tooltip } from '@mantine/core';
import { openContextModal } from '@mantine/modals'; import { openContextModal } from '@mantine/modals';
import { IconApps } from '@tabler/icons'; import { IconApps } from '@tabler/icons';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import { useColorTheme } from '../../../../../tools/color';
interface AddElementActionProps { interface AddElementActionProps {
type: 'action-icon' | 'button'; type: 'action-icon' | 'button';
@@ -9,15 +10,16 @@ interface AddElementActionProps {
export const AddElementAction = ({ type }: AddElementActionProps) => { export const AddElementAction = ({ type }: AddElementActionProps) => {
const { t } = useTranslation('layout/element-selector/selector'); const { t } = useTranslation('layout/element-selector/selector');
const { primaryColor, secondaryColor } = useColorTheme();
switch (type) { switch (type) {
case 'button': case 'button':
return ( return (
<Tooltip label={t('actionIcon.tooltip')} withinPortal withArrow> <Tooltip label={t('actionIcon.tooltip')} withinPortal withArrow>
<Button <Button
variant="default" variant="white"
radius="md" radius="md"
color="blue" color={secondaryColor}
style={{ height: 43 }} style={{ height: 43 }}
onClick={() => onClick={() =>
openContextModal({ openContextModal({

8
src/components/layout/header/SettingsMenu.tsx
View File

@@ -1,7 +1,8 @@
import { ActionIcon, Badge, Menu } from '@mantine/core'; import { Badge, Button, Menu } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks'; import { useDisclosure } from '@mantine/hooks';
import { IconInfoCircle, IconMenu2, IconSettings } from '@tabler/icons'; import { IconInfoCircle, IconMenu2, IconSettings } from '@tabler/icons';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import { useColorTheme } from '../../../tools/color';
import { AboutModal } from '../../About/AboutModal'; import { AboutModal } from '../../About/AboutModal';
import { SettingsDrawer } from '../../Settings/SettingsDrawer'; import { SettingsDrawer } from '../../Settings/SettingsDrawer';
import { ColorSchemeSwitch } from './SettingsMenu/ColorSchemeSwitch'; import { ColorSchemeSwitch } from './SettingsMenu/ColorSchemeSwitch';
@@ -10,14 +11,15 @@ export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: str
const [drawerOpened, drawer] = useDisclosure(false); const [drawerOpened, drawer] = useDisclosure(false);
const { t } = useTranslation('common'); const { t } = useTranslation('common');
const [aboutModalOpened, aboutModal] = useDisclosure(false); const [aboutModalOpened, aboutModal] = useDisclosure(false);
const { primaryColor, secondaryColor } = useColorTheme();
return ( return (
<> <>
<Menu width={250}> <Menu width={250}>
<Menu.Target> <Menu.Target>
<ActionIcon variant="default" radius="md" size="xl" color="blue"> <Button variant="white" radius="md" color={secondaryColor} style={{ height: 43 }}>
<IconMenu2 /> <IconMenu2 />
</ActionIcon> </Button>
</Menu.Target> </Menu.Target>
<Menu.Dropdown> <Menu.Dropdown>
<ColorSchemeSwitch /> <ColorSchemeSwitch />