✨ 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"

src/components/layout/header/Search.tsx

@@ -8,6 +8,7 @@ import {
   Menu,
   Popover,
   ScrollArea,
+  TextInput,
   Tooltip,
 } from '@mantine/core';
 import { useDebouncedValue, useHotkeys } from '@mantine/hooks';
@@ -22,6 +23,7 @@ import { searchUrls } from '../../Settings/Common/SearchEngine/SearchEngineSelec
 import { useConfigContext } from '../../../config/provider';
 import { OverseerrMediaDisplay } from '../../../modules/common';
 import { IModule } from '../../../modules/ModuleTypes';
+import { useCardStyles } from '../useCardStyles';
 
 export const SearchModule: IModule = {
   title: 'Search',
@@ -54,6 +56,7 @@ export function Search() {
   const { config } = useConfigContext();
   const [searchQuery, setSearchQuery] = useState('');
   const [debounced, cancel] = useDebouncedValue(searchQuery, 250);
+  const { classes: cardClasses } = useCardStyles(false);
 
   const isOverseerrEnabled = config?.apps.some(
     (x) => x.integration.type === 'overseerr' || x.integration.type === 'jellyseerr'
@@ -197,7 +200,10 @@ export function Search() {
                 }
               }
             }}
-            radius="md"
+            classNames={{
+              input: cardClasses.card,
+            }}
+            radius="lg"
             size="md"
           />
         </Popover.Target>

src/components/layout/header/SettingsMenu.tsx

@@ -4,18 +4,20 @@ import { IconInfoCircle, IconMenu2, IconSettings } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
 import { AboutModal } from '../../About/AboutModal';
 import { SettingsDrawer } from '../../Settings/SettingsDrawer';
+import { useCardStyles } from '../useCardStyles';
 import { ColorSchemeSwitch } from './SettingsMenu/ColorSchemeSwitch';
 
 export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string }) {
   const [drawerOpened, drawer] = useDisclosure(false);
   const { t } = useTranslation('common');
   const [aboutModalOpened, aboutModal] = useDisclosure(false);
+  const { classes } = useCardStyles(false);
 
   return (
     <>
       <Menu width={250}>
         <Menu.Target>
-          <Button variant="default" radius="md" style={{ height: 43 }}>
+          <Button className={classes.card} variant="default" radius="md" style={{ height: 43 }}>
             <IconMenu2 />
           </Button>
         </Menu.Target>

src/modules/Docker/DockerModule.tsx

@@ -5,6 +5,7 @@ import axios from 'axios';
 import Docker from 'dockerode';
 import { useTranslation } from 'next-i18next';
 import { useEffect, useState } from 'react';
+import { useCardStyles } from '../../components/layout/useCardStyles';
 import { useConfigContext } from '../../config/provider';
 
 import ContainerActionBar from './ContainerActionBar';
@@ -15,6 +16,7 @@ export default function DockerMenuButton(props: any) {
   const [containers, setContainers] = useState<Docker.ContainerInfo[]>([]);
   const [selection, setSelection] = useState<Docker.ContainerInfo[]>([]);
   const { config } = useConfigContext();
+  const { classes } = useCardStyles(false);
 
   const dockerEnabled = config?.settings.customization.layout.enabledDocker || false;
 
@@ -69,6 +71,7 @@ export default function DockerMenuButton(props: any) {
       <Tooltip label={t('actionIcon.tooltip')}>
         <ActionIcon
           variant="default"
+          className={classes.card}
           radius="md"
           size="xl"
           color="blue"