From c6ba506b1783a0c95f310302d041b6c7474492b2 Mon Sep 17 00:00:00 2001
From: Josh Collinsworth <joshuajcollinsworth@gmail.com>
Date: Fri, 1 Mar 2024 16:20:44 -0600
Subject: [PATCH] Misc post-launch touchups (#117)

- Fixes both GitHub Security options being highlighted, regardless of
which is active, on account settings page
- Slows down particles on homepage
- Tweaks type and logo size on homepage
- Fixes rounded score display displaying as an oval on Safari
---
 frontend/components/AnimatedLogo.tsx                 |  2 +-
 frontend/components/QuotaCard.tsx                    |  2 +-
 frontend/islands/HomepageHero.tsx                    |  4 ++--
 frontend/routes/@[scope]/~/settings.tsx              | 12 ++++++------
 .../routes/package/(_components)/PackageHeader.tsx   |  4 ++--
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/components/AnimatedLogo.tsx b/frontend/components/AnimatedLogo.tsx
index c0205b33..b77e0522 100644
--- a/frontend/components/AnimatedLogo.tsx
+++ b/frontend/components/AnimatedLogo.tsx
@@ -14,7 +14,7 @@ export function AnimatedLogo() {
       aria-hidden="true"
     >
       <style>
-        {`#jsr-logo{height:110px}@media(min-width:768px){#jsr-logo{height:143px}}#jsr-logo g,#jsr-logo g rect{transform-origin:center}#jsr-logo g:nth-of-type(28) rect,#jsr-logo g:nth-of-type(36) rect{animation-duration:1287ms}#jsr-logo g:first-of-type rect,#jsr-logo g:nth-of-type(18) rect,#jsr-logo g:nth-of-type(20) rect,#jsr-logo g:nth-of-type(22) rect,#jsr-logo g:nth-of-type(32) rect,#jsr-logo g:nth-of-type(33) rect,#jsr-logo g:nth-of-type(36) rect,#jsr-logo g:nth-of-type(38) rect,#jsr-logo g:nth-of-type(44) rect,#jsr-logo g:nth-of-type(45) rect,#jsr-logo g:nth-of-type(5) rect,#jsr-logo g:nth-of-type(53) rect,#jsr-logo g:nth-of-type(56) rect{animation-name:jsr_logo_square_slide_in_down}#jsr-logo g:nth-of-type(12) rect,#jsr-logo g:nth-of-type(58) rect{animation-duration:1841ms}#jsr-logo g:nth-of-type(10) rect,#jsr-logo g:nth-of-type(15) rect,#jsr-logo g:nth-of-type(16) rect,#jsr-logo g:nth-of-type(23) rect,#jsr-logo g:nth-of-type(26) rect,#jsr-logo g:nth-of-type(27) rect,#jsr-logo g:nth-of-type(29) rect,#jsr-logo g:nth-of-type(34) rect,#jsr-logo g:nth-of-type(35) rect,#jsr-logo g:nth-of-type(40) rect,#jsr-logo g:nth-of-type(49) rect,#jsr-logo g:nth-of-type(52) rect,#jsr-logo g:nth-of-type(55) rect,#jsr-logo g:nth-of-type(58) rect,#jsr-logo g:nth-of-type(8) rect,#jsr-logo g:nth-of-type(9) rect{animation-name:jsr_logo_square_slide_in_left}#jsr-logo g:nth-of-type(11) rect,#jsr-logo g:nth-of-type(12) rect,#jsr-logo g:nth-of-type(19) rect,#jsr-logo g:nth-of-type(21) rect,#jsr-logo g:nth-of-type(24) rect,#jsr-logo g:nth-of-type(28) rect,#jsr-logo g:nth-of-type(30) rect,#jsr-logo g:nth-of-type(31) rect,#jsr-logo g:nth-of-type(37) rect,#jsr-logo g:nth-of-type(39) rect,#jsr-logo g:nth-of-type(48) rect,#jsr-logo g:nth-of-type(57) rect,#jsr-logo g:nth-of-type(59) rect{animation-name:jsr_logo_square_slide_in_right}#jsr-logo g:nth-of-type(13) rect,#jsr-logo g:nth-of-type(14) rect,#jsr-logo g:nth-of-type(17) rect,#jsr-logo g:nth-of-type(2) rect,#jsr-logo g:nth-of-type(25) rect,#jsr-logo g:nth-of-type(3) rect,#jsr-logo g:nth-of-type(41) rect,#jsr-logo g:nth-of-type(42) rect,#jsr-logo g:nth-of-type(43) rect,#jsr-logo g:nth-of-type(47) rect,#jsr-logo g:nth-of-type(50) rect,#jsr-logo g:nth-of-type(51) rect,#jsr-logo g:nth-of-type(54) rect,#jsr-logo g:nth-of-type(6) rect,#jsr-logo g:nth-of-type(60) rect,#jsr-logo g:nth-of-type(7) rect{animation-name:jsr_logo_square_slide_in_up}#jsr-logo g rect{animation:.5s cubic-bezier(.77,0,.175,1) forwards jsr_logo_square_slide_in_up;transform-box:fill-box;opacity:1}#jsr-logo g:first-of-type rect{animation-duration:1697ms}#jsr-logo g:nth-of-type(2) rect{animation-duration:1186ms}#jsr-logo g:nth-of-type(3) rect{animation-duration:1754ms}#jsr-logo g:nth-of-type(4) rect,#jsr-logo g:nth-of-type(46) rect{animation-duration:923ms;animation-name:jsr_logo_square_slide_in_right}#jsr-logo g:nth-of-type(5) rect{animation-duration:715ms}#jsr-logo g:nth-of-type(6) rect{animation-duration:601ms}#jsr-logo g:nth-of-type(7) rect{animation-duration:401ms}#jsr-logo g:nth-of-type(8) rect{animation-duration:1345ms}#jsr-logo g:nth-of-type(9) rect{animation-duration:684ms}#jsr-logo g:nth-of-type(10) rect{animation-duration:1051ms}#jsr-logo g:nth-of-type(11) rect{animation-duration:579ms}#jsr-logo g:nth-of-type(13) rect{animation-duration:844ms}#jsr-logo g:nth-of-type(14) rect{animation-duration:958ms}#jsr-logo g:nth-of-type(15) rect{animation-duration:1041ms}#jsr-logo g:nth-of-type(16) rect{animation-duration:786ms}#jsr-logo g:nth-of-type(17) rect{animation-duration:1022ms}#jsr-logo g:nth-of-type(18) rect{animation-duration:849ms}#jsr-logo g:nth-of-type(19) rect{animation-duration:823ms}#jsr-logo g:nth-of-type(20) rect{animation-duration:614ms}#jsr-logo g:nth-of-type(21) rect{animation-duration:1628ms}#jsr-logo g:nth-of-type(22) rect{animation-duration:1008ms}#jsr-logo g:nth-of-type(23) rect{animation-duration:1382ms}#jsr-logo g:nth-of-type(24) rect{animation-duration:1873ms}#jsr-logo g:nth-of-type(25) rect{animation-duration:1059ms}#jsr-logo g:nth-of-type(26) rect{animation-duration:1175ms}#jsr-logo g:nth-of-type(27) rect{animation-duration:570ms}#jsr-logo g:nth-of-type(29) rect{animation-duration:1.47s}#jsr-logo g:nth-of-type(30) rect{animation-duration:1879ms}#jsr-logo g:nth-of-type(31) rect{animation-duration:1488ms}#jsr-logo g:nth-of-type(32) rect{animation-duration:653ms}#jsr-logo g:nth-of-type(33) rect{animation-duration:1409ms}#jsr-logo g:nth-of-type(34) rect{animation-duration:1953ms}#jsr-logo g:nth-of-type(35) rect{animation-duration:1558ms}#jsr-logo g:nth-of-type(37) rect{animation-duration:603ms}#jsr-logo g:nth-of-type(38) rect{animation-duration:1154ms}#jsr-logo g:nth-of-type(39) rect{animation-duration:678ms}#jsr-logo g:nth-of-type(40) rect{animation-duration:1959ms}#jsr-logo g:nth-of-type(41) rect{animation-duration:1862ms}#jsr-logo g:nth-of-type(42) rect{animation-duration:1044ms}#jsr-logo g:nth-of-type(43) rect{animation-duration:1713ms}#jsr-logo g:nth-of-type(44) rect{animation-duration:1159ms}#jsr-logo g:nth-of-type(45) rect{animation-duration:872ms}#jsr-logo g:nth-of-type(47) rect{animation-duration:1.88s}#jsr-logo g:nth-of-type(48) rect{animation-duration:1085ms}#jsr-logo g:nth-of-type(49) rect{animation-duration:685ms}#jsr-logo g:nth-of-type(50) rect{animation-duration:1352ms}#jsr-logo g:nth-of-type(51) rect{animation-duration:683ms}#jsr-logo g:nth-of-type(52) rect{animation-duration:1546ms}#jsr-logo g:nth-of-type(53) rect{animation-duration:605ms}#jsr-logo g:nth-of-type(54) rect{animation-duration:1848ms}#jsr-logo g:nth-of-type(55) rect{animation-duration:1133ms}#jsr-logo g:nth-of-type(56) rect{animation-duration:1635ms}#jsr-logo g:nth-of-type(57) rect{animation-duration:959ms}#jsr-logo g:nth-of-type(59) rect{animation-duration:1411ms}#jsr-logo g:nth-of-type(60) rect{animation-duration:678ms}@keyframes fade_in{from{opacity:0}to{opacity:1}}@keyframes jsr_logo_square_slide_in_up{0%,60%{transform:translateY(200%)}100%{transform:translateY(0)}}@keyframes jsr_logo_square_slide_in_right{0%,60%{transform:translateX(-200%)}100%{transform:translateX(0)}}@keyframes jsr_logo_square_slide_in_down{0%,60%{transform:translateY(-200%)}100%{transform:translateY(0)}}@keyframes jsr_logo_square_slide_in_left{0%,60%{transform:translateX(200%)}100%{transform:translateX(0)}}`}
+        {`#jsr-logo{height:99px}@media(min-width:768px){#jsr-logo{height:143px}}#jsr-logo g,#jsr-logo g rect{transform-origin:center}#jsr-logo g:nth-of-type(28) rect,#jsr-logo g:nth-of-type(36) rect{animation-duration:1287ms}#jsr-logo g:first-of-type rect,#jsr-logo g:nth-of-type(18) rect,#jsr-logo g:nth-of-type(20) rect,#jsr-logo g:nth-of-type(22) rect,#jsr-logo g:nth-of-type(32) rect,#jsr-logo g:nth-of-type(33) rect,#jsr-logo g:nth-of-type(36) rect,#jsr-logo g:nth-of-type(38) rect,#jsr-logo g:nth-of-type(44) rect,#jsr-logo g:nth-of-type(45) rect,#jsr-logo g:nth-of-type(5) rect,#jsr-logo g:nth-of-type(53) rect,#jsr-logo g:nth-of-type(56) rect{animation-name:jsr_logo_square_slide_in_down}#jsr-logo g:nth-of-type(12) rect,#jsr-logo g:nth-of-type(58) rect{animation-duration:1841ms}#jsr-logo g:nth-of-type(10) rect,#jsr-logo g:nth-of-type(15) rect,#jsr-logo g:nth-of-type(16) rect,#jsr-logo g:nth-of-type(23) rect,#jsr-logo g:nth-of-type(26) rect,#jsr-logo g:nth-of-type(27) rect,#jsr-logo g:nth-of-type(29) rect,#jsr-logo g:nth-of-type(34) rect,#jsr-logo g:nth-of-type(35) rect,#jsr-logo g:nth-of-type(40) rect,#jsr-logo g:nth-of-type(49) rect,#jsr-logo g:nth-of-type(52) rect,#jsr-logo g:nth-of-type(55) rect,#jsr-logo g:nth-of-type(58) rect,#jsr-logo g:nth-of-type(8) rect,#jsr-logo g:nth-of-type(9) rect{animation-name:jsr_logo_square_slide_in_left}#jsr-logo g:nth-of-type(11) rect,#jsr-logo g:nth-of-type(12) rect,#jsr-logo g:nth-of-type(19) rect,#jsr-logo g:nth-of-type(21) rect,#jsr-logo g:nth-of-type(24) rect,#jsr-logo g:nth-of-type(28) rect,#jsr-logo g:nth-of-type(30) rect,#jsr-logo g:nth-of-type(31) rect,#jsr-logo g:nth-of-type(37) rect,#jsr-logo g:nth-of-type(39) rect,#jsr-logo g:nth-of-type(48) rect,#jsr-logo g:nth-of-type(57) rect,#jsr-logo g:nth-of-type(59) rect{animation-name:jsr_logo_square_slide_in_right}#jsr-logo g:nth-of-type(13) rect,#jsr-logo g:nth-of-type(14) rect,#jsr-logo g:nth-of-type(17) rect,#jsr-logo g:nth-of-type(2) rect,#jsr-logo g:nth-of-type(25) rect,#jsr-logo g:nth-of-type(3) rect,#jsr-logo g:nth-of-type(41) rect,#jsr-logo g:nth-of-type(42) rect,#jsr-logo g:nth-of-type(43) rect,#jsr-logo g:nth-of-type(47) rect,#jsr-logo g:nth-of-type(50) rect,#jsr-logo g:nth-of-type(51) rect,#jsr-logo g:nth-of-type(54) rect,#jsr-logo g:nth-of-type(6) rect,#jsr-logo g:nth-of-type(60) rect,#jsr-logo g:nth-of-type(7) rect{animation-name:jsr_logo_square_slide_in_up}#jsr-logo g rect{animation:.5s cubic-bezier(.77,0,.175,1) forwards jsr_logo_square_slide_in_up;transform-box:fill-box;opacity:1}#jsr-logo g:first-of-type rect{animation-duration:1697ms}#jsr-logo g:nth-of-type(2) rect{animation-duration:1186ms}#jsr-logo g:nth-of-type(3) rect{animation-duration:1754ms}#jsr-logo g:nth-of-type(4) rect,#jsr-logo g:nth-of-type(46) rect{animation-duration:923ms;animation-name:jsr_logo_square_slide_in_right}#jsr-logo g:nth-of-type(5) rect{animation-duration:715ms}#jsr-logo g:nth-of-type(6) rect{animation-duration:601ms}#jsr-logo g:nth-of-type(7) rect{animation-duration:401ms}#jsr-logo g:nth-of-type(8) rect{animation-duration:1345ms}#jsr-logo g:nth-of-type(9) rect{animation-duration:684ms}#jsr-logo g:nth-of-type(10) rect{animation-duration:1051ms}#jsr-logo g:nth-of-type(11) rect{animation-duration:579ms}#jsr-logo g:nth-of-type(13) rect{animation-duration:844ms}#jsr-logo g:nth-of-type(14) rect{animation-duration:958ms}#jsr-logo g:nth-of-type(15) rect{animation-duration:1041ms}#jsr-logo g:nth-of-type(16) rect{animation-duration:786ms}#jsr-logo g:nth-of-type(17) rect{animation-duration:1022ms}#jsr-logo g:nth-of-type(18) rect{animation-duration:849ms}#jsr-logo g:nth-of-type(19) rect{animation-duration:823ms}#jsr-logo g:nth-of-type(20) rect{animation-duration:614ms}#jsr-logo g:nth-of-type(21) rect{animation-duration:1628ms}#jsr-logo g:nth-of-type(22) rect{animation-duration:1008ms}#jsr-logo g:nth-of-type(23) rect{animation-duration:1382ms}#jsr-logo g:nth-of-type(24) rect{animation-duration:1873ms}#jsr-logo g:nth-of-type(25) rect{animation-duration:1059ms}#jsr-logo g:nth-of-type(26) rect{animation-duration:1175ms}#jsr-logo g:nth-of-type(27) rect{animation-duration:570ms}#jsr-logo g:nth-of-type(29) rect{animation-duration:1.47s}#jsr-logo g:nth-of-type(30) rect{animation-duration:1879ms}#jsr-logo g:nth-of-type(31) rect{animation-duration:1488ms}#jsr-logo g:nth-of-type(32) rect{animation-duration:653ms}#jsr-logo g:nth-of-type(33) rect{animation-duration:1409ms}#jsr-logo g:nth-of-type(34) rect{animation-duration:1953ms}#jsr-logo g:nth-of-type(35) rect{animation-duration:1558ms}#jsr-logo g:nth-of-type(37) rect{animation-duration:603ms}#jsr-logo g:nth-of-type(38) rect{animation-duration:1154ms}#jsr-logo g:nth-of-type(39) rect{animation-duration:678ms}#jsr-logo g:nth-of-type(40) rect{animation-duration:1959ms}#jsr-logo g:nth-of-type(41) rect{animation-duration:1862ms}#jsr-logo g:nth-of-type(42) rect{animation-duration:1044ms}#jsr-logo g:nth-of-type(43) rect{animation-duration:1713ms}#jsr-logo g:nth-of-type(44) rect{animation-duration:1159ms}#jsr-logo g:nth-of-type(45) rect{animation-duration:872ms}#jsr-logo g:nth-of-type(47) rect{animation-duration:1.88s}#jsr-logo g:nth-of-type(48) rect{animation-duration:1085ms}#jsr-logo g:nth-of-type(49) rect{animation-duration:685ms}#jsr-logo g:nth-of-type(50) rect{animation-duration:1352ms}#jsr-logo g:nth-of-type(51) rect{animation-duration:683ms}#jsr-logo g:nth-of-type(52) rect{animation-duration:1546ms}#jsr-logo g:nth-of-type(53) rect{animation-duration:605ms}#jsr-logo g:nth-of-type(54) rect{animation-duration:1848ms}#jsr-logo g:nth-of-type(55) rect{animation-duration:1133ms}#jsr-logo g:nth-of-type(56) rect{animation-duration:1635ms}#jsr-logo g:nth-of-type(57) rect{animation-duration:959ms}#jsr-logo g:nth-of-type(59) rect{animation-duration:1411ms}#jsr-logo g:nth-of-type(60) rect{animation-duration:678ms}@keyframes fade_in{from{opacity:0}to{opacity:1}}@keyframes jsr_logo_square_slide_in_up{0%,60%{transform:translateY(200%)}100%{transform:translateY(0)}}@keyframes jsr_logo_square_slide_in_right{0%,60%{transform:translateX(-200%)}100%{transform:translateX(0)}}@keyframes jsr_logo_square_slide_in_down{0%,60%{transform:translateY(-200%)}100%{transform:translateY(0)}}@keyframes jsr_logo_square_slide_in_left{0%,60%{transform:translateX(200%)}100%{transform:translateX(0)}}`}
       </style>
       <g transform="matrix(1,0,0,1,98,98)">
         <rect x="98" y="0" width="49" height="49" style="fill:#083344" />
diff --git a/frontend/components/QuotaCard.tsx b/frontend/components/QuotaCard.tsx
index 673e4cb6..38ffa193 100644
--- a/frontend/components/QuotaCard.tsx
+++ b/frontend/components/QuotaCard.tsx
@@ -10,7 +10,7 @@ export function QuotaCard(
   },
 ) {
   return (
-    <div class="ring-1 ring-jsr-cyan-950 rounded-md px-4 py-5 flex flex-col justify-between">
+    <div class="border-1.5 border-jsr-cyan-950 rounded-md px-4 py-5 flex flex-col justify-between">
       <div>
         <p class="font-semibold text-gray-900">{props.title}</p>
         <p class="text-gray-600 text-sm">{props.description}</p>
diff --git a/frontend/islands/HomepageHero.tsx b/frontend/islands/HomepageHero.tsx
index 97611039..a4045981 100644
--- a/frontend/islands/HomepageHero.tsx
+++ b/frontend/islands/HomepageHero.tsx
@@ -60,7 +60,7 @@ const config = {
     },
     move: {
       enable: true,
-      speed: 0.6,
+      speed: 0.45,
       direction: "top",
       random: false,
       straight: false,
@@ -158,7 +158,7 @@ export function HomepageHero(
             <span className="sr-only">JSR</span>
             <AnimatedLogo />
             <div
-              class="text-xl text-balance leading-tight sm:text-2xl md:text-3xl lg:text-4xl opsize-normal md:opsize-sm text-center -mt-6 max-w-[20em] font-light"
+              class="text-2xl text-balance leading-[1.1] sm:text-3xl md:text-3xl lg:text-4xl opsize-normal md:opsize-sm text-center -mt-5 md:-mt-6 max-w-[20em]"
               style="text-shadow: 0 0 2em white, 0 0 1em white, 0 0 0.5em white, 0 0 0.25em white, 0 0 3em white, 0 0 0.5em white;"
             >
               The <b class="font-semibold">open-source package registry</b>{" "}
diff --git a/frontend/routes/@[scope]/~/settings.tsx b/frontend/routes/@[scope]/~/settings.tsx
index 8c9434cb..bf21aaaa 100644
--- a/frontend/routes/@[scope]/~/settings.tsx
+++ b/frontend/routes/@[scope]/~/settings.tsx
@@ -49,7 +49,7 @@ Reason: `;
 
   return (
     <div class="mt-8">
-      <h2 class="text-lg font-semibold">Quotas</h2>
+      <h2 class="text-lg sm:text-xl font-semibold">Quotas</h2>
       <div class="flex flex-col gap-8">
         <p class="text-gray-600 max-w-2xl">
           Scopes have certain quotas to help prevent abuse. We are happy to
@@ -95,7 +95,7 @@ Reason: `;
 function GitHubActionsSecurity({ scope }: { scope: FullScope }) {
   return (
     <div class="mb-12 mt-12">
-      <h2 class="text-lg font-semibold">GitHub Actions security</h2>
+      <h2 class="text-lg sm:text-xl font-semibold">GitHub Actions security</h2>
       <p class="mt-2 text-gray-600 max-w-2xl">
         GitHub Actions can be used to publish packages to JSR without having to
         set up authentication tokens. Publishing is permitted only if the
@@ -157,8 +157,8 @@ interface CardButtonProps {
 function CardButton(props: CardButtonProps) {
   return (
     <button
-      class={`grid text-left rounded-xl p-6 group focus-visible:bg-jsr-yellow-50/30 hover:bg-jsr-yellow-50/30 focus-visible:ring-2 ring-jsr-yellow-400 outline-none active:bg-gray-300 ring-2 ${
-        props.selected ? "ring-jsr-yellow-400" : "ring-jsr-gray-300/50"
+      class={`grid text-left rounded-xl p-6 group focus-visible:bg-jsr-yellow-50/30 hover:bg-jsr-yellow-50/30 focus-visible:ring-2 outline-none active:bg-gray-100 ring-2 ${
+        props.selected ? "ring-jsr-yellow-400" : "ring-jsr-gray-100/50"
       }`}
       type={props.type}
       name={props.name}
@@ -169,11 +169,11 @@ function CardButton(props: CardButtonProps) {
         <div
           class={`-mt-2 -mr-2 h-6 w-6 rounded-full flex-shrink-0 flex justify-center items-center group-focus-visible:ring-2 ring-jsr-yellow-700 ${
             props.selected
-              ? "border-2 border-gray-900 bg-gray-900 text-white"
+              ? "border-1.5 border-jsr-cyan-950 bg-jsr-cyan-950 text-jsr-yellow"
               : "border"
           }`}
         >
-          {props.selected && <Check />}
+          {props.selected && <Check class="stroke-2 size-9" />}
         </div>
       </div>
       <p class="mt-2 w-5/6 text-gray-600 text-sm">{props.description}</p>
diff --git a/frontend/routes/package/(_components)/PackageHeader.tsx b/frontend/routes/package/(_components)/PackageHeader.tsx
index d385524d..ac733e2c 100644
--- a/frontend/routes/package/(_components)/PackageHeader.tsx
+++ b/frontend/routes/package/(_components)/PackageHeader.tsx
@@ -56,12 +56,12 @@ export function PackageHeader(
             >
               <span class="max-sm:hidden">Score</span>
               <div
-                class={`flex w-full max-w-24 items-center justify-center aspect-square rounded-full p-1 ${
+                class={`flex w-12 h-12 items-center justify-center aspect-square rounded-full p-1 ${
                   getScoreBgColorClass(pkg.score)
                 }`}
                 style={`background-image: conic-gradient(transparent, transparent ${pkg.score}%, #e7e8e8 ${pkg.score}%)`}
               >
-                <span class="rounded-full w-full h-full bg-white flex justify-center items-center text-center font-bold p-1 min-w-12">
+                <span class="rounded-full w-full h-full bg-white flex justify-center items-center text-center font-bold">
                   {pkg.score}%
                 </span>
               </div>