Move border custom css to Tailwind Class

- migrate custom css to Tailwind class
- introduce class-parameter for `AsImageElement`
- migrate width of login button to Tailwind class

InitUiElements.ts

@@ -260,6 +260,7 @@ export class InitUiElements {
 
         const fullOptions = new FullWelcomePaneWithTabs();
 
+        // ?-Button on Desktop, opens panel with close-X.
         const help = Svg.help_svg().SetClass("open-welcome-button block");
         const close = Svg.close_svg().SetClass("close-welcome-button");
         const checkbox = new CheckBox(
@@ -294,8 +295,9 @@ export class InitUiElements {
 
         }
 
+        // ?-Button on Mobile, opens full screen layer with close-button at the bottom
         Svg.help_svg()
-            .SetClass("open-welcome-button block shadow")
+            .SetClass("open-welcome-button block rounded-3xl overflow-hidden shadow" )
             .onClick(() => {
                 State.state.fullScreenMessage.setData({content: fullOptions2, hashText: "welcome"})
             }).AttachTo("help-button-mobile");

Svg.ts

@@ -255,7 +255,7 @@ export default class Svg {
     public static ring_ui() { return new FixedUiElement(Svg.ring_img);}
 
     public static search = " <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\"> <g id=\"search\"> <path id=\"magnifying-glass\" d=\"M1.63 9.474L4.006 7.1l.17-.1a3.45 3.45 0 0 1-.644-2.01A3.478 3.478 0 1 1 7.01 8.47 3.43 3.43 0 0 1 5 7.822l-.098.17-2.375 2.373c-.19.188-.543.142-.79-.105s-.293-.6-.104-.79zm5.378-2.27A2.21 2.21 0 1 0 4.8 4.994 2.21 2.21 0 0 0 7.01 7.21z\"/> </g> </svg>"
-    public static search_img = Img.AsImageElement(Svg.search)
+    public static search_img = Img.AsImageElement(Svg.search, 'rounded-3xl')
     public static search_svg() { return new FixedUiElement(Svg.search);}
     public static search_ui() { return new FixedUiElement(Svg.search_img);}
 

UI/Base/Img.ts

@@ -12,8 +12,8 @@ export default class Img {
        return `data:image/svg+xml;base64,${(btoa(source))}`;
    }
 
-    static AsImageElement(source: string): string{
+    static AsImageElement(source: string, css_class: string): string{
-        return `<img src="${Img.AsData(source)}">`;
+        return `<img class="${css_class}" alt="" src="${Img.AsData(source)}">`;
     }
 }
 

UI/BigComponents/UserBadge.ts

@@ -29,7 +29,7 @@ export default class UserBadge extends UIElement {
 
         this._loginButton = Translations.t.general.loginWithOpenStreetMap
             .Clone()
-            .SetClass("userbadge-login")
+            .SetClass("userbadge-login pt-3 w-full")
             .onClick(() => State.state.osmConnection.AttemptLogin());
         this._logout =
             Svg.logout_svg()

css/mobile.css

@@ -92,7 +92,6 @@ Contains tweaks for small screens
 
     .userbadge-login {
         min-width: unset;
-        width: calc(100vw - 5px);
     }
 
     #userbadge {

css/userbadge.css

@@ -2,11 +2,6 @@
     display: inline-block;
     background-color: var(--background-color);
     color: var(--foreground-color);
-    -webkit-border-radius: 2em;
-    -moz-border-radius: 2em;
-    border-radius: 2em;
-    border-bottom-right-radius: 1.5em;
-    border-top-right-radius: 1.5em;
     margin: 0;
     margin-bottom: 0.5em;
     width: 100%;
@@ -101,11 +96,6 @@
 
     display: inline-block;
     text-align: center;
-    -webkit-border-radius: 2em;
-    -moz-border-radius: 2em;
-    border-radius: 2em;
-    border-bottom-right-radius: 1.5em;
-    border-top-right-radius: 1.5em;
     margin: 0;
 
     min-width: 20em;

index.css

@@ -244,7 +244,6 @@ a {
 
     transition: all 500ms linear;
     pointer-events: all;
-    border-radius: 1.3em;
     margin: 0 0 0.5em;
     width: 100%;
 }
@@ -282,7 +281,6 @@ a {
     float: right;
     height: 1.2em;
     border: 2px solid black;
-    border-radius: 2em;
     padding: 0.4em;
     margin-left: 0.5em;
     margin-right: 0;
@@ -349,7 +347,6 @@ a {
     height: 3.5em;
     width: 3.5em;
     padding: 0.75em;
-    border-radius: 1em;
 }
 
 .open-welcome-button svg {
@@ -363,7 +360,6 @@ a {
     padding: 0;
     pointer-events: all;
     box-shadow: 0 0 10px var(--shadow-color);
-    border-radius: 1em;
     width: min-content;
     background-color: var(--background-color);
     color: var(--foreground-color);

index.html

@@ -50,10 +50,10 @@
 
 <div id="topleft-tools">
     <div id="userbadge-and-search">
-        <div id="userbadge" class="shadow"></div>
+        <div id="userbadge" class="shadow rounded-3xl overflow-hidden"></div>
-        <div id="searchbox" class="shadow"></div>
+        <div id="searchbox" class="shadow rounded-3xl overflow-hidden"></div>
     </div>
-    <div id="messagesbox"></div>
+    <div id="messagesbox" class="rounded-3xl overflow-hidden"></div>
     <div id="help-button-mobile"></div>
 </div>