QA for home UI and markdown text

src/components/NewsletterForm/index.tsx

@@ -65,7 +65,7 @@ const NewsletterForm: React.FC<NewsletterFormProps> = ({
             />
             <Envelope className="absolute left-3 top-[50%] h-6 w-6 translate-y-[-50%]" color={globeColorClass} />
           </div>
-          <button className="group mt-2 flex items-center justify-center rounded-large bg-light-pink-vibrant p-3 w-32 transition hover:bg-dark-accent-2 dark:bg-dark-pink-vibrant hover:dark:bg-light-accent-2 sm:ml-2 sm:mt-0">
+          <button className="group mt-2 flex items-center justify-center rounded-large bg-light-pink-vibrant p-3 sm:w-32 transition hover:bg-dark-accent-2 dark:bg-dark-pink-vibrant hover:dark:bg-light-accent-2 sm:ml-2 sm:mt-0 w-full !px-0 sm:!px-3">
             <span className="button-label-1 text-white transition group-hover:text-dark-accent-1 group-hover:dark:text-light-accent-1">
               Submit
             </span>

src/components/SentimentTracking/index.tsx

@@ -18,7 +18,7 @@ export default function SentimentTracking({ analyticsSection }: { analyticsSecti
   )
 
   return (
-    <div className="flex flex-row space-x-4">
+    <div className="flex flex-row space-x-4 !mt-9">
       <div className="Sentiment__question">Was this helpful?</div>
       <div className="flex flex-row space-x-1">
         <SentimentButton

src/components/ThemeSwitch/index.tsx

@@ -16,6 +16,7 @@ const ThemeSwitch: FC<{ className?: string }> = ({ className }) => {
 
       if (!currentTheme) {
         ThemeManager.set('light')
+        setTheme('light')
       } else {
         setTheme(currentTheme)
       }

src/css/custom.css

@@ -15,6 +15,10 @@
 @import './font.css';
 @import './types.css';
 
+html:has(.theme-doc-markdown) {
+  scroll-behavior: smooth;
+}
+
 .site-max-width {
   max-width: 1440px;
 }
@@ -28,7 +32,7 @@
 }
 
 .divider {
-  @apply border-t border-light-surface-3 dark:border-dark-surface-3;
+  @apply shrink-0 !h-px bg-light-surface-3 dark:bg-dark-surface-3;
 }
 
 .breadcrumbs__link {
@@ -128,11 +132,71 @@
   @apply sm:!max-w-full md:!max-w-[75%];
 }
 .container {
-  @apply !mt-nav-h;
+  @apply sm:!pb-[3.75rem] !pb-10;
 }
 .theme-doc-footer-edit-meta-row {
   @apply !hidden;
 }
 .navbar {
   @apply !p-0;
 }
+.theme-doc-markdown {
+  @apply !body-2 flex flex-col space-y-6;
+}
+.theme-doc-markdown h1 {
+  @apply !heading-1 !mb-0 md:!pt-8 !pt-6;
+}
+
+.theme-doc-markdown h2 {
+  @apply !heading-2 !mb-0 sm:!pt-6 !pt-3;
+}
+
+.theme-doc-markdown h2.anchor a {
+  @apply !heading-2 text-light-accent-1 dark:text-dark-accent-1 
+          hover:text-light-accent-1-hovered hover:dark:text-dark-accent-1-hovered;
+}
+
+.theme-doc-markdown h3 {
+  @apply !heading-3 !mb-0 sm:!pt-3 !pt-1;
+}
+
+.theme-doc-markdown h4 {
+  @apply !heading-4;
+}
+
+.theme-doc-markdown code {
+  @apply !mono-body-5;
+}
+
+.theme-doc-markdown a {
+  @apply !body-2 text-light-accent-1 dark:text-dark-accent-1 
+          hover:text-light-accent-1-hovered hover:dark:text-dark-accent-1-hovered;
+}
+
+.theme-doc-markdown blockquote {
+  @apply sm:!pl-6 !pl-4 border-l-[3px] border-l-light-surface-3 dark:border-l-dark-surface-3;
+}
+
+.theme-doc-markdown hr {
+  @apply bg-light-surface-3 dark:bg-dark-surface-3 !h-px !mt-12 !mb-6;
+}
+
+.theme-doc-markdown .footnotes ol {
+  @apply !list-decimal !text-light-neutral-2 dark:!text-dark-neutral-2 !mono-body-5 !pl-6;
+}
+
+.theme-doc-markdown ul {
+  @apply !list-disc !text-light-neutral-1 dark:!text-dark-neutral-1 !body-2 !pl-6;
+}
+
+.theme-doc-markdown ol {
+  @apply !list-decimal !text-light-neutral-1 dark:!text-dark-neutral-1 !body-2 !pl-6;
+}
+
+.theme-doc-markdown ol a {
+  @apply !mono-body-5 !text-light-neutral-2 dark:!text-dark-neutral-2;
+}
+
+.theme-doc-markdown sup a {
+  @apply !body-4;
+}

src/pages/index.tsx

@@ -205,7 +205,7 @@ const Home = () => {
           })}
         </div>
 
-        <div className="divider" />
+        <div className="divider"></div>
 
         <div className="py-padding-x-large">
           <h3 className="text-light-neutral-1 dark:text-dark-neutral-1 heading-2">Integrate your Smart Contracts</h3>
@@ -360,7 +360,7 @@ const ArticleLinkCard: FC<{
       className="col-span-full sm:col-span-4 md:col-span-2 group flex flex-row transition rounded-medium py-padding-small px-padding-medium bg-light-surface-2 dark:bg-dark-surface-2 hover:bg-light-accent-2 hover:dark:bg-dark-accent-2"
       target="_self"
     >
-      <div className="flex flex-col w-full">
+      <div className="flex flex-col w-full space-y-1">
         <h4 className="transition subheading-2 text-light-neutral-1 dark:text-dark-neutral-1 group-hover:text-light-pink-vibrant dark:group-hover:text-dark-pink-vibrant">
           {title}
         </h4>