feat: improve design layout selector

src/components/Settings/Customization/Layout/LayoutSelector.tsx

@@ -1,4 +1,5 @@
 import {
+  ActionIcon,
   Box,
   Center,
   Checkbox,
@@ -8,6 +9,7 @@ import {
   Stack,
   Text,
   Title,
+  useMantineTheme,
 } from '@mantine/core';
 import { IconBrandDocker, IconLayout, IconSearch } from '@tabler/icons';
 import { ChangeEvent, Dispatch, SetStateAction, useState } from 'react';
@@ -33,6 +35,8 @@ export const LayoutSelector = ({ defaultLayout }: LayoutSelectorProps) => {
   const [ping, setPing] = useState(defaultLayout?.enabledPing ?? false);
   const [searchBar, setSearchBar] = useState(defaultLayout?.enabledSearchbar ?? false);
 
+  const { colors, colorScheme } = useMantineTheme();
+
   if (!configName) return null;
 
   const handleChange = (
@@ -43,7 +47,7 @@ export const LayoutSelector = ({ defaultLayout }: LayoutSelectorProps) => {
     const value = event.target.checked;
     setState(value);
     updateConfig(configName, (prev) => {
-      const layout = prev.settings.customization.layout;
+      const { layout } = prev.settings.customization;
 
       layout[key] = value;
 
@@ -73,21 +77,21 @@ export const LayoutSelector = ({ defaultLayout }: LayoutSelectorProps) => {
           turned on or off
         </Text>
 
-        <Paper px="xs" py={2} withBorder>
+        <Paper px="xs" py={4} withBorder>
           <Group position="apart">
             <Logo size="xs" />
-            <Group spacing={4}>
+            <Group spacing={5}>
               {searchBar ? (
-                <Paper withBorder p={2} w={60}>
+                <Paper
-                  <Group spacing={2} align="center">
+                  style={{
-                    <IconSearch size={8} />
+                    height: 10,
-                    <Text size={8} color="dimmed">
+                    backgroundColor: colorScheme === 'dark' ? colors.gray[8] : colors.gray[1],
-                      Search
+                  }}
-                    </Text>
+                  p={2}
-                  </Group>
+                  w={60}
-                </Paper>
+                />
               ) : null}
-              {docker ? <IconBrandDocker size={18} color="#0db7ed" /> : null}
+              {docker ? <ActionIcon size={10} disabled /> : null}
             </Group>
           </Group>
         </Paper>

src/components/layout/Layout.tsx

@@ -3,7 +3,7 @@ import { useConfigContext } from '../../config/provider';
 import { Background } from './Background';
 import { Footer } from './Footer';
 import { Header } from './Header/Header';
-import { Head } from './Head/Head';
+import { Head } from './Header/Meta/Head';
 
 const useStyles = createStyles(() => ({}));
 

src/components/layout/Logo.tsx

@@ -14,7 +14,7 @@ export function Logo({ size = 'md', withoutText = false }: LogoProps) {
   return (
     <Group spacing={size === 'md' ? 'xs' : 4} noWrap>
       <Image
-        width={size === 'md' ? 50 : 20}
+        width={size === 'md' ? 50 : 12}
         src={config?.settings.customization.logoImageUrl || '/imgs/logo/logo.png'}
         style={{
           position: 'relative',
@@ -22,7 +22,7 @@ export function Logo({ size = 'md', withoutText = false }: LogoProps) {
       />
       {withoutText ? null : (
         <Text
-          size={size === 'md' ? 22 : 'xs'}
+          size={size === 'md' ? 22 : 10}
           weight="bold"
           variant="gradient"
           gradient={primaryGradient}

src/components/layout/header/Actions/RunToolAction/ToolsMenu.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon, Menu, Text } from '@mantine/core';
 import { IconAxe } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
-import DockerMenuButton from '../../../modules/docker/DockerModule';
+import DockerMenuButton from '../../../../../modules/docker/DockerModule';
 
 export const ToolsMenu = () => {
   const { t } = useTranslation('layout/tools');

src/components/layout/header/Header.tsx

@@ -1,14 +1,12 @@
-import { Box, createStyles, Group, Header as MantineHeader, useMantineTheme } from '@mantine/core';
+import { Box, createStyles, Group, Header as MantineHeader } from '@mantine/core';
-import { useViewportSize } from '@mantine/hooks';
 import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';
 
-import DockerMenuButton from '../../../modules/docker/DockerModule';
-import { Search } from './Search';
 import { Logo } from '../Logo';
 import { useCardStyles } from '../useCardStyles';
-import { SettingsMenu } from './SettingsMenu';
-import { ToolsMenu } from './ToolsMenu';
 import { AddElementAction } from './Actions/AddElementAction/AddElementAction';
+import { ToolsMenu } from './Actions/RunToolAction/ToolsMenu';
+import { Search } from './Search';
+import { SettingsMenu } from './SettingsMenu';
 
 export const HeaderHeight = 64;
 

src/components/layout/header/Meta/Head.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import NextHead from 'next/head';
 import { SafariStatusBarStyle } from './SafariStatusBarStyle';
-import { useConfigContext } from '../../../config/provider';
+import { useConfigContext } from '../../../../config/provider';
 
 export function Head() {
   const { config } = useConfigContext();

src/components/layout/header/Search.tsx

@@ -18,7 +18,7 @@ import { useTranslation } from 'next-i18next';
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import SmallServiceItem from '../../AppShelf/SmallServiceItem';
 import Tip from '../Tip';
-import { searchUrls } from '../../Settings/Common/SearchEngineSelector';
+import { searchUrls } from '../../Settings/Common/SearchEngine/SearchEngineSelector';
 import { useConfigContext } from '../../../config/provider';
 import { OverseerrMediaDisplay } from '../../../modules/common';
 import { IModule } from '../../../modules/ModuleTypes';