From b90c4205753c896975184eec8630f5f60dc6843f Mon Sep 17 00:00:00 2001
From: Piyush Bhaskar <102078527+Piyush-r-bhaskar@users.noreply.github.com>
Date: Thu, 28 Nov 2024 23:18:29 +0100
Subject: [PATCH] docs(ui): Make background color of all mermaid diagrams white
 or grey so that it displays correctly in dark mode (#1987)

Co-authored-by: impiyushrb <impiyushrb@gmail.com>
---
 components/content/Mermaid.vue                   | 15 +++++++++++++--
 content/docs/04.workflow-components/17.states.md | 14 +++++++++-----
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/components/content/Mermaid.vue b/components/content/Mermaid.vue
index d0e0dffd8f..3cffb5163b 100644
--- a/components/content/Mermaid.vue
+++ b/components/content/Mermaid.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="mermaid" v-if="show">
+    <div class="mermaid bg-white p-4" v-if="show" >
         <slot></slot>
     </div>
 </template>
@@ -16,4 +16,15 @@
     await mermaid.init();
   })
 
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss">
+.mermaid {
+    border-radius: 10px;
+      
+    span p {
+      color: black;
+      font-size: 22px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/content/docs/04.workflow-components/17.states.md b/content/docs/04.workflow-components/17.states.md
index cd73b8d42b..73af42d1ec 100644
--- a/content/docs/04.workflow-components/17.states.md
+++ b/content/docs/04.workflow-components/17.states.md
@@ -41,8 +41,8 @@ Here is a brief description of each state:
 
 ```mermaid
 graph LR;
-    classDef transient fill:#add8e6,stroke:#333,stroke-width:2px;
-    classDef terminal fill:#dda0dd,stroke:#333,stroke-width:2px;
+    classDef transient fill:#0ff,stroke:#333,stroke-width:2px;
+    classDef terminal fill:#f9f,stroke:#333,stroke-width:2px;
 
     subgraph Legend
         direction TB
@@ -65,11 +65,13 @@ graph LR;
     F -->|Restart execution| J[RESTARTED]
     J -->|Restart processed| C[RUNNING]
     A -->|System cancelled execution| K[CANCELLED]
-    C -->|User killed execution| L[KILLING]
+    C -->|User  killed execution| L[KILLING]
     L -->|Tasks terminated| M[KILLED]
 
     class A,B,C,G,I,J,L transient;
     class D,E,F,H,K,M terminal;
+
+    linkStyle 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16 stroke:#2a9d8f, stroke-width:3px;
 ```
 ::
 
@@ -104,8 +106,8 @@ Note how there is no `QUEUED`, `CANCELLED`, `PAUSED` or `RESTARTED` states for t
 
 ```mermaid
 graph LR;
-    classDef transient fill:#add8e6,stroke:#333,stroke-width:2px;
-    classDef terminal fill:#dda0dd,stroke:#333,stroke-width:2px;
+    classDef transient fill:#0ff,stroke:#333,stroke-width:2px;
+    classDef terminal fill:#f9f,stroke:#333,stroke-width:2px;
 
     subgraph Legend
         direction TB
@@ -126,5 +128,7 @@ graph LR;
 
     class A,B,F,H transient;
     class C,D,E,G,I terminal;
+
+    linkStyle 0,1,2,3,4,5,6,7,8,9 stroke:#2a9d8f, stroke-width:3px;
 ```
 ::
\ No newline at end of file