Merge branch 'main' into main

Author: amaan287

src/components/Community.js

@@ -86,9 +86,7 @@ export const Community = () => {
 
             <div className="flex-auto">
               <h3 className="font-bold">Substack</h3>
-              <p className="text-sm text-gray-700">
-                Ideas worth reading — delivered directly to you.
-              </p>
+              <p>Ideas worth reading — delivered directly to you.</p>
             </div>
           </a>
         </li>

src/components/EnterpriseInstallReminder.js

@@ -0,0 +1,37 @@
+import React from "react";
+import Link from "@docusaurus/Link";
+
+export default function EnterpriseInstallReminder() {
+  return (
+    <div
+      style={{
+        padding: "1rem",
+        border: "1px solid #eee",
+        borderRadius: "10px",
+        background: "#fff8f5",
+        margin: "2rem 0",
+      }}
+    >
+      <h3>Don’t have Keploy installed yet?</h3>
+      <p>
+        Before running this sample, make sure Keploy Enterprise version is
+        installed on your system.
+      </p>
+      <Link
+        to="/docs/keploy-cloud/cloud-installation/"
+        style={{
+          display: "inline-block",
+          marginTop: "0.5rem",
+          padding: "0.6rem 1rem",
+          background: "#e67e22",
+          color: "#fff",
+          borderRadius: "6px",
+          fontWeight: "bold",
+          textDecoration: "none",
+        }}
+      >
+        👉 Go to Installation Guide
+      </Link>
+    </div>
+  );
+}

src/components/QuickStartFilter.js

@@ -9,6 +9,7 @@ import {TbBrandCSharp} from "react-icons/tb";
 import {FaPython} from "react-icons/fa";
 import {FaDocker} from "react-icons/fa";
 import {IoLogoJavascript} from "react-icons/io5";
+import {useColorMode} from "@docusaurus/theme-common";
 
 // 🔹 Wrapper for icons to make them uniform
 const IconWrapper = ({icon, bg}) => (
@@ -20,7 +21,7 @@ const IconWrapper = ({icon, bg}) => (
       alignItems: "center",
       justifyContent: "center",
       borderRadius: "50%",
-      backgroundColor: bg || "#f3f4f6",
+      backgroundColor: bg,
       boxShadow: "0 3px 6px rgba(0,0,0,0.1)",
       transition: "transform 0.2s ease",
     }}
@@ -31,6 +32,9 @@ const IconWrapper = ({icon, bg}) => (
 );
 
 export default function QuickstartFilter({defaultLanguage = null}) {
+  const {colorMode} = useColorMode();
+  const isDark = colorMode === "dark";
+
   // 👇 initialize with defaultLanguage if provided
   const [language, setLanguage] = useState(defaultLanguage);
   const [server, setServer] = useState(null);
@@ -42,6 +46,18 @@ export default function QuickstartFilter({defaultLanguage = null}) {
     );
   });
 
