move "update at" information to save some vertical space, other tweaks (#1565)

Author: Simek

common/styleguide.tsx

@@ -168,15 +168,15 @@ 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',
 });
 
 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 }) => {

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
         </A>
       ),
     },
-    {
-      id: 'calendar',
-      icon: <Calendar fill={iconColor} />,
-      content: (
-        <A href={`${github.urls.repo}/commits`} style={styles.link}>
-          Updated {getTimeSinceToday(github.stats.pushedAt)}
-        </A>
-      ),
-    },
     npm.downloads
       ? {
           id: 'downloads',

components/Library/TrendingMark.tsx

@@ -45,7 +45,7 @@ const TrendingMark = ({ library, style, markOnly = false }: Props) => {
   return markOnly ? (
     <View style={[styles.container, style]}>{content}</View>
   ) : (
-    <A href="/scoring" style={[styles.container, styles.scoringLink, style]}>
+    <A href="/scoring" style={[styles.scoringLink, style]}>
       {content}
     </A>
   );

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,

components/Library/UpdateAtView.tsx

@@ -0,0 +1,81 @@
+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';
+
+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 (
+    <View style={styles.updatedAtContainer}>
+      <Tooltip
+        sideOffset={2}
+        trigger={
+          <View style={{ cursor: 'pointer' }} aria-label="Last update (based on git activity)">
+            <Calendar
+              fill={library.unmaintained ? unmaintainedIconColor : iconColor}
+              width={14}
+              height={16}
+            />
+          </View>
+        }>
+        Last update (based on git activity)
+      </Tooltip>
+      <A
+        href={`${library.github.urls.repo}/commits`}
+        style={[
+          styles.link,
+          {
+            color: library.unmaintained ? unmaintainedTextColor : textColor,
+            textDecorationColor: decorationColor,
+          },
+        ]}
+        hoverStyle={[
+          {
+            color: library.unmaintained
+              ? unmaintainedTextColor
+              : isDark
+                ? colors.primaryDark
+                : textColor,
+            textDecorationColor: library.unmaintained
+              ? unmaintainedTextColor
+              : isDark
+                ? colors.gray6
+                : colors.gray4,
+          },
+        ]}>
+        {getTimeSinceToday(library.github.stats.pushedAt)}
+      </A>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  updatedAtContainer: {
+    gap: 8,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+  },
+  link: {
+    fontSize: 13,
+    fontWeight: 300,
+    backgroundColor: 'transparent',
+    textDecorationColor: 'transparent',
+  },
+});

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,47 @@ const Library = ({ library, skipMetadata, showTrendingMark }: Props) => {
         library.unmaintained && styles.unmaintained,
       ]}>
       <View style={styles.columnOne}>
-        {library.unmaintained && <UnmaintainedLabel alternatives={library.alternatives} />}
+        {library.unmaintained && (
+          <View
+            style={
+              isSmallScreen
+                ? [
+                    styles.containerColumn,
+                    styles.updatedAtContainerSmall,
+                    { marginBottom: 6, gap: 0 },
+                  ]
+                : [styles.updatedAtContainer, styles.trendingMarkContainer]
+            }>
+            <UnmaintainedLabel alternatives={library.alternatives} />
+            <UpdatedAtView library={library} />
+          </View>
+        )}
         {showTrendingMark && library.popularity && (
-          <Tooltip
-            sideOffset={8}
-            trigger={
-              <View style={styles.trendingMarkContainer}>
-                <TrendingMark library={library} />
-              </View>
+          <View
+            style={
+              isSmallScreen
+                ? [styles.containerColumn, styles.updatedAtContainerSmall]
+                : [styles.updatedAtContainer, { marginBottom: 4 }]
             }>
-            Trending Score is based on the last week to last month download rate.
-          </Tooltip>
+            <Tooltip sideOffset={8} trigger={<TrendingMark library={library} />}>
+              Trending Score is based on the last week to last month download rate.
+            </Tooltip>
+            {!library.unmaintained && <UpdatedAtView library={library} />}
+          </View>
         )}
-        <View style={isSmallScreen ? styles.containerColumn : styles.displayHorizontal}>
+        <View
+          style={
+            isSmallScreen
+              ? [styles.containerColumn, styles.updatedAtContainerSmall]
+              : styles.updatedAtContainer
+          }>
           <A
             href={library.githubUrl || github.urls.repo}
             style={styles.name}
             hoverStyle={{ color: isDark ? colors.gray3 : colors.gray5 }}>
             {libName}
           </A>
+          {!showTrendingMark && !library.unmaintained && <UpdatedAtView library={library} />}
         </View>
         <View style={styles.verticalMargin}>
           <CompatibilityTags library={library} />
@@ -74,11 +97,7 @@ const Library = ({ library, skipMetadata, showTrendingMark }: Props) => {
             <Headline numberOfLines={skipMetadata && 3} style={{ fontWeight: 300, lineHeight: 23 }}>
               <Linkify
                 options={{
-                  linkWrapper: ({ children, key, ...rest }) => (
-                    <A {...rest} key={key}>
-                      {children}
-                    </A>
-                  ),
+                  linkWrapper: ({ children, ...rest }) => <A {...rest}>{children}</A>,
                 }}>
                 {emoji.emojify(github.description)}
               </Linkify>
@@ -195,7 +214,7 @@ const styles = StyleSheet.create({
   },
   imagesContainer: {
     flexWrap: 'wrap',
-    marginTop: 12,
+    marginTop: 8,
   },
   secondaryStats: {
     marginTop: 6,
@@ -240,6 +259,23 @@ const styles = StyleSheet.create({
     opacity: 0.88,
   },
   trendingMarkContainer: {
+    justifyContent: 'space-between',
+    marginBottom: 4,
+  },
+  link: {
+    fontSize: 13,
+    fontWeight: 300,
+    backgroundColor: 'transparent',
+  },
+  updatedAtContainer: {
+    gap: 8,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+  },
+  updatedAtContainerSmall: {
+    gap: 8,
+    justifyContent: 'flex-start',
     alignSelf: 'flex-start',
   },
 });

pages/popular.tsx

@@ -65,13 +65,6 @@ const Popular = ({ data }) => {
           data={data}
           filter={lib => lib.macos === true}
         />
-        <ExploreSection
-          title="Expo Go"
-          icon={PlatformExpo}
-          data={data}
-          filter={lib => lib.expoGo === true}
-        />
-        <ExploreSection title="Fire OS" data={data} filter={lib => lib.fireos === true} />
         <ExploreSection
           title="tvOS"
           icon={PlatformTvOS}
@@ -90,6 +83,13 @@ const Popular = ({ data }) => {
           data={data}
           filter={lib => lib.windows === true}
         />
+        <ExploreSection
+          title="Expo Go"
+          icon={PlatformExpo}
+          data={data}
+          filter={lib => lib.expoGo === true}
+        />
+        <ExploreSection title="Fire OS" data={data} filter={lib => lib.fireos === true} />
       </ContentContainer>
     </>
   );