From 1490b191af0559cef8cf4e31a507641a94c37596 Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Fri, 7 Apr 2023 09:44:08 +0200
Subject: [PATCH] [TASK] refactor code and add base css components

---
 frontend/scss/app.scss                   | 88 ++----------------------
 frontend/scss/components/_btns.scss      | 23 +++++++
 frontend/scss/components/_headlines.scss |  3 +
 frontend/scss/components/_input.scss     |  3 +
 frontend/scss/components/_links.scss     |  9 +++
 frontend/scss/components/_sidebar.scss   | 83 ++++++++++++++++++++++
 templates/admin/user/index.html.tera     |  2 +-
 templates/auth/login.html.tera           | 14 ++--
 templates/auth/set-pw.html.tera          | 14 ++--
 templates/includes/cox-icon.html.tera    |  4 ++
 templates/includes/delete-icon.html.tera |  6 ++
 templates/includes/lock-icon.html.tera   |  3 +
 templates/includes/macros.html.tera      |  4 +-
 templates/index.html.tera                | 42 ++++-------
 14 files changed, 165 insertions(+), 133 deletions(-)
 create mode 100644 frontend/scss/components/_btns.scss
 create mode 100644 frontend/scss/components/_headlines.scss
 create mode 100644 frontend/scss/components/_input.scss
 create mode 100644 frontend/scss/components/_links.scss
 create mode 100644 frontend/scss/components/_sidebar.scss
 create mode 100644 templates/includes/cox-icon.html.tera
 create mode 100644 templates/includes/delete-icon.html.tera
 create mode 100644 templates/includes/lock-icon.html.tera

