Undo ugly button styling

src/components/layout/header/Actions/AddElementAction/AddElementAction.tsx

@@ -2,7 +2,6 @@ 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';
@@ -10,16 +9,14 @@ 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="white"
             radius="md"
-            color={secondaryColor}
+            variant="default"
             style={{ height: 43 }}
             onClick={() =>
               openContextModal({

src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx

@@ -11,7 +11,6 @@ import { useScreenSmallerThan } from '../../../../../hooks/useScreenSmallerThan'
 
 import { useEditModeStore } from '../../../../Dashboard/Views/useEditModeStore';
 import { AddElementAction } from '../AddElementAction/AddElementAction';
-import { useColorTheme } from '../../../../../tools/color';
 
 export const ToggleEditModeAction = () => {
   const { enabled, toggleEditMode } = useEditModeStore();
@@ -56,15 +55,13 @@ export const ToggleEditModeAction = () => {
       hideNotification('toggle-edit-mode');
     }
   };
-  const { primaryColor, secondaryColor } = useColorTheme();
 
   const ToggleButtonDesktop = () => (
     <Tooltip label={enabled ? t('button.enabled') : t('button.disabled')}>
       <Button
         onClick={() => toggleButtonClicked()}
-        variant="white"
         radius="md"
-        color={secondaryColor}
+        variant="default"
         style={{ height: 43 }}
       >
         {enabled ? <IconEditCircleOff /> : <IconEditCircle />}

src/components/layout/header/SettingsMenu.tsx

@@ -2,7 +2,6 @@ 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';
@@ -11,13 +10,12 @@ 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>
-          <Button variant="white" radius="md" color={secondaryColor} style={{ height: 43 }}>
+          <Button variant="default" radius="md" style={{ height: 43 }}>
             <IconMenu2 />
           </Button>
         </Menu.Target>