small visual tweaks and fixes, dependencies bump (#2491)

Author: Simek

bun.lock

@@ -71,7 +71,7 @@ export default function DependencyRow({ name, data, packageVersion }: Props) {
           <Tooltip
             trigger={
               <View>
-                <InfoIcon style={tw`-ml-0.5 -mt-px size-3 cursor-pointer text-icon`} />
+                <InfoIcon style={tw`-ml-0.5 size-3 cursor-pointer text-icon`} />
               </View>
             }>
             Optional

components/Package/DependencyRow.tsx

@@ -23,15 +23,18 @@ export default function ExampleBox({ example, index }: Props) {
         ]}
         hoverStyle={tw`bg-palette-gray1 dark:bg-dark`}>
         <View style={tw`flex max-w-full flex-row items-center gap-2.5`}>
-          {example.includes('github.com') && <GitHubIcon style={tw`text-icon`} />}
+          {example.includes('github.com') && <GitHubIcon style={tw`size-6 text-icon`} />}
           {example.includes('snack.expo.dev') && <SnackIcon style={tw`text-icon`} />}
           {!example.includes('github.com') && !example.includes('snack.expo.dev') && (
             <CodeBracketsIcon style={tw`text-icon`} />
           )}
           <span style={tw`font-light`}>{getExampleDescription(example)}</span>
         </View>
         <Text
-          style={[tw`text-2xl leading-[28px] text-icon opacity-30`, isSmallScreen && tw`hidden`]}>
+          style={[
+            tw`text-2xl tabular-nums leading-[28px] text-icon opacity-30`,
+            isSmallScreen && tw`hidden`,
+          ]}>
           #{index + 1}
         </Text>
       </A>

components/Package/ExampleBox.tsx

@@ -117,11 +117,15 @@ export default function MorePackagesBox({ library }: Props) {
                         ]}>
                         <View style={tw`flex-row items-center gap-1`}>
                           <StarIcon style={tw`size-4 text-tertiary dark:text-palette-gray5`} />
-                          <span>{github.stats.stars.toLocaleString()}</span>
+                          <span className="tabular-nums">
+                            {github.stats.stars.toLocaleString()}
+                          </span>
                         </View>
                         <View style={tw`flex-row items-center gap-1`}>
                           <DownloadIcon style={tw`text-tertiary dark:text-palette-gray5`} />
-                          <span>{formatNumberToString(npm?.downloads ?? 0)}</span>
+                          <span className="tabular-nums">
+                            {formatNumberToString(npm?.downloads ?? 0)}
+                          </span>
                         </View>
                       </View>
                     </View>

components/Package/MorePackagesBox.tsx

@@ -36,7 +36,7 @@
     "@visx/xychart": "^3.12.0",
     "crypto-js": "^4.2.0",
     "es-toolkit": "^1.47.0",
-    "expo": "56.0.7",
+    "expo": "56.0.8",
     "expo-font": "56.0.5",
     "next": "^16.2.6",
     "node-emoji": "^2.2.0",
@@ -71,7 +71,7 @@
     "browserslist": "^4.28.2",
     "cheerio": "^1.2.0",
     "dotenv": "^17.4.2",
-    "lint-staged": "^17.0.5",
+    "lint-staged": "^17.0.7",
     "next-compose-plugins": "^2.2.1",
     "next-fonts": "^1.5.1",
     "next-images": "^1.8.5",

package.json

@@ -675,6 +675,14 @@ select {
     summary {
       margin-top: 8px !important;
       cursor: pointer;
+
+      &::marker {
+        transition: color 0.2s;
+      }
+
+      &:hover::marker {
+        color: var(--icon);
+      }
     }
   }