Image alt text view modal (#551)

* Image alt text view modal

* Minor style tweaks

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

src/view/com/modals/AltImageRead.tsx

@@ -0,0 +1,75 @@
+import React, {useCallback} from 'react'
+import {StyleSheet, View} from 'react-native'
+import {usePalette} from 'lib/hooks/usePalette'
+import {gradients, s} from 'lib/styles'
+import {Text} from '../util/text/Text'
+import {TouchableOpacity} from 'react-native-gesture-handler'
+import LinearGradient from 'react-native-linear-gradient'
+import {useStores} from 'state/index'
+import {isDesktopWeb} from 'platform/detection'
+
+export const snapPoints = ['70%']
+
+interface Props {
+  altText: string
+}
+
+export function Component({altText}: Props) {
+  const pal = usePalette('default')
+  const store = useStores()
+
+  const onPress = useCallback(() => {
+    store.shell.closeModal()
+  }, [store])
+
+  return (
+    <View
+      testID="altTextImageModal"
+      style={[pal.view, styles.container, s.flex1]}>
+      <Text style={[styles.title, pal.text]}>Image description</Text>
+      <View style={[styles.text, pal.viewLight]}>
+        <Text style={pal.text}>{altText}</Text>
+      </View>
+      <TouchableOpacity testID="altTextImageSaveBtn" onPress={onPress}>
+        <LinearGradient
+          colors={[gradients.blueLight.start, gradients.blueLight.end]}
+          start={{x: 0, y: 0}}
+          end={{x: 1, y: 1}}
+          style={[styles.button]}>
+          <Text type="button-lg" style={[s.white, s.bold]}>
+            Done
+          </Text>
+        </LinearGradient>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 18,
+    paddingVertical: isDesktopWeb ? 0 : 18,
+    paddingHorizontal: isDesktopWeb ? 0 : 12,
+    height: '100%',
+    width: '100%',
+  },
+  title: {
+    textAlign: 'center',
+    fontWeight: 'bold',
+    fontSize: 24,
+  },
+  text: {
+    borderRadius: 5,
+    marginVertical: 18,
+    paddingHorizontal: 18,
+    paddingVertical: 16,
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    borderRadius: 32,
+    padding: 10,
+  },
+})

src/view/com/modals/Modal.tsx

@@ -13,6 +13,7 @@ import * as ServerInputModal from './ServerInput'
 import * as ReportPostModal from './ReportPost'
 import * as RepostModal from './Repost'
 import * as AltImageModal from './AltImage'
+import * as AltImageReadModal from './AltImageRead'
 import * as ReportAccountModal from './ReportAccount'
 import * as DeleteAccountModal from './DeleteAccount'
 import * as ChangeHandleModal from './ChangeHandle'
@@ -74,6 +75,9 @@ export const ModalsContainer = observer(function ModalsContainer() {
   } else if (activeModal?.name === 'alt-text-image') {
     snapPoints = AltImageModal.snapPoints
     element = <AltImageModal.Component {...activeModal} />
+  } else if (activeModal?.name === 'alt-text-image-read') {
+    snapPoints = AltImageReadModal.snapPoints
+    element = <AltImageReadModal.Component {...activeModal} />
   } else if (activeModal?.name === 'change-handle') {
     snapPoints = ChangeHandleModal.snapPoints
     element = <ChangeHandleModal.Component {...activeModal} />

src/view/com/modals/Modal.web.tsx

@@ -15,6 +15,7 @@ import * as DeleteAccountModal from './DeleteAccount'
 import * as RepostModal from './Repost'
 import * as CropImageModal from './crop-image/CropImage.web'
 import * as AltTextImageModal from './AltImage'
+import * as AltTextImageReadModal from './AltImageRead'
 import * as ChangeHandleModal from './ChangeHandle'
 import * as WaitlistModal from './Waitlist'
 import * as InviteCodesModal from './InviteCodes'
@@ -84,6 +85,8 @@ function Modal({modal}: {modal: ModalIface}) {
     element = <ContentFilteringSettingsModal.Component />
   } else if (modal.name === 'alt-text-image') {
     element = <AltTextImageModal.Component {...modal} />
+  } else if (modal.name === 'alt-text-image-read') {
+    element = <AltTextImageReadModal.Component {...modal} />
   } else {
     return null
   }