From 9d3c7829bc2ffba0e974b99e16c54d69f9ae245c Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Tue, 28 May 2024 08:48:26 +0200
Subject: [PATCH] fix(dashboard): Styling of dashed divider (#7483)

---
 .../src/components/common/divider/divider.tsx        | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/admin-next/dashboard/src/components/common/divider/divider.tsx b/packages/admin-next/dashboard/src/components/common/divider/divider.tsx
index 4474797ae6..a91b46cef3 100644
--- a/packages/admin-next/dashboard/src/components/common/divider/divider.tsx
+++ b/packages/admin-next/dashboard/src/components/common/divider/divider.tsx
@@ -18,10 +18,16 @@ export const Divider = ({
       aria-orientation={orientation}
       role="separator"
       className={clx(
+        "border-ui-border-strong",
         {
-          "w-full border-t": orientation === "horizontal",
-          "h-full border-l": orientation === "vertical",
-          "border-dashed": variant === "dashed",
+          "w-full border-t":
+            orientation === "horizontal" && variant === "solid",
+          "h-full border-l": orientation === "vertical" && variant === "solid",
+          "bg-transparent": variant === "dashed",
+          "h-px w-full bg-[linear-gradient(90deg,var(--border-strong)_1px,transparent_1px)] bg-[length:4px_1px]":
+            variant === "dashed" && orientation === "horizontal",
+          "h-full w-px bg-[linear-gradient(0deg,var(--border-strong)_1px,transparent_1px)] bg-[length:1px_4px]":
+            variant === "dashed" && orientation === "vertical",
         },
         className
       )}