Replace icons in EditImage modal

src/components/icons/AspectRatio.tsx

@@ -0,0 +1,13 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const AspectRatio11_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 1v14h14V5H5Z',
+})
+
+export const AspectRatio43_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M2 20.5c-.552 0-1-.41-1-.917V4.917C1 4.41 1.448 4 2 4h20c.552 0 1 .41 1 .917v14.666c0 .507-.448.917-1 .917H2Zm1-1.833h18V5.833H3v12.834Z',
+})
+
+export const AspectRatio34_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M4 2c0-.552.41-1 .917-1h14.666c.507 0 .917.448.917 1v20c0 .552-.41 1-.917 1H4.917C4.41 23 4 22.552 4 22V2Zm1.833 1v18h12.834V3H5.833Z',
+})

src/components/icons/FlipImage.tsx

@@ -0,0 +1,9 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const FlipVertical_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v5h-2V5H5v4H3V4Zm20 9H1v-2h22v2Zm-2.293 7.707A1 1 0 0 1 20 21h-1v-2h2v1a1 1 0 0 1-.293.707ZM17 19v2h-2v-2h2Zm-4 0v2h-2v-2h2Zm-4 0v2H7v-2h2Zm-4 0v2H4a1 1 0 0 1-1-1v-1h2Zm0-2H3v-2h2v2Zm14-2v2h2v-2h-2Z',
+})
+
+export const FlipHorizontal_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M4 21a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5v2H5v14h4v2H4Zm9-20v22h-2V1h2Zm7.707 2.293A1 1 0 0 1 21 4v1h-2V3h1a1 1 0 0 1 .707.293ZM19 7h2v2h-2V7Zm0 4h2v2h-2v-2Zm0 4h2v2h-2v-2Zm0 4h2v1a1 1 0 0 1-1 1h-1v-2Zm-2 0v2h-2v-2h2ZM15 5h2V3h-2v2Z',
+})

src/view/com/modals/EditImage.tsx

@@ -2,7 +2,6 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {Pressable, StyleSheet, View} from 'react-native'
 import {useWindowDimensions} from 'react-native'
 import {LinearGradient} from 'expo-linear-gradient'
-import {MaterialIcons} from '@expo/vector-icons'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {Slider} from '@miblanchard/react-native-slider'
@@ -13,32 +12,41 @@ import {useModalControls} from '#/state/modals'
 import {MAX_ALT_TEXT} from 'lib/constants'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {RectTallIcon, RectWideIcon, SquareIcon} from 'lib/icons'
 import {enforceLen} from 'lib/strings/helpers'
 import {gradients, s} from 'lib/styles'
 import {useTheme} from 'lib/ThemeContext'
 import {getKeys} from 'lib/type-assertions'
 import {GalleryModel} from 'state/models/media/gallery'
 import {ImageModel} from 'state/models/media/image'
+import {atoms as a} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {
+  AspectRatio11_Stroke2_Corner0_Rounded as A11,
+  AspectRatio34_Stroke2_Corner0_Rounded as A34,
+  AspectRatio43_Stroke2_Corner0_Rounded as A43,
+} from '#/components/icons/AspectRatio'
+import {CircleBanSign_Stroke2_Corner0_Rounded as Ban} from '#/components/icons/CircleBanSign'
+import {
+  FlipHorizontal_Stroke2_Corner0_Rounded as FlipHorizontal,
+  FlipVertical_Stroke2_Corner0_Rounded as FlipVertical,
+} from '#/components/icons/FlipImage'
 import {Text} from '../util/text/Text'
 import {TextInput} from './util'
 
 export const snapPoints = ['80%']
 
 const RATIOS = {
   '4:3': {
-    Icon: RectWideIcon,
+    icon: A43,
   },
   '1:1': {
-    Icon: SquareIcon,
+    icon: A11,
   },
   '3:4': {
-    Icon: RectTallIcon,
+    icon: A34,
   },
   None: {
-    label: 'None',
-    Icon: MaterialIcons,
-    name: 'do-not-disturb-alt',
+    icon: Ban,
   },
 } as const
 
