Style: bring index page (and legacy subtle button) in line with the new style

UI/AllThemesGui.ts

@@ -27,7 +27,7 @@ export default class AllThemesGui {
                 new LoginToggle(undefined, Translations.t.index.logIn, {
                     osmConnection,
                     featureSwitchUserbadge: new ImmutableStore(true),
-                }),
+                }).SetClass("flex justify-center w-full"),
                 Translations.t.general.aboutMapComplete.intro.SetClass("link-underline"),
                 new FixedUiElement("v" + Constants.vNumber).SetClass("block"),
             ])

UI/Base/SubtleButton.ts

@@ -4,13 +4,15 @@ import { UIElement } from "../UIElement"
 import { VariableUiElement } from "./VariableUIElement"
 import Lazy from "./Lazy"
 import Loading from "./Loading"
-import SubtleButtonSvelte from "./SubtleButton.svelte"
 import SvelteUIElement from "./SvelteUIElement"
 import SubtleLink from "./SubtleLink.svelte";
 import Translations from "../i18n/Translations";
 import Combine from "./Combine";
 import Img from "./Img";
 
+/**
+ * @deprecated
+ */
 export class SubtleButton extends UIElement {
     private readonly imageUrl: string | BaseUIElement
     private readonly message: string | BaseUIElement
@@ -42,7 +44,7 @@ export class SubtleButton extends UIElement {
             return new SvelteUIElement(SubtleLink, {href: this.options.url, newTab: this.options.newTab})
         }
 
-        const classes = "block flex p-3 my-2 bg-subtle rounded-lg hover:shadow-xl hover:bg-unsubtle transition-colors transition-shadow link-no-underline";
+        const classes = "button";
         const message = Translations.W(this.message)?.SetClass("block overflow-ellipsis no-images flex-shrink");
         let img;
         const imgClasses = "block justify-center flex-none mr-4 " + (this.options?.imgSize ?? "h-11 w-11")

UI/Base/SubtleLink.svelte

@@ -32,7 +32,7 @@
 </script>
 
 <a
-  class={(options.extraClasses??"") + 'flex hover:shadow-xl transition-[color,background-color,box-shadow] hover:bg-unsubtle cursor-pointer'}
+  class={(options.extraClasses??"") + ' button text-ellipsis'}
   {href}
   target={(newTab ? "_blank" : undefined) }
 >
@@ -48,16 +48,3 @@
 
   <slot/>
 </a>
-
-<style lang="scss">
-  span,
-  a {
-    @apply flex p-3 my-2 py-4 rounded-lg shrink-0;
-    @apply items-center w-full no-underline;
-    @apply bg-subtle text-black;
-
-    :global(span) {
-      @apply block text-ellipsis;
-    }
-  }
-</style>

UI/BigComponents/HiddenThemeList.svelte

@@ -13,9 +13,9 @@
   export let onMainScreen: boolean = true
 
   const prefix = "mapcomplete-hidden-theme-"
-  const hiddenThemes: LayoutInformation[] = themeOverview.filter(
+  const hiddenThemes: LayoutInformation[] = (themeOverview["default"] ?? themeOverview)?.filter(
     (layout) => layout.hideFromOverview
-  )
+  ) ?? []
   const userPreferences = state.osmConnection.preferencesHandler.preferences
   const t = Translations.t.general.morescreen
 
@@ -45,3 +45,4 @@
     </p>
   </svelte:fragment>
 </ThemesList>
+

UI/BigComponents/MoreScreen.ts

@@ -1,16 +1,12 @@
 import Svg from "../../Svg"
 import Combine from "../Base/Combine"
-import { SubtleButton } from "../Base/SubtleButton"
 import Translations from "../i18n/Translations"
-import BaseUIElement from "../BaseUIElement"
 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"
 import {Utils} from "../../Utils"
-import Title from "../Base/Title"
 import themeOverview from "../../assets/generated/theme_overview.json"
-import { Translation } from "../i18n/Translation"
 import {TextField} from "../Input/TextField"
 import Locale from "../i18n/Locale"
 import SvelteUIElement from "../Base/SvelteUIElement"

UI/BigComponents/NoThemeResultButton.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script context="module" lang="ts">
     export interface Theme {
         id: string
         icon: string
@@ -24,41 +24,13 @@
     const t = Translations.t.general.morescreen
 </script>
 
-<span>
+<div class="w-full">
     <h5>{t.noMatchingThemes.toString()}</h5>
-  <button
+    <div class="flex justify-center">
-    on:click={() => {
+
-      search.setData("")
+        <button on:click={() => search.setData("")}>
-    }}
-  >
-      <SubtleButton>
-        <span slot="image">
             <ToSvelte construct={Svg.search_disable_svg().SetClass("w-6 mr-2")}/>
-        </span>
+            <Tr slot="message" t={t.noSearch}/>
-        <Tr t={t.noSearch} slot="message"/>
-      </SubtleButton>
         </button>
-</span>
+    </div>
-
+</div>
-<style lang="scss">
-  span {
-    @apply flex flex-col items-center w-full;
-
-    h5 {
-      @apply w-max font-bold;
-    }
-
-    // SubtleButton
-    button {
-      @apply h-12;
-
-      span {
-        @apply w-max;
-
-        :global(img) {
-          @apply h-6;
-        }
-      }
-    }
-  }
-</style>

UI/BigComponents/ProfessionalServicesButton.svelte

@@ -13,13 +13,13 @@
   <span>
     {t.hookMore.toString()}
   </span>
+  <div class="w-full">
+    
   <SubtleLink href="./professional.html">
+    <div class="w-full">
       <Tr slot="message" t={t.button} />
+    </div>
   </SubtleLink>
   </div>
+</div>
 
-<style lang="scss">
-  div {
-    @apply flex flex-col border border-gray-300 p-2 rounded-lg;
-  }
-</style>

UI/BigComponents/ThemeButton.svelte

@@ -86,7 +86,7 @@
         <img slot="image" src={theme.icon} class="block h-11 w-11 bg-red mx-4" alt=""/>
         <span class="flex flex-col text-ellipsis overflow-hidden">
           <Tr t={title}/>
-          <span class="subtle max-h-12">
+          <span class="subtle max-h-12 truncate text-ellipsis">
             <Tr t={description}/>
           </span>
       </span>

UI/BigComponents/ThemesList.svelte

@@ -21,7 +21,7 @@
   $: filteredThemes = themes.filter((theme) => MoreScreen.MatchesLayout(theme, $search))
 </script>
 
-<section>
+<section class="w-full">
   <slot name="title" />
   {#if onMainScreen}
     <div class="md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -51,13 +51,7 @@
     </div>
   {/if}
 
-  {#if filteredThemes.length == 0}
+  {#if filteredThemes.length === 0}
     <NoThemeResultButton {search} />
   {/if}
 </section>
-
-<style lang="scss">
-  section {
-    @apply flex flex-col;
-  }
-</style>

UI/BigComponents/UnofficialThemeList.svelte

@@ -22,6 +22,7 @@
     $: console.log("Custom themes are", customThemes)
 </script>
 
+{#if customThemes.length > 0}
     <ThemesList
             {search}
             {state}
@@ -35,3 +36,4 @@
             {@html t.customThemeIntro.toString()}
         </svelte:fragment>
     </ThemesList>
+{/if}

Utils.ts

@@ -1169,7 +1169,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
         if (typeof window === "undefined") {
             return "https://mapcomplete.osm.be"
         }
-        const path = (window.location.protocol+ window.location.host + window.location.pathname) .split("/")
+        const path = (window.location.protocol + "//" + window.location.host + window.location.pathname).split("/")
         path.pop()
         path.push("index.html")
         return path.join("/")
@@ -1384,6 +1384,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
         console.log("Actually scrolling...")
         element.scrollIntoView({behavior: "smooth", block: "nearest"})
     }
+
     public static findParentWithScrolling(element: HTMLBaseElement): HTMLBaseElement {
         // Check if the element itself has scrolling
         if (element.scrollHeight > element.clientHeight) {
@@ -1428,12 +1429,6 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
         }
         return true
     }
-    private static colorDiff(
-        c0: { r: number; g: number; b: number },
-        c1: { r: number; g: number; b: number }
-    ) {
-        return Math.abs(c0.r - c1.r) + Math.abs(c0.g - c1.g) + Math.abs(c0.b - c1.b)
-    }
 
     static SameObject(a: any, b: any) {
         if (a === b) {
@@ -1463,4 +1458,11 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
         }
         return false
     }
+
+    private static colorDiff(
+        c0: { r: number; g: number; b: number },
+        c1: { r: number; g: number; b: number }
+    ) {
+        return Math.abs(c0.r - c1.r) + Math.abs(c0.g - c1.g) + Math.abs(c0.b - c1.b)
+    }
 }

index.css

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

public/css/index-tailwind-output.css

@@ -800,11 +800,6 @@ video {
   margin-right: 0.25rem;
 }
 
-.my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -815,6 +810,11 @@ video {
   margin-right: 1rem;
 }
 
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
 .mx-10 {
   margin-left: 2.5rem;
   margin-right: 2.5rem;
@@ -1137,11 +1137,6 @@ video {
   width: 50%;
 }
 
-.w-max {
-  width: -webkit-max-content;
-  width: max-content;
-}
-
 .w-96 {
   width: 24rem;
 }
@@ -1150,6 +1145,11 @@ video {
   width: 2.5rem;
 }
 
+.w-max {
+  width: -webkit-max-content;
+  width: max-content;
+}
+
 .w-48 {
   width: 12rem;
 }
@@ -1493,11 +1493,6 @@ video {
   background-color: rgb(248 113 113 / var(--tw-bg-opacity));
 }
 
-.bg-subtle {
-  --tw-bg-opacity: 1;
-  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
-}
-
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1553,10 +1548,6 @@ video {
   padding: 0px;
 }
 
-.p-3 {
-  padding: 0.75rem;
-}
-
 .p-8 {
   padding: 2rem;
 }
@@ -1571,11 +1562,6 @@ video {
   padding-right: 1rem;
 }
 
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -1848,18 +1834,6 @@ video {
   transition-duration: 150ms;
 }
 
-.transition-shadow {
-  transition-property: box-shadow;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.transition-\[color\2c background-color\2c box-shadow\] {
-  transition-property: color,background-color,box-shadow;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -2246,6 +2220,8 @@ select:hover {
 .subtle {
   /* For all information that is not important for 99% of the users */
   color: #999;
+  font-size: medium;
+  font-weight: normal;
 }
 
 .link-underline .subtle a {
@@ -2432,11 +2408,6 @@ a.link-underline {
   overflow-y: hidden;
 }
 
-.hover\:bg-unsubtle:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-indigo-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(199 210 254 / var(--tw-bg-opacity));
@@ -2451,12 +2422,6 @@ a.link-underline {
   opacity: 1;
 }
 
-.hover\:shadow-xl:hover {
-  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 @media (max-width: 480px) {
   .max-\[480px\]\:w-full {
     width: 100%;