Another docs style fix

populist-vote · Dec 23, 2024 · 6c074e8 · 6c074e8
1 parent bf4c1b9
commit 6c074e8
Show file tree

Hide file tree

Showing 8 changed files with 145 additions and 130 deletions.
diff --git a/components/DocSearch/DocSearch.module.scss b/components/DocSearch/DocSearch.module.scss
@@ -11,14 +11,14 @@
   font-size: 1rem;
   font-family: $font-primary;
   color: white;
-  background: var(--background-secondary);
-  border: 1px solid var(--blue-dark);
+  background: var(--blue-dark);
+  border: 1px solid var(--blue);
   border-radius: 0.5rem;
   transition: background-color 0.2s;
   cursor: pointer;
 
   &:hover {
-    background: var(--blue-dark);
+    background: var(--black-alpha-1);
   }
 }
 

diff --git a/components/DocSearch/DocSearch.tsx b/components/DocSearch/DocSearch.tsx
@@ -219,7 +219,7 @@ export const DocSearch: React.FC = () => {
   return (
     <>
       <button onClick={() => setOpen(true)} className={styles.searchButton}>
-        <Search size={16} />
+        <Search size={20} color="var(--blue-text)" />
         <span>Search documentation...</span>
         <kbd className={styles.shortcut}>⌘K</kbd>
       </button>

diff --git a/components/DocsLayout/DocsLayout.module.scss b/components/DocsLayout/DocsLayout.module.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 @import "styles/variables/colors";
 @import "styles/variables/fonts";
 @import "styles/mixins/media";
@@ -58,93 +59,9 @@
   }
 }
 
