fix logo

Author: skshetry

package.json

@@ -101,7 +101,7 @@
     "serve-handler": "6.1.6",
     "tailwindcss": "4.2.2",
     "tailwindcss-animate": "1.0.7",
-    "title-case": "3.0.3",
+    "title-case": "4.3.2",
     "tsconfig-paths-webpack-plugin": "4.2.0",
     "unified": "11.0.5",
     "unist-util-visit": "5.0.0",

src/components/Documentation/Layout/styles.module.css

@@ -294,7 +294,7 @@
     left: 0;
     bottom: 0;
     width: 100%;
-    z-index: 2;
+    z-index: 21;
     visibility: hidden;
     transform: translateX(-100%);
     transition:
@@ -328,7 +328,7 @@
     display: block;
     position: fixed;
     inset: 0;
-    z-index: 1;
+    z-index: 20;
     background-color: var(--docs-backdrop-bg);
     opacity: 0;
     pointer-events: none;

src/components/Documentation/Markdown/Main/index.tsx

@@ -3,7 +3,10 @@ import { PropsWithChildren } from 'react'
 
 import 'github-markdown-css/github-markdown.css'
 import useCustomYtEmbeds from '../../../../utils/front/useCustomYtEmbeds'
-import { getPathWithSource } from '../../../../utils/shared/sidebar'
+import {
+  getItemByPath,
+  getPathWithSource
+} from '../../../../utils/shared/sidebar'
 import Link from '../../../Link'
 import * as sharedStyles from '../../styles.module.css'
 import Tutorials from '../../TutorialsLinks'
