✨ Added a shade selector

Added a popover shade selector similar to the color selector, but shows primary and secondary colors to pick the desired Mantine primaryShade

src/components/Settings/CommonSettings.tsx

@@ -1,12 +1,4 @@
-import {
+import { ActionIcon, Group, Text, SegmentedControl, TextInput, Anchor } from '@mantine/core';
-  ActionIcon,
-  Group,
-  Text,
-  SegmentedControl,
-  TextInput,
-  Anchor,
-  useMantineTheme,
-} from '@mantine/core';
 import { useState } from 'react';
 import { IconBrandGithub as BrandGithub } from '@tabler/icons';
 import { CURRENT_VERSION } from '../../../data/constants';
@@ -16,6 +8,7 @@ import ConfigChanger from '../Config/ConfigChanger';
 import SaveConfigComponent from '../Config/SaveConfig';
 import ModuleEnabler from './ModuleEnabler';
 import { ColorSelector } from './ColorSelector';
+import { ShadeSelector } from './ShadeSelector';
 
 export default function CommonSettings(args: any) {
   const { config, setConfig } = useConfig();
@@ -32,24 +25,6 @@ export default function CommonSettings(args: any) {
     matches.find((match) => match.value === config.settings.searchUrl)?.value ?? 'Custom'
   );
 
-  const theme = useMantineTheme();
-  const colors = Object.keys(theme.colors).map((color) => theme.colors[color][6]);
-
-  const [primaryColor, setPrimaryColor] = useState(config.settings.primaryColor);
-  const [secondaryColor, setSecondaryColor] = useState(config.settings.secondaryColor);
-
-  // const convertColorHexToNames = (hex: string) => {
-  //   // Have to add some exceptions here because it's not converting cleanly
-  //   let colorName = Object.keys(theme.colors).find((key) => theme.colors[key].includes(hex));
-  //   if (!colorName) {
-  //     if (hex === '#228ae6') colorName = 'blue';
-  //     else if (hex === '#15abbf') colorName = 'cyan';
-  //     else if (hex === '#3fbf57') colorName = 'green';
-  //     else if (hex === '#fc7d14') colorName = 'orange';
-  //   }
-  //   return colorName;
-  // };
-
   return (
     <Group direction="column" grow>
       <Group grow direction="column" spacing={0}>
@@ -98,6 +73,7 @@ export default function CommonSettings(args: any) {
       <ColorSchemeSwitch />
       <ColorSelector type="primary" />
       <ColorSelector type="secondary" />
+      <ShadeSelector />
       <ConfigChanger />
       <SaveConfigComponent />
       <Text

src/components/Settings/ShadeSelector.tsx

@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+import { ColorSwatch, Group, Popover, Text, useMantineTheme, MantineTheme } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+import { useColorTheme } from '../../tools/color';
+
+export function ShadeSelector() {
+  const { config, setConfig } = useConfig();
+  const [opened, setOpened] = useState(false);
+
+  const { primaryColor, secondaryColor, primaryShade, setPrimaryShade } = useColorTheme();
+
+  const theme = useMantineTheme();
+  const primaryShades = theme.colors[primaryColor].map((s, i) => ({
+    swatch: theme.colors[primaryColor][i],
+    shade: i as MantineTheme['primaryShade'],
+  }));
+  const secondaryShades = theme.colors[secondaryColor].map((s, i) => ({
+    swatch: theme.colors[secondaryColor][i],
+    shade: i as MantineTheme['primaryShade'],
+  }));
+
+  const setConfigShade = (shade: MantineTheme['primaryShade']) => {
+    setPrimaryShade(shade);
+    setConfig({
+      ...config,
+      settings: {
+        ...config.settings,
+        primaryShade: shade,
+      },
+    });
+  };
+
+  const primarySwatches = primaryShades.map(({ swatch, shade }) => (
+    <ColorSwatch
+      component="button"
+      type="button"
+      onClick={() => setConfigShade(shade)}
+      key={Number(shade)}
+      color={swatch}
+      size={22}
+      style={{ color: theme.white, cursor: 'pointer' }}
+    />
+  ));
+
+  const secondarySwatches = secondaryShades.map(({ swatch, shade }) => (
+    <ColorSwatch
+      component="button"
+      type="button"
+      onClick={() => setConfigShade(shade)}
+      key={Number(shade)}
+      color={swatch}
+      size={22}
+      style={{ color: theme.white, cursor: 'pointer' }}
+    />
+  ));
+
+  return (
+    <Group direction="row" spacing={3}>
+      <Popover
+        opened={opened}
+        onClose={() => setOpened(false)}
+        transitionDuration={0}
+        target={
+          <ColorSwatch
+            component="button"
+            type="button"
+            color={theme.colors[primaryColor][Number(primaryShade)]}
+            onClick={() => setOpened((o) => !o)}
+            size={22}
+            style={{ display: 'block', cursor: 'pointer' }}
+          />
+        }
+        styles={{
+          root: {
+            marginRight: theme.spacing.xs,
+          },
+          body: {
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
+          },
+          arrow: {
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
+          },
+        }}
+        position="bottom"
+        placement="end"
+        withArrow
+        arrowSize={3}
+      >
+        <Group direction="column" spacing="xs">
+          <Group spacing="xs">{primarySwatches}</Group>
+          <Group spacing="xs">{secondarySwatches}</Group>
+        </Group>
+      </Popover>
+      <Text>Primary shade</Text>
+    </Group>
+  );
+}

src/pages/_app.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { AppProps } from 'next/app';
 import { getCookie, setCookies } from 'cookies-next';
 import Head from 'next/head';
-import { MantineProvider, ColorScheme, ColorSchemeProvider } from '@mantine/core';
+import { MantineProvider, ColorScheme, ColorSchemeProvider, MantineTheme } from '@mantine/core';
 import { NotificationsProvider } from '@mantine/notifications';
 import { useHotkeys } from '@mantine/hooks';
 import { ConfigProvider } from '../tools/state';
@@ -15,13 +15,16 @@ export default function App(this: any, props: AppProps & { colorScheme: ColorSch
   const { Component, pageProps } = props;
   const [colorScheme, setColorScheme] = useState<ColorScheme>(props.colorScheme);
 
-  const [primaryColor, setPrimaryColor] = useState<string>('red');
+  const [primaryColor, setPrimaryColor] = useState<MantineTheme['primaryColor']>('red');
-  const [secondaryColor, setSecondaryColor] = useState<string>('orange');
+  const [secondaryColor, setSecondaryColor] = useState<MantineTheme['primaryColor']>('orange');
+  const [primaryShade, setPrimaryShade] = useState<MantineTheme['primaryShade']>(6);
   const colorTheme = {
     primaryColor,
     secondaryColor,
     setPrimaryColor,
     setSecondaryColor,
+    primaryShade,
+    setPrimaryShade,
   };
 
   const toggleColorScheme = (value?: ColorScheme) => {
@@ -45,6 +48,7 @@ export default function App(this: any, props: AppProps & { colorScheme: ColorSch
             theme={{
               ...theme,
               primaryColor,
+              primaryShade,
               colorScheme,
             }}
             styles={{

src/tools/color.ts

@@ -1,17 +1,22 @@
 import { createContext, useContext } from 'react';
+import { MantineTheme } from '@mantine/core';
 
 type colorThemeContextType = {
-  primaryColor: string;
+  primaryColor: MantineTheme['primaryColor'];
-  secondaryColor: string;
+  secondaryColor: MantineTheme['primaryColor'];
-  setPrimaryColor: (color: string) => void;
+  primaryShade: MantineTheme['primaryShade'];
-  setSecondaryColor: (color: string) => void;
+  setPrimaryColor: (color: MantineTheme['primaryColor']) => void;
+  setSecondaryColor: (color: MantineTheme['primaryColor']) => void;
+  setPrimaryShade: (shade: MantineTheme['primaryShade']) => void;
 };
 
 export const ColorTheme = createContext<colorThemeContextType>({
   primaryColor: 'red',
   secondaryColor: 'orange',
+  primaryShade: 6,
   setPrimaryColor: () => {},
   setSecondaryColor: () => {},
+  setPrimaryShade: () => {},
 });
 
 export function useColorTheme() {

src/tools/theme.ts

@@ -1,5 +1,3 @@
 import { MantineProviderProps } from '@mantine/core';
 
-export const theme: MantineProviderProps['theme'] = {
+export const theme: MantineProviderProps['theme'] = {};
-  primaryShade: 6,
-};

src/tools/types.ts

@@ -1,12 +1,14 @@
 import { OptionValues } from '../components/modules/modules';
+import { MantineTheme } from '@mantine/core';
 
 export interface Settings {
   searchUrl: string;
   title?: string;
   logo?: string;
   favicon?: string;
-  primaryColor?: string;
+  primaryColor?: MantineTheme['primaryColor'];
-  secondaryColor?: string;
+  secondaryColor?: MantineTheme['primaryColor'];
+  primaryShade?: MantineTheme['primaryShade'];
   background?: string;
 }