From 50bcd292717d8d25d160fbd48227b1ba20366a57 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Fri, 6 Jan 2023 01:07:09 +0900
Subject: [PATCH] Buttons styling

---
 .../header/Actions/AddElementAction/AddElementAction.tsx  | 6 ++++--
 src/components/layout/header/SettingsMenu.tsx             | 8 +++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/layout/header/Actions/AddElementAction/AddElementAction.tsx b/src/components/layout/header/Actions/AddElementAction/AddElementAction.tsx
index 3c64032e2..b2b7af4c2 100644
--- a/src/components/layout/header/Actions/AddElementAction/AddElementAction.tsx
+++ b/src/components/layout/header/Actions/AddElementAction/AddElementAction.tsx
@@ -2,6 +2,7 @@ import { ActionIcon, Button, Tooltip } from '@mantine/core';
 import { openContextModal } from '@mantine/modals';
 import { IconApps } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
+import { useColorTheme } from '../../../../../tools/color';
 
 interface AddElementActionProps {
   type: 'action-icon' | 'button';
@@ -9,15 +10,16 @@ interface AddElementActionProps {
 
 export const AddElementAction = ({ type }: AddElementActionProps) => {
   const { t } = useTranslation('layout/element-selector/selector');
+  const { primaryColor, secondaryColor } = useColorTheme();
 
   switch (type) {
     case 'button':
       return (
         <Tooltip label={t('actionIcon.tooltip')} withinPortal withArrow>
           <Button
-            variant="default"
+            variant="white"
             radius="md"
-            color="blue"
+            color={secondaryColor}
             style={{ height: 43 }}
             onClick={() =>
               openContextModal({
diff --git a/src/components/layout/header/SettingsMenu.tsx b/src/components/layout/header/SettingsMenu.tsx
index 8452b73f7..c6ecb8799 100644
--- a/src/components/layout/header/SettingsMenu.tsx
+++ b/src/components/layout/header/SettingsMenu.tsx
@@ -1,7 +1,8 @@
-import { ActionIcon, Badge, Menu } from '@mantine/core';
+import { Badge, Button, Menu } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { IconInfoCircle, IconMenu2, IconSettings } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
+import { useColorTheme } from '../../../tools/color';
 import { AboutModal } from '../../About/AboutModal';
 import { SettingsDrawer } from '../../Settings/SettingsDrawer';
 import { ColorSchemeSwitch } from './SettingsMenu/ColorSchemeSwitch';
@@ -10,14 +11,15 @@ export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: str
   const [drawerOpened, drawer] = useDisclosure(false);
   const { t } = useTranslation('common');
   const [aboutModalOpened, aboutModal] = useDisclosure(false);
+  const { primaryColor, secondaryColor } = useColorTheme();
 
   return (
     <>
       <Menu width={250}>
         <Menu.Target>
-          <ActionIcon variant="default" radius="md" size="xl" color="blue">
+          <Button variant="white" radius="md" color={secondaryColor} style={{ height: 43 }}>
             <IconMenu2 />
-          </ActionIcon>
+          </Button>
         </Menu.Target>
         <Menu.Dropdown>
           <ColorSchemeSwitch />