[APP-680] Allow users to add details when reporting (#854)

* allow user to add text when reporting post

* add DMCA override

* increase modal size

* fix dark mode text color

* re-organize components

* add details option when reporting account

* hard-code modal size so it works on smaller devices

* fix modal on web

* Remove outline from textarea focus

* Tweak some styles

* Fix lint

---------

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

1 files changed, 57 insertions, 0 deletions

diff --git a/src/view/com/modals/report/SendReportButton.tsx b/src/view/com/modals/report/SendReportButton.tsx
new file mode 100644
index 000000000..82fb65f20
--- /dev/null
+++ b/src/view/com/modals/report/SendReportButton.tsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import LinearGradient from 'react-native-linear-gradient'
+import {
+  ActivityIndicator,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native'
+import {Text} from '../../util/text/Text'
+import {s, gradients, colors} from 'lib/styles'
+
+export function SendReportButton({
+  onPress,
+  isProcessing,
+}: {
+  onPress: () => void
+  isProcessing: boolean
+}) {
+  // loading state
+  // =
+  if (isProcessing) {
+    return (
+      <View style={[styles.btn, s.mt10]}>
+        <ActivityIndicator />
+      </View>
+    )
+  }
+  return (
+    <TouchableOpacity
+      testID="sendReportBtn"
+      style={s.mt10}
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel="Report post"
+      accessibilityHint={`Reports post with reason and details`}>
+      <LinearGradient
+        colors={[gradients.blueLight.start, gradients.blueLight.end]}
+        start={{x: 0, y: 0}}
+        end={{x: 1, y: 1}}
+        style={[styles.btn]}>
+        <Text style={[s.white, s.bold, s.f18]}>Send Report</Text>
+      </LinearGradient>
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  btn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    borderRadius: 32,
+    padding: 14,
+    backgroundColor: colors.gray1,
+  },
+})