Final style tweaks

Author: brookslybrand

app/routes/jam/jam.css

@@ -117,7 +117,7 @@ html {
 .photo-1 {
   --rotate: 6deg;
   --hover-rotate: -3deg;
-  top: 300px;
+  top: 110px;
   right: -210px;
   width: 220px;
   height: 165px;
@@ -153,7 +153,7 @@ html {
 .photo-2 {
   --rotate: -6deg;
   --hover-rotate: 3deg;
-  top: 820px;
+  top: 740px;
   left: -200px;
   width: 220px;
   height: 147px;
@@ -227,7 +227,7 @@ html {
 @screen md {
   .ticket {
     top: 850px;
-    right: -120px;
+    right: -180px;
     width: 375px;
     height: 131px;
   }
@@ -255,7 +255,7 @@ html {
 .boarding-pass {
   --rotate: -6deg;
   --hover-rotate: 3deg;
-  top: 1500px;
+  top: 650px;
   left: -220px;
   width: 260px;
   height: 97px;
@@ -301,7 +301,7 @@ html {
 .sticker {
   --rotate: -8deg;
   --hover-rotate: 5deg;
-  top: 420px;
+  top: 150px;
   right: -80px;
   width: 120px;
   height: 36px;

app/routes/jam/pages/2025.ticket.tsx

@@ -139,8 +139,6 @@ function TicketPurchase({
   const fetcher = useFetcher();
   const isSubmitting = fetcher.state !== "idle";
 
-  const disabled = isSoldOut || isSubmitting;
-
   return (
     <div className="z-10 flex w-[90%] flex-col items-center gap-3">
       <fetcher.Form
@@ -162,7 +160,7 @@ function TicketPurchase({
               className="size-6 text-white/30 transition-colors hover:text-white disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:text-white/30 md:size-8"
               aria-label="Decrease quantity"
               onClick={() => setQuantity(Math.max(1, quantity - 1))}
-              disabled={quantity <= 1 || disabled}
+              disabled={quantity <= 1 || isSoldOut}
             >
               <svg aria-hidden viewBox="0 0 24 24">
                 <use href={`${iconsHref}#circle-minus`} />
@@ -183,7 +181,7 @@ function TicketPurchase({
               className="size-6 text-white/30 transition-colors hover:text-white disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:text-white/30 md:size-8"
               aria-label="Increase quantity"
               onClick={() => setQuantity(quantity + 1)}
-              disabled={quantity >= maxQuantity || disabled}
+              disabled={quantity >= maxQuantity || isSoldOut}
             >
               <svg aria-hidden viewBox="0 0 24 24">
                 <use href={`${iconsHref}#circle-plus`} />
@@ -193,7 +191,8 @@ function TicketPurchase({
         </div>
         <JamButton
           type="submit"
-          disabled={disabled}
+          disabled={isSoldOut}
+          active={isSubmitting}
           className="w-full md:w-auto"
         >
           {isSoldOut ? "Sold Out" : isSubmitting ? "Processing..." : "Checkout"}

app/routes/jam/pages/layout.tsx

@@ -172,11 +172,13 @@ function Background({ children }: { children: React.ReactNode }) {
   );
 }
 
+const socialClassName = "size-6 transition-colors hover:text-white md:size-8";
+
 function Footer({ className }: { className?: string }) {
   return (
     <footer
       className={clsx(
-        "flex flex-col items-center gap-2 py-[160px] text-center font-conf-mono text-sm text-gray-400 md:text-base",
+        "flex flex-col items-center gap-2 py-[160px] text-center font-conf-mono text-xs text-gray-400 md:text-base",
         className,
       )}
     >
@@ -193,43 +195,31 @@ function Footer({ className }: { className?: string }) {
           target="_blank"
           rel="noopener noreferrer"
         >
-          <GitHub
-            className="size-8 transition-colors hover:text-white"
-            aria-hidden
-          />
+          <GitHub className={socialClassName} aria-hidden />
         </a>
         <a
           href="https://twitter.com/remix_run"
           aria-label="Twitter"
           target="_blank"
           rel="noopener noreferrer"
         >
-          <Twitter
-            className="size-8 transition-colors hover:text-white"
-            aria-hidden
-          />
+          <Twitter className={socialClassName} aria-hidden />
         </a>
         <a
           href="https://youtube.com/remix_run"
           aria-label="YouTube"
           target="_blank"
           rel="noopener noreferrer"
         >
-          <YouTube
-            className="size-8 transition-colors hover:text-white"
-            aria-hidden
-          />
+          <YouTube className={socialClassName} aria-hidden />
         </a>
         <a
           href="https://rmx.as/discord"
           aria-label="Discord"
           target="_blank"
           rel="noopener noreferrer"
         >
-          <Discord
-            className="size-8 transition-colors hover:text-white"
-            aria-hidden
-          />
+          <Discord className={socialClassName} aria-hidden />
         </a>
       </div>
       <div className="flex flex-col items-center gap-2 uppercase leading-loose">

app/routes/jam/text.tsx

@@ -9,7 +9,7 @@ import clsx from "clsx";
 export function Title({ children }: { children: React.ReactNode }) {
   return (
     <h1
-      className="flex flex-col gap-2 text-[2.75rem] font-extrabold uppercase leading-none tracking-tight text-white md:text-8xl md:leading-none"
+      className="flex flex-col gap-2 text-[2.5rem] font-extrabold uppercase leading-none tracking-tight text-white md:text-8xl md:leading-none"
       role="banner"
     >
       {children}

app/routes/jam/utils.tsx

@@ -7,7 +7,7 @@ import { Link, type LinkProps } from "react-router";
 import { ButtonHTMLAttributes } from "react";
 
 const jamStyles =
-  "flex items-center justify-center gap-2 rounded-full bg-white px-4 py-3 text-sm font-semibold text-black transition-colors duration-300 hover:bg-blue-brand hover:text-white md:px-6 md:py-4 md:text-xl";
+  "min-w-fit flex items-center justify-center gap-2 rounded-full px-4 py-3 text-sm font-semibold transition-colors duration-300 hover:bg-blue-brand hover:text-white md:px-6 md:py-4 md:text-xl";
 
 export function usePrefersReducedMotion() {
   const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
@@ -57,13 +57,15 @@ export function JamButton({
   className,
   children,
   disabled,
+  active,
   ...props
-}: ButtonHTMLAttributes<HTMLButtonElement>) {
+}: ButtonHTMLAttributes<HTMLButtonElement> & { active?: boolean }) {
   return (
     <button
       className={clsx(
         jamStyles,
         "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-white disabled:hover:text-black",
+        active ? "bg-blue-brand text-white" : "bg-white text-black",
         className,
       )}
       disabled={disabled}