-.header {
-  position: fixed;
-  top: 0;
-  width: 100%;
-  border-bottom: 1px solid $background-secondary;
-  background: $blue-darker;
-  z-index: 50;
-}
-
-.headerContent {
-  display: flex;
-  height: 4rem;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 1rem;
-}
-
-.headerLeft {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.menuButton {
-  padding: 0.5rem;
-  border-radius: 0.375rem;
-  cursor: pointer;
-  display: none;
-}
-
-.menuButton:hover {
-  background-color: $black-alpha-3;
-}
-
-.menuIcon {
-  height: 1.25rem;
-  width: 1.25rem;
-}
-
-.logoSection {
-  display: grid;
-  grid-template-columns: 3fr 1fr;
-  gap: 0.75rem;
-}
-
-.logoText {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: $aqua;
-  text-transform: uppercase;
-}
-
-.searchContainer {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  padding: 0 1.5rem;
-  max-width: 32rem;
-  margin: 0 auto;
-}
-
-.headerRight {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.signInButton {
-  font-size: 1rem;
-  font-weight: 500;
-  color: #374151;
-  cursor: pointer;
-}
-
-.signInButton:hover {
-  color: #111827;
-}
-
-/* New tab navigation styles */
-.tabNav {
-  background-color: $blue-darker;
-  border-bottom: 1px solid $blue-dark;
-}
-
 .tabContainer {
-  max-width: 1200px;
-  margin: 0 auto auto 15rem;
+  margin: auto;
+  justify-self: flex-start;
   padding: 0 1rem;
 
   @include for-tablet-portrait-down {
@@ -168,7 +85,7 @@
     text-transform: uppercase;
     font-family: $font-primary;
     width: fit-content;
-    min-width: 9rem;
+    min-width: 6.5rem;
     height: 3rem;
     text-align: center;
     box-sizing: border-box;
@@ -228,11 +145,11 @@
 }
 
 .tab:hover {
-  color: #ffffff;
+  color: #fff;
 }
 
 .activeTab {
-  color: #ffffff;
+  color: #fff;
   font-weight: 600;
 }
 
@@ -243,12 +160,96 @@
   left: 0;
   right: 0;
   height: 2px;
-  background-color: #ffffff;
+  background-color: #fff;
+}
+
+.header {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  border-bottom: 1px solid $background-secondary;
+  background: $blue-darker;
+  z-index: 50;
+}
+
+.headerContent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 2rem;
+  margin-bottom: 1rem;
+}
+
+.headerLeft {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.menuButton {
+  padding: 0.5rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  display: none;
+}
+
+.menuButton:hover {
+  background-color: $black-alpha-3;
+}
+
+.menuIcon {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
+.logoSection {
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+  gap: 0.75rem;
+}
+
+.logoText {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: $aqua;
+  text-transform: uppercase;
+}
+
+.searchContainer {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  padding: 0 1.5rem;
+  max-width: 32rem;
+  margin: 0 auto;
+}
+
+.headerRight {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.signInButton {
+  font-size: 1rem;
+  font-weight: 500;
+  color: #374151;
+  cursor: pointer;
+}
+
+.signInButton:hover {
+  color: #111827;
+}
+
+/* New tab navigation styles */
+.tabNav {
+  background-color: $blue-darker;
+  border-bottom: 1px solid $blue-dark;
 }
 
 .mainLayout {
   display: flex;
-  padding-top: 6.5rem; /* Adjusted to account for header + tabs (4rem + 2.5rem) */
+  padding-top: 8.5rem; /* Adjusted to account for header + tabs (4rem + 2.5rem) */
   height: 100%;
   min-height: 100vh;
 }
@@ -257,7 +258,7 @@
   position: fixed;
   bottom: 0;
   left: 0;
-  top: 6.5rem; /* Adjusted to account for header + tabs */
+  top: 8.5rem; /* Adjusted to account for header + tabs */
   width: 16rem;
   border-right: 1px solid $blue-dark;
   background: $background-primary;
@@ -270,6 +271,7 @@
 
 .sidebarClosed {
   transform: translateX(-100%);
+  width: 0;
 }
 
 .nav {
@@ -324,7 +326,6 @@
 
 .mainContent {
   flex: 1;
-  margin-left: 16rem;
   padding: 2rem 1rem;
 }
 

diff --git a/components/DocsLayout/DocsLayout.tsx b/components/DocsLayout/DocsLayout.tsx
@@ -17,9 +17,11 @@ import { useHashRoutes } from "hooks/useHashRoute";
 export function DocsLayout({
   children,
   currentPage,
+  hideAside,
 }: {
   children: React.ReactNode;
   currentPage: NavigationSectionKey;
+  hideAside?: boolean;
 }) {
   const router = useRouter();
   const [isNavOpen, setIsNavOpen] = React.useState(true);
@@ -128,35 +130,40 @@ export function DocsLayout({
         </nav>
       </header>
 
-      <div className={styles.mainLayout}>
-        <aside
-          className={`${styles.sidebar} ${isNavOpen ? styles.sidebarOpen : styles.sidebarClosed}`}
-        >
-          <nav className={styles.nav}>
-            <div className={styles.navSection}>
-              {currentNav?.sections.map(
-                (section: NavigationSection, index: number) => (
-                  <div key={index} className={styles.navGroup}>
-                    <h3 className={styles.navGroupTitle}>{section.title}</h3>
-                    <ul className={styles.navList}>
-                      {section.items.map((item, itemIndex) => (
-                        <li key={itemIndex}>
-                          <a
-                            href={item.href}
-                            className={styles.navLink}
-                            data-selected={isNavItemSelected(item.href)}
-                          >
-                            {item.label}
-                          </a>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                )
-              )}
-            </div>
-          </nav>
-        </aside>
+      <div
+        className={styles.mainLayout}
+        style={{ marginLeft: hideAside ? 0 : "16rem" }}
+      >
+        {!hideAside && (
+          <aside
+            className={`${styles.sidebar} ${isNavOpen ? styles.sidebarOpen : styles.sidebarClosed}`}
+          >
+            <nav className={styles.nav}>
+              <div className={styles.navSection}>
+                {currentNav?.sections.map(
+                  (section: NavigationSection, index: number) => (
+                    <div key={index} className={styles.navGroup}>
+                      <h3 className={styles.navGroupTitle}>{section.title}</h3>
+                      <ul className={styles.navList}>
+                        {section.items.map((item, itemIndex) => (
+                          <li key={itemIndex}>
+                            <a
+                              href={item.href}
+                              className={styles.navLink}
+                              data-selected={isNavItemSelected(item.href)}
+                            >
+                              {item.label}
+                            </a>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  )
+                )}
+              </div>
+            </nav>
+          </aside>
+        )}
 
         <main className={styles.mainContent}>
           <div className={styles.contentWrapper}>{children}</div>

diff --git a/components/Footer/Footer.module.scss b/components/Footer/Footer.module.scss
@@ -14,7 +14,7 @@ $font-size: 0.85em;
   justify-content: center;
   flex-direction: column-reverse;
 
-  @include for-tablet-up {
+  @include for-tablet-portrait-up {
     flex-direction: row;
     justify-content: space-between;
   }

diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
@@ -25,6 +25,11 @@ function Footer() {
             ABOUT
           </Link>
         </li>
+        <li>
+          <Link href="/docs" passHref>
+            DOCS
+          </Link>
+        </li>
         <li>
           <Link href="/faq" passHref>
             FAQ

diff --git a/pages/docs/index.tsx b/pages/docs/index.tsx
@@ -52,5 +52,7 @@ export default function DocsIndex() {
 }
 
 DocsIndex.getLayout = (page: ReactNode) => (
-  <DocsLayout currentPage="home">{page}</DocsLayout>
+  <DocsLayout hideAside currentPage="home">
+    {page}
+  </DocsLayout>
 );
diff --git a/utils/navigationConfig.ts b/utils/navigationConfig.ts
@@ -107,8 +107,8 @@ export interface NavigationConfig {
 export const navigationConfig: NavigationConfig = {
   tabs: [
     { id: "content", label: "Embed Content", color: "aqua" },
-    { id: "conversations", label: "Conversations", color: "orange" },
-    { id: "api", label: "API Reference", color: "violet" },
+    { id: "conversations", label: "Conversations", color: "aqua" },
+    { id: "api", label: "API Reference", color: "aqua" },
   ],
   home: {
     sections: [],
-Original file line number
+Diff line change
@@ Expand Up / @@ -25,6 +25,11 @@ function Footer() { @@
                 ABOUT
               </Link>
             </li>
+            <li>
+              <Link href="/docs" passHref>
+                DOCS
+              </Link>
+            </li>
             <li>
               <Link href="/faq" passHref>
                 FAQ
@@ Expand Down @@