✨ Make all icons transparent

Fixes #592

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 { useCardStyles } from '../../../useCardStyles';
 
 interface AddElementActionProps {
   type: 'action-icon' | 'button';
@@ -9,6 +10,7 @@ interface AddElementActionProps {
 
 export const AddElementAction = ({ type }: AddElementActionProps) => {
   const { t } = useTranslation('layout/element-selector/selector');
+  const { classes } = useCardStyles(false);
 
   switch (type) {
     case 'button':
@@ -18,6 +20,7 @@ export const AddElementAction = ({ type }: AddElementActionProps) => {
             radius="md"
             variant="default"
             style={{ height: 43 }}
+            className={classes.card}
             onClick={() =>
               openContextModal({
                 modal: 'selectElement',

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

@@ -11,6 +11,7 @@ import { useScreenSmallerThan } from '../../../../../hooks/useScreenSmallerThan'
 import { useEditModeStore } from '../../../../Dashboard/Views/useEditModeStore';
 import { AddElementAction } from '../AddElementAction/AddElementAction';
 import { useNamedWrapperColumnCount } from '../../../../Dashboard/Wrappers/gridstack/store';
+import { useCardStyles } from '../../../useCardStyles';
 
 export const ToggleEditModeAction = () => {
   const { enabled, toggleEditMode } = useEditModeStore();
@@ -20,6 +21,7 @@ export const ToggleEditModeAction = () => {
 
   const smallerThanSm = useScreenSmallerThan('sm');
   const { config } = useConfigContext();
+  const { classes } = useCardStyles(false);
 
   const toggleButtonClicked = () => {
     toggleEditMode();
@@ -75,6 +77,7 @@ export const ToggleEditModeAction = () => {
   const ToggleButtonDesktop = () => (
     <Tooltip label={enabled ? t('button.enabled') : t('button.disabled')}>
       <Button
+        className={classes.card}
         onClick={() => toggleButtonClicked()}
         radius="md"
         variant="default"
@@ -87,6 +90,7 @@ export const ToggleEditModeAction = () => {
 
   const ToggleActionIconMobile = () => (
     <ActionIcon
+      className={classes.card}
       onClick={() => toggleButtonClicked()}
       variant="default"
       radius="md"