+  // Icon backgrounds for dark mode
+  const darkIconBgs = {
+    Go: "#223044",
+    Python: "#243447",
+    Java: "#392a2a",
+    "JS/TS": "#3b3924",
+    Rust: "#44392b",
+    "C#": "#332e44",
+    Local: "#44392b",
+    Docker: "#233044",
+  };
+
   const languages = [
     {
       name: "Go",
@@ -63,11 +79,13 @@ export default function QuickstartFilter({defaultLanguage = null}) {
       icon: <IoLogoJavascript size={36} color="#F7DF1E" />,
       bg: "#FFF8E1",
     },
-    {
+
+    /*{
       name: "Rust",
       icon: <FaRust size={36} color="#DEA584" />,
       bg: "#FFF3E0",
     },
+    */
     {
       name: "C#",
       icon: <TbBrandCSharp size={36} color="#512BD4" />,
@@ -88,6 +106,79 @@ export default function QuickstartFilter({defaultLanguage = null}) {
     },
   ];
 
+  // ----- Styles -----
+  const headingStyle = {
+    textAlign: "left",
+    marginLeft: "1rem",
+    fontSize: "1.4rem",
+    fontWeight: "600",
+    color: isDark ? "#fff" : "#222",
+  };
+
+  const serverContainer = {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "1.5rem",
+    justifyContent: "flex-start",
+    marginTop: "1.5rem",
+    marginLeft: "1rem",
+  };
+
+  const stepContainer = {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "1.5rem",
+    marginLeft: "1rem",
+    justifyContent: "flex-start",
+    marginTop: "1.5rem",
+  };
+
+  const buttonCard = {
+    border: isDark ? "2px solid #333" : "2px solid #ddd",
+    borderRadius: "12px",
+    padding: "1rem 2rem",
+    cursor: "pointer",
+    background: isDark ? "#222428" : "#fff",
+    transition: "all 0.2s ease",
+    textAlign: "center",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "0.5rem",
+    color: isDark ? "#fff" : "#222",
+    boxShadow: isDark
+      ? "0 2px 10px rgba(0,0,0,0.5)"
+      : "0 2px 6px rgba(0, 0, 0, 0.08)",
+  };
+
+  const gridContainer = {
+    display: "grid",
+    gap: "1.5rem",
+    gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
+    marginTop: "2rem",
+  };
+
+  const cardStyle = {
+    border: isDark ? "1px solid #333" : "1px solid #eee",
+    borderRadius: "12px",
+    padding: "1rem",
+    background: isDark ? "#23272f" : "#fff",
+    boxShadow: isDark
+      ? "0 2px 10px rgba(0,0,0,0.6)"
+      : "0 2px 6px rgba(0, 0, 0, 0.08)",
+    color: isDark ? "#fff" : "#222",
+  };
+
+  const linkStyle = {
+    marginTop: "0.8rem",
+    display: "inline-block",
+    color: "#f97316",
+    fontWeight: "bold",
+    textDecoration: "none",
+  };
+
+  // ----- Render -----
   return (
     <div style={{marginTop: "2rem"}}>
       {/* Language Selection */}
@@ -100,15 +191,32 @@ export default function QuickstartFilter({defaultLanguage = null}) {
             style={{
               ...buttonCard,
               border:
-                language === lang.name ? "2px solid #f97316" : "2px solid #ddd",
+                language === lang.name
+                  ? "2px solid #f97316"
+                  : buttonCard.border,
               boxShadow:
                 language === lang.name
-                  ? "0 3px 8px rgba(249, 115, 22, 0.3)"
-                  : "none",
+                  ? isDark
+                    ? "0 3px 12px rgba(249,115,22,0.2)"
+                    : "0 3px 8px rgba(249, 115, 22, 0.3)"
+                  : buttonCard.boxShadow,
             }}
           >
-            <IconWrapper icon={lang.icon} bg={lang.bg} />
-            <p style={{marginTop: "0.5rem", fontWeight: "500"}}>{lang.name}</p>
+            <IconWrapper
+              icon={lang.icon}
+              bg={isDark ? darkIconBgs[lang.name] || "#222" : lang.bg}
+            />
+            <p
+              style={{
+                margin: 0,
+                fontWeight: "500",
+                color: isDark ? "#fff" : "#222",
+                opacity: language === lang.name ? 1 : 0.7,
+                transition: "color 0.2s, opacity 0.2s",
+              }}
+            >
+              {lang.name}
+            </p>
           </button>
         ))}
       </div>
@@ -125,15 +233,30 @@ export default function QuickstartFilter({defaultLanguage = null}) {
             style={{
               ...buttonCard,
               border:
-                server === srv.name ? "2px solid #f97316" : "2px solid #ddd",
+                server === srv.name ? "2px solid #f97316" : buttonCard.border,
               boxShadow:
                 server === srv.name
-                  ? "0 3px 8px rgba(249, 115, 22, 0.3)"
-                  : "none",
+                  ? isDark
+                    ? "0 3px 12px rgba(249,115,22,0.2)"
+                    : "0 3px 8px rgba(249, 115, 22, 0.3)"
+                  : buttonCard.boxShadow,
             }}
           >
-            <IconWrapper icon={srv.icon} bg={srv.bg} />
-            <p style={{marginTop: "0.5rem", fontWeight: "500"}}>{srv.name}</p>
+            <IconWrapper
+              icon={srv.icon}
+              bg={isDark ? darkIconBgs[srv.name] || "#222" : srv.bg}
+            />
+            <p
+              style={{
+                margin: 0,
+                fontWeight: "500",
+                color: isDark ? "#fff" : "#222",
+                opacity: server === srv.name ? 1 : 0.7,
+                transition: "color 0.2s, opacity 0.2s",
+              }}
+            >
+              {srv.name}
+            </p>
           </button>
         ))}
       </div>
@@ -148,10 +271,21 @@ export default function QuickstartFilter({defaultLanguage = null}) {
             {filteredQuickstarts.length > 0 ? (
               filteredQuickstarts.map((app, idx) => (
                 <div key={idx} style={cardStyle}>
-                  <h3 style={{margin: "0 0 0.5rem 0", fontSize: "1.2rem"}}>
+                  <h3
+                    style={{
+                      margin: "0 0 0.5rem 0",
+                      fontSize: "1.2rem",
+                      color: isDark ? "#fff" : "#222",
+                    }}
+                  >
                     {app.title}
                   </h3>
-                  <p style={{color: "#555", fontSize: "0.95rem"}}>
+                  <p
+                    style={{
+                      color: isDark ? "#ccc" : "#555",
+                      fontSize: "0.95rem",
+                    }}
+                  >
                     {app.description}
                   </p>
                   <Link to={app.link} style={linkStyle}>
@@ -160,70 +294,13 @@ export default function QuickstartFilter({defaultLanguage = null}) {
                 </div>
               ))
             ) : (
-              <p>No quickstarts available for this selection.</p>
+              <p style={{color: isDark ? "#fff" : "#222"}}>
+                No quickstarts available for this selection.
+              </p>
             )}
           </div>
         </>
       )}
     </div>
   );
 }
-
-// Styles
-const headingStyle = {
-  textAlign: "left",
-  marginLeft: "1rem",
-  fontSize: "1.4rem",
-  fontWeight: "600",
-};
-
-const serverContainer = {
-  display: "flex",
-  flexWrap: "wrap",
-  gap: "1.5rem",
-  justifyContent: "flex-start",
-  marginTop: "1.5rem",
-  marginLeft: "1rem",
-};
-
-const stepContainer = {
-  display: "flex",
-  flexWrap: "wrap",
-  gap: "1.5rem",
-  marginLeft: "1rem",
-  justifyContent: "flex-start",
-  marginTop: "1.5rem",
-};
-
-const buttonCard = {
-  border: "2px solid #ddd",
-  borderRadius: "12px",
-  padding: "1rem 2rem",
-  cursor: "pointer",
-  background: "#fff",
-  transition: "all 0.2s ease",
-  textAlign: "center",
-};
-
-const gridContainer = {
-  display: "grid",
-  gap: "1.5rem",
-  gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
-  marginTop: "2rem",
-};
-
-const cardStyle = {
-  border: "1px solid #eee",
-  borderRadius: "12px",
-  padding: "1rem",
-  background: "#fff",
-  boxShadow: "0 2px 6px rgba(0, 0, 0, 0.08)",
-};
-
-const linkStyle = {
-  marginTop: "0.8rem",
-  display: "inline-block",
-  color: "#f97316",
-  fontWeight: "bold",
-  textDecoration: "none",
-};