From 6fd7c9fc4add8baae680fae9a28302484bc40348 Mon Sep 17 00:00:00 2001
From: Jake Jarvis <jake@jarv.is>
Date: Wed, 7 May 2025 12:51:02 -0400
Subject: [PATCH] clean up /projects styles

---
 app/projects/page.tsx            | 56 ++++++++++++++------------------
 components/activity-calendar.tsx |  2 +-
 components/layout/skip-nav.tsx   |  2 +-
 components/ui/button.tsx         |  2 +-
 components/ui/input.tsx          |  2 +-
 components/ui/textarea.tsx       |  2 +-
 components/ui/tooltip.tsx        |  4 +--
 7 files changed, 31 insertions(+), 39 deletions(-)

diff --git a/app/projects/page.tsx b/app/projects/page.tsx
index aa46d1bc..0bd6fd0a 100644
--- a/app/projects/page.tsx
+++ b/app/projects/page.tsx
@@ -57,20 +57,20 @@ const Page = async () => {
 
       <div className="row-auto grid w-full grid-cols-none gap-4 md:grid-cols-2">
         {repos?.map((repo) => (
-          <div key={repo!.name} className="border-ring/65 h-fit rounded-2xl border-1 p-4">
-            <Link href={repo!.url} className="mb-2 inline-block text-base font-semibold">
+          <div key={repo!.name} className="border-ring/65 h-fit space-y-1.5 rounded-2xl border-1 px-4 py-3">
+            <Link href={repo!.url} className="inline-block text-base leading-relaxed font-semibold">
               {repo!.name}
             </Link>
 
-            {repo!.description && <p className="text-foreground/85 m-0 text-sm leading-relaxed">{repo!.description}</p>}
+            {repo!.description && <p className="text-foreground/85 text-sm leading-relaxed">{repo!.description}</p>}
 
-            <div className="text-muted-foreground mt-2 flex flex-wrap space-x-4 text-[0.825rem]">
+            <div className="flex flex-wrap space-x-4 *:inline-flex *:flex-nowrap *:items-center *:text-[0.825rem] *:leading-loose *:whitespace-nowrap">
               {repo!.primaryLanguage && (
-                <div className="mt-1 whitespace-nowrap">
+                <div className="text-muted-foreground space-x-2">
                   {repo!.primaryLanguage.color && (
                     <span
-                      className="mr-2 inline-block size-4 align-text-top"
-                      style={{ backgroundColor: repo!.primaryLanguage.color, borderRadius: "50%" }}
+                      className="inline-block size-4 rounded-full"
+                      style={{ backgroundColor: repo!.primaryLanguage.color }}
                     />
                   )}
                   <span>{repo!.primaryLanguage.name}</span>
@@ -78,36 +78,28 @@ const Page = async () => {
               )}
 
               {repo!.stargazerCount > 0 && (
-                <div className="mt-1 whitespace-nowrap">
-                  <Link
-                    href={`${repo!.url}/stargazers`}
-                    title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.stargazerCount)} ${repo!.stargazerCount === 1 ? "star" : "stars"}`}
-                    className="hover:text-primary text-muted-foreground hover:no-underline"
-                  >
-                    <StarIcon className="mr-2 inline-block size-4 align-text-top" />
-                    <span>{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.stargazerCount)}</span>
-                  </Link>
-                </div>
+                <Link
+                  href={`${repo!.url}/stargazers`}
+                  title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.stargazerCount)} ${repo!.stargazerCount === 1 ? "star" : "stars"}`}
+                  className="text-muted-foreground hover:text-primary space-x-2 hover:no-underline"
+                >
+                  <StarIcon className="inline-block size-4 shrink-0" />
+                  <span>{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.stargazerCount)}</span>
+                </Link>
               )}
 
               {repo!.forkCount > 0 && (
-                <div className="mt-1 whitespace-nowrap">
-                  <Link
-                    href={`${repo!.url}/network/members`}
-                    title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.forkCount)} ${repo!.forkCount === 1 ? "fork" : "forks"}`}
-                    className="hover:text-primary text-muted-foreground hover:no-underline"
-                  >
-                    <GitForkIcon className="mr-2 inline-block size-4 align-text-top" />
-                    <span>{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.forkCount)}</span>
-                  </Link>
-                </div>
+                <Link
+                  href={`${repo!.url}/network/members`}
+                  title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.forkCount)} ${repo!.forkCount === 1 ? "fork" : "forks"}`}
+                  className="text-muted-foreground hover:text-primary space-x-2 hover:no-underline"
+                >
+                  <GitForkIcon className="inline-block size-4" />
+                  <span>{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.forkCount)}</span>
+                </Link>
               )}
 
-              <div className="mt-1 whitespace-nowrap">
-                <span
-                  // invisible icon hack to fix line height
-                  className="mr-0 inline-block h-4 w-0 align-text-top"
-                />
+              <div className="text-muted-foreground whitespace-nowrap">
                 <span>
                   Updated <RelativeTime date={repo!.pushedAt} />
                 </span>
diff --git a/components/activity-calendar.tsx b/components/activity-calendar.tsx
index f6798e67..3605a07c 100644
--- a/components/activity-calendar.tsx
+++ b/components/activity-calendar.tsx
@@ -48,7 +48,7 @@ const Calendar = ({
           <Tooltip>
             <TooltipTrigger asChild>{block}</TooltipTrigger>
             <TooltipContent>
-              <span>{`${activity.count === 0 ? "No" : activity.count} ${noun}${activity.count === 1 ? "" : "s"} on ${format(activity.date, "MMMM do")}`}</span>
+              <span className="text-xs font-medium">{`${activity.count === 0 ? "No" : activity.count} ${noun}${activity.count === 1 ? "" : "s"} on ${format(activity.date, "MMMM do")}`}</span>
             </TooltipContent>
           </Tooltip>
         )}
diff --git a/components/layout/skip-nav.tsx b/components/layout/skip-nav.tsx
index 9408a86b..d3fed507 100644
--- a/components/layout/skip-nav.tsx
+++ b/components/layout/skip-nav.tsx
@@ -6,7 +6,7 @@ export const SkipNavLink = () => {
   return (
     <Button
       asChild
-      className="sr-only transition-none focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-100 focus:inline-flex focus:px-4 focus:py-2"
+      className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-100 focus:inline-flex focus:px-4 focus:py-2"
       variant="default"
     >
       <a href={`#${SKIP_NAV_ID}`}>Skip to content</a>
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 4ed59583..be91d74d 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -4,7 +4,7 @@ import { cn } from "@/lib/utils";
 import type { ComponentPropsWithoutRef } from "react";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
index 4823896d..8120dce8 100644
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@@ -7,7 +7,7 @@ const Input = ({ className, type, ...props }: ComponentPropsWithoutRef<"input">)
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/10 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/10 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
index eb33c9be..26c078fc 100644
--- a/components/ui/textarea.tsx
+++ b/components/ui/textarea.tsx
@@ -6,7 +6,7 @@ const Textarea = ({ className, ...props }: ComponentPropsWithoutRef<"textarea">)
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/10 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/10 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
       )}
       {...props}
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
index 28ecd720..766260af 100644
--- a/components/ui/tooltip.tsx
+++ b/components/ui/tooltip.tsx
@@ -35,13 +35,13 @@ const TooltipContent = ({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md bg-black px-3 py-1.5 text-xs text-balance text-white/90 shadow-sm select-none",
           className
         )}
         {...rest}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-black fill-black shadow-sm" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   );