UX: make mangrove attribution smaller, remember if personal had been unlocked before to prevent flickering of the button

public/css/index-tailwind-output.css

@@ -1054,6 +1054,11 @@ video {
   height: 8rem;
 }
 
+.h-min {
+  height: -webkit-min-content;
+  height: min-content;
+}
+
 .h-8 {
   height: 2rem;
 }
@@ -1341,10 +1346,6 @@ video {
   align-items: center;
 }
 
-.items-baseline {
-  align-items: baseline;
-}
-
 .items-stretch {
   align-items: stretch;
 }
@@ -2447,7 +2448,6 @@ select:hover {
 .subtle {
   /* For all information that is not important for 99% of the users */
   color: #999;
-  font-size: medium;
   font-weight: normal;
 }
 

src/Logic/Osm/OsmPreferences.ts

@@ -72,7 +72,7 @@ export class OsmPreferences {
             let i = 0
             while (str !== "") {
                 if (str === undefined || str === "undefined") {
-                    throw "Long pref became undefined?"
+                    throw "Got 'undefined' or a literal string containing 'undefined' for a long preference with name "+key
                 }
                 if (i > 100) {
                     throw "This long preference is getting very long... "

src/UI/BigComponents/ThemeButton.svelte

@@ -8,13 +8,26 @@
   import Tr from "../Base/Tr.svelte"
   import SubtleLink from "../Base/SubtleLink.svelte"
   import Translations from "../i18n/Translations"
+  import { LocalStorageSource } from "../../Logic/Web/LocalStorageSource"
 
   export let theme: LayoutInformation
   export let isCustom: boolean = false
   export let userDetails: UIEventSource<UserDetails>
   export let state: { layoutToUse?: { id: string }; osmConnection: OsmConnection }
   export let selected: boolean = false
+  
+  let unlockedPersonal = LocalStorageSource.GetParsed("unlocked_personal_theme", false)
 
+  userDetails.addCallbackAndRunD(userDetails => {
+      if(!userDetails.loggedIn){
+          return
+      }
+      if(userDetails.csCount > Constants.userJourney.personalLayoutUnlock){
+          unlockedPersonal.setData(true)
+      }
+      return true
+  })
+  
   $: title = new Translation(
     theme.title,
     !isCustom && !theme.mustHaveLanguage ? "themes:" + theme.id + ".title" : undefined
@@ -72,7 +85,7 @@
   let href = createUrl(theme, isCustom, state)
 </script>
 
-{#if theme.id !== personal.id || $userDetails.csCount > Constants.userJourney.personalLayoutUnlock}
+{#if theme.id !== personal.id || $unlockedPersonal}
   <SubtleLink href={$href} options={{ extraClasses: "w-full" }}>
     <img slot="image" src={theme.icon} class="mx-4 block h-11 w-11" alt="" />
     <span class="flex flex-col overflow-hidden text-ellipsis">

src/UI/Reviews/AllReviews.svelte

@@ -40,7 +40,7 @@
     <Tr t={Translations.t.reviews.no_reviews_yet} />
   {/if}
   <div class="flex justify-end">
-    <ToSvelte construct={Svg.mangrove_logo_svg().SetClass("w-12 h-12")} />
-    <Tr t={Translations.t.reviews.attribution} />
+    <ToSvelte construct={Svg.mangrove_logo_svg().SetClass("w-12 h-12 shrink-0 p-1 ")} />
+    <Tr cls="text-sm subtle" t={Translations.t.reviews.attribution} />
   </div>
 </div>

src/index.css

@@ -402,7 +402,6 @@ select:hover {
 .subtle {
     /* For all information that is not important for 99% of the users */
     color: #999;
-    font-size: medium;
     font-weight: normal;
 }