Update NavigationFooter style

timvir · Jun 6, 2024 · 22f7dfb · 22f7dfb
1 parent 2cf5880
commit 22f7dfb
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 114 deletions.
diff --git a/pkg/timvir/core/components/Footer/Footer.tsx b/pkg/timvir/core/components/Footer/Footer.tsx
@@ -39,7 +39,7 @@ function Footer(props: Props, ref: React.ForwardedRef<React.ElementRef<typeof Ro
       )}
 
       <div className={cx(grid, classes.meta)}>
-        <div>
+        <div style={{ marginBottom: 0 }}>
           Built with <a href="https://timvir.vercel.app">Timvir</a>
         </div>
       </div>
@@ -52,11 +52,11 @@ export default React.forwardRef(Footer);
 const classes = {
   root: css`
     padding: 50px 0 30px;
-    background: #20232a;
-    color: white;
 
     display: grid;
     gap: 50px;
+
+    border-top: 1px solid var(--timvir-border-color);
   `,
 
   linkGroups: css`
@@ -66,16 +66,13 @@ const classes = {
   `,
 
   linkGroupTitle: css`
-    text-transform: uppercase;
-    color: var(--timvir-secondary-text-color);
-    font-weight: 700;
-    letter-spacing: 0.08em;
+    font-weight: 600;
     margin-bottom: 12px;
   `,
 
   link: css`
     display: block;
-    color: white;
+    color: inherit;
     text-decoration: none;
     &:hover {
       color: var(--c-p-4);
@@ -86,7 +83,7 @@ const classes = {
     color: var(--timvir-secondary-text-color);
 
     a {
-      color: currentColor;
+      color: inherit;
       text-decoration: none;
       background-image: linear-gradient(transparent, transparent 5px, #383838 5px, #383838);
       background-position: bottom;

diff --git a/pkg/timvir/core/components/NavigationFooter/NavigationFooter.tsx b/pkg/timvir/core/components/NavigationFooter/NavigationFooter.tsx
@@ -1,6 +1,7 @@
 import { css, cx } from "@linaria/core";
 import * as React from "react";
 import { useContext } from "timvir/context";
+import * as Icons from "react-feather";
 
 /**
  * The underlying DOM element which is rendered by this component.
@@ -21,111 +22,156 @@ interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
 }
 
 function NavigationFooter(props: Props, ref: React.ForwardedRef<React.ElementRef<typeof Root>>) {
+  const { Link } = useContext();
+
   const { prev, next, className, ...rest } = props;
 
   return (
-    <Root
-      ref={ref}
-      {...rest}
-      className={cx(
-        className,
-        css`
-          padding: 50px 0;
-          background: #282c34;
-          color: white;
-
-          display: grid;
+    <Root ref={ref} {...rest} className={cx(className, classes.root)}>
+      <div
+        className={css`
+          display: flex;
+          flex-direction: column-reverse;
+          gap: 1rem;
 
-          grid-auto-rows: min-content;
-          grid-template-columns: [le] 16px [lex lc] 1fr [rc rex] 16px [re];
+          font-size: 0.875rem;
+          line-height: 1.5;
 
           @media (min-width: 48rem) {
-            grid-template-columns: [le] 24px [lex] 1fr [lc] minmax(0, 48rem) [rc] 1fr [rex] 24px [re];
-          }
-
-          @media (min-width: 72rem) {
-            grid-template-columns: [le] 1fr 24px [lex] minmax(0, 12rem) [lc] 48rem [rc] minmax(0, 12rem) [rex] 24px 1fr [re];
-          }
-
-          & > * {
-            grid-column: lc / rc;
+            flex-direction: row;
           }
-        `
-      )}
-    >
-      <div
-        className={css`
-          display: flex;
-          align-items: flex-start;
-          justify-content: space-between;
         `}
       >
-        <div
-          className={css`
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            justify-content: flex-start;
-            text-align: left;
-          `}
-        >
-          {prev && (
-            <>
-              <SecondaryLabel>{prev.context || "/"}</SecondaryLabel>
-              <PrimaryLink href={prev.href}>{prev.label}</PrimaryLink>
-            </>
-          )}
-        </div>
-        <div
-          className={css`
-            display: flex;
-            flex-direction: column;
-            align-items: flex-end;
-            justify-content: flex-start;
-            text-align: right;
-          `}
-        >
-          {next && (
+        {prev && (
+          <Link
+            href={prev.href}
+            className={css`
+              width: 100%;
+              display: flex;
+              gap: 4px;
+              flex-direction: column;
+              align-items: flex-start;
+              justify-content: flex-end;
+              text-align: left;
+              border-radius: 8px;
+              border: 1px solid var(--timvir-border-color);
+              padding: 16px;
+
+              color: inherit;
+              text-decoration: none;
+
+              min-width: 0;
+
+              &:hover {
+                background-color: var(--timvir-secondary-background-color);
+              }
+            `}
+          >
+            <Context>
+              <Icons.ChevronLeft /> Previous
+            </Context>
+            <Label>{prev.label}</Label>
+          </Link>
+        )}
+        {next && (
+          <Link
+            href={next.href}
+            className={css`
+              width: 100%;
+              display: flex;
+              flex-direction: column;
+              gap: 4px;
+              align-items: flex-end;
+              justify-content: flex-start;
+              text-align: right;
+              border-radius: 8px;
+              border: 1px solid var(--timvir-border-color);
+              padding: 16px;
+
+              color: inherit;
+              text-decoration: none;
+
+              min-width: 0;
+
+              &:hover {
+                background-color: var(--timvir-secondary-background-color);
+              }
+            `}
+          >
             <>
-              <SecondaryLabel>{next.context || "/"}</SecondaryLabel>
-              <PrimaryLink href={next.href}>{next.label}</PrimaryLink>
+              <Context>
+                Next <Icons.ChevronRight />
+              </Context>
+              <Label>{next.label}</Label>
             </>
-          )}
-        </div>
+          </Link>
+        )}
       </div>
     </Root>
   );
 }
 
 export default React.forwardRef(NavigationFooter);
 
