From 228f15b2720f3342f2c065897d257cce188ae2ea Mon Sep 17 00:00:00 2001
From: Katja Lutz <mail@katjalutz.ch>
Date: Sun, 26 Jun 2022 18:33:22 +0200
Subject: [PATCH] feat: add title to social share section in WelcomeModal

---
 src/components/WelcomeModal.tsx | 38 ++++++++++++++++++---------------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/components/WelcomeModal.tsx b/src/components/WelcomeModal.tsx
index 3787962..14b8bde 100644
--- a/src/components/WelcomeModal.tsx
+++ b/src/components/WelcomeModal.tsx
@@ -110,6 +110,7 @@ const WelcomeModal: Component = (props) => {
   ) => (
     <a
       class={props.provider + " shadow"}
+      title={capitalize(props.provider)}
       data-via={props.via}
       aria-label={`Share on ${capitalize(props.provider)}`}
     ></a>
@@ -193,23 +194,26 @@ const WelcomeModal: Component = (props) => {
               </a>
             </div>
 
-            <div
-              class="mt-16 shareon flex flex-wrap items-center justify-center"
-              data-title="Hast du schon von Räppli gehört? Es ist ein praktisches Web App, womit Schweizer QR Rechnungen inkl. Rechnungspositionen erstellt werden können und es ist komplett kostenlos! Probiere es aus unter:"
-              data-url={getHost()}
-            >
-              <ShareonLink provider="facebook" />
-              <ShareonLink provider="linkedin" />
-              <ShareonLink provider="mastodon" />
-              <ShareonLink provider="odnoklassniki" />
-              <ShareonLink provider="pinterest" />
-              <ShareonLink provider="pocket" />
-              <ShareonLink provider="reddit" />
-              <ShareonLink provider="telegram" />
-              <ShareonLink provider="twitter" via="katy_wings" />
-              <ShareonLink provider="viber" />
-              <ShareonLink provider="vkontakte" />
-              <ShareonLink provider="whatsapp" />
+            <div class="mt-16 flex flex-wrap gap-3 items-center justify-center">
+              <div class="text-sm text-slate-600">Teile es auf:</div>
+              <div
+                class="shareon flex flex-wrap items-center justify-center"
+                data-title="Hast du schon von Räppli gehört? Es ist ein praktisches Web App, womit Schweizer QR Rechnungen inkl. Rechnungspositionen erstellt werden können und es ist komplett kostenlos! Probiere es aus unter:"
+                data-url={getHost()}
+              >
+                <ShareonLink provider="mastodon" />
+                <ShareonLink provider="telegram" />
+                <ShareonLink provider="reddit" />
+                <ShareonLink provider="odnoklassniki" />
+                <ShareonLink provider="pinterest" />
+                <ShareonLink provider="pocket" />
+                <ShareonLink provider="viber" />
+                <ShareonLink provider="vkontakte" />
+                <ShareonLink provider="linkedin" />
+                <ShareonLink provider="twitter" via="katy_wings" />
+                <ShareonLink provider="facebook" />
+                <ShareonLink provider="whatsapp" />
+              </div>
             </div>
           </div>
         </div>