From 9af2f20bfa7ac8b245f69d62354f39336554314e Mon Sep 17 00:00:00 2001
From: Florian Fritz <florian@wieli.at>
Date: Wed, 24 Aug 2022 00:38:10 +0200
Subject: [PATCH 1/3] :sparkles: Add option for custom CSS to Customization
 Settings

---
 src/components/Settings/AdvancedSettings.tsx | 10 +++++++++-
 src/components/layout/Layout.tsx             |  3 +++
 src/tools/types.ts                           |  1 +
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/Settings/AdvancedSettings.tsx b/src/components/Settings/AdvancedSettings.tsx
index 552e5b483..e873c7263 100644
--- a/src/components/Settings/AdvancedSettings.tsx
+++ b/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';
@@ -25,6 +25,7 @@ export default function TitleChanger() {
     logo?: string;
     favicon?: string;
     background?: string;
+    customCSS?: string;
   }) => {
     setConfig({
       ...config,
@@ -34,6 +35,7 @@ export default function TitleChanger() {
         logo: values.logo,
         favicon: values.favicon,
         background: values.background,
+        customCSS: values.customCSS,
       },
     });
   };
@@ -62,6 +64,12 @@ export default function TitleChanger() {
             placeholder={t('background.placeholder')}
             {...form.getInputProps('background')}
           />
+          <Textarea
+            minRows={5}
+            label="Custom CSS"
+            placeholder="Your CSS will be executed last"
+            {...form.getInputProps('customCSS')}
+          />
           <Button type="submit">{t('buttons.submit')}</Button>
         </Stack>
       </form>
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index d91a3122d..d762c2cb0 100644
--- a/src/components/layout/Layout.tsx
+++ b/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>
   );
 }
diff --git a/src/tools/types.ts b/src/tools/types.ts
index 1c9c5f6f0..d7ef95af5 100644
--- a/src/tools/types.ts
+++ b/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;

From 87016eb51f05d5160fc1cd04fcbc1f7108732f39 Mon Sep 17 00:00:00 2001
From: Florian Fritz <florian@wieli.at>
Date: Wed, 24 Aug 2022 00:51:46 +0200
Subject: [PATCH 2/3] :bug: Fix not setting the saved value of the custom CSS

(cherry picked from commit 0c62be8fedfd2b8015d0d1bb5b9acc5dd1ba22ac)
---
 src/components/Settings/AdvancedSettings.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Settings/AdvancedSettings.tsx b/src/components/Settings/AdvancedSettings.tsx
index e873c7263..46e127f5f 100644
--- a/src/components/Settings/AdvancedSettings.tsx
+++ b/src/components/Settings/AdvancedSettings.tsx
@@ -17,6 +17,7 @@ export default function TitleChanger() {
       logo: config.settings.logo,
       favicon: config.settings.favicon,
       background: config.settings.background,
+      customCSS: config.settings.customCSS,
     },
   });
 

From 4db35406a0e68e0e42dd205f6996dd2e3453c949 Mon Sep 17 00:00:00 2001
From: Florian Fritz <florian@wieli.at>
Date: Tue, 30 Aug 2022 15:04:41 +0200
Subject: [PATCH 3/3] :children_crossing: Add German & English translations for
 custom CSS field

(cherry picked from commit 20e1cc3a1bae59ee401539e9de07f500a37fc7b4)
---
 .../locales/de/settings/customization/page-appearance.json  | 6 +++++-
 .../locales/en/settings/customization/page-appearance.json  | 6 +++++-
 src/components/Settings/AdvancedSettings.tsx                | 4 ++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/public/locales/de/settings/customization/page-appearance.json b/public/locales/de/settings/customization/page-appearance.json
index cb9740b31..0a9cd3e9b 100644
--- a/public/locales/de/settings/customization/page-appearance.json
+++ b/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"
   }
-}
\ No newline at end of file
+}
diff --git a/public/locales/en/settings/customization/page-appearance.json b/public/locales/en/settings/customization/page-appearance.json
index 051c11d86..3c9d62888 100644
--- a/public/locales/en/settings/customization/page-appearance.json
+++ b/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"
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Settings/AdvancedSettings.tsx b/src/components/Settings/AdvancedSettings.tsx
index 46e127f5f..17fcdcd25 100644
--- a/src/components/Settings/AdvancedSettings.tsx
+++ b/src/components/Settings/AdvancedSettings.tsx
@@ -67,8 +67,8 @@ export default function TitleChanger() {
           />
           <Textarea
             minRows={5}
-            label="Custom CSS"
-            placeholder="Your CSS will be executed last"
+            label={t('customCSS.label')}
+            placeholder={t('customCSS.placeholder')}
             {...form.getInputProps('customCSS')}
           />
           <Button type="submit">{t('buttons.submit')}</Button>