fix css issues

Author: yashovardhan

src/pages/quick-start/commonSteps/registerApp.mdx

@@ -7,7 +7,7 @@ import DashboardImage from '@site/static/img/web3auth-dashboard/project-details.
 Visit the Web3Auth Dashboard and create a new project. Use the Client ID of the project to start your integration.
 
 <a
-  className="button button--primary"
+  className="button"
   href="https://dashboard.web3auth.io"
   target="_blank"
   rel="noreferrer noopener">

src/pages/quick-start/index.tsx

@@ -48,19 +48,8 @@ const getURLFromBuilderOptions = (opts: Record<string, string>, stepIndex): stri
 };
 
 export default function IntegrationBuilderPage(props: any) {
-  // Debug what we're actually receiving
-  console.log('=== DEBUG: Component props ===');
-  console.log('Full props object:', props);
-  console.log('Props keys:', Object.keys(props));
-  console.log('props.files:', props.files);
-  console.log('props.route:', props.route);
-  console.log('props.route?.modules:', props.route?.modules);
-
   // Try different ways to access files
   const files = props.files || (props.route?.modules?.files ? JSON.parse(props.route.modules.files) : {});
-  console.log('Extracted files:', files);
-  console.log('Files is object?', typeof files === 'object');
-  console.log('Files keys:', Object.keys(files || {}));
 
   const [builderOptions, setBuilderOptions] = useState<Record<string, string>>(
     getDefaultBuilderOptions(),

src/pages/quick-start/styles.module.css

@@ -390,7 +390,7 @@ input:checked+.slider:before {
   background: var(--ifm-color-primary-light);
   border: 1px solid var(--ifm-color-primary-light);
   box-shadow: 0px 1px 2px var(--ifm-color-primary-light);
-  color: var(--ifm-color-white);
+  color: var(--ifm-color-primary-darkest);
   padding: 8px 12px 7px 12px;
 
 }
@@ -451,4 +451,4 @@ input:checked+.slider:before {
   .rightCol {
     width: 60%;
   }
-}
+}

src/theme/IntegrationBuilderCodeView/styles.module.css

@@ -21,8 +21,10 @@
 }
 
 .container :global ::-webkit-scrollbar {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
 }
 
 .container ::-webkit-scrollbar-thumb {
@@ -39,11 +41,11 @@
   overflow: scroll;
 }
 
-.body > div {
+.body>div {
   margin-bottom: 0;
 }
 
-.body :global .prism-code > div {
+.body :global .prism-code>div {
   min-height: 80vh;
 }
 
@@ -52,7 +54,7 @@
   border-radius: 0;
 }
 
-.container :global .prism-code > div {
+.container :global .prism-code>div {
   padding-top: 10px;
 }
 
@@ -75,13 +77,14 @@
   font-weight: 500;
   padding: 4px 10px 3px 10px;
   margin: 6px;
+  margin-bottom: 20px;
   border-radius: 9999px;
   border: none;
   user-select: none;
   transition: all var(--ifm-transition-fast) var(--ifm-transition-timing-default);
 }
 
-.codeTabs :global .tabs__item > svg {
+.codeTabs :global .tabs__item>svg {
   margin-right: 4px;
   margin-bottom: 2px;
 }
@@ -97,4 +100,4 @@
 .codeTabs :global .tabs__item.tabs__item--active {
   color: var(--ifm-color-content);
   background: var(--ifm-color-emphasis-300);
-}
+}