Tailwind for List of Themes

Style the list of themes with Tailwind. Add wrapper around the list of themes.

The non-linked list items are still TODO.

Also move the Streetcomplete-Note below the list and also the custom-build-Request-Line.

UI/Base/SubtleButton.ts

@@ -19,7 +19,7 @@ export class SubtleButton extends UIElement{
         if ((imageUrl ?? "") === "") {
             this.image = new FixedUiElement("");
         } else if (typeof (imageUrl) === "string") {
-            this.image = new FixedUiElement(`<img style="height:3em" src="${imageUrl}">`);
+            this.image = new FixedUiElement(`<img class="" src="${imageUrl}" alt="">`);
         } else {
             this.image = imageUrl;
         }
@@ -37,15 +37,22 @@ export class SubtleButton extends UIElement{
 
         if(this.linkTo != undefined){
             return new Combine([
-                `<a class="subtle-button" href="${this.linkTo.url}" ${this.linkTo.newTab ? 'target="_blank"' : ""}>`,
+                `<a class='block flex group p-3 my-2 bg-white rounded-lg ring-2 ring-white hover:ring-2 hover:ring-white hover:shadow-xl shadow-inner hover:bg-blue-100' href="${this.linkTo.url}" ${this.linkTo.newTab ? 'target="_blank"' : ""}>`,
+                `<div class='flex-shrink-0'>`,
+                `<div class='flex items-center justify-center h-11 w-11'>`,
                 this.image,
+                `</div>`,
+                `</div>`,
+                `<div class='ml-4'>`,
                 this.message,
-                '</a>'
+                `</div>`,
+                `</a>`
             ]).Render();
         }
 
+        // Styling todo
         return new Combine([
-            '<span class="subtle-button">',
+            '<span class="">',
             this.image,
             this.message,
             '</span>'

UI/BigComponents/MoreScreen.ts

@@ -65,15 +65,14 @@ export default class MoreScreen extends UIElement {
         }
 
         let description = Translations.W(layout.shortDescription);
-        if (description !== undefined) {
-            description = new Combine(["<br/>", description]);
-        }
         return new SubtleButton(layout.icon,
             new Combine([
-                "<b>",
+                `<dt class='text-lg leading-6 font-medium text-gray-900 group-hover:text-blue-800'>`,
                 Translations.W(layout.title),
-                "</b>",
+                `</dt>`,
+                `<dd class='mt-1 text-base text-gray-500 group-hover:text-blue-900'>`,
                 description ?? "",
+                `</dd>`,
             ]), {url: linkText, newTab: false});
     }
 
@@ -83,18 +82,7 @@ export default class MoreScreen extends UIElement {
 
         const els: UIElement[] = []
 
-        els.push(new VariableUiElement(
+        const linkButton: UIElement[] = []
-            State.state.osmConnection.userDetails.map(userDetails => {
-                if (userDetails.csCount < Constants.userJourney.themeGeneratorReadOnlyUnlock) {
-                    return tr.requestATheme.Render();
-                }
-                return new SubtleButton(Svg.pencil_ui(), tr.createYourOwnTheme, {
-                    url: "./customGenerator.html",
-                    newTab: false
-                }).Render();
-            })
-        ));
-
 
         for (const k in AllKnownLayouts.allSets) {
             const layout: LayoutConfig = AllKnownLayouts.allSets[k];
@@ -106,9 +94,26 @@ export default class MoreScreen extends UIElement {
             if (layout.id !== k) {
                 continue; // This layout was added multiple time due to an uppercase
             }
-            els.push(this.createLinkButton(layout));
+            linkButton.push(this.createLinkButton(layout));
         }
 
+        els.push(new Combine([
+            `<div class='rounded-xl overflow-hidden bg-gradient-to-tr from-green-400 via-blue-500 to-green-500 p-5 m-8 mt-5'>`,
+            new Combine(linkButton),
+            `</div>`
+        ]))
+
+        els.push(new VariableUiElement(
+            State.state.osmConnection.userDetails.map(userDetails => {
+                if (userDetails.csCount < Constants.userJourney.themeGeneratorReadOnlyUnlock) {
+                    return tr.requestATheme.SetClass("block text-base mx-10 my-3").Render();
+                }
+                return new SubtleButton(Svg.pencil_ui(), tr.createYourOwnTheme, {
+                    url: "./customGenerator.html",
+                    newTab: false
+                }).Render();
+            })
+        ));
 
         const customThemesNames = State.state.installedThemes.data ?? [];
 
@@ -125,16 +130,15 @@ export default class MoreScreen extends UIElement {
            intro = new Combine([
 
            LanguagePicker.CreateLanguagePicker(Translations.t.general.index.SupportedLanguages())
-               .SetStyle("position: absolute; right: 1.5em; top: 1.5em;"),
+               .SetClass("absolute top-2 right-3 dropdown-ui-element-2226"),
-            Translations.t.general.index.SetStyle("margin-top: 2em;display:block; margin-bottom: 1em;")
+               Translations.t.general.index.SetClass("sm:text-center lg:text-left block m-6 mt-8")
            ])
         }
 
-
-          intro,
-            tr.streetcomplete
         this._component = new Combine([
+            intro,
             new Combine(els),
+            tr.streetcomplete.SetClass("block text-base mx-10 my-3 mb-10")
         ]);
         return this._component.Render();
     }

index.css

@@ -492,52 +492,6 @@ a {
 }
 
 /** Switch layout **/
-.subtle-button {
-    display: flex;
-    flex-wrap: nowrap;
-    flex-direction: row;
-    font-size: large;
-    margin: 0.5em;
-    background-color: var(--subtle-detail-color);
-    color: var(--subtle-detail-color-contrast);
-    border-radius: 1em;
-    align-items: center;
-    text-decoration: none;
-}
-
-
-.subtle-button a {
-    text-decoration: unset !important;
-    color: unset !important;
-    display: block ruby;
-}
-
-.round-button .subtle-button {
-    width: 2em;
-    height: 2em;
-    border-radius: 1em;
-    display: block !important;
-    margin: 0;
-    padding: 0.5em;
-}
-
-.small-button .subtle-button {
-    height: 2em;
-}
-
-.small-button .subtle-button img {
-    max-height: 1.8em;
-}
-
-.subtle-button img {
-    max-width: 3em;
-    height: 3em;
-    margin-right: 0.5em;
-    padding: 0;
-    padding-bottom: 0.2em;
-}
-
-
 .small-image img {
     height: 1em;
     max-width: 1em;