-const PrimaryLink = ({ href, children }: { href: string; children: React.ReactNode }) => {
-  const { Link } = useContext();
+function Label(props: { children: React.ReactNode }) {
+  return (
+    <div
+      className={css`
+        font-weight: 500;
+
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100%;
+      `}
+      {...props}
+    />
+  );
+}
 
+function Context(props: { children?: React.ReactNode }) {
   return (
-    <Link
-      href={href}
+    <div
       className={css`
-        font-size: 1.2rem;
-        color: inherit;
-        text-decoration: none;
+        color: var(--timvir-secondary-text-color);
+        display: flex;
+        align-items: center;
+        margin-inline: -0.2em;
 
-        &:hover {
-          color: var(--c-p-3);
+        svg {
+          height: 1.2em;
+          width: 1.2em;
         }
       `}
-    >
-      {children}
-    </Link>
+      {...props}
+    />
   );
-};
+}
+
+const classes = {
+  root: css`
+    padding: 50px 0 80px;
+
+    display: grid;
 
-const SecondaryLabel = ({ children }: { children?: React.ReactNode }) => (
-  <div
-    className={css`
-      opacity: 0.5;
-    `}
-  >
-    {children}
-  </div>
-);
+    grid-auto-rows: min-content;
+    grid-template-columns: [le] var(--timvir-page-margin) [lex lc] 1fr [rc rex] var(--timvir-page-margin) [re];
+
+    @media (min-width: 48rem) {
+      grid-template-columns:
+        [le] var(--timvir-page-margin) [lex] 1fr [lc] minmax(0, 48rem) [rc] 1fr [rex] var(--timvir-page-margin)
+        [re];
+    }
+
+    @media (min-width: 72rem) {
+      grid-template-columns:
+        [le] 1fr var(--timvir-page-margin) [lex] minmax(0, 12rem) [lc] 48rem [rc] minmax(0, 12rem) [rex] var(
+          --timvir-page-margin
+        )
+        1fr [re];
+    }
+
+    & > * {
+      grid-column: lc / rc;
+    }
+  `,
+};
diff --git a/pkg/timvir/core/theme/index.ts b/pkg/timvir/core/theme/index.ts
@@ -67,7 +67,7 @@ export const theme = css`
   --c-p-5: ${colors.green["500"]};
 `;
 
-function mkTheme(config: typeof themes[keyof typeof themes]) {
+function mkTheme(config: (typeof themes)[keyof typeof themes]) {
   return `
     --timvir-background-color: ${config.backgroundColor};
     --timvir-text-color: ${config.textColor};

diff --git a/src/timvir/wrapper.tsx b/src/timvir/wrapper.tsx
@@ -2,7 +2,7 @@ import Link, { LinkProps } from "next/link";
 import { useRouter } from "next/router";
 import * as React from "react";
 import { Code } from "timvir/blocks";
-import { Footer, Page } from "timvir/core";
+import { Page } from "timvir/core";
 import { defaultSearch, Search } from "timvir/search";
 import routes from "./routes";
 import toc from "./toc";
@@ -29,27 +29,7 @@ export default function Wrapper({ children }: { children?: React.ReactNode }) {
   }
 
   return (
-    <Page
-      location={router}
-      Link={Link_ as any}
-      toc={toc}
-      search={search}
-      mdxComponents={mdxComponents}
-      Footer={() => (
-        <Footer
-          links={[
-            {
-              group: "Docs",
-              items: [
-                { label: "Getting Started", href: "/docs" },
-                // { label: "Components", href: "/docs/components" },
-              ],
-            },
-            { group: "Community", items: [{ label: "GitHub", href: "https://github.com/timvir/timvir" }] },
-          ]}
-        />
-      )}
-    >
+    <Page location={router} Link={Link_ as any} toc={toc} search={search} mdxComponents={mdxComponents}>
       {children}
     </Page>
   );