Skip to content

Commit 7c83a4f

Browse files
SimekSimek
committed
reorder section, add pkg-size.dev, tweak authors tooltips
1 parent f9dfbe9 commit 7c83a4f

2 files changed

Lines changed: 56 additions & 32 deletions

File tree

‎components/Details/PackageAuthor.tsx‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import SHA256 from 'crypto-js/sha256';
22
import { useContext } from 'react';
33
import { StyleSheet, View } from 'react-native';
44

5-
import { A, Caption, colors, darkColors, Label } from '~/common/styleguide';
5+
import { A, colors, darkColors, Label } from '~/common/styleguide';
66
import Tooltip from '~/components/Tooltip';
77
import CustomAppearanceContext from '~/context/CustomAppearanceContext';
88
import { type NpmUser } from '~/types';
@@ -41,8 +41,8 @@ export default function PackageAuthor({ author, compact }: Props) {
4141
alt={`${ghUsername} avatar`}
4242
/>
4343
<View>
44-
<Caption style={styles.caption}>{ghUsername}</Caption>
45-
<Label style={{ color: 'inherit' }}>{validName}</Label>
44+
<Label>{ghUsername}</Label>
45+
<Label style={[styles.sublabel, { color: 'inherit' }]}>{validName}</Label>
4646
</View>
4747
</A>
4848
</View>
@@ -78,8 +78,11 @@ export default function PackageAuthor({ author, compact }: Props) {
7878
/>
7979
}>
8080
<View style={styles.tooltipContent}>
81-
<Caption style={styles.caption}>{author.name}</Caption>
82-
<Label style={{ color: colors.white }}>{email}</Label>
81+
<Label>{author.name}</Label>
82+
<Label
83+
style={[styles.sublabel, { color: isDark ? darkColors.secondary : colors.gray5 }]}>
84+
{email}
85+
</Label>
8386
</View>
8487
</Tooltip>
8588
</View>
@@ -94,10 +97,10 @@ export default function PackageAuthor({ author, compact }: Props) {
9497
alt={`${author.name} avatar`}
9598
/>
9699
<View>
97-
<Caption style={[styles.caption, { color: isDark ? colors.white : colors.black }]}>
98-
{author.name}
99-
</Caption>
100-
<Label style={{ color: isDark ? darkColors.secondary : colors.gray5 }}>{email}</Label>
100+
<Label style={{ color: isDark ? colors.white : colors.black }}>{author.name}</Label>
101+
<Label style={[styles.sublabel, { color: isDark ? darkColors.secondary : colors.gray5 }]}>
102+
{email}
103+
</Label>
101104
</View>
102105
</View>
103106
);
@@ -126,9 +129,9 @@ const styles = StyleSheet.create({
126129
alignItems: 'center',
127130
backgroundColor: 'transparent',
128131
},
129-
caption: {
130-
lineHeight: 16,
131-
color: 'inherit',
132+
sublabel: {
133+
fontSize: 11,
134+
fontWeight: 300,
132135
},
133136
avatar: {
134137
width: 36,

‎pages/package/[...name].tsx‎

Lines changed: 41 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -209,18 +209,34 @@ export default function PackagePage({ apiData, registryData, packageName }: Prop
209209
</>
210210
)}
211211
<H6 style={[styles.contentHeader, headerColorStyle]}>Package analysis</H6>
212-
<View style={styles.rowSpacing}>
213-
<A
214-
href={`https://bundlephobia.com/package/${library.npmPkg}`}
215-
style={[styles.dependencyLabel, styles.mutedLink]}>
216-
Bundlephobia
217-
</A>
218-
<A
219-
href={`https://snyk.io/advisor/npm-package/${library.npmPkg}`}
220-
style={[styles.dependencyLabel, styles.mutedLink]}>
221-
Snyk Advisor
222-
</A>
223-
</View>
212+
<ul
213+
style={{
214+
...styles.rowSpacing,
215+
...styles.linkList,
216+
color: isDark ? colors.gray5 : colors.gray4,
217+
}}>
218+
<li>
219+
<A
220+
href={`https://bundlephobia.com/package/${library.npmPkg}`}
221+
style={[styles.dependencyLabel, styles.mutedLink]}>
222+
Bundlephobia
223+
</A>
224+
</li>
225+
<li>
226+
<A
227+
href={`https://pkg-size.dev/${library.npmPkg}`}
228+
style={[styles.dependencyLabel, styles.mutedLink]}>
229+
pkg-size.dev
230+
</A>
231+
</li>
232+
<li>
233+
<A
234+
href={`https://snyk.io/advisor/npm-package/${library.npmPkg}`}
235+
style={[styles.dependencyLabel, styles.mutedLink]}>
236+
Snyk Advisor
237+
</A>
238+
</li>
239+
</ul>
224240
{dependencies && Object.keys(dependencies).length > 0 && (
225241
<>
226242
<H6 style={[styles.contentHeader, headerColorStyle]}>Dependencies</H6>
@@ -231,22 +247,22 @@ export default function PackagePage({ apiData, registryData, packageName }: Prop
231247
</View>
232248
</>
233249
)}
234-
{devDependencies && Object.keys(devDependencies).length > 0 && (
250+
{peerDependencies && Object.keys(peerDependencies).length > 0 && (
235251
<>
236-
<H6 style={[styles.contentHeader, headerColorStyle]}>Development dependencies</H6>
252+
<H6 style={[styles.contentHeader, headerColorStyle]}>Peer dependencies</H6>
237253
<View>
238-
{mapDependencies(devDependencies, ([name, version]: [string, string]) => (
239-
<DependencyRow key={`dev-dep-${name}`} name={name} version={version} />
254+
{mapDependencies(peerDependencies, ([name, version]: [string, string]) => (
255+
<DependencyRow key={`peer-dep-${name}`} name={name} version={version} />
240256
))}
241257
</View>
242258
</>
243259
)}
244-
{peerDependencies && Object.keys(peerDependencies).length > 0 && (
260+
{devDependencies && Object.keys(devDependencies).length > 0 && (
245261
<>
246-
<H6 style={[styles.contentHeader, headerColorStyle]}>Peer dependencies</H6>
262+
<H6 style={[styles.contentHeader, headerColorStyle]}>Development dependencies</H6>
247263
<View>
248-
{mapDependencies(peerDependencies, ([name, version]: [string, string]) => (
249-
<DependencyRow key={`peer-dep-${name}`} name={name} version={version} />
264+
{mapDependencies(devDependencies, ([name, version]: [string, string]) => (
265+
<DependencyRow key={`dev-dep-${name}`} name={name} version={version} />
250266
))}
251267
</View>
252268
</>
@@ -396,6 +412,11 @@ const styles = StyleSheet.create({
396412
flexDirection: 'row',
397413
flexWrap: 'wrap',
398414
},
415+
linkList: {
416+
margin: 0,
417+
paddingLeft: 18,
418+
fontSize: 13,
419+
},
399420
});
400421

401422
export async function getServerSideProps(ctx: NextPageContext) {

0 commit comments

Comments
 (0)