🎨 Changed primary/secondary color to camelCase

src/components/ColorSchemeToggle/ColorSchemeSwitch.tsx

@@ -40,7 +40,7 @@ export function ColorSchemeSwitch() {
         <Sun className={cx(classes.icon, classes.iconLight)} size={18} />
         <MoonStars className={cx(classes.icon, classes.iconDark)} size={18} />
         <Switch
-          color={config.settings.primary_color || 'red'}
+          color={config.settings.primaryColor || 'red'}
           checked={colorScheme === 'dark'}
           onChange={() => toggleColorScheme()}
           size="md"

src/components/Config/SaveConfig.tsx

@@ -63,7 +63,7 @@ export default function SaveConfigComponent(props: any) {
         size="xs"
         leftIcon={<Download />}
         variant="outline"
-        color={config.settings.primary_color || 'red'}
+        color={config.settings.primaryColor || 'red'}
         onClick={onClick}
       >
         Download config
@@ -72,7 +72,7 @@ export default function SaveConfigComponent(props: any) {
         size="xs"
         leftIcon={<Trash />}
         variant="outline"
-        color={config.settings.primary_color || 'red'}
+        color={config.settings.primaryColor || 'red'}
         onClick={() => {
           axios
             .delete(`/api/configs/${config.name}`)
@@ -105,7 +105,7 @@ export default function SaveConfigComponent(props: any) {
         size="xs"
         leftIcon={<Plus />}
         variant="outline"
-        color={config.settings.primary_color || 'red'}
+        color={config.settings.primaryColor || 'red'}
         onClick={() => setOpened(true)}
       >
         Save a copy

src/components/Settings/AdvancedSettings.tsx

@@ -44,7 +44,7 @@ export default function TitleChanger() {
             {...form.getInputProps('favicon')}
           />
           <TextInput label="Background" placeholder="" {...form.getInputProps('background')} />
-          <Button type="submit" color={config.settings.primary_color || 'red'}>
+          <Button type="submit" color={config.settings.primaryColor || 'red'}>
             Save
           </Button>
         </Group>

src/components/Settings/ColorSelector.tsx

@@ -17,8 +17,8 @@ export function ColorSelector({ type }: ColorControlProps) {
 
   const configColor =
     type === 'primary'
-      ? config.settings.primary_color || 'red'
+      ? config.settings.primaryColor || 'red'
-      : config.settings.secondary_color || 'orange';
+      : config.settings.secondaryColor || 'orange';
 
   const setConfigColor = (color: string) => {
     if (type === 'primary') {
@@ -26,7 +26,7 @@ export function ColorSelector({ type }: ColorControlProps) {
         ...config,
         settings: {
           ...config.settings,
-          primary_color: color,
+          primaryColor: color,
         },
       });
     } else {
@@ -34,7 +34,7 @@ export function ColorSelector({ type }: ColorControlProps) {
         ...config,
         settings: {
           ...config.settings,
-          secondary_color: color,
+          secondaryColor: color,
         },
       });
     }

src/components/Settings/CommonSettings.tsx

@@ -35,8 +35,8 @@ export default function CommonSettings(args: any) {
   const theme = useMantineTheme();
   const colors = Object.keys(theme.colors).map((color) => theme.colors[color][6]);
 
-  const [primaryColor, setPrimaryColor] = useState(config.settings.primary_color);
+  const [primaryColor, setPrimaryColor] = useState(config.settings.primaryColor);
-  const [secondaryColor, setSecondaryColor] = useState(config.settings.secondary_color);
+  const [secondaryColor, setSecondaryColor] = useState(config.settings.secondaryColor);
 
   // const convertColorHexToNames = (hex: string) => {
   //   // Have to add some exceptions here because it's not converting cleanly

src/components/Settings/ModuleEnabler.tsx

@@ -13,7 +13,7 @@ export default function ModuleEnabler(props: any) {
           size="md"
           checked={config.modules?.[module.title]?.enabled ?? false}
           label={`Enable ${module.title}`}
-          color={config.settings.primary_color || 'red'}
+          color={config.settings.primaryColor || 'red'}
           onChange={(e) => {
             setConfig({
               ...config,

src/components/layout/Logo.tsx

@@ -27,8 +27,8 @@ export function Logo({ style }: any) {
           weight="bold"
           variant="gradient"
           gradient={{
-            from: config.settings.primary_color || 'red',
+            from: config.settings.primaryColor || 'red',
-            to: config.settings.secondary_color || 'orange',
+            to: config.settings.secondaryColor || 'orange',
             deg: 145,
           }}
         >

src/pages/_app.tsx

@@ -34,7 +34,7 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) {
         <MantineProvider
           theme={{
             ...theme,
-            primaryColor: config.settings.primary_color || 'red',
+            primaryColor: config.settings.primaryColor || 'red',
             colorScheme,
           }}
           styles={{

src/tools/types.ts

@@ -5,8 +5,8 @@ export interface Settings {
   title?: string;
   logo?: string;
   favicon?: string;
-  primary_color?: string;
+  primaryColor?: string;
-  secondary_color?: string;
+  secondaryColor?: string;
   background?: string;
 }