feat: cleanup external links in WelcomeModal

src/components/WelcomeModal.tsx

@@ -38,6 +38,8 @@ import { markdownHelpUrl } from "./Markdown";
 export const description =
   "Räppli ist eine freie Web App zur Erstellung von Schweizerischen Rechnungen inklusive QR-Code. Erfasse deine Rechnungspositionen und erhalte unmittelbar eine druckbare Rechnung.";
 
+const externalLinkClass = "inline-flex items-center gap-1";
+
 const WelcomeModal: Component = (props) => {
   const [localState, setLocalState, localStateMounted] =
     useContext(LocalStoreContext)!;
@@ -135,7 +137,7 @@ const WelcomeModal: Component = (props) => {
     <>
       Fredi Niklaus (
       <a
-        class="inline-flex items-center gap-1"
+        class={externalLinkClass}
         href="https://www.remedyit.ch/"
         {...externalLink}
       >
@@ -322,7 +324,7 @@ const WelcomeModal: Component = (props) => {
             <p>
               Lufrai ist die Einzelfirma von{" "}
               <a
-                class="inline-flex items-center gap-2"
+                class={externalLinkClass}
                 href="https://lufrai.org/katjalutz"
                 {...externalLink}
               >
@@ -332,7 +334,7 @@ const WelcomeModal: Component = (props) => {
               für eine unabhängige, freie Schweiz ein und unterstützt ihre
               souveränen Mitmenschen, das Steuer selbst in die Hand zu nehmen.
               <a
-                class="btn btn-sm inline-flex ml-3 items-center gap-2"
+                class="btn btn-sm inline-flex ml-3 items-center gap-1"
                 href="https://lufrai.org"
                 {...externalLink}
               >
@@ -408,7 +410,7 @@ const WelcomeModal: Component = (props) => {
               haben, dass du irgendwann keine Rechnungen mehr schreiben darfst.
               Lizenziert ist Räppli mit{" "}
               <a
-                class="inline-flex items-center gap-1"
+                class={externalLinkClass}
                 href="https://git.lufrai.com/rappli/rappli/raw/branch/master/LICENSE"
               >
                 MIT
@@ -416,7 +418,7 @@ const WelcomeModal: Component = (props) => {
               </a>
               .
               <a
-                class="btn btn-sm inline-flex ml-3 items-center gap-2"
+                class="btn btn-sm inline-flex ml-3 items-center gap-1"
                 href="https://git.lufrai.com/rappli/rappli"
                 {...externalLink}
               >
@@ -437,7 +439,7 @@ const WelcomeModal: Component = (props) => {
             <ul>
               <li>
                 <a
-                  class="flex items-center gap-2"
+                  class={externalLinkClass}
                   href="https://www.solidjs.com/"
                   {...externalLink}
                 >
@@ -447,7 +449,7 @@ const WelcomeModal: Component = (props) => {
               </li>
               <li>
                 <a
-                  class="flex items-center gap-2"
+                  class={externalLinkClass}
                   href="https://tailwindcss.com/"
                   {...externalLink}
                 >
@@ -457,7 +459,7 @@ const WelcomeModal: Component = (props) => {
               </li>
               <li>
                 <a
-                  class="flex items-center gap-2"
+                  class={externalLinkClass}
                   href="https://daisyui.com/"
                   {...externalLink}
                 >
@@ -467,7 +469,7 @@ const WelcomeModal: Component = (props) => {
               </li>
               <li>
                 <a
-                  class="flex items-center gap-2"
+                  class={externalLinkClass}
                   href="https://sortablejs.github.io/Sortable/"
                   {...externalLink}
                 >
@@ -477,7 +479,7 @@ const WelcomeModal: Component = (props) => {
               </li>
               <li>
                 <a
-                  class="flex items-center gap-2"
+                  class={externalLinkClass}
                   href="https://remark.js.org/"
                   {...externalLink}
                 >
@@ -493,12 +495,12 @@ const WelcomeModal: Component = (props) => {
             <p>
               An dieser Stelle möchte ich mich bei der Community von{" "}
               <a
-                class="inline-flex items-center gap-1 mr-1"
+                class={externalLinkClass}
                 href="https://www.solidjs.com/"
                 {...externalLink}
               >
                 Solid <ExternalLinkIcon />
-              </a>
+              </a>{" "}
               bedanken, nicht nur für ihr verblüffend effektives Open Source
               Web-Framework, sondern auch für ihre Offenheit, Anregungen und
               cleveren Tipps!
@@ -540,7 +542,7 @@ const WelcomeModal: Component = (props) => {
                     funktionieren, müssen jedoch unweigerlich einige Daten
                     übertragen werden, wie z.B. deine IP-Adresse. Erfahre{" "}
                     <a
-                      class="inline-flex items-center gap-1"
+                      class={externalLinkClass}
                       href="https://t3n.de/news/tcp-ip-internet-grundlagen-755667/"
                       {...externalLink}
                     >
@@ -589,7 +591,7 @@ const WelcomeModal: Component = (props) => {
                 Lufrai auf{" "}
                 <a
                   href="https://lufrai.org/impressum/"
-                  class="inline-flex items-center gap-1 mr-2"
+                  class={externalLinkClass}
                   {...externalLink}
                 >
                   Kontakt <ExternalLinkIcon />
@@ -644,7 +646,7 @@ const WelcomeModal: Component = (props) => {
                   Erfahre{" "}
                   <a
                     href={markdownHelpUrl}
-                    class="inline-flex items-center gap-1"
+                    class={externalLinkClass}
                     {...externalLink}
                   >
                     hier <ExternalLinkIcon />
@@ -704,7 +706,7 @@ const WelcomeModal: Component = (props) => {
                   <li>
                     Installiere{" "}
                     <a
-                      class="inline-flex items-center gap-1"
+                      class={externalLinkClass}
                       href="https://nodejs.org/en/"
                       {...externalLink}
                     >