Refactor Download CTA to use Button component, update stylings

Author: webstackdev

src/components/Button/server/index.ts

@@ -1,4 +1,12 @@
-export type ButtonVariant = 'primary' | 'secondary' | 'twitter' | 'success' | 'warning' | 'spotlight' | 'icon'
+export type ButtonVariant =
+  | 'primary'
+  | 'secondary'
+  | 'twitter'
+  | 'success'
+  | 'success-offset'
+  | 'warning'
+  | 'spotlight'
+  | 'icon'
 export type ButtonSize = 'small' | 'medium' | 'large'
 export type ButtonType = 'button' | 'submit' | 'reset'
 export type IconPosition = 'left' | 'right' | 'only'
@@ -34,14 +42,11 @@ function addClassNames(classList: ClassList, classNames: string) {
 
 const baseButtonClasses =
   'inline-flex items-center justify-center text-center align-middle whitespace-nowrap select-none ' +
-  'no-underline ' +
-  'relative focus-visible:outline-none ' +
-  "after:pointer-events-none after:absolute after:content-[''] after:inset-0 after:rounded-none after:border-2 after:border-transparent after:opacity-0 after:transition-opacity after:duration-150 after:ease-out " +
-  'focus-visible:after:opacity-100 focus-visible:after:[inset:-6px] focus-visible:after:border-spotlight ' +
+  'no-underline hover:no-underline focus:no-underline focus-visible:no-underline decoration-transparent ' +
+  'focus:outline-none focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none ' +
   'border-2 border-solid border-transparent rounded-md ' +
   'font-bold uppercase tracking-[0.08em] ' +
   'text-sm leading-5 ' +
-  '[box-shadow:var(--shadow-sm)] [text-shadow:var(--shadow-text)] ' +
   'transition-[color,background-color,border-color,box-shadow,transform] duration-200 ease-in-out ' +
   'disabled:cursor-not-allowed disabled:opacity-[0.65] disabled:pointer-events-none ' +
   'aria-disabled:cursor-not-allowed aria-disabled:opacity-[0.65] aria-disabled:pointer-events-none'
@@ -58,30 +63,35 @@ const sizeClasses: Record<ButtonSize, string> = {
 const variantClasses: Record<ButtonVariant, string> = {
   primary:
     'bg-primary text-content ' +
-    'hover:bg-primary-offset hover:[box-shadow:var(--shadow-hover)] hover:-translate-y-px ' +
-    'focus-visible:bg-primary-offset focus-visible:[box-shadow:var(--shadow-hover)] focus-visible:-translate-y-px ' +
-    'active:bg-primary-offset active:[box-shadow:var(--shadow-active)] active:translate-y-px',
+    'hover:bg-primary-offset hover:[box-shadow:var(--shadow-hover)] ' +
+    'focus-visible:bg-primary-offset focus-visible:[box-shadow:var(--shadow-hover)] ' +
+    'active:bg-primary-offset active:[box-shadow:var(--shadow-active)]',
   secondary:
     'bg-secondary text-content ' +
-    'hover:bg-secondary-offset hover:[box-shadow:var(--shadow-hover)] hover:-translate-y-px ' +
-    'focus-visible:bg-secondary-offset focus-visible:[box-shadow:var(--shadow-hover)] focus-visible:-translate-y-px ' +
-    'active:bg-secondary-offset active:[box-shadow:var(--shadow-active)] active:translate-y-px',
+    'hover:bg-secondary-offset hover:[box-shadow:var(--shadow-hover)] ' +
+    'focus-visible:bg-secondary-offset focus-visible:[box-shadow:var(--shadow-hover)] ' +
+    'active:bg-secondary-offset active:[box-shadow:var(--shadow-active)]',
   twitter: 'bg-x border-x text-content hover:bg-transparent hover:text-x focus-visible:bg-transparent focus-visible:text-x',
   success:
     'bg-success text-white ' +
-    'hover:bg-success-offset hover:[box-shadow:var(--shadow-hover)] hover:-translate-y-px ' +
-    'focus-visible:bg-success-offset focus-visible:[box-shadow:var(--shadow-hover)] focus-visible:-translate-y-px ' +
-    'active:bg-success-offset active:[box-shadow:var(--shadow-active)] active:translate-y-px',
+    'hover:bg-success-offset hover:[box-shadow:var(--shadow-hover)] ' +
+    'focus-visible:bg-success-offset focus-visible:[box-shadow:var(--shadow-hover)] ' +
+    'active:bg-success-offset active:[box-shadow:var(--shadow-active)]',
+  'success-offset':
+    'bg-success-offset text-content-inverse ' +
+    'hover:bg-success hover:[box-shadow:var(--shadow-hover)] ' +
+    'focus-visible:bg-success focus-visible:[box-shadow:var(--shadow-hover)] ' +
+    'active:bg-success active:[box-shadow:var(--shadow-active)]',
   warning:
     'bg-warning text-content ' +
-    'hover:bg-warning-offset hover:[box-shadow:var(--shadow-hover)] hover:-translate-y-px ' +
-    'focus-visible:bg-warning-offset focus-visible:[box-shadow:var(--shadow-hover)] focus-visible:-translate-y-px ' +
-    'active:bg-warning-offset active:[box-shadow:var(--shadow-active)] active:translate-y-px',
+    'hover:bg-warning-offset hover:[box-shadow:var(--shadow-hover)] ' +
+    'focus-visible:bg-warning-offset focus-visible:[box-shadow:var(--shadow-hover)] ' +
+    'active:bg-warning-offset active:[box-shadow:var(--shadow-active)]',
   spotlight:
     'bg-spotlight text-black ' +
-    'hover:bg-spotlight-offset hover:[box-shadow:var(--shadow-hover)] hover:-translate-y-px ' +
-    'focus-visible:bg-spotlight-offset focus-visible:[box-shadow:var(--shadow-hover)] focus-visible:-translate-y-px ' +
-    'active:bg-spotlight-offset active:[box-shadow:var(--shadow-active)] active:translate-y-px',
+    'hover:bg-spotlight-offset hover:[box-shadow:var(--shadow-hover)] ' +
+    'focus-visible:bg-spotlight-offset focus-visible:[box-shadow:var(--shadow-hover)] ' +
+    'active:bg-spotlight-offset active:[box-shadow:var(--shadow-active)]',
   icon:
     'aspect-square bg-transparent text-content p-2 ![box-shadow:none] ' +
     'hover:bg-page-offset hover:text-primary ' +

src/components/CallToAction/Download/index.astro

@@ -4,6 +4,7 @@
  * download page, which is implemented by Forms/Download.
  */
 import { BuildError } from '@lib/errors/BuildError'
+import Button from '@components/Button/index.astro'
 import List from '@components/List/index.astro'
 import Icon from '@components/Icon/index.astro'
 
@@ -74,7 +75,7 @@ const downloadUrl = `/downloads/${normalizedResource}`
         </span>
       </div>
 
-      <h2 id={titleId} class="text-2xl md:text-3xl font-bold text-content mb-3">
+      <h2 id={titleId} class="text-2xl md:text-3xl font-bold text-primary-offset mb-3">
         {title}
       </h2>
       <p id={descriptionId} class="text-base text-content-offset mb-6 max-w-xl">
@@ -99,37 +100,38 @@ const downloadUrl = `/downloads/${normalizedResource}`
             <Icon
               icon={"document"}
               size={8}
-              color={"secondary"}
+              color={"primary-offset"}
             />
           </div>
-          <p class="text-xs text-content-offset">Free resource · Instant access</p>
+          <p class="text-xs text-content">Free resource · Instant access</p>
         </div>
 
         <div class="space-y-3">
-          <a
+          <Button
             href={downloadUrl}
-            class="w-full inline-flex items-center justify-center gap-2 px-6 py-3 bg-spotlight hover:bg-spotlight-offset text-white font-semibold rounded-lg text-sm transition-colors no-underline hover:no-underline focus:no-underline focus-visible:no-underline decoration-transparent hover:decoration-transparent focus:decoration-transparent focus-visible:decoration-transparent"
+            variant="success-offset"
+            class="w-full gap-2 px-6 py-3 text-content-inverse"
           >
             <Icon
               icon={"download"}
               size={5}
-              color={"secondary"}
+              color={"content-inverse"}
             />
-            {buttonText}
-          </a>
+            <span class="mt-1">{buttonText}</span>
+          </Button>
           {
             secondaryLink && (
-              <a
+              <Button
                 href={secondaryLink.href}
-                class="w-full inline-flex items-center justify-center px-6 py-3 border border-trim text-content font-semibold rounded-lg text-sm hover:bg-page-offset transition-colors"
-              >
-                {secondaryLink.text}
-              </a>
+                variant="secondary"
+                class="w-full mt-2 px-6 py-3 bg-page-offset text-content-inverse hover:bg-page-offset focus-visible:bg-page-offset"
+                text={secondaryLink.text}
+              />
             )
           }
         </div>
 
-        <p class="text-xs text-content-offset text-center mt-4">No credit card required.</p>
+        <p class="text-xs text-content text-center mt-4">No credit card required.</p>
       </div>
     </div>
   </div>

src/components/List/layouts/TwoColumnCheckIconsList.astro

@@ -16,7 +16,7 @@ export type Props = {
 
 const { items, classes, size }: Props = Astro.props
 
-const ulClass = ["grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm text-content-offset mb-1", classes?.ul]
+const ulClass = ["grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm text-content mb-1", classes?.ul]
 const liClass = ["flex items-center gap-2", classes?.li]
 ---
 
@@ -30,7 +30,7 @@ const liClass = ["flex items-center gap-2", classes?.li]
           size={size ?? 5}
         />
         <span>
-          <span class="text-content-offset">{item.text}</span>
+          <span class="text-content">{item.text}</span>
         </span>
       </li>
     ))

src/components/Pages/Contact/index.astro

@@ -277,22 +277,24 @@ const { content } = Astro.props
                     </div>
                   </div>
 
-                  <div class="space-y-2 mb-6">
-                    <label
-                      for="timeline"
-                      class="block text-content-active text-sm font-medium"
-                    >
-                      {content.form.project.timeline}
-                    </label>
-                    <select
-                      id="timeline"
-                      name="timeline"
-                      class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200 cursor-pointer"
-                    >
-                      {content.form.project.timelineOptions.map((item) => (
-                        <option value={item.value}>{item.text}</option>
-                      ))}
-                    </select>
+                  <div class="grid grid-cols-1 md:grid-cols-2 md:gap-6">
+                    <div class="space-y-2 mb-6">
+                      <label
+                        for="timeline"
+                        class="block text-content-active text-sm font-medium"
+                      >
+                        {content.form.project.timeline}
+                      </label>
+                      <select
+                        id="timeline"
+                        name="timeline"
+                        class="w-full px-4 py-3 border-2 border-trim rounded-xl bg-note-inverse/25 focus:border-spotlight focus:ring-0 focus:outline-none focus-visible:border-spotlight focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none transition-colors duration-200 cursor-pointer"
+                      >
+                        {content.form.project.timelineOptions.map((item) => (
+                          <option value={item.value}>{item.text}</option>
+                        ))}
+                      </select>
+                    </div>
                   </div>
 
                   <div class="space-y-2">

src/components/Pages/NotFound/index.astro

@@ -1,4 +1,6 @@
 ---
+import Button from '@components/Button/index.astro'
+
 export interface Props {
   content: {
     buttonText: string
@@ -9,15 +11,10 @@ const { content } = Astro.props
 ---
 
 <div class="max-w-4xl mx-auto w-full block py-2 md:py-4">
-  <div class="max-w-lg w-full">
+  <div class="max-w-lg w-full mx-auto">
     <div class="mb-8 text-center">
-      <div class="space-y-4">
-        <a
-          href={"/"}
-          class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-spotlight hover:bg-spotlight-offset focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors duration-200"
-        >
-          {content.buttonText}
-        </a>
+      <div class="flex flex-row justify-center items-center w-full">
+        <Button href="/" variant="secondary" class="text-content-inverse" text={content.buttonText} />
       </div>
     </div>
   </div>