add README copy button, improve copy interaction, spacing tweaks (#2277)

Author: Simek

components/Icons/index.tsx

@@ -694,6 +694,33 @@ export function Copy({ width = 24, height = 24, style }: IconProps) {
   );
 }
 
+export function CheckSquare({ width = 24, height = 24, style }: IconProps) {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 256 256" style={style}>
+      <Polyline
+        points="88 136 112 160 168 104"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <Rect
+        x="40"
+        y="40"
+        width="176"
+        height="176"
+        rx="8"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+    </Svg>
+  );
+}
+
 export function Link({ width = 24, height = 24, style }: IconProps) {
   return (
     <Svg width={width} height={height} viewBox="0 0 256 256" style={style}>

components/Package/CopyButton.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { type StyleProp } from 'react-native';
+import { type Style } from 'twrnc';
+
+import { Button } from '~/components/Button';
+import { CheckSquare, Copy } from '~/components/Icons';
+import Tooltip from '~/components/Tooltip';
+import tw from '~/util/tailwind';
+
+type Props = {
+  data: string;
+  tooltip: string;
+  label: string;
+  style?: StyleProp<Style>;
+};
+
+export default function CopyButton({ data, tooltip, label, style }: Props) {
+  const [copied, setCopied] = useState(false);
+  const Icon = copied ? CheckSquare : Copy;
+
+  return (
+    <Tooltip
+      sideOffset={2}
+      trigger={
+        <Button
+          containerStyle={[tw`absolute right-3 top-3`, style]}
+          style={tw`bg-transparent`}
+          onPress={async () => {
+            if (navigator.clipboard && navigator.clipboard.writeText) {
+              await navigator.clipboard.writeText(data);
+              setCopied(true);
+              setTimeout(() => {
+                setCopied(false);
+              }, 1000);
+            }
+          }}
+          aria-label={label}>
+          <Icon
+            style={[tw`size-5 text-palette-gray4 dark:text-pewter`, copied && tw`text-success`]}
+          />
+        </Button>
+      }>
+      {copied ? 'Copied' : tooltip}
+    </Tooltip>
+  );
+}

components/Package/ReadmeBox.tsx

@@ -11,6 +11,7 @@ import useSWR from 'swr';
 
 import { A, P } from '~/common/styleguide';
 import { Check, ReadmeFile } from '~/components/Icons';
+import CopyButton from '~/components/Package/CopyButton';
 import ReadmeHeading from '~/components/Package/ReadmeHeading';
 import rndDark from '~/styles/shiki/rnd-dark.json';
 import rndLight from '~/styles/shiki/rnd-light.json';
@@ -73,7 +74,15 @@ export default function ReadmeBox({ packageName, githubUrl, isTemplate, loader =
       <View
         style={tw`flex-row items-center gap-2 border-b border-palette-gray2 px-4 py-3 dark:border-default`}>
         <ReadmeFile style={tw`text-tertiary dark:text-pewter`} />
-        <P>Readme</P>
+        <P>README</P>
+        {!noData && data && (
+          <CopyButton
+            data={data}
+            tooltip="Copy README"
+            label="Copy README to clipboard"
+            style={tw`right-4 top-3.5`}
+          />
+        )}
       </View>
       <View style={tw`p-4 pt-3 font-light`}>
         {noData ? (

components/Package/ReadmeCodeBlock.tsx

@@ -1,8 +1,6 @@
 import { type Theme, useShikiHighlighter } from 'react-shiki';
 
-import { Button } from '~/components/Button';
-import { Copy } from '~/components/Icons';
-import Tooltip from '~/components/Tooltip';
+import CopyButton from '~/components/Package/CopyButton';
 import tw from '~/util/tailwind';
 
 type Props = {
@@ -16,25 +14,7 @@ const SHIKI_OPTS = { langAlias: { gradle: 'groovy' } } as const;
 export default function ReadmeCodeBlock({ code, theme, lang }: Props) {
   const highlighter = useShikiHighlighter(code, lang, theme, SHIKI_OPTS);
 
-  const copyButton = (
-    <Tooltip
-      sideOffset={2}
-      trigger={
-        <Button
-          containerStyle={tw`absolute right-3 top-3`}
-          style={tw`bg-transparent`}
-          onPress={async () => {
-            if (navigator.clipboard && navigator.clipboard.writeText) {
-              await navigator.clipboard.writeText(code);
-            }
-          }}
-          aria-label="Copy to clipboard">
-          <Copy width={20} height={20} style={tw`text-palette-gray4 dark:text-pewter`} />
-        </Button>
-      }>
-      Copy code
-    </Tooltip>
-  );
+  const copyButton = <CopyButton data={code} tooltip="Copy code" label="Copy code to clipboard" />;
 
   if (!highlighter) {
     return (

components/Package/VersionBox.tsx

@@ -38,12 +38,12 @@ export default function VersionBox({ label, time, versionData, downloads = 0 }:
         </View>
         <Label style={tw`flex min-h-4 flex-wrap items-center font-light text-secondary`}>
           Released <RelativeTime time={time} dateOnly /> by
-          {versionData._npmUser?.trustedPublisher && <TrustedBadge style={tw`mx-[3px]`} />}
+          {versionData._npmUser?.trustedPublisher && <TrustedBadge style={tw`mx-1`} />}
           {publisherMetadata && !versionData._npmUser?.trustedPublisher && (
             <UserAvatar
               src={`https://gravatar.com/avatar/${SHA256(publisherMetadata).toString()}?d=retro`}
               alt={`${versionData._npmUser?.name} avatar`}
-              style={tw`relative top-px mx-[3px] size-3.5 border border-default`}
+              style={tw`relative top-px mx-1 size-3.5 border border-default`}
             />
           )}
           {versionData._npmUser?.name ?? 'Unknown'}

components/Score/ScoringCriterion.tsx

@@ -14,7 +14,7 @@ export function ScoringCriterion({ children, headline, style, score = undefined
   const isPositiveModifier = (score ?? 0) > 0;
 
   return (
-    <View style={[tw`mb-4 rounded-md border border-default px-5 py-3.5`, style]}>
+    <View style={[tw`mb-3 rounded-lg border border-default px-5 py-3.5`, style]}>
       <Headline style={tw`mb-1 flex gap-3 text-[17px] font-semibold leading-[22px]`}>
         {score && (
           <Headline