add filters interaction styles, improve icons, focus and spacing (#1875)

Author: Simek

components/Filters/ToggleLink.tsx

@@ -1,7 +1,9 @@
 import Link from 'next/link';
+import { useContext, useState } from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 
 import { P, colors } from '~/common/styleguide';
+import CustomAppearanceContext from '~/context/CustomAppearanceContext';
 import { type Query } from '~/types';
 import urlWithQuery from '~/util/urlWithQuery';
 
@@ -15,6 +17,8 @@ type Props = {
 };
 
 export function ToggleLink({ query, paramName, title, basePath = '/' }: Props) {
+  const { isDark } = useContext(CustomAppearanceContext);
+  const [isHovered, setHovered] = useState<boolean>(false);
   const isSelected = !!query[paramName];
 
   return (
@@ -25,9 +29,18 @@ export function ToggleLink({ query, paramName, title, basePath = '/' }: Props) {
         offset: null,
       })}
       style={{ textDecoration: 'none' }}>
-      <View style={styles.link}>
-        <CheckBox value={isSelected} color={colors.primaryDark} />
-        <P style={styles.text}>{title}</P>
+      <View
+        style={styles.link}
+        onPointerEnter={() => setHovered(true)}
+        onPointerLeave={() => setHovered(false)}>
+        <CheckBox
+          value={isSelected}
+          color={colors.primaryDark}
+          style={isHovered && { borderColor: colors.primaryDark }}
+        />
+        <P style={[styles.text, isHovered && { color: isDark ? colors.gray3 : colors.gray5 }]}>
+          {title}
+        </P>
       </View>
     </Link>
   );

components/Filters/index.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { StyleSheet, View, ViewStyle } from 'react-native';
 
-import { colors, Headline, layout, darkColors } from '~/common/styleguide';
+import { colors, Headline, layout, darkColors, useLayout } from '~/common/styleguide';
 import CustomAppearanceContext from '~/context/CustomAppearanceContext';
 import { Query } from '~/types';
 import { getPageQuery } from '~/util/search';
@@ -20,11 +20,13 @@ type FiltersProps = {
   basePath?: string;
 };
 