@@ -29,6 +32,9 @@ const Main: React.FC<PropsWithChildren<IMainProps>> = ({
   useArgsTargetFlash()
   useCustomYtEmbeds()
 
+  const prevItem = prev ? getItemByPath(prev) : null
+  const nextItem = next ? getItemByPath(next) : null
+
   return (
     <div className={styles.content} id="markdown-root">
       {tutorials && (
@@ -46,17 +52,25 @@ const Main: React.FC<PropsWithChildren<IMainProps>> = ({
       </Link>
       <div className={cn('markdown-body', themeStyles.code)}>{children}</div>
       <div className={styles.navButtons}>
-        <Link className={styles.navButton} href={prev || '#'}>
-          <i className={cn(styles.navButtonIcon, styles.prev)} />
-          <span>Prev</span>
-        </Link>
-        <Link
-          className={styles.navButton}
-          href={next ? getPathWithSource(next) : '#'}
-        >
-          <span>Next</span>
-          <i className={cn(styles.navButtonIcon, styles.next)} />
-        </Link>
+        {prev && prevItem?.label && (
+          <Link className={cn(styles.navButton, styles.prevLink)} href={prev}>
+            <span className={styles.navButtonTitle}>
+              <i className={cn(styles.navButtonIcon, styles.prev)} />
+              <span>{prevItem.label}</span>
+            </span>
+          </Link>
+        )}
+        {next && nextItem?.label && (
+          <Link
+            className={cn(styles.navButton, styles.nextLink)}
+            href={getPathWithSource(next)}
+          >
+            <span className={styles.navButtonTitle}>
+              <span>{nextItem.label}</span>
+              <i className={cn(styles.navButtonIcon, styles.next)} />
+            </span>
+          </Link>
+        )}
       </div>
     </div>
   )

src/components/Documentation/Markdown/Main/styles.module.css

@@ -490,31 +490,49 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-top: 40px;
-  font-size: 14px;
-  font-weight: 500;
+  gap: 16px;
+  margin-top: 48px;
+  margin-bottom: 14px;
+
+  @media (width <= 572px) {
+    gap: 12px;
+    margin-top: 40px;
+    margin-bottom: 12px;
+  }
 }
 
 .navButton {
   text-decoration: none;
-  background: var(--docs-surface-bg);
-  padding: 10px 15px;
-  text-transform: uppercase;
   color: var(--docs-text-primary);
-  border: none;
-  border-bottom: 3px solid var(--docs-accent-primary);
   display: inline-flex;
   align-items: center;
+  justify-content: center;
+  min-width: 0;
+  max-width: min(22ch, calc(50% - 8px));
+  min-height: 44px;
+  padding: 8px 0;
+  border-bottom: 1px solid
+    color-mix(in srgb, var(--docs-accent-primary) 45%, transparent);
+  opacity: 0.9;
   transition:
-    border-color 0.2s ease-out,
-    background-color 0.2s ease-out,
     color 0.2s ease-out,
-    box-shadow 0.2s ease-out;
+    opacity 0.2s ease-out,
+    border-color 0.2s ease-out;
 
-  &:hover {
+  &:hover,
+  &:focus-visible {
     color: var(--docs-link-hover);
-    background-color: var(--docs-surface-hover-bg);
-    border-bottom-color: var(--docs-accent-primary-hover);
+    text-decoration: none;
+    border-bottom-color: color-mix(
+      in srgb,
+      var(--docs-accent-primary) 45%,
+      transparent
+    );
+    opacity: 1;
+  }
+
+  &:focus-visible {
+    outline: none;
   }
 
   &[disabled] {
@@ -523,6 +541,38 @@
   }
 }
 
+.prevLink {
+  margin-right: auto;
+}
+
+.nextLink {
+  margin-left: auto;
+  text-align: right;
+}
+
+.navButtonTitle {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 16px;
+  line-height: 1.25;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  text-transform: none;
+
+  @media (width <= 768px) {
+    font-size: 14px;
+  }
+
+  @media (width <= 572px) {
+    font-size: 14px;
+  }
+}
+
+.navButtonTitle > span {
+  max-width: 18ch;
+}
+
 :global(body.dark-mode #markdown-root .markdown-body) {
   --focus-outlineColor: var(--focus-ring);
 
@@ -652,29 +702,20 @@
 }
 
 :global(body.dark-mode) .navButton {
-  border: 1px solid var(--docs-border-subtle);
-  border-bottom: 3px solid var(--docs-accent-primary);
+  color: var(--docs-text-primary);
 }
 
 :global(body.dark-mode) .navButton:hover,
 :global(body.dark-mode) .navButton:focus-visible {
-  border-color: color-mix(in srgb, var(--docs-border-subtle) 86%, white 10%);
-  background-color: color-mix(
-    in srgb,
-    var(--docs-surface-hover-bg) 84%,
-    var(--docs-surface-bg) 16%
-  );
-  box-shadow:
-    inset 0 1px 0 rgb(255 255 255 / 4%),
-    0 2px 6px rgb(0 0 0 / 12%);
+  color: var(--docs-link-hover);
 }
 
 .navButtonIcon {
   display: inline-block;
-  width: 1em;
-  height: 1em;
+  width: 0.9em;
+  height: 0.9em;
   line-height: 1;
-  background-color: currentcolor;
+  background-color: var(--docs-accent-primary);
   background-image: none;
   mask-image: url('../../../../images/arrow.svg');
   mask-size: contain;
@@ -688,16 +729,36 @@
   -webkit-mask-position: center;
   /* stylelint-disable-next-line property-no-vendor-prefix */
   -webkit-mask-repeat: no-repeat;
-  transition: all 0.3s;
+  opacity: 0.9;
+  transition:
+    transform 0.2s ease-out,
+    background-color 0.2s ease-out,
+    opacity 0.2s ease-out;
 
   &.next {
-    margin-left: 7px;
+    flex-shrink: 0;
   }
 
   &.prev {
-    margin-right: 7px;
+    flex-shrink: 0;
     mask-position: center;
     transform: rotate(180deg);
     margin-top: 2px;
   }
 }
+
+.navButton:hover .navButtonIcon,
+.navButton:focus-visible .navButtonIcon {
+  background-color: var(--docs-accent-primary-hover);
+  opacity: 1;
+}
+
+.prevLink:hover .navButtonIcon,
+.prevLink:focus-visible .navButtonIcon {
+  transform: rotate(180deg) translateX(3px);
+}
+
+.nextLink:hover .navButtonIcon,
+.nextLink:focus-visible .navButtonIcon {
+  transform: translateX(3px);
+}

src/components/LayoutHeader/HeaderBranding/index.tsx

@@ -1,5 +1,3 @@
-import cn from 'classnames'
-
 import { mainSiteUrls } from '../../../consts.js'
 import { ReactComponent as LogoSVG } from '../../../images/dvc_by_lakefs.svg'
 import Link from '../../Link'
@@ -15,7 +13,7 @@ export const HeaderBranding: React.FC<HeaderBrandingProps> = ({ onClick }) => (
     <Link
       onClick={onClick}
       href={mainSiteUrls.home}
-      className={cn(styles.logoLink, 'mr-auto')}
+      className={styles.logoLink}
       title="DVC"
       aria-label="DVC"
     >

src/components/LayoutHeader/HeaderBranding/styles.module.css

@@ -2,6 +2,7 @@
 
 .logoLink {
   color: var(--text-primary);
+  margin-right: auto;
 
   &:hover,
   &:focus {

yarn.lock

@@ -20099,7 +20099,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"title-case@npm:3.0.3, title-case@npm:^3.0.3":
+"title-case@npm:4.3.2":
+  version: 4.3.2
+  resolution: "title-case@npm:4.3.2"
+  checksum: 10c0/f040c5b0586e3a4ac5881e59ac060ebfa56dae611b0d513ad211fa7f92597d418395fa902fe9d7ee49f98e557e88421e274680b22a3b04dd1ce1c577225444d3
+  languageName: node
+  linkType: hard
+
+"title-case@npm:^3.0.3":
   version: 3.0.3
   resolution: "title-case@npm:3.0.3"
   dependencies:
@@ -21517,7 +21524,7 @@ __metadata:
     stylelint-config-standard: "npm:40.0.0"
     tailwindcss: "npm:4.2.2"
     tailwindcss-animate: "npm:1.0.7"
-    title-case: "npm:3.0.3"
+    title-case: "npm:4.3.2"
     tsconfig-paths-webpack-plugin: "npm:4.2.0"
     typescript: "npm:5.9.3"
     typescript-eslint: "npm:8.57.0"