🔀 Merge pull request #364 from wieli99/master

✨ Add option for custom CSS to Customization Settings

public/locales/de/settings/customization/page-appearance.json

@@ -15,7 +15,11 @@
     "label": "Hintergrund",
     "placeholder": "/img/background.png"
   },
+  "customCSS": {
+    "label": "Benutzerdefiniertes CSS",
+    "placeholder": "Benutzerdefiniertes CSS wird als letztes ausgeführt"
+  },
   "buttons": {
     "submit": "Absenden"
   }
-}
+}

public/locales/en/settings/customization/page-appearance.json

@@ -15,7 +15,11 @@
     "label": "Background",
     "placeholder": "/img/background.png"
   },
+  "customCSS": {
+    "label": "Custom CSS",
+    "placeholder": "Custom CSS will be executed last"
+  },
   "buttons": {
     "submit": "Submit"
   }
-}
+}

src/components/Settings/AdvancedSettings.tsx

@@ -1,4 +1,4 @@
-import { TextInput, Button, Stack } from '@mantine/core';
+import { TextInput, Button, Stack, Textarea } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useTranslation } from 'next-i18next';
 import { useConfig } from '../../tools/state';
@@ -17,6 +17,7 @@ export default function TitleChanger() {
       logo: config.settings.logo,
       favicon: config.settings.favicon,
       background: config.settings.background,
+      customCSS: config.settings.customCSS,
     },
   });
 
@@ -25,6 +26,7 @@ export default function TitleChanger() {
     logo?: string;
     favicon?: string;
     background?: string;
+    customCSS?: string;
   }) => {
     setConfig({
       ...config,
@@ -34,6 +36,7 @@ export default function TitleChanger() {
         logo: values.logo,
         favicon: values.favicon,
         background: values.background,
+        customCSS: values.customCSS,
       },
     });
   };
@@ -62,6 +65,12 @@ export default function TitleChanger() {
             placeholder={t('background.placeholder')}
             {...form.getInputProps('background')}
           />
+          <Textarea
+            minRows={5}
+            label={t('customCSS.label')}
+            placeholder={t('customCSS.placeholder')}
+            {...form.getInputProps('customCSS')}
+          />
           <Button type="submit">{t('buttons.submit')}</Button>
         </Stack>
       </form>

src/components/layout/Layout.tsx

@@ -34,6 +34,9 @@ export default function Layout({ children, style }: any) {
       >
         {children}
       </main>
+      <style>
+        {cx(config.settings.customCSS)}
+      </style>
     </AppShell>
   );
 }

src/tools/types.ts

@@ -10,6 +10,7 @@ export interface Settings {
   secondaryColor?: MantineTheme['primaryColor'];
   primaryShade?: MantineTheme['primaryShade'];
   background?: string;
+  customCSS?: string,
   appOpacity?: number;
   widgetPosition?: string;
   appCardWidth?: number;