From ce9351f56b8f8d8ab76a99b1931266e81cae05a7 Mon Sep 17 00:00:00 2001
From: grimsi <9295182+grimsi@users.noreply.github.com>
Date: Tue, 19 Mar 2024 15:11:25 +0100
Subject: [PATCH] Refine theme preview (currently placeholder from GitHub)

---
 frontend/components/theming/Theme.tsx        |  1 +
 frontend/components/theming/ThemePreview.tsx | 45 ++++++++++++++------
 frontend/components/theming/Themes.tsx       |  2 +
 frontend/components/wizard/Wizard.tsx        |  1 -
 4 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/frontend/components/theming/Theme.tsx b/frontend/components/theming/Theme.tsx
index 38a2899..cf43c10 100644
--- a/frontend/components/theming/Theme.tsx
+++ b/frontend/components/theming/Theme.tsx
@@ -1,6 +1,7 @@
 export class Theme {
     constructor(
         public readonly name: string,
+        public readonly background: string,
         public readonly primary: string,
         public readonly secondary?: string,
         public readonly tertiary?: string
diff --git a/frontend/components/theming/ThemePreview.tsx b/frontend/components/theming/ThemePreview.tsx
index 4c61827..3927824 100644
--- a/frontend/components/theming/ThemePreview.tsx
+++ b/frontend/components/theming/ThemePreview.tsx
@@ -3,17 +3,38 @@ import {Typography} from "@material-tailwind/react";
 
 export default function ThemePreview({theme}: { theme: Theme }) {
     return (
-        <div className={`
-            size-full bg-background
-            grid grid-rows-3
-            rounded-lg
-            border-2 border-on-background
-            p-4 gap-4
-            `}>
-            <div className="bg-primary flex grow rounded-lg"></div>
-            <div className="bg-secondary flex grow rounded-lg"></div>
-            <div className="bg-tertiary flex grow rounded-lg"></div>
-            <Typography variant="paragraph" className="text-center">{theme.name}</Typography>
+        <div className="flex flex-col items-center">
+            <svg width="228" height="120" viewBox="0 0 228 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path id="background" d="M0 0H228V120H0V0Z" fill={theme.background}/>
+                <rect id="background-secondary" x="29" y="54" width="144" height="53" rx="2" fill="#30363D"/>
+                <rect x="184" y="54" width="32" height="36" rx="2" fill="#30363D"/>
+                <rect opacity="0.3" x="29" y="59" width="144" height="12" fill="#2EA043"/>
+                <path opacity="0.6" d="M0 0H228V23H0V0Z" fill="#484F58"/>
+                <rect x="13" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
+                <rect x="29" y="36" width="48" height="6" rx="3" fill="#6E7681"/>
+                <rect x="34" y="62" width="64" height="6" rx="3" fill="#3FB950"/>
+                <rect x="210" y="36" width="6" height="6" rx="1" fill="#DA3633"/>
+                <rect x="202" y="36" width="6" height="6" rx="1" fill="#3FB950"/>
+                <rect x="53" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
+                <rect x="93" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
+            </svg>
+            <Typography variant="paragraph">{theme.name}</Typography>
         </div>
     );
-}
\ No newline at end of file
+}
+/*
+            <svg width="228" height="120" viewBox="0 0 228 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 0H228V120H0V0Z" fill="#161B22"/>
+                <rect x="29" y="54" width="144" height="53" rx="2" fill="#30363D"/>
+                <rect x="184" y="54" width="32" height="36" rx="2" fill="#30363D"/>
+                <rect opacity="0.3" x="29" y="59" width="144" height="12" fill="#2EA043"/>
+                <path opacity="0.6" d="M0 0H228V23H0V0Z" fill="#484F58"/>
+                <rect x="13" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
+                <rect x="29" y="36" width="48" height="6" rx="3" fill="#6E7681"/>
+                <rect x="34" y="62" width="64" height="6" rx="3" fill="#3FB950"/>
+                <rect x="210" y="36" width="6" height="6" rx="1" fill="#DA3633"/>
+                <rect x="202" y="36" width="6" height="6" rx="1" fill="#3FB950"/>
+                <rect x="53" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
+                <rect x="93" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
+            </svg>
+ */
\ No newline at end of file
diff --git a/frontend/components/theming/Themes.tsx b/frontend/components/theming/Themes.tsx
index 5bbe033..fc9e1e6 100644
--- a/frontend/components/theming/Themes.tsx
+++ b/frontend/components/theming/Themes.tsx
@@ -3,11 +3,13 @@ import {Theme} from "Frontend/components/theming/Theme";
 export class Themes {
     public static LIGHT_DEFAULT = new Theme(
         "Light default",
+        "#ffffff",
         "#000000"
     )
 
     public static DARK_DEFAULT = new Theme(
         "Dark default",
+        "#161B22",
         "#ffffff"
     )
 
diff --git a/frontend/components/wizard/Wizard.tsx b/frontend/components/wizard/Wizard.tsx
index 22c9dff..f556c9e 100644
--- a/frontend/components/wizard/Wizard.tsx
+++ b/frontend/components/wizard/Wizard.tsx
@@ -45,7 +45,6 @@ const Wizard = ({children, initialValues, onSubmit}: {
         <Formik
             initialValues={snapshot}
             onSubmit={handleSubmit}
-            isInitialValid={false}
             /*// @ts-ignore*/
             validationSchema={step.props.validationSchema}
         >