From 0d924b24d1a16b2d57540b19fbb9e62d39cd7784 Mon Sep 17 00:00:00 2001
From: rraajvamsy <raajvamsy.rayavarapu@wavemaker.com>
Date: Fri, 6 Sep 2024 13:10:36 +0530
Subject: [PATCH 1/2] updated accordion styles

---
 website/src/theme/Details/index.js          | 15 ++++++++++
 website/src/theme/Details/styles.module.css | 31 +++++++++++++++++++++
 website/static/css/custom.css               |  5 +++-
 3 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 website/src/theme/Details/index.js
 create mode 100644 website/src/theme/Details/styles.module.css

diff --git a/website/src/theme/Details/index.js b/website/src/theme/Details/index.js
new file mode 100644
index 000000000..0f3949654
--- /dev/null
+++ b/website/src/theme/Details/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Details as DetailsGeneric } from '@docusaurus/theme-common/Details';
+import styles from './styles.module.css';
+// Should we have a custom details/summary comp in Infima instead of reusing
+// alert classes?
+const InfimaClasses = 'alert alert--info custom-details';
+export default function Details({ ...props }) {
+  return (
+    <DetailsGeneric
+      {...props}
+      className={clsx(InfimaClasses, styles.details, props.className)}
+    />
+  );
+}
diff --git a/website/src/theme/Details/styles.module.css b/website/src/theme/Details/styles.module.css
new file mode 100644
index 000000000..c74a9b6bc
--- /dev/null
+++ b/website/src/theme/Details/styles.module.css
@@ -0,0 +1,31 @@
+.details {
+  --docusaurus-details-transition: transform var(--ifm-transition-fast) ease;
+  margin: 0 0 var(--ifm-spacing-vertical);
+  background-color: var(--wm-details-background);
+  border-color: transparent;
+  border-radius: 8px;
+}
+summary {
+  display: flex; /* Align icon and text */
+  justify-content: space-between; /* Space between text and icon */
+  cursor: pointer; /* Pointer cursor on hover */
+  align-items: center;
+}
+
+summary::before {
+  display: none;
+}
+summary::after {
+  content: "+"; /* Default icon */
+  color: var(--wm-details-icon-color); /* Icon color */
+  font-weight: bold;
+  font-size: 1.5rem; /* Icon size */
+  transition: transform 0.3s ease; /* Smooth icon rotation */
+}
+
+/* Rotate icon when details is open */
+details[open] summary::after {
+    content: "-"; /* Icon when open */
+    transform: rotate(180deg); /* Rotate icon */
+}
+
diff --git a/website/static/css/custom.css b/website/static/css/custom.css
index 92c6694c6..f605b43ba 100644
--- a/website/static/css/custom.css
+++ b/website/static/css/custom.css
@@ -81,6 +81,8 @@
     --ifm-tabs-prev-button-image:url("/img/prevArrow.svg");
     --mermaid-background-color:#c2e7ff;
     --mermaid-border-color:#f6f8fd;
+    --wm-details-background: #F9F9FA;
+    --wm-details-icon-color: #424A52;
     --wm-category-arrow-image:url("/img/chevron-right-category.svg");
 
 }
@@ -168,7 +170,8 @@ html[data-theme="dark"] {
      --mermaid-border-color:#c2e7ff;
      --wm-category-arrow-image:url("/img/chevron-right-category-dark.svg");
      --ifm-toc-link-color-dark:#000000;
-     
+     --wm-details-background: #192847;
+     --wm-details-icon-color: #FFFFFFE5;
 }
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap');
 /* your custom css */

From 04e9e121b2500705c768329aaafad6c4765cd82a Mon Sep 17 00:00:00 2001
From: rraajvamsy <raajvamsy.rayavarapu@wavemaker.com>
Date: Mon, 9 Sep 2024 09:13:29 +0530
Subject: [PATCH 2/2] updated Note color in Dark theme

---
 website/static/css/custom.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/website/static/css/custom.css b/website/static/css/custom.css
index f605b43ba..f34a3534b 100644
--- a/website/static/css/custom.css
+++ b/website/static/css/custom.css
@@ -83,6 +83,7 @@
     --mermaid-border-color:#f6f8fd;
     --wm-details-background: #F9F9FA;
     --wm-details-icon-color: #424A52;
+    --ifm-alert-background-note-color: rgb(0, 82, 204,10%);
     --wm-category-arrow-image:url("/img/chevron-right-category.svg");
 
 }
@@ -171,6 +172,7 @@ html[data-theme="dark"] {
      --wm-category-arrow-image:url("/img/chevron-right-category-dark.svg");
      --ifm-toc-link-color-dark:#000000;
      --wm-details-background: #192847;
+     --ifm-alert-background-note-color: #18243D;
      --wm-details-icon-color: #FFFFFFE5;
 }
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap');
@@ -179,6 +181,11 @@ body {
     margin: 0;
     /* font-family: 'Roboto', sans-serif; */
 }
+
+.theme-admonition-note {
+    background: var(--ifm-alert-background-note-color);
+  }
+
 .alert--impact {
     --ifm-alert-background-color: #FFFAE8;
     --ifm-alert-foreground-color: rgb(66,69,73);