back button

packages/website/src/components/Back/index.module.css

@@ -0,0 +1,3 @@
+.back {
+  display: contents;
+}

packages/website/src/components/Back/index.tsx

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../ui/classNames";
+import styles from "./index.module.css";
+
+interface Props extends ComponentProps<"div"> {}
+
+export function Back({ className, onClick, ...props }: Props) {
+  console.log("init");
+
+  return (
+    <div
+      className={classNames(styles.back, className)}
+      onClick={(event) => {
+        console.log("back");
+        window.history.back();
+        onClick?.(event);
+      }}
+      {...props}
+    />
+  );
+}

packages/website/src/components/Button/index.module.css

@@ -10,14 +10,14 @@
   border: none;
 
   font-family: var(--font-family-regular);
-  font-size: 0.75em;
+  font-size: 0.8em;
   color: var(--gray-1);
   font-weight: var(--weight-medium);
 
   cursor: pointer;
 
   &[data-size="minor"] {
-    font-size: 0.75em;
+    font-size: 0.7em;
     padding: var(--space-2) var(--space-3);
   }
 
@@ -61,7 +61,7 @@
 
   &[data-variant="surface"],
   &[data-variant="soft"] {
-    background-color: var(--accent-3);
+    background-color: var(--accent-a3);
     color: var(--gray-12);
   }
 

packages/website/src/components/ToolBanner.astro

@@ -1,7 +1,11 @@
 ---
+import { ArrowLeftIcon } from "@radix-ui/react-icons";
 import type { Tool } from "../constants/tools";
 import { getStrings } from "../core/i18n/getStrings";
+import { Back } from "./Back";
+import { Flex } from "./Flex";
 import { Heading } from "./Heading";
+import { IconButton } from "./IconButton";
 
 interface Props {
   locale: string;
@@ -16,6 +20,8 @@ const toolStrings =
 
 <style>
   .tool-banner {
+    --tool-banner-overlap: 8rem;
+
     background-size: cover;
 
     .content {
@@ -40,11 +46,18 @@ const toolStrings =
       }
 
       .centered {
+        position: relative;
+
         flex: 1;
         max-width: var(--page-width);
 
         display: flex;
         flex-direction: column;
+
+        .return {
+          width: 0.75em;
+          height: 0.75em;
+        }
       }
 
       .pattern {
@@ -87,7 +100,15 @@ const toolStrings =
 
     <div class="centered">
       <Heading weight="bold" size="2">
-        {toolStrings.name}
+        <Flex align="center" gap="4">
+          <Back client:load>
+            <IconButton variant="soft" color="gray" highContrast>
+              <ArrowLeftIcon className="return" />
+            </IconButton>
+          </Back>
+
+          {toolStrings.name}
+        </Flex>
       </Heading>
     </div>
   </div>

packages/website/src/layouts/BaseLayout.astro

@@ -50,7 +50,7 @@ const { accent, locale } = Astro.props;
 
           background-color: var(--gray-1);
 
-          padding: var(--space-5);
+          padding: var(--space-4);
           gap: var(--space-6);
         }
       }