From 5b1ff60b87d052fdab8f13c8b14899614545ed06 Mon Sep 17 00:00:00 2001
From: Kaushik Tak <kaushiktak19@gmail.com>
Date: Thu, 16 Oct 2025 17:08:16 +0530
Subject: [PATCH 1/3] ui: dark mode for installation component fixed

Signed-off-by: Kaushik Tak <kaushiktak19@gmail.com>
---
 src/components/InstallReminder.js | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/InstallReminder.js b/src/components/InstallReminder.js
index 5643dbe6f..5a070fcad 100644
--- a/src/components/InstallReminder.js
+++ b/src/components/InstallReminder.js
@@ -1,19 +1,29 @@
 import React from "react";
 import Link from "@docusaurus/Link";
+import {useColorMode} from "@docusaurus/theme-common";
 
 export default function InstallReminder() {
+  const {colorMode} = useColorMode();
+  const isDark = colorMode === "dark";
+
+  const containerStyle = {
+    padding: "1rem",
+    border: isDark ? "1px solid #333" : "1px solid #eee",
+    borderRadius: "10px",
+    background: isDark ? "#23272f" : "#fff8f5",
+    margin: "2rem 0",
+    color: isDark ? "#fff" : "#222",
+    boxShadow: isDark
+      ? "0 2px 10px rgba(0,0,0,0.6)"
+      : "0 2px 6px rgba(0, 0, 0, 0.08)",
+  };
+
   return (
     <div
-      style={{
-        padding: "1rem",
-        border: "1px solid #eee",
-        borderRadius: "10px",
-        background: "#fff8f5",
-        margin: "2rem 0",
-      }}
+      style={containerStyle}
     >
-      <h3>Don’t have Keploy installed yet?</h3>
-      <p>
+      <h3 style={{ color: isDark ? "#fff" : "#222"}}>Don’t have Keploy installed yet?</h3>
+      <p style={{color: isDark ? "#ccc" : undefined}}>
         Before running this sample, make sure Keploy is installed on your
         system.
       </p>

From 7322312265de30d54f39d0eae4c6b54a182fbd30 Mon Sep 17 00:00:00 2001
From: Kaushik Tak <kaushiktak19@gmail.com>
Date: Thu, 16 Oct 2025 18:09:49 +0530
Subject: [PATCH 2/3] ui: dark mode for EnterpriseInstallReminder component
 fixed

Signed-off-by: Kaushik Tak <kaushiktak19@gmail.com>
---
 src/components/EnterpriseInstallReminder.js | 28 ++++++++++++++-------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/EnterpriseInstallReminder.js b/src/components/EnterpriseInstallReminder.js
index c932c8ece..99c07f563 100644
--- a/src/components/EnterpriseInstallReminder.js
+++ b/src/components/EnterpriseInstallReminder.js
@@ -1,19 +1,29 @@
 import React from "react";
 import Link from "@docusaurus/Link";
+import {useColorMode} from "@docusaurus/theme-common";
 
 export default function EnterpriseInstallReminder() {
+  const {colorMode} = useColorMode();
+  const isDark = colorMode === "dark";
+
+  const containerStyle = {
+    padding: "1rem",
+    border: isDark ? "1px solid #333" : "1px solid #eee",
+    borderRadius: "10px",
+    background: isDark ? "#23272f" : "#fff8f5",
+    margin: "2rem 0",
+    color: isDark ? "#fff" : "#222",
+    boxShadow: isDark
+      ? "0 2px 10px rgba(0,0,0,0.6)"
+      : "0 2px 6px rgba(0, 0, 0, 0.08)",
+  };
+
   return (
     <div
-      style={{
-        padding: "1rem",
-        border: "1px solid #eee",
-        borderRadius: "10px",
-        background: "#fff8f5",
-        margin: "2rem 0",
-      }}
+      style={containerStyle}
     >
-      <h3>Don’t have Keploy installed yet?</h3>
-      <p>
+      <h3 style={{color: isDark ? "#fff" : "#222"}}>Don’t have Keploy installed yet?</h3>
+      <p style={{color: isDark ? "#ccc" : undefined}}>
         Before running this sample, make sure Keploy Enterprise version is
         installed on your system.
       </p>

From 6e28c89af43c0e496e882ebed5265ad9022e374e Mon Sep 17 00:00:00 2001
From: Kaushik Tak <kaushiktak19@gmail.com>
Date: Thu, 16 Oct 2025 18:56:31 +0530
Subject: [PATCH 3/3] ui: fixing margin in installations

Signed-off-by: Kaushik Tak <kaushiktak19@gmail.com>
---
 src/components/EnterpriseInstallReminder.js | 2 +-
 src/components/InstallReminder.js           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/EnterpriseInstallReminder.js b/src/components/EnterpriseInstallReminder.js
index 99c07f563..7949cf3f7 100644
--- a/src/components/EnterpriseInstallReminder.js
+++ b/src/components/EnterpriseInstallReminder.js
@@ -22,7 +22,7 @@ export default function EnterpriseInstallReminder() {
     <div
       style={containerStyle}
     >
-      <h3 style={{color: isDark ? "#fff" : "#222"}}>Don’t have Keploy installed yet?</h3>
+      <h3 style={{marginTop: 0, color: isDark ? "#fff" : "#222"}}>Don’t have Keploy installed yet?</h3>
       <p style={{color: isDark ? "#ccc" : undefined}}>
         Before running this sample, make sure Keploy Enterprise version is
         installed on your system.
diff --git a/src/components/InstallReminder.js b/src/components/InstallReminder.js
index 5a070fcad..f878133b1 100644
--- a/src/components/InstallReminder.js
+++ b/src/components/InstallReminder.js
@@ -22,7 +22,7 @@ export default function InstallReminder() {
     <div
       style={containerStyle}
     >
-      <h3 style={{ color: isDark ? "#fff" : "#222"}}>Don’t have Keploy installed yet?</h3>
+      <h3 style={{marginTop: 0, color: isDark ? "#fff" : "#222"}}>Don’t have Keploy installed yet?</h3>
       <p style={{color: isDark ? "#ccc" : undefined}}>
         Before running this sample, make sure Keploy is installed on your
         system.