-export const Filters = ({ query, style, basePath = '/' }: FiltersProps) => {
+export function Filters({ query, style, basePath = '/' }: FiltersProps) {
   const { isDark } = useContext(CustomAppearanceContext);
-  const isMainSearch = basePath === '/';
+  const { isSmallScreen } = useLayout();
   const pageQuery = getPageQuery(basePath, query);
 
+  const isMainSearch = basePath === '/';
+
   const titleColor = {
     color: isDark ? darkColors.secondary : colors.gray5,
   };
@@ -77,7 +79,7 @@ export const Filters = ({ query, style, basePath = '/' }: FiltersProps) => {
         </View>
       </View>
       <View style={styles.twoColumns}>
-        <View style={styles.wrappableContainer}>
+        <View style={[styles.wrappableContainer, isSmallScreen && { maxWidth: '100%' }]}>
           <Headline style={[styles.title, titleColor]}>Compatibility</Headline>
           <View style={styles.optionsContainer}>
             {FILTER_COMPATIBILITY.map(platform => (
@@ -91,7 +93,7 @@ export const Filters = ({ query, style, basePath = '/' }: FiltersProps) => {
             ))}
           </View>
         </View>
-        <View style={styles.wrappableContainer}>
+        <View style={[styles.wrappableContainer, isSmallScreen && { maxWidth: '100%' }]}>
           <Headline style={[styles.title, titleColor]}>Type</Headline>
           <View style={styles.optionsContainer}>
             <ToggleLink
@@ -120,7 +122,7 @@ export const Filters = ({ query, style, basePath = '/' }: FiltersProps) => {
       </View>
     </View>
   );
-};
+}
 
 const styles = StyleSheet.create({
   wrapper: {

components/Icons/index.tsx

@@ -149,7 +149,7 @@ export function Issue({ width, height, fill = colors.black }: IconProps) {
       <Path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M8.49 10.999V5.005h2v5.994h-2zM9.49 14.061a1.041 1.041 0 100-2.082 1.041 1.041 0 000 2.082z"
+        d="M9.5 7.75C9.96413 7.75 10.4092 7.93437 10.7374 8.26256C11.0656 8.59075 11.25 9.03587 11.25 9.5C11.25 9.96413 11.0656 10.4092 10.7374 10.7374C10.4092 11.0656 9.96413 11.25 9.5 11.25C9.03587 11.25 8.59075 11.0656 8.26256 10.7374C7.93437 10.4092 7.75 9.96413 7.75 9.5C7.75 9.03587 7.93437 8.59075 8.26256 8.26256C8.59075 7.93437 9.03587 7.75 9.5 7.75Z"
         fill={fill}
       />
       <Path
@@ -162,12 +162,12 @@ export function Issue({ width, height, fill = colors.black }: IconProps) {
   );
 }
 
-export function Eye({ width, height, fill = colors.black }: IconProps) {
+export function Eye({ width = 22, height = 22, fill = colors.black }: IconProps) {
   return (
-    <Svg width={width ?? 22} height={height ?? 22} viewBox="0 0 24 24" fill="none">
+    <Svg width={width} height={height} viewBox="0 0 22 22" fill="none">
       <Path
         fill={fill}
-        d="M11.9,7.1c4.6,0,7.8,2.9,9.2,4.5c-1.4,1.8-4.6,5.2-9.2,5.2c-4.3,0-7.7-3.4-9.2-5.3C4.1,10,7.3,7.1,11.9,7.1z M12,5 C4.4,5,0,11.6,0,11.6S4.8,19,12,19c7.7,0,12-7.4,12-7.4S19.7,5,12,5z M11.9,8.5c-1.9,0-3.5,1.6-3.5,3.5s1.6,3.5,3.5,3.5 c1.9,0,3.5-1.6,3.5-3.5S13.8,8.5,11.9,8.5z M11.9,12c-0.5,0.5-1.3,0.5-1.8,0c-0.5-0.5-0.5-1.3,0-1.8c0.5-0.5,1.3-0.5,1.8,0 C12.4,10.7,12.4,11.5,11.9,12z"
+        d="M10.9083 6.50831C15.125 6.50831 18.0583 9.16665 19.3417 10.6333C18.0583 12.2833 15.125 15.4 10.9083 15.4C6.96667 15.4 3.85 12.2833 2.475 10.5416C3.75833 9.16665 6.69167 6.50831 10.9083 6.50831ZM11 4.58331C4.03333 4.58331 0 10.6333 0 10.6333C0 10.6333 4.4 17.4166 11 17.4166C18.0583 17.4166 22 10.6333 22 10.6333C22 10.6333 18.0583 4.58331 11 4.58331ZM10.9083 7.79165C9.16667 7.79165 7.7 9.25831 7.7 11C7.7 12.7416 9.16667 14.2083 10.9083 14.2083C12.65 14.2083 14.1167 12.7416 14.1167 11C14.1167 9.25831 12.65 7.79165 10.9083 7.79165ZM10.9083 11C10.45 11.4583 9.71667 11.4583 9.25833 11C8.8 10.5416 8.8 9.80831 9.25833 9.34998C9.71667 8.89165 10.45 8.89165 10.9083 9.34998C11.3667 9.80831 11.3667 10.5416 10.9083 11Z"
       />
     </Svg>
   );

components/Library/MetaData.tsx

@@ -206,8 +206,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   iconContainer: {
-    marginRight: 8,
-    width: 20,
+    marginRight: 7,
+    width: 22,
     alignItems: 'center',
   },
   linkContainer: {
@@ -221,6 +221,7 @@ const styles = StyleSheet.create({
   link: {
     fontSize: 15,
     fontWeight: 300,
+    outlineOffset: -1,
   },
   mutedLink: {
     backgroundColor: 'transparent',
@@ -231,10 +232,10 @@ const styles = StyleSheet.create({
   },
   secondaryContainer: {
     marginBottom: 0,
-    marginRight: 16,
+    paddingRight: 3,
   },
   secondaryIconContainer: {
-    marginRight: 6,
+    marginRight: 4,
   },
   exampleLink: {
     marginLeft: 2,

components/Library/Thumbnail.tsx components/Library/Thumbnail.web.tsxcomponents/Library/Thumbnail.tsx renamed to components/Library/Thumbnail.web.tsx

@@ -13,7 +13,7 @@ type Props = {
 
 const GITHUB_PREVIEW_MIN_WIDTH = 640;
 
-const Thumbnail = ({ url }: Props) => {
+function Thumbnail({ url }: Props) {
   const { isDark } = useContext(CustomAppearanceContext);
   const { width, height } = useWindowDimensions();
 
@@ -37,6 +37,7 @@ const Thumbnail = ({ url }: Props) => {
     <HoverCard.Root openDelay={0} closeDelay={0} onOpenChange={open => setShowPreview(open)}>
       <HoverCard.Trigger asChild>
         <div
+          tabIndex={0}
           style={{
             marginRight: 10,
             marginTop: 4,
@@ -49,8 +50,8 @@ const Thumbnail = ({ url }: Props) => {
             textAlign: 'center',
             borderWidth: 1,
             borderRadius: 3,
-            borderColor: isDark ? darkColors.border : colors.gray2,
             borderStyle: 'solid',
+            borderColor: isDark ? darkColors.border : colors.gray2,
             cursor: isLoaded ? 'pointer' : 'progress',
           }}>
           {showPreview && !isLoaded ? (
@@ -66,13 +67,13 @@ const Thumbnail = ({ url }: Props) => {
         <HoverCard.Content sideOffset={6} sticky="always">
           <div
             style={{
-              backgroundColor: isDark ? darkColors.black : colors.white,
               opacity: 1,
               padding: 10,
+              borderRadius: 4,
               boxSizing: 'border-box',
+              backgroundColor: isDark ? darkColors.black : colors.white,
               maxWidth: maxPreviewWidth,
               maxHeight: maxPreviewHeight,
-              borderRadius: 4,
               display: showPreview && isLoaded ? 'block' : 'none',
               boxShadow: `0 4px 6px 0 ${isDark ? '#2a2e3633' : '#00000025'}`,
             }}>
@@ -81,16 +82,16 @@ const Thumbnail = ({ url }: Props) => {
               onLoad={() => setLoaded(true)}
               alt=""
               style={{
+                borderRadius: 2,
                 maxWidth: maxPreviewImageWidth,
                 maxHeight: maxImgPreviewHeight,
-                borderRadius: 2,
               }}
             />
           </div>
         </HoverCard.Content>
       </HoverCard.Portal>
     </HoverCard.Root>
   );
-};
+}
 
 export default memo(Thumbnail);

components/Library/index.tsx

@@ -9,7 +9,7 @@ import CustomAppearanceContext from '~/context/CustomAppearanceContext';
 import { type LibraryType } from '~/types';
 
 import { MetaData } from './MetaData';
-import Thumbnail from './Thumbnail';
+import Thumbnail from './Thumbnail.web';
 import TrendingMark from './TrendingMark';
 import UnmaintainedLabel from './UnmaintainedLabel';
 import { CompatibilityTags } from '../CompatibilityTags';
@@ -172,7 +172,6 @@ const styles = StyleSheet.create({
       },
     }),
     padding: 16,
-    paddingLeft: 18,
     borderLeftWidth: 1,
   },
   columnTwoSmall: {
@@ -222,6 +221,7 @@ const styles = StyleSheet.create({
   secondaryStats: {
     marginTop: 12,
     flexWrap: 'wrap',
+    gap: 10,
   },
   secondaryText: {
     fontSize: 13,

components/Search.tsx

@@ -160,7 +160,12 @@ const Search = ({ query, total }: Props) => {
             ) : (
               <P />
             )}
-            <View style={[styles.displayHorizontal, styles.buttonsContainer]}>
+            <View
+              style={[
+                styles.displayHorizontal,
+                styles.buttonsContainer,
+                isSmallScreen && { marginTop: 10 },
+              ]}>
               <FilterButton
                 containerStyle={{ height: 24 }}
                 style={{ height: 24 }}

pages/_app.tsx

@@ -43,6 +43,7 @@ const App = ({ pageProps, Component }) => (
                   outline-color: ${colors.primaryDark};
                   outline-style: solid;
                   outline-width: 2px;
+                  border-radius: 3px;
                 }`}
             </style>
           </Head>