From faf6252b4b605c621198c49b768660fd221e5e8e Mon Sep 17 00:00:00 2001
From: markostreich <markostreich@users.noreply.github.com>
Date: Wed, 6 Nov 2024 13:03:27 +0100
Subject: [PATCH] :bug: fix MucDivider (#282)

* #183 :bug: fix MucDivider

* :recycle: moved css class into the component #183

* :recycle: refactored compoonents to use the muc-divider #183

---------

Co-authored-by: langehm <38280183+langehm@users.noreply.github.com>
Co-authored-by: langehm <langehm@users.noreply.github.com>
---
 public/assets/temporary/custom-style.css | 6 ------
 src/components/Card/MucCard.vue          | 4 +++-
 src/components/Divider/MucDivider.vue    | 8 +++++---
 src/components/Intro/MucIntro.vue        | 7 +++----
 4 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/public/assets/temporary/custom-style.css b/public/assets/temporary/custom-style.css
index 6d2203ab..20b67046 100644
--- a/public/assets/temporary/custom-style.css
+++ b/public/assets/temporary/custom-style.css
@@ -63,9 +63,3 @@ h5 {
         font-size: 1.25rem;
     }
 }
-
-.muc-divider {
-    align-self: stretch;
-    height: 0;
-    border: 1px var(--color-neutrals-blue) solid;
-}
diff --git a/src/components/Card/MucCard.vue b/src/components/Card/MucCard.vue
index bfac17d7..ff9ca554 100644
--- a/src/components/Card/MucCard.vue
+++ b/src/components/Card/MucCard.vue
@@ -19,7 +19,7 @@
         </div>
       </div>
 
-      <div class="muc-divider" />
+      <muc-divider />
 
       <slot name="content" />
     </div>
@@ -27,6 +27,8 @@
 </template>
 
 <script setup lang="ts">
+import { MucDivider } from "../Divider";
+
 const emit = defineEmits<{
   /**
    * @param e eventname
diff --git a/src/components/Divider/MucDivider.vue b/src/components/Divider/MucDivider.vue
index f0481157..e45f42ed 100644
--- a/src/components/Divider/MucDivider.vue
+++ b/src/components/Divider/MucDivider.vue
@@ -1,9 +1,11 @@
 <template>
-  <hr class="divider-border" />
+  <div class="muc-divider" />
 </template>
 
 <style scoped>
-.divider-border {
-  border-bottom: 1px solid var(--color-neutrals-blue);
+.muc-divider {
+  align-self: stretch;
+  height: 0;
+  border-bottom: 1px var(--color-neutrals-blue) solid;
 }
 </style>
diff --git a/src/components/Intro/MucIntro.vue b/src/components/Intro/MucIntro.vue
index cd20e345..16cb767c 100644
--- a/src/components/Intro/MucIntro.vue
+++ b/src/components/Intro/MucIntro.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { MucDivider } from "../Divider";
+
 defineProps<{
   /**
    * Title of the Intro
@@ -41,10 +43,7 @@ defineSlots<{
           </h1>
         </div>
 
-        <div
-          v-if="divider"
-          class="muc-divider"
-        />
+        <muc-divider v-if="divider" />
 
         <div class="m-intro-vertical__content">
           <p style="padding-bottom: 32px">