From e5394a6bdf8e536489724e573b49b0c6c51128c8 Mon Sep 17 00:00:00 2001
From: Bhupesh Kumar <bkumar_be23@thapar.edu>
Date: Sat, 13 Sep 2025 12:13:19 +0530
Subject: [PATCH 1/4] improved design

Signed-off-by: Bhupesh Kumar <bkumar_be23@thapar.edu>
---
 src/components/QuickStartFilter.js | 42 +++++++++++++-----------------
 src/css/custom.css                 | 38 +++++++++++++++++++++++++++
 2 files changed, 56 insertions(+), 24 deletions(-)

diff --git a/src/components/QuickStartFilter.js b/src/components/QuickStartFilter.js
index 15ad87f80..118dc24b6 100644
--- a/src/components/QuickStartFilter.js
+++ b/src/components/QuickStartFilter.js
@@ -11,7 +11,7 @@ import {FaDocker} from "react-icons/fa";
 import {IoLogoJavascript} from "react-icons/io5";
 
 // 🔹 Wrapper for icons to make them uniform
-const IconWrapper = ({icon, bg}) => (
+const IconWrapper = ({icon, bg, darkBg}) => (
   <div
     style={{
       width: "70px",
@@ -20,7 +20,7 @@ const IconWrapper = ({icon, bg}) => (
       alignItems: "center",
       justifyContent: "center",
       borderRadius: "50%",
-      backgroundColor: bg || "#f3f4f6",
+      backgroundColor: "var(--ifm-color-emphasis-100)",
       boxShadow: "0 3px 6px rgba(0,0,0,0.1)",
       transition: "transform 0.2s ease",
     }}
@@ -46,32 +46,26 @@ export default function QuickstartFilter({defaultLanguage = null}) {
     {
       name: "Go",
       icon: <FaGolang size={36} color="#00ADD8" />,
-      bg: "#E0F7FA",
     },
     {
       name: "Python",
       icon: <FaPython size={36} color="#3776AB" />,
-      bg: "#E8F0FE",
     },
     {
       name: "Java",
       icon: <FaJava size={36} color="#007396" />,
-      bg: "#FDEDED",
     },
     {
       name: "JS/TS",
       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" />,
-      bg: "#EDE7F6",
     },
   ];
 
@@ -79,12 +73,10 @@ export default function QuickstartFilter({defaultLanguage = null}) {
     {
       name: "Local",
       icon: <FaLaptopCode size={36} color="#f97316" />,
-      bg: "#FFF3E0",
     },
     {
       name: "Docker",
       icon: <FaDocker size={36} color="#2496ED" />,
-      bg: "#E3F2FD",
     },
   ];
 
@@ -100,15 +92,15 @@ export default function QuickstartFilter({defaultLanguage = null}) {
             style={{
               ...buttonCard,
               border:
-                language === lang.name ? "2px solid #f97316" : "2px solid #ddd",
+                language === lang.name ? "2px solid #f97316" : "2px solid var(--ifm-color-emphasis-300)",
               boxShadow:
                 language === lang.name
                   ? "0 3px 8px rgba(249, 115, 22, 0.3)"
                   : "none",
             }}
           >
-            <IconWrapper icon={lang.icon} bg={lang.bg} />
-            <p style={{marginTop: "0.5rem", fontWeight: "500"}}>{lang.name}</p>
+            <IconWrapper icon={lang.icon} />
+            <p style={{marginTop: "0.5rem", fontWeight: "500", color: "var(--ifm-color)"}}>{lang.name}</p>
           </button>
         ))}
       </div>
@@ -125,15 +117,15 @@ export default function QuickstartFilter({defaultLanguage = null}) {
             style={{
               ...buttonCard,
               border:
-                server === srv.name ? "2px solid #f97316" : "2px solid #ddd",
+                server === srv.name ? "2px solid #f97316" : "2px solid var(--ifm-color-emphasis-300)",
               boxShadow:
                 server === srv.name
                   ? "0 3px 8px rgba(249, 115, 22, 0.3)"
                   : "none",
             }}
           >
-            <IconWrapper icon={srv.icon} bg={srv.bg} />
-            <p style={{marginTop: "0.5rem", fontWeight: "500"}}>{srv.name}</p>
+            <IconWrapper icon={srv.icon} />
+            <p style={{marginTop: "0.5rem", fontWeight: "500", color: "var(--ifm-color)"}}>{srv.name}</p>
           </button>
         ))}
       </div>
