From 22e8983b7fac2107fc744396c80917e5e60a95cb Mon Sep 17 00:00:00 2001 From: Simek Date: Tue, 1 Apr 2025 14:12:07 +0200 Subject: [PATCH 1/3] move update at to save some vertical space, other tweaks --- common/styleguide.tsx | 4 +- components/Library/MetaData.tsx | 23 +------- components/Library/TrendingMark.tsx | 2 +- components/Library/UnmaintainedLabel.tsx | 2 +- components/Library/UpdateAtView.tsx | 73 ++++++++++++++++++++++++ components/Library/index.tsx | 42 +++++++++----- pages/popular.tsx | 14 ++--- 7 files changed, 114 insertions(+), 46 deletions(-) create mode 100644 components/Library/UpdateAtView.tsx diff --git a/common/styleguide.tsx b/common/styleguide.tsx index 5c8d09fa7..dfab85e55 100644 --- a/common/styleguide.tsx +++ b/common/styleguide.tsx @@ -168,7 +168,7 @@ export const A = ({ href, target = '_blank', children, style, hoverStyle, ...res const getLinkStyles = (isDark: boolean) => ({ color: isDark ? colors.white : colors.black, backgroundColor: isDark ? darkColors.powder : colors.powder, - textDecorationColor: isDark ? darkColors.pewter : colors.pewter, + textDecorationColor: isDark ? colors.gray5 : colors.pewter, textDecorationLine: 'underline', fontFamily: 'inherit', }); @@ -176,7 +176,7 @@ const getLinkStyles = (isDark: boolean) => ({ const getLinkHoverStyles = (isDark: boolean) => ({ backgroundColor: isDark ? colors.primaryDark : colors.sky, color: isDark ? darkColors.dark : colors.black, - textDecorationColor: isDark ? darkColors.powder : colors.black, + textDecorationColor: isDark ? darkColors.powder : colors.gray4, }); export const HoverEffect = ({ children }) => { diff --git a/components/Library/MetaData.tsx b/components/Library/MetaData.tsx index c6880f894..8254a15f5 100644 --- a/components/Library/MetaData.tsx +++ b/components/Library/MetaData.tsx @@ -4,21 +4,9 @@ import { StyleSheet, View } from 'react-native'; import { colors, A, P, Caption, darkColors } from '~/common/styleguide'; import CustomAppearanceContext from '~/context/CustomAppearanceContext'; import { Library as LibraryType } from '~/types'; -import { getTimeSinceToday } from '~/util/datetime'; import { DirectoryScore } from './DirectoryScore'; -import { - Calendar, - Star, - Download, - Eye, - Issue, - Web, - License, - Fork, - Code, - TypeScript, -} from '../Icons'; +import { Star, Download, Eye, Issue, Web, License, Fork, Code, TypeScript } from '../Icons'; type Props = { library: LibraryType; @@ -41,15 +29,6 @@ function generateData({ github, score, npm, npmPkg }: LibraryType, isDark: boole ), }, - { - id: 'calendar', - icon: , - content: ( - - Updated {getTimeSinceToday(github.stats.pushedAt)} - - ), - }, npm.downloads ? { id: 'downloads', diff --git a/components/Library/TrendingMark.tsx b/components/Library/TrendingMark.tsx index 15e5be21a..e86c93ae6 100644 --- a/components/Library/TrendingMark.tsx +++ b/components/Library/TrendingMark.tsx @@ -45,7 +45,7 @@ const TrendingMark = ({ library, style, markOnly = false }: Props) => { return markOnly ? ( {content} ) : ( - + {content} ); diff --git a/components/Library/UnmaintainedLabel.tsx b/components/Library/UnmaintainedLabel.tsx index 581ce9bfb..f13271187 100644 --- a/components/Library/UnmaintainedLabel.tsx +++ b/components/Library/UnmaintainedLabel.tsx @@ -70,7 +70,7 @@ const styles = StyleSheet.create({ unmaintainedTextContainer: { alignItems: 'flex-start', marginLeft: -20, - marginBottom: 12, + marginBottom: 8, paddingLeft: 20, paddingRight: 12, paddingVertical: 6, diff --git a/components/Library/UpdateAtView.tsx b/components/Library/UpdateAtView.tsx new file mode 100644 index 000000000..4d9f013f3 --- /dev/null +++ b/components/Library/UpdateAtView.tsx @@ -0,0 +1,73 @@ +import { useContext } from 'react'; +import { StyleSheet, View } from 'react-native'; + +import { A, colors, darkColors } from '~/common/styleguide'; +import CustomAppearanceContext from '~/context/CustomAppearanceContext'; +import { Library as LibraryType } from '~/types'; +import { getTimeSinceToday } from '~/util/datetime'; + +import { Calendar } from '../Icons'; + +type Props = { + library: LibraryType; +}; + +export default function UpdatedAtView({ library }: Props) { + const { isDark } = useContext(CustomAppearanceContext); + + const iconColor = isDark ? darkColors.pewter : colors.secondary; + const textColor = isDark ? darkColors.secondary : colors.gray5; + const decorationColor = isDark ? colors.gray5 : colors.gray3; + const unmaintainedIconColor = isDark ? darkColors.warning : colors.warningDark; + const unmaintainedTextColor = isDark ? darkColors.warning : colors.warningDark; + + return ( + + + + Updated {getTimeSinceToday(library.github.stats.pushedAt)} + + + ); +} + +const styles = StyleSheet.create({ + updatedAtContainer: { + gap: 8, + flexDirection: 'row', + alignItems: 'flex-start', + justifyContent: 'space-between', + }, + link: { + fontSize: 13, + fontWeight: 300, + backgroundColor: 'transparent', + textDecorationColor: 'transparent', + }, +}); diff --git a/components/Library/index.tsx b/components/Library/index.tsx index 9bf522bcd..7aca35854 100644 --- a/components/Library/index.tsx +++ b/components/Library/index.tsx @@ -4,6 +4,7 @@ import { Linkify } from 'react-easy-linkify'; import { Platform, StyleSheet, View } from 'react-native'; import { colors, useLayout, A, darkColors, Headline } from '~/common/styleguide'; +import UpdatedAtView from '~/components/Library/UpdateAtView'; import CustomAppearanceContext from '~/context/CustomAppearanceContext'; import { Library as LibraryType } from '~/types'; @@ -46,25 +47,28 @@ const Library = ({ library, skipMetadata, showTrendingMark }: Props) => { library.unmaintained && styles.unmaintained, ]}> - {library.unmaintained && } + {library.unmaintained && ( + + + + + )} {showTrendingMark && library.popularity && ( - - - - }> - Trending Score is based on the last week to last month download rate. - + + }> + Trending Score is based on the last week to last month download rate. + + {!library.unmaintained && } + )} - + {libName} + {!showTrendingMark && !library.unmaintained && } @@ -195,7 +199,7 @@ const styles = StyleSheet.create({ }, imagesContainer: { flexWrap: 'wrap', - marginTop: 12, + marginTop: 8, }, secondaryStats: { marginTop: 6, @@ -240,7 +244,19 @@ const styles = StyleSheet.create({ opacity: 0.88, }, trendingMarkContainer: { - alignSelf: 'flex-start', + justifyContent: 'space-between', + marginBottom: 4, + }, + link: { + fontSize: 13, + fontWeight: 300, + backgroundColor: 'transparent', + }, + updatedAtContainer: { + gap: 8, + flexDirection: 'row', + alignItems: 'flex-start', + justifyContent: 'space-between', }, }); diff --git a/pages/popular.tsx b/pages/popular.tsx index 392ed98e1..c80cdbb14 100644 --- a/pages/popular.tsx +++ b/pages/popular.tsx @@ -65,13 +65,6 @@ const Popular = ({ data }) => { data={data} filter={lib => lib.macos === true} /> - lib.expoGo === true} - /> - lib.fireos === true} /> { data={data} filter={lib => lib.windows === true} /> + lib.expoGo === true} + /> + lib.fireos === true} /> ); From b299c073c07bd159f70c532124d2c16620a651f7 Mon Sep 17 00:00:00 2001 From: Simek Date: Tue, 1 Apr 2025 14:37:18 +0200 Subject: [PATCH 2/3] shrink label, add tooltip, mobile layout tweaks --- components/Library/UpdateAtView.tsx | 22 ++++++++++++------ components/Library/index.tsx | 36 ++++++++++++++++++++++------- 2 files changed, 43 insertions(+), 15 deletions(-) diff --git a/components/Library/UpdateAtView.tsx b/components/Library/UpdateAtView.tsx index 4d9f013f3..edba6074a 100644 --- a/components/Library/UpdateAtView.tsx +++ b/components/Library/UpdateAtView.tsx @@ -2,6 +2,7 @@ import { useContext } from 'react'; import { StyleSheet, View } from 'react-native'; import { A, colors, darkColors } from '~/common/styleguide'; +import Tooltip from '~/components/Tooltip'; import CustomAppearanceContext from '~/context/CustomAppearanceContext'; import { Library as LibraryType } from '~/types'; import { getTimeSinceToday } from '~/util/datetime'; @@ -23,11 +24,19 @@ export default function UpdatedAtView({ library }: Props) { return ( - + + + + }> + Last updated + - Updated {getTimeSinceToday(library.github.stats.pushedAt)} + {getTimeSinceToday(library.github.stats.pushedAt)} ); @@ -62,7 +71,6 @@ const styles = StyleSheet.create({ gap: 8, flexDirection: 'row', alignItems: 'flex-start', - justifyContent: 'space-between', }, link: { fontSize: 13, diff --git a/components/Library/index.tsx b/components/Library/index.tsx index 7aca35854..b858df51e 100644 --- a/components/Library/index.tsx +++ b/components/Library/index.tsx @@ -48,20 +48,39 @@ const Library = ({ library, skipMetadata, showTrendingMark }: Props) => { ]}> {library.unmaintained && ( - + )} {showTrendingMark && library.popularity && ( - + }> Trending Score is based on the last week to last month download rate. {!library.unmaintained && } )} - + { ( - - {children} - - ), + linkWrapper: ({ children, ...rest }) => {children}, }}> {emoji.emojify(github.description)} @@ -258,6 +273,11 @@ const styles = StyleSheet.create({ alignItems: 'flex-start', justifyContent: 'space-between', }, + updatedAtContainerSmall: { + gap: 8, + justifyContent: 'flex-start', + alignSelf: 'flex-start', + }, }); export default Library; From 7c0a1221511dbc1f568e20b9763538a7db9ab039 Mon Sep 17 00:00:00 2001 From: Simek Date: Tue, 1 Apr 2025 16:24:04 +0200 Subject: [PATCH 3/3] update hint label --- components/Library/UpdateAtView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Library/UpdateAtView.tsx b/components/Library/UpdateAtView.tsx index edba6074a..2d589d79f 100644 --- a/components/Library/UpdateAtView.tsx +++ b/components/Library/UpdateAtView.tsx @@ -27,7 +27,7 @@ export default function UpdatedAtView({ library }: Props) { + }> - Last updated + Last update (based on git activity)