From bc3c67f39c61b1c4442eada32bf942590b43e8a3 Mon Sep 17 00:00:00 2001
From: Katja Lutz <mail@katjalutz.ch>
Date: Wed, 29 Jun 2022 15:15:50 +0200
Subject: [PATCH] feat: cleanup external links in WelcomeModal

---
 src/components/WelcomeModal.tsx | 34 +++++++++++++++++----------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/components/WelcomeModal.tsx b/src/components/WelcomeModal.tsx
index ee5c120..54de575 100644
--- a/src/components/WelcomeModal.tsx
+++ b/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}
                     >