docs: Final design review implementations

Author: ocandocrypto-uniswap

src/css/custom.css

@@ -221,8 +221,29 @@ html:has(.theme-doc-markdown) {
 .theme-doc-footer-edit-meta-row {
   @apply !hidden;
 }
+
 .navbar {
   @apply !p-0;
+  box-shadow: none !important;
+  border-bottom: none !important;
+  background-color: theme(colors.light-surface-1) !important;
+  opacity: 1 !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+}
+
+.navbar .navbar__inner {
+  background-color: theme(colors.light-surface-1) !important;
+  box-shadow: inset 0 -1px 0 theme(colors.light-surface-3);
+}
+
+:root[data-theme='dark'] .navbar {
+  background-color: theme(colors.dark-surface-1) !important;
+}
+
+:root[data-theme='dark'] .navbar .navbar__inner {
+  background-color: theme(colors.dark-surface-1) !important;
+  box-shadow: none !important;
 }
 
 .navbar-sidebar {

src/theme/Navbar/Content/index.tsx

@@ -49,11 +49,11 @@ export default function NavbarContent(): ReactNode {
     <div
       className={clsx(
         'navbar__inner',
-        'w-full h-nav-h flex flex-row items-center px-4 py-3 sm:px-[0.9375rem] sm:py-3',
+        'w-full h-nav-h flex flex-row items-center px-4 py-0 sm:px-[0.9375rem] sm:py-0',
       )}
     >
       {/* Logo - Left aligned */}
-      <Link className="flex min-w-0 flex-row items-center" to="/" target="_self" aria-label="Uniswap Documentation Home">
+      <Link className="flex h-8 min-w-0 flex-row items-center" to="/" target="_self" aria-label="Uniswap Documentation Home">
         <MiniUnicon className="w-8 h-8 mr-3" />
         <p className="Navbar__logo-text body-1 text-light-accent-1 dark:text-dark-accent-1 mb-0 whitespace-nowrap max-[380px]:hidden">
           Uniswap Docs
@@ -71,8 +71,8 @@ export default function NavbarContent(): ReactNode {
       </div>
 
       {/* Right side - Nav Links, Search, Theme Toggle, Feedback */}
-      <div className="hidden min-[997px]:flex min-w-0 flex-1 justify-end items-center gap-2 md:gap-3 mr-2 md:mr-4 h-8">
-      <nav className="flex h-8 flex-row items-center gap-3">
+      <div className="hidden min-[997px]:flex min-w-0 flex-1 justify-end items-center gap-4 md:gap-5 mr-2 md:mr-4 h-8">
+      <nav className="flex h-8 flex-row items-center gap-5">
           {navLinks.map((link) => (
             <Link
               key={link.label}
@@ -96,7 +96,7 @@ export default function NavbarContent(): ReactNode {
           to="/feedback"
           target="_self"
         >
-          <span className="text-light-accent-1 dark:text-dark-accent-1">Submit Feedback</span>
+          <span className="text-light-accent-1 dark:text-dark-accent-1">Feedback</span>
         </Link>
       </div>
     </div>

src/theme/Navbar/MobileSidebar/Header/index.tsx

@@ -36,7 +36,7 @@ export default function NavbarMobileSidebarHeader(): ReactNode {
           onClick={() => mobileSidebar.toggle()}
           className="button-label-4 inline-flex h-8 items-center px-3 rounded-small bg-light-accent-2 dark:bg-dark-accent-2 hover:bg-light-accent-2-hovered hover:dark:bg-dark-accent-2-hovered transition"
         >
-          <span className="text-light-accent-1 dark:text-dark-accent-1">Submit Feedback</span>
+          <span className="text-light-accent-1 dark:text-dark-accent-1">Feedback</span>
         </Link>
 
         <div className="ml-auto">