ui: dark mode for installation components fix (#702)

* ui: dark mode for installation component fixed

Signed-off-by: Kaushik Tak <kaushiktak19@gmail.com>

* ui: dark mode for EnterpriseInstallReminder component fixed

Signed-off-by: Kaushik Tak <kaushiktak19@gmail.com>

* ui: fixing margin in installations

Signed-off-by: Kaushik Tak <kaushiktak19@gmail.com>

---------

Signed-off-by: Kaushik Tak <kaushiktak19@gmail.com>

Author: kaushiktak19

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={{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.
       </p>

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={{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.
       </p>