fix: adjust style & format baby staking guide

docs/guides/baby_stakers/baby_staking_via_mintscan.mdx

@@ -48,6 +48,7 @@ option to connect your wallet.
 />
 3.2. Select the digital wallet you prefer to use using. As an example **Keplr** is 
 used in this guide.
+
 3.3. Follow the prompts to complete the connection on your wallet.
 
 <ThemedImage
@@ -124,6 +125,7 @@ transaction has been successfully submitted.
 
 8.1. You can return to the staking page to view the status of your staking. Staking 
 information is also listed on Mintscan's [Babylon page](https://www.mintscan.io/babylon).
+
 8.2. Regularly check your rewards and staking activities to ensure everything is in 
 order.
 

src/components/homepage/HeroSection.tsx

@@ -6,7 +6,6 @@ import {
   TetrisAppRegular,
   DocumentChevronDoubleRegular,
 } from '@fluentui/react-icons';
-import ThemedImage from '@theme/ThemedImage';
 import clsx from 'clsx';
 import { useBaseUrlUtils } from '@docusaurus/useBaseUrl';
 
@@ -57,9 +56,7 @@ function HeroProduct({
   link,
   title,
   icon: Icon,
-  text,
-  lightImage,
-  darkImage
+  text
 }: 
 (typeof PRODUCTS)[0]) {
   return (
@@ -78,16 +75,8 @@ function HeroProduct({
           <Icon className="h-7 w-7" />
           <div>{title}</div>
         </h3>
-        <p className="mb-0 text-sm text-zinc-700">{text}</p>
+        <p className="mb-0 text-sm text-zinc-700 dark:text-zinc-400">{text}</p>
       </div>
-      {/* <ThemedImage
-        sources={{
-          light: lightImage,
-          dark: darkImage,
-        }}
-        alt={title}
-        className="mt-1 w-full transition-transform group-hover:scale-110"
-      /> */}
     </Link>
   );
 }
@@ -97,8 +86,6 @@ export default function HeroSection() {
 
   const processedProducts = PRODUCTS.map((product) => ({
     ...product,
-    // lightImage: withBaseUrl(product.lightImage),
-    // darkImage: withBaseUrl(product.darkImage),
     link: withBaseUrl(product.link),
   }));
 

src/css/custom.css

@@ -58,7 +58,7 @@
     --docs-color-primary-100: 51 197 206; /* Lighter shade of #BEDCC9 */
     --docs-color-primary-200: 51 197 206; /* #BEDCC9 */
 
-    --docs-color-secondary-700: 237 237 240;
+    --docs-color-secondary-700: 212 230 219;
     --docs-color-secondary-800: 243 246 244;
     --docs-color-secondary-900: 247 250 248;
     --docs-color-secondary-1000: 255 255 255;
@@ -73,7 +73,7 @@
 
     --docs-color-text-400: 160 160 160; /* Softer muted dark text */
 
-    --docs-color-secondary-700: 71 71 71;
+    --docs-color-secondary-700: 16 42 54;
     --docs-color-secondary-800: 38 38 38;
     --docs-color-secondary-900: 32 32 32;
     --docs-color-secondary-1000: 0 0 0;
@@ -949,7 +949,7 @@ img[src$='#terminal'] {
   --ifm-link-hover-color: inherit;
   cursor: pointer;
   @apply flex flex-row items-center;
-  @apply border-secondary-800 bg-secondary-900 hover:bg-secondary-800;
+  @apply border-secondary-800 bg-secondary-700 hover:bg-secondary-800;
   border-width: 1px;
   transition-property: background-color, color;
 
@@ -1003,8 +1003,8 @@ details {
   font-size: 14px;
   font-weight: 500;
   color: var(--docs-color-text-100) !important;
-  background: var(--docs-color-background-100) !important;
-  border: solid 2px var(--docs-color-code-background) !important;
+  background: var(--ifm-pre-background) !important;
+  border: solid 2px var(--ifm-pre-background) !important;
 }
 
 details code {
@@ -1647,7 +1647,6 @@ h3.anchor > code {
   justify-content: center;
   align-items: center;
   padding: 40px 0;
-  background-color: var(--docs-color-background-100);
 }
 
 .blog-container{
@@ -1668,7 +1667,6 @@ h3.anchor > code {
   max-width: 380px;
   min-width: 280px;
   position: relative;
-  background: var(--docs-color-background);
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0,0,0,0.06);
   overflow: hidden;
@@ -1707,7 +1705,6 @@ h3.anchor > code {
   font-weight: 500;
   padding: 4px 12px;
   border-radius: 20px;
-  background: var(--docs-color-background);
   transition: all 0.2s;
 }
 
@@ -1731,6 +1728,25 @@ h3.anchor > code {
   cursor: pointer !important;
 }
 
+.openapi-explorer__code-block{
+  background: none !important;
+}
+
+.openapi-explorer__code-block-code-line-number{
+  background: none !important;
+}
+
+.openapi-explorer__form-item-input{
+  background: none !important;
+}
+
+.openapi-explorer__server-container{
+  background: none !important;
+}
+.openapi-explorer__select-input{
+    background: none !important;
+}
+
 /*FOR MOBILE SCREEN SIZE*/
 @media screen and (max-width: 767px) {
   .hello_bar_contents.u-hflex-center-center.u-gap-10 {

src/theme/ThemedImage/index.js

@@ -17,13 +17,14 @@ function getSrcFromThemedImageProps(props, isDarkTheme) {
 export default function ThemedImage(props) {
   const { colorMode } = useColorMode();
   const curSrc = getSrcFromThemedImageProps(props, colorMode);
+  const { isLogo, ...restProps } = props;
   // Exclude navbar logo from Zoom effect
-  if (props.isLogo || (typeof props.src === 'string' && props.src.includes('logo'))) {
-    return <OriginalThemedImage {...props} />;
+  if (isLogo || (typeof props.src === 'string' && props.src.includes('logo'))) {
+    return <OriginalThemedImage {...restProps} />;
   }
   return (
     <Zoom key={curSrc + colorMode}>
-      <OriginalThemedImage {...props} />
+      <OriginalThemedImage {...restProps} />
     </Zoom>
   );
 }