Partial fix #495

Add list
Edit list info

src/components/ContextMenu/status.ts

@@ -121,7 +121,8 @@ const contextMenuStatus = ({ actions, status, queryKey, rootQueryKey }: Props) =
           }
         },
         {
-          text: t('common:buttons.cancel')
+          text: t('common:buttons.cancel'),
+          style: 'default'
         }
       ])
     }

src/components/Instance.tsx

@@ -60,11 +60,11 @@ const ComponentInstance: React.FC<Props> = ({
       if (instances && instances.filter(instance => instance.url === domain).length) {
         Alert.alert(t('update.alert.title'), t('update.alert.message'), [
           {
-            text: t('update.alert.buttons.cancel'),
+            text: t('common:buttons.cancel'),
             style: 'cancel'
           },
           {
-            text: t('update.alert.buttons.continue'),
+            text: t('common:buttons.continue'),
             onPress: () => {
               appsQuery.refetch()
             }

src/components/Message.tsx

@@ -125,7 +125,7 @@ const Message = React.forwardRef<FlashMessage>((_, ref) => {
         shadowOpacity: theme === 'light' ? 0.16 : 0.24,
         shadowRadius: 4,
         paddingRight: StyleConstants.Spacing.M * 2,
-        marginTop: insets.top
+        marginTop: ref ? undefined : insets.top
       }}
       titleStyle={{
         color: colors.primaryDefault,

src/components/Selections.tsx

@@ -0,0 +1,71 @@
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import React from 'react'
+import { Pressable, View } from 'react-native'
+import haptics from './haptics'
+import Icon from './Icon'
+import { ParseEmojis } from './Parse'
+import CustomText from './Text'
+
+export interface Props {
+  multiple?: boolean
+  options: { selected: boolean; content: string }[]
+  setOptions: React.Dispatch<React.SetStateAction<{ selected: boolean; content: string }[]>>
+}
+
+const Selections: React.FC<Props> = ({ multiple = false, options, setOptions }) => {
+  const { colors } = useTheme()
+
+  const isSelected = (index: number): string =>
+    options[index].selected
+      ? `Check${multiple ? 'Square' : 'Circle'}`
+      : `${multiple ? 'Square' : 'Circle'}`
+
+  return (
+    <>
+      {options.map((option, index) => (
+        <Pressable
+          key={index}
+          style={{ flex: 1, paddingVertical: StyleConstants.Spacing.S }}
+          onPress={() => {
+            if (multiple) {
+              haptics('Light')
+
+              setOptions(options.map((o, i) => (i === index ? { ...o, selected: !o.selected } : o)))
+            } else {
+              if (!option.selected) {
+                haptics('Light')
+                setOptions(
+                  options.map((o, i) => {
+                    if (i === index) {
+                      return { ...o, selected: true }
+                    } else {
+                      return { ...o, selected: false }
+                    }
+                  })
+                )
+              }
+            }
+          }}
+        >
+          <View style={{ flex: 1, flexDirection: 'row' }}>
+            <Icon
+              style={{
+                paddingTop: StyleConstants.Font.LineHeight.M - StyleConstants.Font.Size.M,
+                marginRight: StyleConstants.Spacing.S
+              }}
+              name={isSelected(index)}
+              size={StyleConstants.Font.Size.M}
+              color={colors.primaryDefault}
+            />
+            <CustomText style={{ flex: 1 }}>
+              <ParseEmojis content={option.content} />
+            </CustomText>
+          </View>
+        </Pressable>
+      ))}
+    </>
+  )
+}
+
+export default Selections