diff --git a/frontend/scss/app.scss b/frontend/scss/app.scss
index c9e7c41..5f1ce76 100644
--- a/frontend/scss/app.scss
+++ b/frontend/scss/app.scss
@@ -2,86 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
-/* purgecss start ignore */
-.sidebar {
-  position: fixed;
-  overflow-y: scroll;
-  top: 0;
-  background: white;
-  z-index: 2000;
-  width: 0;
-  box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
-
-  &.open {
-      background-color: rgba(255, 255, 255, 100%);
-      display: block;
-      height: 100vh;
-      right: 0;
-      top: 0;
-      width: 375px;
-      z-index: 40000;
-  }
-
-  &.slide-in {
-      transition-duration: 75ms;
-      transition-property: all;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  }
-
-  &.from-right {
-      right: -24rem;
-
-      &.open {
-          right: 0;
-      }
-  }
-
-  &.from-left {
-      left: -24rem;
-
-      &.open {
-          left: 0;
-      }
-  }
-
-  &-overlay {
-      display: none;
-
-      &.show {
-          background-color: rgba(0, 0, 0, 0.2);
-          content: '';
-          display: block;
-          height: 100%;
-          left: 0;
-          position: fixed;
-          top: 0;
-          width: 100%;
-          z-index: 1025;
-      }
-  }
-
-  &-close {
-      border-radius: 100%;
-      width: 27.5px;
-
-      &:focus {
-          background: white !important;
-      }
-  }
-
-  &-footer {
-      position: fixed;
-      margin: 0 -8px -4px;
-      width: 374px;
-      bottom: 0;
-  }
-
-  &-header {
-      position: fixed;
-      width: 375px;
-      top: 0;
-      z-index: 1;
-  }
-}
-/* purgecss end ignore */
+@import 'components/headlines';
+@import 'components/sidebar';
+@import 'components/btns';
+@import 'components/links';
+@import 'components/input';
diff --git a/frontend/scss/components/_btns.scss b/frontend/scss/components/_btns.scss
new file mode 100644
index 0000000..c696504
--- /dev/null
+++ b/frontend/scss/components/_btns.scss
@@ -0,0 +1,23 @@
+.btn {
+  @apply rounded-md px-3 py-2 text-sm font-semibold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer text-center;
+
+  &-primary {
+    @apply bg-primary-600 hover:bg-primary-500 focus-visible:outline-primary-600;
+  }
+
+  &-dark {
+    @apply bg-primary-900 hover:bg-primary-950 focus-visible:outline-primary-950;
+  }
+
+  &-attention {
+    @apply bg-[#f43f5e] hover:bg-[#ff0000] focus-visible:outline-[#ff0000];
+  }
+
+  &-alert {
+    @apply bg-[#ff0000] hover:bg-[#ff0000] focus-visible:outline-[#ff0000];
+  }
+
+  &-fw {
+    @apply w-28;
+  }
+}
diff --git a/frontend/scss/components/_headlines.scss b/frontend/scss/components/_headlines.scss
new file mode 100644
index 0000000..a547fab
--- /dev/null
+++ b/frontend/scss/components/_headlines.scss
@@ -0,0 +1,3 @@
+.h1 {
+  @apply text-center text-3xl uppercase tracking-wide font-bold text-primary-900;
+}
diff --git a/frontend/scss/components/_input.scss b/frontend/scss/components/_input.scss
new file mode 100644
index 0000000..453fd78
--- /dev/null
+++ b/frontend/scss/components/_input.scss
@@ -0,0 +1,3 @@
+.input {
+  @apply relative block w-full border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6;
+}
diff --git a/frontend/scss/components/_links.scss b/frontend/scss/components/_links.scss
new file mode 100644
index 0000000..d03040d
--- /dev/null
+++ b/frontend/scss/components/_links.scss
@@ -0,0 +1,9 @@
+.link {
+  &-primary {
+    @apply text-primary-600 hover:text-primary-900 underline;
+  }
+
+  &-dark {
+    @apply text-primary-900 hover:text-primary-950 underline;
+  }
+}
diff --git a/frontend/scss/components/_sidebar.scss b/frontend/scss/components/_sidebar.scss
new file mode 100644
index 0000000..78597ac
--- /dev/null
+++ b/frontend/scss/components/_sidebar.scss
@@ -0,0 +1,83 @@
+/* purgecss start ignore */
+.sidebar {
+  position: fixed;
+  overflow-y: scroll;
+  top: 0;
+  background: white;
+  z-index: 2000;
+  width: 0;
+  box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
+
+  &.open {
+      background-color: rgba(255, 255, 255, 100%);
+      display: block;
+      height: 100vh;
+      right: 0;
+      top: 0;
+      width: 375px;
+      z-index: 40000;
+  }
+
+  &.slide-in {
+      transition-duration: 75ms;
+      transition-property: all;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+
+  &.from-right {
+      right: -24rem;
+
+      &.open {
+          right: 0;
+      }
+  }
+
+  &.from-left {
+      left: -24rem;
+
+      &.open {
+          left: 0;
+      }
+  }
+
+  &-overlay {
+      display: none;
+
+      &.show {
+          background-color: rgba(0, 0, 0, 0.2);
+          content: '';
+          display: block;
+          height: 100%;
+          left: 0;
+          position: fixed;
+          top: 0;
+          width: 100%;
+          z-index: 1025;
+      }
+  }
+
+  &-close {
+      border-radius: 100%;
+      width: 27.5px;
+
+      &:focus {
+          background: white !important;
+      }
+  }
+
+  &-footer {
+      position: fixed;
+      margin: 0 -8px -4px;
+      width: 374px;
+      bottom: 0;
+  }
+
+  &-header {
+      position: fixed;
+      width: 375px;
+      top: 0;
+      z-index: 1;
+  }
+}
+/* purgecss end ignore */
diff --git a/templates/admin/user/index.html.tera b/templates/admin/user/index.html.tera
index 8391a71..b206925 100644
--- a/templates/admin/user/index.html.tera
+++ b/templates/admin/user/index.html.tera
@@ -4,7 +4,7 @@
 
 {% block content %}
 <div class="max-w-screen-lg w-full">
-  <h1 class="text-center text-3xl uppercase tracking-wide font-bold text-primary-900">Users</h1>
+  <h1 class="h1">Users</h1>
 
 <form action="/admin/user/new" method="post" class="mt-4 bg-primary-900 rounded-md text-white px-3 pb-3 pt-2 sm:flex items-end justify-between">
   <div class="w-full">
diff --git a/templates/auth/login.html.tera b/templates/auth/login.html.tera
index 241af67..47c8857 100644
--- a/templates/auth/login.html.tera
+++ b/templates/auth/login.html.tera
@@ -4,7 +4,7 @@
   <div class="w-full max-w-md space-y-8">
     <div>
       <img class="mx-auto h-16 w-auto" src="https://rudernlinz.at/wp-content/uploads/2021/02/cropped-logo.png" alt="Your Company">
-      <h1 class="mt-6 text-center text-3xl uppercase tracking-wide font-bold text-primary-900">Ruderassistent</h1>
+      <h1 class="mt-6 h1">Ruderassistent</h1>
     </div>
 
     {% if flash %}
@@ -23,21 +23,17 @@
       <input type="hidden" name="remember" value="true">
       <div class="-space-y-px rounded-md shadow-sm">
         <div>
-          <label for="name" class="sr-only">Name</label>
-          <input id="name" name="name" type="input" required class="relative block w-full rounded-t-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6" placeholder="Name">
+          {{ macros::input(label='Name', name='name', type='input', required=true, class='rounded-t-md') }}
         </div>
         <div>
-          <label for="password" class="sr-only">Password</label>
-          <input id="password" name="password" type="password" autocomplete="current-password" class="relative block w-full rounded-b-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6" placeholder="Passwort">
+          {{ macros::input(label='Passwort', name='password', type='password', class='rounded-b-md') }}
         </div>
       </div>
 
       <div>
-        <button type="submit" class="group relative flex w-full justify-center rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600">
+        <button type="submit" class="group relative flex w-full justify-center btn btn-primary">
           <span class="absolute inset-y-0 left-0 flex items-center pl-3">
-            <svg class="h-5 w-5 text-primary-300 group-hover:text-primary-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-              <path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd" />
-            </svg>
+            {% include "includes/lock-icon" %}
           </span>
           Einloggen
         </button>
diff --git a/templates/auth/set-pw.html.tera b/templates/auth/set-pw.html.tera
index fd4ac6c..1670f97 100644
--- a/templates/auth/set-pw.html.tera
+++ b/templates/auth/set-pw.html.tera
@@ -2,28 +2,24 @@
 
 {% block content %}
 <div class="w-full max-w-md space-y-8">
-  <h1 class="mt-6 text-center text-3xl uppercase tracking-wide font-bold text-primary-900">Passwort setzen</h1>
+  <h1 class="mt-6 h1">Passwort setzen</h1>
 
   <form class="mt-8 space-y-6" action="/auth/set-pw" method="post">
     <input type="hidden" name="remember" value="true">
     <input type="hidden" name="userid" value="{{ userid }}" />
     <div class="-space-y-px rounded-md shadow-sm">
       <div>
-        <label for="password" class="sr-only">Passwort</label>
-        <input id="password" name="password" type="password" autocomplete="current-password" required class="relative block w-full rounded-t-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6" placeholder="Passwort">
+        {{ macros::input(label='Passwort', name='password', type='password', required=true, class='rounded-t-md') }}
       </div>
       <div>
-        <label for="password_confirm" class="sr-only">Passwort confirm</label>
-        <input id="password_confirm" name="password_confirm" type="password" autocomplete="current-password" required class="relative block w-full rounded-b-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6" placeholder="Passwort bestätigen">
+        {{ macros::input(label='Passwort bestätigen', name='password_confirm', type='password', required=true, class='rounded-b-md') }}
       </div>
     </div>
   
     <div>
-      <button type="submit" class="group relative flex w-full justify-center rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600">
+      <button type="submit" class="group relative flex w-full justify-center btn btn-primary">
         <span class="absolute inset-y-0 left-0 flex items-center pl-3">
-          <svg class="h-5 w-5 text-primary-300 group-hover:text-primary-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-            <path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd" />
-          </svg>
+          {% include "includes/lock-icon" %}
         </span>
         Bestätigen
       </button>
diff --git a/templates/includes/cox-icon.html.tera b/templates/includes/cox-icon.html.tera
new file mode 100644
index 0000000..fb4685e
--- /dev/null
+++ b/templates/includes/cox-icon.html.tera
@@ -0,0 +1,4 @@
+<svg width="16" height="16" fill="currentColor" class="inline-block mr-1 h-3 w-3" viewBox="0 0 16 16" style="margin-top: -0.2rem;">
+  <path
+    d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z" />
+</svg>
\ No newline at end of file
diff --git a/templates/includes/delete-icon.html.tera b/templates/includes/delete-icon.html.tera
new file mode 100644
index 0000000..6ffc9e5
--- /dev/null
+++ b/templates/includes/delete-icon.html.tera
@@ -0,0 +1,6 @@
+<svg width="16" height="16" fill="currentColor" class="inline h-4 w-4" viewBox="0 0 16 16">
+  <path
+    d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
+  <path fill-rule="evenodd"
+    d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
+</svg>
\ No newline at end of file
diff --git a/templates/includes/lock-icon.html.tera b/templates/includes/lock-icon.html.tera
new file mode 100644
index 0000000..6b52f1f
--- /dev/null
+++ b/templates/includes/lock-icon.html.tera
@@ -0,0 +1,3 @@
+<svg class="h-5 w-5 text-primary-300 group-hover:text-primary-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+  <path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd" />
+</svg>
diff --git a/templates/includes/macros.html.tera b/templates/includes/macros.html.tera
index 0898127..279506f 100644
--- a/templates/includes/macros.html.tera
+++ b/templates/includes/macros.html.tera
@@ -24,9 +24,9 @@
     <div class="h-8"></div>
 {% endmacro header %}
 
-{% macro input(label, name, type, required=false) %}
+{% macro input(label, name, type, required=false, class='rounded-md') %}
   <label for="{{ name }}" class="sr-only">{{ label }}</label>
-  <input id="{{ name }}" name="{{ name }}" type="{{ type }}" {% if required %} required {% endif %} class="relative block w-full rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6" placeholder="{{ label }}">
+  <input id="{{ name }}" name="{{ name }}" type="{{ type }}" {% if required %} required {% endif %} class="input {{ class }}" placeholder="{{ label }}">
 {% endmacro input %}
 
 {% macro checkbox(label, name, id='', checked=false) %}
diff --git a/templates/index.html.tera b/templates/index.html.tera
index 0d66077..4c87478 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -17,8 +17,7 @@
     {% endif %}
   {% endif %}
 
-  <h1 class="text-center text-3xl uppercase tracking-wide font-bold text-primary-900 sm:col-span-2 lg:col-span-3">
-    Ausfahrten</h1>
+  <h1 class="h1 sm:col-span-2 lg:col-span-3">Ausfahrten</h1>
 
   {% for day in days %}
   <div class="bg-white p-3 rounded-md flex justify-between flex-col">
@@ -34,7 +33,7 @@
               <strong class="text-primary-900">{{ planned_event.planned_starting_time }} Uhr</strong> <small
                 class="text-gray-600">({{ planned_event.name }})</small><br />
               <a href="#" data-sidebar="true" data-trigger="detailEvent{{ planned_event.id }}"
-                class="inline-block text-primary-600 hover:text-primary-900 underline mr-3">Details</a>
+                class="inline-block mr-3 link-primary">Details</a>
             </div>
             <div class="text-right grid gap-2">
               {% set_global cur_user_participates = false %}
@@ -44,13 +43,11 @@
                 {% endif %}
               {% endfor %}
               {% if cur_user_participates %}
-                <a href="/remove/{{ planned_event.trip_details_id }}"
-                  class="w-28 rounded-md bg-[#f43f5e] px-3 py-2 text-sm font-semibold text-white hover:bg-[#ff0000] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#ff0000] cursor-pointer text-center">Abmelden</a>
+                <a href="/remove/{{ planned_event.trip_details_id }}" class="btn btn-attention btn-fw">Abmelden</a>
               {% endif %}
               {% if planned_event.max_people > planned_event.rower | length %}
                 {% if cur_user_participates == false %}
-                  <a href="/join/{{ planned_event.trip_details_id }}"
-                    class="w-28 rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer text-center">Mitrudern</a>
+                  <a href="/join/{{ planned_event.trip_details_id }}" class="btn btn-primary btn-fw">Mitrudern</a>
                 {% endif %}
               {% endif %}
 
@@ -63,21 +60,13 @@
               {% endif %}
               {% endfor %}
               {% if cur_user_participates %}
-              <a href="/cox/remove/{{ planned_event.id }}"
-                class="w-28 block rounded-md bg-[#f43f5e] px-3 py-2 text-sm font-semibold text-white hover:bg-[#ff0000] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#ff0000] cursor-pointer text-center">
-                <svg width="16" height="16" fill="currentColor" class="inline-block mr-1 h-3 w-3" viewBox="0 0 16 16">
-                  <path
-                    d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z" />
-                </svg>
+              <a href="/cox/remove/{{ planned_event.id }}" class="block btn btn-attention btn-fw">
+                {% include "includes/cox-icon" %}
                 Abmelden
               </a>
               {% else %}
-              <a href="/cox/join/{{ planned_event.id }}"
-                class="w-28 block rounded-md bg-primary-900 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-950 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-950 cursor-pointer text-center">
-                <svg width="16" height="16" fill="currentColor" class="inline-block mr-1 h-3 w-3" viewBox="0 0 16 16">
-                  <path
-                    d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z" />
-                </svg>
+              <a href="/cox/join/{{ planned_event.id }}" class="block btn btn-dark btn-fw">
+                {% include "includes/cox-icon" %}
                 Steuern
               </a>
               {% endif %}
@@ -138,13 +127,8 @@
   
               {% if loggedin_user.is_admin %}
               <a href="/admin/planned-event/{{ planned_event.id }}/delete"
-                class="inline-block rounded-md bg-[#ff0000] px-3 py-2 text-sm font-semibold text-white hover:bg-[#ff0000] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#ff0000] cursor-pointer">
-                <svg width="16" height="16" fill="currentColor" class="inline h-4 w-4" viewBox="0 0 16 16">
-                  <path
-                    d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
-                  <path fill-rule="evenodd"
-                    d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
-                </svg>
+                class="inline-block btn btn-alert">
+                {% include "includes/delete-icon" %}
                 Termin löschen
               </a>
               {% endif %}
@@ -166,7 +150,7 @@
               <strong class="text-primary-900">{{ trip.planned_starting_time }} Uhr</strong> <small
                 class="text-gray-600">({{ trip.cox_name }})</small><br />
               <a href="#" data-sidebar="true" data-trigger="detailTrip{{ trip.trip_details_id }}"
-                class="inline-block text-primary-600 hover:text-primary-900 underline mr-3">Details</a>
+                class="inline-block link-primary mr-3">Details</a>
             </div>
             <div>
               {% set_global cur_user_participates = false %}
@@ -227,7 +211,7 @@
     <div>
       {% if loggedin_user.is_admin %}
       <a href="#" data-sidebar="true" data-trigger="plannedTrip{{ loop.index }}"
-        class="inline-block text-primary-900 hover:text-primary-950 underline mr-3">Event hinzufügen</a>
+        class="inline-block link-dark mr-3">Event hinzufügen</a>
 
       <!-- START Sidebar plannedTrip -->
       <div class="sidebar slide-in from-right" id="plannedTrip{{ loop.index }}" aria-modal="false">
@@ -263,7 +247,7 @@
 
       {% if loggedin_user.is_cox%}
       <a href="#" data-sidebar="true" data-trigger="trip{{ loop.index }}"
-        class="inline-block text-primary-600 hover:text-primary-900 underline">Ausfahrt hinzufügen</a>
+        class="inline-block link-primary">Ausfahrt hinzufügen</a>
 
       <div class="sidebar slide-in from-right" id="trip{{ loop.index }}" aria-modal="false">
         <div class="bg-primary-900 text-white px-2 py-3 flex justify-between sidebar-header">