react-native-community · Simek · Oct 9, 2025 · Oct 8, 2025 · Oct 9, 2025
diff --git a/common/styleguide.tsx b/common/styleguide.tsx
@@ -61,6 +61,7 @@ export const darkColors = {
   secondary: '#a2a7ab',
   warningLight: '#2f2704',
   warning: '#9a810c',
+  primaryDark: '#2e9ab8',
 };
 
 const baseTextStyles = {

diff --git a/components/Search.tsx b/components/Search.tsx
@@ -67,6 +67,7 @@ const Search = ({ query, total }: Props) => {
             </View>
             <TextInput
               ref={inputRef}
+              id="search"
               onKeyPress={event => {
                 if ('key' in event) {
                   if (

diff --git a/components/Sort.tsx b/components/Sort.tsx
@@ -111,35 +111,32 @@ export const SortButton = ({ query: { order, direction, offset }, query }: SortB
           }>
           Toggle sort order
         </Tooltip>
-        <P style={styles.title}>Sort: </P>
+        <P style={styles.title}>Sort:</P>
       </View>
       <View style={styles.pickerContainer}>
-        <P style={styles.title}>
-          <Picker
-            aria-label="Sort direction"
-            selectedValue={sortValue}
-            style={[
-              styles.picker,
-              {
-                fontWeight: 600,
-                backgroundColor: isDark ? darkColors.border : 'transparent',
-              },
-            ]}
-            onValueChange={value => {
-              setPaginationOffset(null);
-              setSortValue(value);
-            }}>
-            {sorts.map(sort => (
-              <Picker.Item
-                key={sort.param}
-                value={sort.param}
-                label={sort.label}
-                color={isDark ? colors.white : colors.black}
-              />
-            ))}
-          </Picker>
-          <P style={styles.arrow}>›</P>
-        </P>
+        <Picker
+          id="sort-order"
+          aria-label="Sort order"
+          selectedValue={sortValue}
+          style={[
+            styles.picker,
+            {
+              backgroundColor: isDark ? darkColors.border : 'transparent',
+            },
+          ]}
+          onValueChange={value => {
+            setPaginationOffset(null);
+            setSortValue(value);
+          }}>
+          {sorts.map(sort => (
+            <Picker.Item
+              key={sort.param}
+              value={sort.param}
+              label={sort.label}
+              color={isDark ? colors.white : colors.black}
+            />
+          ))}
+        </Picker>
       </View>
     </View>
   );
@@ -161,34 +158,23 @@ const styles = StyleSheet.create({
     color: colors.white,
     fontWeight: 400,
     marginLeft: 6,
+    marginRight: 2,
     fontSize: 14,
     userSelect: 'none',
   },
-  arrow: {
-    color: colors.secondary,
-    fontSize: 18,
-    lineHeight: 18,
-    userSelect: 'none',
-    position: 'absolute',
-    pointerEvents: 'none',
-    right: 6,
-    top: 0,
-    transform: 'rotate(90deg)',
-  },
   pickerContainer: {
     top: 1,
-    left: -4,
   },
   picker: {
     color: colors.white,
     borderWidth: 0,
-    borderRadius: 2,
+    borderRadius: 4,
     position: 'relative',
     top: -1,
     fontSize: 14,
-    paddingRight: 22,
     fontFamily: 'inherit',
     cursor: 'pointer',
+    fontWeight: 600,
   },
   flippedIcon: {
     transform: 'scaleY(-1)',

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -38,19 +38,25 @@ function App({ pageProps, Component }: AppProps) {
                 content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,viewport-fit=cover"
               />
               <style>
-                {`html { 
-                  background-color: ${context.isDark ? darkColors.veryDark : colors.gray7};
-                }
-                *:focus-visible {
-                  outline-color: ${colors.primaryDark};
-                }
-                .TooltipContent {
-                  background-color: ${darkColors.black};
-                  border: 1px solid ${context.isDark ? colors.gray7 : colors.gray6};
-                }
-                .TooltipContent svg {
-                  stroke: ${context.isDark ? colors.gray7 : colors.gray6};
-                }`}
+                {context.isDark
+                  ? `
+                  :root {
+                    --outline: ${colors.primaryDark};
+                    --active: ${darkColors.primaryDark};
+                    --select-background: ${darkColors.dark};
+                    --select-border: ${colors.gray6};
+                    --tooltip-border: ${colors.gray7};
+                  }
+                `
+                  : `
+                  :root {
+                    --outline: ${colors.primaryDark};
+                    --active: ${darkColors.primaryDark};
+                    --select-background: ${colors.gray6};
+                    --select-border: ${colors.gray5};
+                    --tooltip-border: ${colors.gray6};
+                  }
+                `}
               </style>
             </Head>
             <Header />

diff --git a/styles/styles.css b/styles/styles.css
@@ -25,6 +25,7 @@
 *:focus-visible {
   outline-style: solid;
   outline-width: 2px;
+  outline-color: var(--outline);
   border-radius: 3px;
 }
 
@@ -35,12 +36,6 @@ html, body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-select {
-  -webkit-appearance: none;
-  appearance: none;
-  outline-offset: 2px;
-}
-
 input:focus-visible  {
   border-radius: 6px;
 }
@@ -49,6 +44,99 @@ input:focus-visible  {
   min-height: 100vh;
 }
 
+/* SELECT */
+
+select {
+  display: flex;
+  min-width: 140px;
+  height: 24px;
+  align-items: center;
+  cursor: pointer;
+
+  @supports (font: -apple-system-body) {
+    appearance: none;
+    min-width: 136px;
+    padding-left: 4px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A");
+    background-repeat: no-repeat;
+    background-size: 16px 16px;
+    background-position: 95% 4px;
+  }
+
+  @supports (appearance: base-select) {
+    appearance: base-select;
+    padding-inline: 4px;
+    background-image: none;
+    color: #fff;
+
+    &::picker-icon {
+      content: "";
+      width: 16px;
+      height: 16px;
+      margin-right: 2px;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A");
+      transition: rotate 0.2s ease-out;
+    }
+
+    &:open::picker-icon {
+      rotate: 180deg;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2361DAFB'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A");
+    }
+
+    &::picker(select) {
+      appearance: base-select;
+      padding: 2px;
+      margin-top: 6px;
+      border: 2px solid var(--select-border);
+      background: var(--select-background);
+      border-radius: 6px;
+      font-weight: 400;
+      opacity: 0;
+      overflow: clip;
+      transition: opacity 0.5s ease-out;
+      box-shadow: hsl(206 22% 7% / 60%) 0 10px 32px -8px, hsl(206 22% 7% / 40%) 0 10px 18px -12px;
+    }
+
+    &:open::picker(select) {
+      opacity: 1;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+
+      @starting-style {
+        opacity: 0;
+      }
+    }
+
+    option {
+      display: flex;
+      align-items: center;
+      padding: 2px 8px;
+      cursor: pointer;
+      border-radius: 3px;
+      transition: background 0.2s ease-out;
+      color: #fff !important;
+
+      &:where(:hover, :focus, :active) {
+        background: color-mix(in srgb, var(--select-border) 60%, transparent);
+      }
+
+      &:checked {
+        background: var(--active);
+      }
+
+      &:checked:hover {
+        background: color-mix(in srgb, var(--active) 60%, transparent);
+      }
+
+      &::checkmark {
+        display: none;
+      }
+    }
+  }
+}
+
 /* TOOLTIP */
 
 .TooltipContent {
@@ -57,12 +145,18 @@ input:focus-visible  {
   font-size: 13px;
   line-height: 1.5;
   color: #fff;
+  background: #000;
+  border: 1px solid var(--tooltip-border);
   box-shadow: hsl(206 22% 7% / 40%) 0 10px 32px -8px, hsl(206 22% 7% / 25%) 0 10px 18px -12px;
   user-select: none;
   animation-duration: 400ms;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
   will-change: transform, opacity;
   max-width: 220px;
+
+  svg {
+    stroke: var(--tooltip-border);
+  }
 }
 
 .TooltipContent[data-state='delayed-open'][data-side='top'] {