@@ -112,12 +120,12 @@ export const Component = observer(function EditImageImpl({
       //   },
       // },
       {
-        name: 'flip' as const,
+        icon: FlipHorizontal,
         label: _(msg`Flip horizontal`),
         onPress: onFlipHorizontal,
       },
       {
-        name: 'flip' as const,
+        icon: FlipVertical,
         label: _(msg`Flip vertically`),
         onPress: onFlipVertical,
       },
@@ -165,17 +173,6 @@ export const Component = observer(function EditImageImpl({
     onCloseModal()
   }, [altText, image, position, scale, onCloseModal])
 
-  const getLabelIconSize = useCallback((as: AspectRatio) => {
-    switch (as) {
-      case 'None':
-        return 22
-      case '1:1':
-        return 32
-      default:
-        return 26
-    }
-  }, [])
-
   if (image.cropped === undefined) {
     return null
   }
@@ -231,39 +228,33 @@ export const Component = observer(function EditImageImpl({
             maximumValue={3}
           />
         </View>
-        <View>
+        <View style={[a.gap_sm]}>
           {!isMobile ? (
             <Text type="sm-bold" style={pal.text}>
               <Trans>Ratios</Trans>
             </Text>
           ) : null}
           <View style={imgControlStyles}>
             {getKeys(RATIOS).map(ratio => {
-              const {Icon, ...props} = RATIOS[ratio]
-              const labelIconSize = getLabelIconSize(ratio)
+              const {icon} = RATIOS[ratio]
               const isSelected = aspectRatio === ratio
 
               return (
-                <Pressable
+                <Button
                   key={ratio}
+                  label={ratio}
+                  size="large"
+                  shape="square"
+                  variant="outline"
+                  color={isSelected ? 'primary' : 'secondary'}
                   onPress={() => {
                     onSetRatio(ratio)
-                  }}
-                  accessibilityLabel={ratio}
-                  accessibilityHint="">
-                  <Icon
-                    size={labelIconSize}
-                    style={[styles.imgControl, isSelected ? s.blue3 : pal.text]}
-                    color={(isSelected ? s.blue3 : pal.text).color}
-                    {...props}
-                  />
-
-                  <Text
-                    type={isSelected ? 'xs-bold' : 'xs-medium'}
-                    style={[isSelected ? s.blue3 : pal.text, s.textCenter]}>
-                    {ratio}
-                  </Text>
-                </Pressable>
+                  }}>
+                  <View style={[a.align_center, a.gap_2xs]}>
+                    <ButtonIcon icon={icon} />
+                    <ButtonText style={[a.text_xs]}>{ratio}</ButtonText>
+                  </View>
+                </Button>
               )
             })}
           </View>
@@ -273,24 +264,17 @@ export const Component = observer(function EditImageImpl({
             </Text>
           ) : null}
           <View style={imgControlStyles}>
-            {adjustments.map(({label, name, onPress}) => (
-              <Pressable
+            {adjustments.map(({label, icon, onPress}) => (
+              <Button
                 key={label}
-                onPress={onPress}
-                accessibilityLabel={label}
-                accessibilityHint=""
-                style={styles.flipBtn}>
-                <MaterialIcons
-                  name={name}
-                  size={label?.startsWith('Flip') ? 22 : 24}
-                  style={[
-                    pal.text,
-                    label === _(msg`Flip vertically`)
-                      ? styles.flipVertical
-                      : undefined,
-                  ]}
-                />
-              </Pressable>
+                label={label}
+                size="large"
+                shape="square"
+                variant="outline"
+                color="secondary"
+                onPress={onPress}>
+                <ButtonIcon icon={icon} />
+              </Button>
             ))}
           </View>
         </View>
@@ -362,12 +346,6 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     paddingHorizontal: 24,
   },
-  imgControl: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: 40,
-  },
   imgEditor: {
     maxWidth: '100%',
   },