Add to Quickstart and Tutorials.

Signed-off-by: bgravenorst <byron.gravenorst@consensys.net>

Author: bgravenorst

smart-accounts-kit/reference/glossary.mdx

@@ -1,7 +1,8 @@
 ---
 description: Glossary of terms used across Smart Accounts Kit documentation.
 title: Glossary
-keywords: [glossary, smart accounts kit, delegation, advanced permissions, terms]
+keywords:
+  [glossary, smart accounts kit, delegation, advanced permissions, terms]
 ---
 
 This glossary defines common Smart Accounts Kit terms used across the documentation.

src/components/FeedbackWidget/styles.module.css

@@ -1,5 +1,7 @@
 .widget {
-  margin-top: 2rem;
+  flex: 0 1 auto;
+  width: 400px;
+  max-width: 100%;
 }
 
 .prompt {
@@ -28,9 +30,10 @@
   box-sizing: border-box;
   appearance: none;
   font-family: var(--ifm-font-family-base);
-  font-size: 1rem;
+  font-size: 12px;
   font-weight: 500;
-  padding: 10px 28px;
+  line-height: 150%;
+  padding: 8px 24px;
   margin: 0;
   border-radius: 8px;
   border: 1px solid var(--ifm-color-emphasis-300) !important;
@@ -70,10 +73,10 @@
   box-sizing: border-box;
   appearance: none;
   width: 100%;
-  max-width: 560px;
+  max-width: 960px;
   padding: 14px 16px;
   margin: 0;
-  font-size: 1rem;
+  font-size: 1.4rem;
   color: var(--ifm-color-content);
   background: var(--ifm-background-surface-color) !important;
   border: 1px solid var(--ifm-color-emphasis-300) !important;
@@ -106,9 +109,10 @@
   box-sizing: border-box;
   appearance: none;
   font-family: var(--ifm-font-family-base);
-  font-size: 1rem;
+  font-size: 12px;
   font-weight: 500;
-  padding: 10px 28px;
+  line-height: 150%;
+  padding: 8px 24px;
   margin: 0;
   border-radius: 8px;
   border: none !important;
@@ -130,7 +134,7 @@
 }
 
 .error {
-  font-size: 1rem;
+  font-size: 1.4rem;
   color: var(--ifm-color-emphasis-600);
   margin: 0;
 }

src/pages/quickstart/index.jsx

@@ -20,6 +20,7 @@ import { getWindowLocation } from '../../theme/URLParams'
 import { METAMASK_CONNECT, EMBEDDED_WALLETS, YES, NO } from './builder/choices'
 import NavigationOverlay from './NavigationOverlay'
 import MediaStep from './MediaStep'
+import FeedbackWidget from '../../components/FeedbackWidget'
 
 const ALLOWED_OPTION_KEYS = new Set([
   'product',
@@ -933,6 +934,9 @@ export default function IntegrationBuilderPage(props) {
                       )}
                     </div>
                   ))}
+                  <div className={styles.feedbackSection}>
+                    <FeedbackWidget />
+                  </div>
                 </div>
               ) : (
                 <div className={styles.stepContainer}>

src/pages/quickstart/styles.module.css

@@ -1446,3 +1446,13 @@ input:checked + .slider::before {
     border-radius: 8px !important;
   }
 }
+
+.feedbackSection {
+  padding: 3rem 2rem 6rem;
+  border-top: 1px solid var(--ifm-color-emphasis-200);
+  margin-top: 2rem;
+  min-height: 200px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}

src/theme/DocItem/Footer/index.jsx

@@ -4,41 +4,32 @@ import { ThemeClassNames } from '@docusaurus/theme-common'
 import { useDoc } from '@docusaurus/plugin-content-docs/client'
 import LastUpdated from '@theme/LastUpdated'
 import EditThisPage from '@theme/EditThisPage'
+import FeedbackWidget from '../../../components/FeedbackWidget'
 import styles from './styles.module.css'
 
