Merge branch 'main' into docs-fix-styling-3022

Author: Achanandhi-M

.github/workflows/build_and_check.yml

@@ -13,12 +13,12 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Set up Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v5
         with:
-          node-version: 18.0.0
+          node-version: 20.0.0
 
       - name: Install Dependencies
         run: npm install

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",
@@ -88,6 +104,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 +189,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 +231,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 +269,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 +292,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",
-};

src/components/QuickStartList.js

@@ -193,6 +193,14 @@ const quickstarts = [
   },
 
   // python list
+  {
+    title: "E-commerce Microservices",
+    language: "Python",
+    server: "Docker",
+    description:
+      "This guide walks you through testing an E-commerce microservices application using Keploy.",
+    link: "/docs/quickstart/samples-microservices/",
+  },
 
   {
     title: "Django + Postgres",

src/css/custom.css

@@ -243,7 +243,7 @@ div[class^="sidebar_"] .button svg {
 /* Search */
 
 .DocSearch-Button {
-  @apply rounded-lg p-5 !important;
+  @apply rounded-lg px-3 py-2 !important;
 }
 
 .button.button--secondary.button--outline:not(.button--active):not(:hover) {
@@ -273,7 +273,7 @@ footer svg {
   }
 
   .DocSearch-Button {
-    @apply mr-[-18px] !important;
+    @apply mr-2 !important;
   }
 
   /* .footer .footer__block {

src/pages/concepts/reference/glossary.js

@@ -1,5 +1,6 @@
 import React, {useState, useMemo} from "react";
 import Layout from "@theme/Layout";
+import BackToTopButton from "@theme/BackToTopButton";
 
 import {glossaryEntries} from "../../../../static/data/glossaryEntries";
 import GlossaryCard from "../../../components/GlossaryCard";
@@ -127,6 +128,7 @@ function Glossary() {
             </div>
           )}
         </div>
+        <BackToTopButton />
       </main>
     </Layout>
   );