From 1f886a164b3e87f0c8e3db3dc7842874c8346b4c Mon Sep 17 00:00:00 2001
From: Benjamin Sehl <ben.sehl@shopify.com>
Date: Sat, 25 May 2024 22:37:56 -0400
Subject: [PATCH] UI polish

---
 app/components/hydrogen/new/Text.jsx             |   5 ++++-
 .../sections/highlight-solution.jsx              |  11 +++++++----
 app/routes/products.$handle/sections/reviews.jsx |  15 ++++++++++-----
 .../products.builder-keyboard/sections/cta.jsx   |  10 ++++++++--
 .../sections/features.jsx                        |   2 +-
 .../products.builder-keyboard/sections/hero.jsx  |  15 +++++++++++----
 app/styles/app.css                               |   8 ++++++++
 {app/assets => public}/synchro.woff2             | Bin
 tailwind.config.js                               |   1 +
 9 files changed, 50 insertions(+), 17 deletions(-)
 rename {app/assets => public}/synchro.woff2 (100%)

diff --git a/app/components/hydrogen/new/Text.jsx b/app/components/hydrogen/new/Text.jsx
index 1eed976..e5f6e7b 100644
--- a/app/components/hydrogen/new/Text.jsx
+++ b/app/components/hydrogen/new/Text.jsx
@@ -159,6 +159,7 @@ const heading = cva({
       '3xl': ['text-6xl', 'leading-none'], // 60 - 3.75rem
       '4xl': ['text-7xl', 'leading-none'], // 72 - 4.5rem
       '5xl': ['text-8xl', 'leading-none'], // 96 - 6rem
+      '6xl': ['text-9xl', 'leading-none'], // 128 - 8rem
     },
   },
   defaultVariants: {
@@ -174,6 +175,7 @@ export const Heading = forwardRef(
       truncate = false,
       uppercase = false,
       leading = 'tight',
+      font = 'display',
       width,
       weight,
       align,
@@ -197,6 +199,7 @@ export const Heading = forwardRef(
           leading,
           width,
           weight,
+          font,
           align,
           wrap,
           color,
@@ -215,7 +218,7 @@ export const Heading = forwardRef(
 const span = cva({
   variants: {
     pill: {
-      true: ['px-[0.4em]', 'py-[0.1em]', 'bg-white', 'rounded-full'],
+      true: ['px-5', 'rounded-full'],
       false: null,
     },
   },
diff --git a/app/routes/products.$handle/sections/highlight-solution.jsx b/app/routes/products.$handle/sections/highlight-solution.jsx
index 330d588..36b055c 100644
--- a/app/routes/products.$handle/sections/highlight-solution.jsx
+++ b/app/routes/products.$handle/sections/highlight-solution.jsx
@@ -1,4 +1,4 @@
-import {Heading, Text} from '@h2/new/Text';
+import {Heading, Span, Text} from '@h2/new/Text';
 import {useLoaderData} from '@remix-run/react';
 import {Button} from '@h2/new/Button';
 import {Image} from '@shopify/hydrogen';
@@ -29,10 +29,13 @@ export default function HighlightSolution() {
             >
               <Heading uppercase wrap="balance">
                 Your{' '}
-                <span className="px-5 mx-2 rounded-full bg-accent">ideal</span>
-                <span className="px-5 mx-2 rounded-full bg-accent">
+                <Span pill className="bg-accent">
+                  ideal
+                </Span>
+                &nbsp;
+                <Span pill className="w-[1em] px-6 bg-accent">
                   &nbsp;
-                </span>{' '}
+                </Span>{' '}
                 travel companion
               </Heading>
               <Text wrap="balance" size="xl" className="opacity-70">
diff --git a/app/routes/products.$handle/sections/reviews.jsx b/app/routes/products.$handle/sections/reviews.jsx
index df5a8bf..0183cb2 100644
--- a/app/routes/products.$handle/sections/reviews.jsx
+++ b/app/routes/products.$handle/sections/reviews.jsx
@@ -45,9 +45,9 @@ const reviews = [
 export default function Reviews({data = reviews}) {
   return (
     <Section>
-      <Container as="header" className="py-56 -mb-64">
+      <Container as="header" className="py-56 -mb-96">
         <Flex direction="down" gap={8}>
-          <Heading size={9} uppercase weight="regular" wrap="balance">
+          <Heading size="6xl" uppercase weight="regular" wrap="balance">
             Don’t take our word for it
           </Heading>
           <Flex direction="down" gap={6}>
@@ -71,7 +71,7 @@ export default function Reviews({data = reviews}) {
         </Flex>
       </Container>
       <Container className="pb-16">
-        <div className="max-w-3xl ml-auto">
+        <div className="max-w-[52rem] ml-auto">
           <div className="gap-12 columns-2">
             <div className="mt-36" />
             {data.map((review, i) => {
@@ -120,8 +120,13 @@ function Review({data, className, ...props}) {
           <IconQuote />
         </span>
         <Text>
-          <Strong>{firstSentence}</Strong>{' '}
-          <Span weight="medium" color="text">
+          <Strong color={props.background === 'black' ? 'white' : 'text'}>
+            {firstSentence}
+          </Strong>{' '}
+          <Span
+            color={props.background === 'black' ? 'white' : 'black'}
+            className="opacity-70"
+          >
             {remainingText}
           </Span>
         </Text>
diff --git a/app/routes/products.builder-keyboard/sections/cta.jsx b/app/routes/products.builder-keyboard/sections/cta.jsx
index 23ca3f2..782e6e3 100644
--- a/app/routes/products.builder-keyboard/sections/cta.jsx
+++ b/app/routes/products.builder-keyboard/sections/cta.jsx
@@ -17,11 +17,17 @@ export default function CTA() {
         >
           <Heading weight="regular" leading="normal">
             <Span font="display">
-              <Span pill>CTRL</Span> YOUR PRODUCTIVITY,
+              <Span pill className="bg-white">
+                CTRL
+              </Span>{' '}
+              YOUR PRODUCTIVITY,
             </Span>
             <br />
             <Span font="sans">
-              <Span pill>ALT</Span> YOUR WORK GAME.
+              <Span pill className="bg-white">
+                ALT
+              </Span>{' '}
+              YOUR WORK GAME.
             </Span>
           </Heading>
           <Button>Pre-order</Button>
diff --git a/app/routes/products.builder-keyboard/sections/features.jsx b/app/routes/products.builder-keyboard/sections/features.jsx
index 6dcb18d..06a0001 100644
--- a/app/routes/products.builder-keyboard/sections/features.jsx
+++ b/app/routes/products.builder-keyboard/sections/features.jsx
@@ -23,7 +23,7 @@ function Feature({number, title, description, image}) {
           {description}
         </Text>
       </Flex>
-      <div className="col-span-3 col-start-7 bg-gray">
+      <div className="col-span-3 col-start-7 bg-offWhite">
         <Image src={image.src} width={370} height={257} crop="center" />
       </div>
     </Grid>
diff --git a/app/routes/products.builder-keyboard/sections/hero.jsx b/app/routes/products.builder-keyboard/sections/hero.jsx
index 54252d7..e390154 100644
--- a/app/routes/products.builder-keyboard/sections/hero.jsx
+++ b/app/routes/products.builder-keyboard/sections/hero.jsx
@@ -1,4 +1,4 @@
-import {Button} from '@h2/Button';
+import {Button} from '@h2/new/Button';
 import Link from '@h2/Link';
 import {Price} from '@h2/Price';
 import {Heading, Span, Text} from '@h2/new/Text';
@@ -24,11 +24,18 @@ export default function Hero() {
                 Keyboard
               </Span>
             </Heading>
-            <Price as={Text} size="6xl" variant={selectedVariant} />
+            <Price
+              color="white"
+              className="opacity-60"
+              font="display"
+              as={Text}
+              size="6xl"
+              variant={selectedVariant}
+            />
           </Flex>
           <Flex direction="down" gap={4}>
-            <Button>Pre-order</Button>
-            <Text width="narrow" className="opacity-70">
+            <Button color="accent">Pre-order</Button>
+            <Text width="narrow" color="white" className="opacity-70">
               See{' '}
               <Link className="border-b border-white/45" to="/">
                 FAQs
diff --git a/app/styles/app.css b/app/styles/app.css
index 3e84e71..13eddbb 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -1,3 +1,11 @@
+@font-face {
+  font-family: "Synchro";
+  src: url("/synchro.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/app/assets/synchro.woff2 b/public/synchro.woff2
similarity index 100%
rename from app/assets/synchro.woff2
rename to public/synchro.woff2
diff --git a/tailwind.config.js b/tailwind.config.js
index 3bc0150..c657864 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -57,6 +57,7 @@ export default {
         inherit: 'inherit',
       },
       fontFamily: {
+        display: 'Synchro',
         sans: ['Helvetica Neue', 'ui-sans-serif', 'system-ui', 'sans-serif'],
         serif: ['"IBMPlexSerif"', 'Palatino', 'ui-serif'],
       },