Fix subtle buttons

UI/BigComponents/CustomGeneratorButton.svelte

@@ -29,8 +29,8 @@
         url: "https://pietervdvn.github.io/mc/legacy/070/customGenerator.html",
       }}
     >
-      <span slot="image">
-        <ToSvelte construct={Svg.pencil_ui()} />
+      <span slot="image"  class="h-11 w-11 mx-4 bg-red" >
+        <ToSvelte construct={Svg.pencil_ui()}/>
       </span>
       <span slot="message">{t.createYourOwnTheme.toString()}</span>
     </SubtleButton>

UI/BigComponents/MoreScreen.ts

@@ -4,7 +4,7 @@ import { SubtleButton } from "../Base/SubtleButton"
 import Translations from "../i18n/Translations"
 import personal from "../../assets/themes/personal/personal.json"
 import BaseUIElement from "../BaseUIElement"
-import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
+import LayoutConfig, { LayoutInformation } from "../../Models/ThemeConfig/LayoutConfig"
 import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
 import Loc from "../../Models/Loc"
 import UserRelatedState from "../../Logic/State/UserRelatedState"
@@ -20,16 +20,7 @@ import HiddenThemeList from "./HiddenThemeList.svelte"
 import UnofficialThemeList from "./UnofficialThemeList.svelte"
 
 export default class MoreScreen extends Combine {
-    private static readonly officialThemes: {
-        id: string
-        icon: string
-        title: any
-        shortDescription: any
-        definition?: any
-        mustHaveLanguage?: boolean
-        hideFromOverview: boolean
-        keywors?: any[]
-    }[] = themeOverview
+    private static readonly officialThemes: LayoutInformation[] = themeOverview
 
     constructor(
         state: UserRelatedState & {

UI/BigComponents/ThemeButton.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import SubtleButton from "../Base/SubtleButton.svelte"
   import { Translation } from "../i18n/Translation"
-  import type { Theme } from "./ThemesList.svelte"
   import * as personal from "../../assets/themes/personal/personal.json"
   import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
   import UserDetails, { OsmConnection } from "../../Logic/Osm/OsmConnection"
   import Constants from "../../Models/Constants"
   import type Loc from "../../Models/Loc"
+  import type { LayoutInformation } from "../../Models/ThemeConfig/LayoutConfig";
 
-  export let theme: Theme
+  export let theme: LayoutInformation
   export let isCustom: boolean = false
   export let userDetails: UIEventSource<UserDetails>
   export let state: { osmConnection: OsmConnection; locationControl?: UIEventSource<Loc> }
@@ -80,7 +80,7 @@
 {#if theme.id !== personal.id || $userDetails.csCount > Constants.userJourney.personalLayoutUnlock}
   <div>
     <SubtleButton options={{ url: createUrl(theme, isCustom, state) }}>
-      <img slot="image" src={theme.icon} alt="" />
+      <img slot="image" src={theme.icon} class="block h-11 w-11 bg-red mx-4" alt="" />
       <span slot="message" class="message">
         <span>
           <span>{title}</span>

UI/BigComponents/ThemesList.svelte

@@ -1,16 +1,3 @@
-<script lang="ts" context="module">
-  export interface Theme {
-    id: string
-    icon: string
-    title: any
-    shortDescription: any
-    definition?: any
-    mustHaveLanguage?: boolean
-    hideFromOverview?: boolean
-    keywords?: any[]
-  }
-</script>
-
 <script lang="ts">
   import NoThemeResultButton from "./NoThemeResultButton.svelte"
 
@@ -21,9 +8,10 @@
   import CustomGeneratorButton from "./CustomGeneratorButton.svelte"
   import ProfessionalServicesButton from "./ProfessionalServicesButton.svelte"
   import ThemeButton from "./ThemeButton.svelte"
+  import { LayoutInformation } from "../../Models/ThemeConfig/LayoutConfig";
 
   export let search: UIEventSource<string>
-  export let themes: Theme[]
+  export let themes: LayoutInformation[]
   export let state: { osmConnection: OsmConnection; locationControl?: UIEventSource<Loc> }
   export let isCustom: boolean = false
   export let onMainScreen: boolean = true