Sizing and spacing fixes based on on-device testing

src/view/lib/icons.tsx

@@ -31,12 +31,18 @@ export function GridIcon({style}: {style?: StyleProp<ViewStyle>}) {
   )
 }
 
-export function HomeIcon({style}: {style?: StyleProp<ViewStyle>}) {
+export function HomeIcon({
+  style,
+  size,
+}: {
+  style?: StyleProp<ViewStyle>
+  size?: string | number
+}) {
   return (
     <Svg
       viewBox="0 0 48 48"
-      width="24"
-      height="24"
+      width={size || 24}
+      height={size || 24}
       stroke="currentColor"
       style={style}>
       <Path
@@ -73,14 +79,20 @@ export function BellIcon({
 
 // Copyright (c) 2020 Refactoring UI Inc.
 // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
-export function UserGroupIcon({style}: {style?: StyleProp<ViewStyle>}) {
+export function UserGroupIcon({
+  style,
+  size,
+}: {
+  style?: StyleProp<ViewStyle>
+  size?: string | number
+}) {
   return (
     <Svg
       fill="none"
       viewBox="0 0 24 24"
-      width="32"
-      height="32"
-      strokeWidth={1.5}
+      width={size || 32}
+      height={size || 32}
+      strokeWidth={2}
       stroke="currentColor"
       style={style}>
       <Path

src/view/lib/styles.ts

@@ -71,6 +71,7 @@ export const s = StyleSheet.create({
   f14: {fontSize: 14},
   f15: {fontSize: 15},
   f16: {fontSize: 16},
+  f17: {fontSize: 17},
   f18: {fontSize: 18},
 
   // line heights
@@ -82,6 +83,8 @@ export const s = StyleSheet.create({
   ['lh15-1.3']: {lineHeight: 19.5}, // 1.3 of 15px
   ['lh16-1']: {lineHeight: 16},
   ['lh16-1.3']: {lineHeight: 20.8}, // 1.3 of 16px
+  ['lh17-1']: {lineHeight: 17},
+  ['lh17-1.3']: {lineHeight: 22.1}, // 1.3 of 16px
   ['lh18-1']: {lineHeight: 18},
   ['lh18-1.3']: {lineHeight: 23.4}, // 1.3 of 18px