correct internal link behaviour, tweak trending mark (#1831)

Author: Simek

common/styleguide.tsx

@@ -124,22 +124,22 @@ type AProps = PropsWithChildren<{
   hoverStyle?: TextStyles;
 }>;
 
-export const A = ({ href, target = '_blank', children, style, hoverStyle, ...rest }: AProps) => {
+export const A = ({ href, target, children, style, hoverStyle, ...rest }: AProps) => {
   const { isDark } = useContext(CustomAppearanceContext);
   const [isHovered, setIsHovered] = useState(false);
 
   const linkStyles = getLinkStyles(isDark);
   const linkHoverStyles = getLinkHoverStyles(isDark);
 
-  if (target === '_self' && !href.startsWith('#')) {
+  if (target === '_self' && !href.startsWith('#') || href.startsWith('/')) {
+    const passedStyle = Array.isArray(style) ? StyleSheet.flatten(style) : style;
     return (
       <Link
-        {...rest}
         href={href}
         style={{
           ...linkStyles,
           ...(isHovered && linkHoverStyles),
-          ...(style as any),
+          ...passedStyle as any,
           ...(isHovered && hoverStyle),
         }}>
         {children}
@@ -152,8 +152,8 @@ export const A = ({ href, target = '_blank', children, style, hoverStyle, ...res
       <HtmlElements.A
         {...rest}
         href={href}
-        target={target}
-        hrefAttrs={{ target }}
+        target={target ?? '_blank'}
+        hrefAttrs={{ target: target ?? '_blank' }}
         style={[linkStyles, isHovered && linkHoverStyles, style, isHovered && hoverStyle]}>
         {children}
       </HtmlElements.A>

components/Library/TrendingMark.tsx

@@ -32,7 +32,7 @@ const TrendingMark = ({ library, style, markOnly = false }: Props) => {
           styles.popularityScore,
           {
             color: popularityStyles.backgroundColor,
-            marginBottom: markOnly ? 0 : 6,
+            marginVertical: markOnly ? -1 : 2,
             fontSize: markOnly ? 15 : 12,
           },
         ]}>
@@ -119,8 +119,9 @@ const styles = StyleSheet.create({
   scoringLink: {
     textDecorationLine: 'none',
     position: 'relative',
-    lineHeight: 18,
     backgroundColor: 'none',
+    display: 'flex',
+    alignItems: 'flex-start',
   },
 });