-function EditMetaRow({ editUrl, lastUpdatedAt, lastUpdatedBy, formattedLastUpdatedAt }) {
-  return (
-    <div className={clsx(ThemeClassNames.docs.docFooterEditMetaRow, 'row')}>
-      <div className="col">{editUrl && <EditThisPage editUrl={editUrl} />}</div>
-
-      <div className={clsx('col type-paragraph-m', styles.lastUpdated)}>
-        {(lastUpdatedAt || lastUpdatedBy) && (
-          <LastUpdated
-            lastUpdatedAt={lastUpdatedAt}
-            formattedLastUpdatedAt={formattedLastUpdatedAt}
-            lastUpdatedBy={lastUpdatedBy}
-          />
-        )}
-      </div>
-    </div>
-  )
-}
 export default function DocItemFooter() {
   const { metadata } = useDoc()
   const { editUrl, lastUpdatedAt, formattedLastUpdatedAt, lastUpdatedBy } = metadata
   const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy)
-  if (!canDisplayEditMetaRow) {
-    return null
-  }
+
   return (
     <footer className={clsx(ThemeClassNames.docs.docFooter, 'docusaurus-mt-lg docusaurus-mb-lg')}>
-      {canDisplayEditMetaRow && (
-        <EditMetaRow
-          editUrl={editUrl}
-          lastUpdatedAt={lastUpdatedAt}
-          lastUpdatedBy={lastUpdatedBy}
-          formattedLastUpdatedAt={formattedLastUpdatedAt}
-        />
+      <div className={styles.topRow}>
+        <FeedbackWidget key={metadata.permalink} />
+        {editUrl && (
+          <div className={styles.editLink}>
+            <EditThisPage editUrl={editUrl} />
+          </div>
+        )}
+      </div>
+      {(lastUpdatedAt || lastUpdatedBy) && (
+        <div className={styles.lastUpdatedRow}>
+          <LastUpdated
+            lastUpdatedAt={lastUpdatedAt}
+            formattedLastUpdatedAt={formattedLastUpdatedAt}
+            lastUpdatedBy={lastUpdatedBy}
+          />
+        </div>
       )}
     </footer>
   )

src/theme/DocItem/Footer/styles.module.css

@@ -1,15 +1,19 @@
-.lastUpdated {
-  margin-top: 0.2rem;
-  margin-bottom: 2rem;
-  color: var(--general-gray-dark);
+.topRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
 
-  [data-theme='dark'] & {
-    color: var(--general-gray);
-  }
+.editLink {
+  flex-shrink: 0;
+  padding-top: 0.4rem;
 }
 
-@media (width >= 997px) {
-  .lastUpdated {
-    text-align: right;
-  }
+.lastUpdatedRow {
+  margin-top: 1rem;
+  text-align: center;
+  font-size: 1rem;
+  color: var(--ifm-color-content);
 }

src/theme/DocItem/Layout/index.jsx

@@ -13,7 +13,6 @@ import DocItemContent from '@theme/DocItem/Content'
 import DocBreadcrumbs from '@theme/DocBreadcrumbs'
 import CopyPageButton from '@site/src/components/CopyPageButton'
 import DocH1CopyPageWrapper from '@site/src/components/DocH1CopyPageWrapper'
-import FeedbackWidget from '../../../components/FeedbackWidget'
 import styles from './styles.module.css'
 
 const SITE_URL = 'https://docs.metamask.io'
@@ -73,7 +72,6 @@ function useDocTOC() {
 export default function DocItemLayout({ children }) {
   const docTOC = useDocTOC()
   const structuredData = useStructuredData()
-  const { metadata } = useDoc()
   return (
     <div className="row">
       {structuredData && (
@@ -91,7 +89,6 @@ export default function DocItemLayout({ children }) {
             <DocH1CopyPageWrapper />
             <CopyPageButton />
             <DocItemContent>{children}</DocItemContent>
-            <FeedbackWidget key={metadata.permalink} />
             <DocItemFooter />
           </article>
           <DocItemPaginator />