@@ -148,10 +140,10 @@ 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: "var(--ifm-color)"}}>
                     {app.title}
                   </h3>
-                  <p style={{color: "#555", fontSize: "0.95rem"}}>
+                  <p style={{color: "var(--ifm-color-emphasis-600)", fontSize: "0.95rem"}}>
                     {app.description}
                   </p>
                   <Link to={app.link} style={linkStyle}>
@@ -160,7 +152,7 @@ export default function QuickstartFilter({defaultLanguage = null}) {
                 </div>
               ))
             ) : (
-              <p>No quickstarts available for this selection.</p>
+              <p style={{color: "var(--ifm-color-emphasis-600)"}}>No quickstarts available for this selection.</p>
             )}
           </div>
         </>
@@ -175,6 +167,7 @@ const headingStyle = {
   marginLeft: "1rem",
   fontSize: "1.4rem",
   fontWeight: "600",
+  color: "var(--ifm-color)",
 };
 
 const serverContainer = {
@@ -196,13 +189,14 @@ const stepContainer = {
 };
 
 const buttonCard = {
-  border: "2px solid #ddd",
+  border: "2px solid var(--ifm-color-emphasis-300)",
   borderRadius: "12px",
   padding: "1rem 2rem",
   cursor: "pointer",
-  background: "#fff",
+  background: "var(--ifm-card-background-color)",
   transition: "all 0.2s ease",
   textAlign: "center",
+  minWidth: "140px",
 };
 
 const gridContainer = {
@@ -213,11 +207,11 @@ const gridContainer = {
 };
 
 const cardStyle = {
-  border: "1px solid #eee",
+  border: "1px solid var(--ifm-color-emphasis-300)",
   borderRadius: "12px",
   padding: "1rem",
-  background: "#fff",
-  boxShadow: "0 2px 6px rgba(0, 0, 0, 0.08)",
+  background: "var(--ifm-card-background-color)",
+  boxShadow: "0 2px 6px var(--ifm-card-shadow-color)",
 };
 
 const linkStyle = {
diff --git a/src/css/custom.css b/src/css/custom.css
index 7c2b78f4b..fb9659f02 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -744,4 +744,42 @@ textarea {
   resize: vertical;
 }
 
+/* QuickStart Filter Dark Mode Improvements */
+.icon-wrapper {
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.icon-wrapper:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+}
+
+html[data-theme="dark"] .icon-wrapper {
+  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
+}
+
+html[data-theme="dark"] .icon-wrapper:hover {
+  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
+}
+
+/* Button hover effects for dark mode */
+html[data-theme="dark"] button:hover {
+  background-color: var(--ifm-color-emphasis-200);
+  border-color: var(--ifm-color-emphasis-400);
+}
+
+/* Better contrast for selected states in dark mode */
+html[data-theme="dark"] button[style*="border: 2px solid #f97316"] {
+  background-color: rgba(249, 115, 22, 0.1);
+}
+
+/* Improved card shadows for dark mode */
+html[data-theme="dark"] .card {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+html[data-theme="dark"] .card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
 

From 4636cc2748a15551c533f27002764f749887ad78 Mon Sep 17 00:00:00 2001
From: Bhupesh Kumar <bkumar_be23@thapar.edu>
Date: Sat, 13 Sep 2025 12:25:05 +0530
Subject: [PATCH 2/4] improved  docker compose in dark mode

Signed-off-by: Bhupesh Kumar <bkumar_be23@thapar.edu>
---
 src/components/InstallReminder.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/InstallReminder.js b/src/components/InstallReminder.js
index 5643dbe6f..f7fc573a0 100644
--- a/src/components/InstallReminder.js
+++ b/src/components/InstallReminder.js
@@ -6,14 +6,16 @@ export default function InstallReminder() {
     <div
       style={{
         padding: "1rem",
-        border: "1px solid #eee",
+        border: "1px solid var(--ifm-color-emphasis-300)",
         borderRadius: "10px",
-        background: "#fff8f5",
+        background: "var(--ifm-card-background-color)",
         margin: "2rem 0",
       }}
     >
-      <h3>Don’t have Keploy installed yet?</h3>
-      <p>
+      <h3 style={{ color: "var(--ifm-color)", margin: "0 0 0.5rem 0" }}>
+        Don't have Keploy installed yet?
+      </h3>
+      <p style={{ color: "var(--ifm-color-emphasis-600)", margin: "0 0 1rem 0" }}>
         Before running this sample, make sure Keploy is installed on your
         system.
       </p>

From 4c3be14335bab19487de6440eca43fc7fb15cfd4 Mon Sep 17 00:00:00 2001
From: Bhupesh Kumar <bkumar_be23@thapar.edu>
Date: Sat, 13 Sep 2025 12:43:12 +0530
Subject: [PATCH 3/4] fixed mobile resp.

Signed-off-by: Bhupesh Kumar <bkumar_be23@thapar.edu>
---
 src/components/QuickStartFilter.js | 40 ++++++++++++++++----------
 src/css/custom.css                 | 45 ++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+), 15 deletions(-)

diff --git a/src/components/QuickStartFilter.js b/src/components/QuickStartFilter.js
index 118dc24b6..1e95f7463 100644
--- a/src/components/QuickStartFilter.js
+++ b/src/components/QuickStartFilter.js
@@ -81,13 +81,14 @@ export default function QuickstartFilter({defaultLanguage = null}) {
   ];
 
   return (
-    <div style={{marginTop: "2rem"}}>
+    <div className="quickstart-filter-container" style={{marginTop: "2rem"}}>
       {/* Language Selection */}
       <h2 style={headingStyle}>Choose your language</h2>
-      <div style={stepContainer}>
+      <div className="quickstart-button-container" style={stepContainer}>
         {languages.map((lang) => (
           <button
             key={lang.name}
+            className="quickstart-button-card"
             onClick={() => setLanguage(lang.name)}
             style={{
               ...buttonCard,
@@ -109,10 +110,11 @@ export default function QuickstartFilter({defaultLanguage = null}) {
       <h2 style={{...headingStyle, marginTop: "2rem"}}>
         Where do you want to run the app server?
       </h2>
-      <div style={serverContainer}>
+      <div className="quickstart-button-container" style={serverContainer}>
         {servers.map((srv) => (
           <button
             key={srv.name}
+            className="quickstart-button-card"
             onClick={() => setServer(srv.name)}
             style={{
               ...buttonCard,
@@ -136,10 +138,10 @@ export default function QuickstartFilter({defaultLanguage = null}) {
           <h2 style={{...headingStyle, marginTop: "2rem"}}>
             ✨ AI Suggested Sample Apps
           </h2>
-          <div style={gridContainer}>
+          <div className="quickstart-grid-container" style={gridContainer}>
             {filteredQuickstarts.length > 0 ? (
               filteredQuickstarts.map((app, idx) => (
-                <div key={idx} style={cardStyle}>
+                <div key={idx} className="quickstart-card" style={cardStyle}>
                   <h3 style={{margin: "0 0 0.5rem 0", fontSize: "1.2rem", color: "var(--ifm-color)"}}>
                     {app.title}
                   </h3>
@@ -163,8 +165,9 @@ export default function QuickstartFilter({defaultLanguage = null}) {
 
 // Styles
 const headingStyle = {
-  textAlign: "left",
+  textAlign: "center",
   marginLeft: "1rem",
+  marginRight: "1rem",
   fontSize: "1.4rem",
   fontWeight: "600",
   color: "var(--ifm-color)",
@@ -173,45 +176,52 @@ const headingStyle = {
 const serverContainer = {
   display: "flex",
   flexWrap: "wrap",
-  gap: "1.5rem",
-  justifyContent: "flex-start",
+  gap: "1rem",
+  justifyContent: "center",
   marginTop: "1.5rem",
   marginLeft: "1rem",
+  marginRight: "1rem",
 };
 
 const stepContainer = {
   display: "flex",
   flexWrap: "wrap",
-  gap: "1.5rem",
+  gap: "1rem",
   marginLeft: "1rem",
-  justifyContent: "flex-start",
+  marginRight: "1rem",
+  justifyContent: "center",
   marginTop: "1.5rem",
 };
 
 const buttonCard = {
   border: "2px solid var(--ifm-color-emphasis-300)",
   borderRadius: "12px",
-  padding: "1rem 2rem",
+  padding: "1rem 1.5rem",
   cursor: "pointer",
   background: "var(--ifm-card-background-color)",
   transition: "all 0.2s ease",
   textAlign: "center",
-  minWidth: "140px",
+  minWidth: "120px",
+  flex: "1",
+  maxWidth: "200px",
 };
 
 const gridContainer = {
   display: "grid",
-  gap: "1.5rem",
-  gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
+  gap: "1rem",
+  gridTemplateColumns: "1fr",
   marginTop: "2rem",
+  padding: "0 1rem",
 };
 
 const cardStyle = {
   border: "1px solid var(--ifm-color-emphasis-300)",
   borderRadius: "12px",
-  padding: "1rem",
+  padding: "1.25rem",
   background: "var(--ifm-card-background-color)",
   boxShadow: "0 2px 6px var(--ifm-card-shadow-color)",
+  width: "100%",
+  maxWidth: "100%",
 };
 
 const linkStyle = {
diff --git a/src/css/custom.css b/src/css/custom.css
index fb9659f02..b7f8dbda7 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -782,4 +782,49 @@ html[data-theme="dark"] .card:hover {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
 }
 
+/* Mobile Responsive Improvements for QuickStart Filter */
+@media (max-width: 768px) {
+  .quickstart-filter-container {
+    padding: 0 0.5rem;
+  }
+  
+  .quickstart-grid-container {
+    grid-template-columns: 1fr !important;
+    gap: 1rem !important;
+    padding: 0 0.5rem !important;
+  }
+  
+  .quickstart-button-card {
+    min-width: 100px !important;
+    padding: 0.8rem 1rem !important;
+    font-size: 0.9rem;
+  }
+  
+  .quickstart-card {
+    padding: 1rem !important;
+    margin: 0 !important;
+  }
+  
+  .quickstart-card h3 {
+    font-size: 1.1rem !important;
+    margin-bottom: 0.5rem !important;
+  }
+  
+  .quickstart-card p {
+    font-size: 0.9rem !important;
+    line-height: 1.4;
+  }
+}
+
+@media (min-width: 769px) {
+  .quickstart-grid-container {
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
+    gap: 1.5rem !important;
+  }
+  
+  .quickstart-button-container {
+    justify-content: flex-start !important;
+  }
+}
+
 

From d02cf5b02dbdbd69b4a596a7004ace902a297de8 Mon Sep 17 00:00:00 2001
From: Bhupesh Kumar <bkumar_be23@thapar.edu>
Date: Sat, 13 Sep 2025 12:54:56 +0530
Subject: [PATCH 4/4] improved install component

Signed-off-by: Bhupesh Kumar <bkumar_be23@thapar.edu>
---
 src/components/InstallReminder.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/InstallReminder.js b/src/components/InstallReminder.js
index f7fc573a0..3088f70e4 100644
--- a/src/components/InstallReminder.js
+++ b/src/components/InstallReminder.js
@@ -5,17 +5,20 @@ export default function InstallReminder() {
   return (
     <div
       style={{
-        padding: "1rem",
+        padding: "1.5rem",
         border: "1px solid var(--ifm-color-emphasis-300)",
         borderRadius: "10px",
         background: "var(--ifm-card-background-color)",
         margin: "2rem 0",
+        display: "flex",
+        flexDirection: "column",
+        gap: "1rem",
       }}
     >
-      <h3 style={{ color: "var(--ifm-color)", margin: "0 0 0.5rem 0" }}>
+      <h3 style={{ color: "var(--ifm-color)", margin: "0" }}>
         Don't have Keploy installed yet?
       </h3>
-      <p style={{ color: "var(--ifm-color-emphasis-600)", margin: "0 0 1rem 0" }}>
+      <p style={{ color: "var(--ifm-color-emphasis-600)", margin: "0" }}>
         Before running this sample, make sure Keploy is installed on your
         system.
       </p>
@@ -23,13 +26,13 @@ export default function InstallReminder() {
         to="/docs/server/installation/"
         style={{
           display: "inline-block",
-          marginTop: "0.5rem",
           padding: "0.6rem 1rem",
           background: "#e67e22",
           color: "#fff",
           borderRadius: "6px",
           fontWeight: "bold",
           textDecoration: "none",
+          alignSelf: "flex-start",
         }}
       >
         👉 Go to Installation Guide