🚚 Move selectors to customisation tab

src/components/Settings/AdvancedSettings.tsx

@@ -1,6 +1,9 @@
 import { TextInput, Group, Button } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useConfig } from '../../tools/state';
+import { ColorSelector } from './ColorSelector';
+import { OpacitySelector } from './OpacitySelector';
+import { ShadeSelector } from './ShadeSelector';
 
 export default function TitleChanger() {
   const { config, setConfig } = useConfig();
@@ -51,6 +54,10 @@ export default function TitleChanger() {
           <Button type="submit">Save</Button>
         </Group>
       </form>
+      <ColorSelector type="primary" />
+      <ColorSelector type="secondary" />
+      <ShadeSelector />
+      <OpacitySelector />
     </Group>
   );
 }

src/components/Settings/CommonSettings.tsx

@@ -7,9 +7,6 @@ import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
 import ConfigChanger from '../Config/ConfigChanger';
 import SaveConfigComponent from '../Config/SaveConfig';
 import ModuleEnabler from './ModuleEnabler';
-import { ColorSelector } from './ColorSelector';
-import { ShadeSelector } from './ShadeSelector';
-import { OpacitySelector } from './OpacitySelector';
 
 export default function CommonSettings(args: any) {
   const { config, setConfig } = useConfig();
@@ -70,12 +67,9 @@ export default function CommonSettings(args: any) {
           />
         )}
       </Group>
-      <ModuleEnabler />
+
       <ColorSchemeSwitch />
-      <ColorSelector type="primary" />
+      <ModuleEnabler />
-      <ColorSelector type="secondary" />
-      <ShadeSelector />
-      <OpacitySelector />
       <ConfigChanger />
       <SaveConfigComponent />
       <Text