list rn-directory CLI on tools page, small tweaks (#2283)

Author: Simek

components/Tools/GitHubButton.tsx

@@ -12,7 +12,7 @@ export default function GitHubButton({ href }: Props) {
     <Button
       openInNewTab
       href={href}
-      style={tw`min-h-8 flex-row gap-1.5 bg-primary px-3 text-sm dark:bg-primary-dark`}>
+      style={tw`min-h-8 flex-row gap-1.5 bg-primary-dark px-3 text-sm`}>
       <GitHub width={16} style={tw`text-black`} />
       <P style={tw`text-sm text-black`}>GitHub</P>
     </Button>

components/Tools/ToolEntry.tsx

@@ -1,3 +1,4 @@
+import { type ReactNode } from 'react';
 import { View } from 'react-native';
 
 import { H3, P } from '~/common/styleguide';
@@ -8,7 +9,7 @@ import GitHubButton from './GitHubButton';
 
 type Props = {
   name: string;
-  description: string;
+  description: ReactNode;
   githubUrl: string;
   buttons: {
     label: string;
@@ -19,8 +20,8 @@ type Props = {
 export default function ToolEntry({ name, description, githubUrl, buttons }: Props) {
   return (
     <View style={tw`rounded-xl border border-default px-5 py-4`}>
-      <H3 style={tw`mb-0.5 text-xl`}>{name}</H3>
-      <P style={tw`mb-3 font-light leading-[29px]`}>{description}</P>
+      <H3 style={tw`mb-1 text-xl`}>{name}</H3>
+      <P style={tw`mb-3 font-light leading-[23px]`}>{description}</P>
       <View style={tw`flex-row flex-wrap gap-3`}>
         <GitHubButton href={githubUrl} />
         {buttons.map(({ label, href }) => (

pages/tools.tsx

@@ -17,6 +17,27 @@ export default function Tools() {
         description="List of development tools, apps and websites using React Native Directory data."
       />
       <ContentContainer style={tw`my-10 gap-4 px-4`}>
+        <ToolEntry
+          name="React Native Directory CLI"
+          description={
+            <span>
+              Propose new entries to React Native Directory directly from your terminal. The{' '}
+              <code
+                style={tw`rounded-sm bg-palette-gray2 p-0.5 px-1 text-[90%] dark:bg-palette-gray6`}>
+                rn-directory
+              </code>{' '}
+              CLI gathers the required information manually or automatically, creates a fork, and
+              opens a pull request on behalf of the user currently logged in to the GitHub CLI.
+            </span>
+          }
+          githubUrl="https://github.com/Simek/rn-directory"
+          buttons={[
+            {
+              label: 'npm Registry',
+              href: 'https://www.npmjs.com/package/rn-directory',
+            },
+          ]}
+        />
         <ToolEntry
           name="React Native Directory VS Code extension"
           description="Browse through the React Native Directory and perform actions related to the chosen package inside the built-in editor Command Palette."

scenes/PackageScoreScene.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { View } from 'react-native';
 
-import { A, Caption, H6, useLayout } from '~/common/styleguide';
+import { A, Caption, H6Section, useLayout } from '~/common/styleguide';
 import ContentContainer from '~/components/ContentContainer';
 import { DirectoryScore } from '~/components/Library/DirectoryScore';
 import DetailsNavigation from '~/components/Package/DetailsNavigation';
@@ -42,7 +42,7 @@ export default function PackageScoreScene({ apiData, packageName }: PackageScore
               isSmallScreen && tw`flex-col px-5`,
             ]}>
             <View style={tw`items-center`}>
-              <H6 style={tw`mb-3`}>Directory score</H6>
+              <H6Section style={tw`mb-3`}>Directory score</H6Section>
               <DirectoryScore score={library.score} sizeMultiplier={2} />
               <span style={tw`mt-1 flex items-center text-[24px] font-semibold text-primary-dark`}>
                 {library.score}/100
@@ -67,7 +67,7 @@ export default function PackageScoreScene({ apiData, packageName }: PackageScore
               </Caption>
             </View>
           </View>
-          <H6 style={tw`text-secondary`}>Matching criteria</H6>
+          <H6Section style={tw`text-secondary`}>Matching criteria</H6Section>
           <View>
             {SCORING_CRITERIONS.filter(({ name }) =>
               library.matchingScoreModifiers.includes(name)
@@ -77,7 +77,7 @@ export default function PackageScoreScene({ apiData, packageName }: PackageScore
               </ScoringCriterion>
             ))}
           </View>
-          <H6 style={tw`text-secondary`}>Not matched criteria</H6>
+          <H6Section style={tw`text-secondary`}>Not matched criteria</H6Section>
           <View>
             {SCORING_CRITERIONS.filter(
               ({ name }) => !library.matchingScoreModifiers.includes(name)