From 824a2313b1d1d7a5c5ab7fa8680ac8aa30c98bc0 Mon Sep 17 00:00:00 2001
From: Ollie H <renahlee@outlook.com>
Date: Mon, 15 May 2023 11:14:45 -0700
Subject: [PATCH] Style cleaning and initial text size audit (#618)

* Style cleaning and initial text size audit

* Put file back
---
 src/view/com/composer/photos/Gallery.tsx   | 10 +++++++---
 src/view/com/modals/ChangeHandle.tsx       |  7 +++++--
 src/view/com/util/Views.web.tsx            |  8 +-------
 src/view/com/util/forms/DropdownButton.tsx |  4 +++-
 src/view/com/util/images/Gallery.tsx       |  1 -
 src/view/com/util/post-embeds/index.tsx    |  1 -
 src/view/screens/AppPasswords.tsx          |  5 +++--
 src/view/screens/Settings.tsx              |  4 ++--
 src/view/shell/Drawer.tsx                  |  1 +
 9 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/view/com/composer/photos/Gallery.tsx b/src/view/com/composer/photos/Gallery.tsx
index accd9680..43682495 100644
--- a/src/view/com/composer/photos/Gallery.tsx
+++ b/src/view/com/composer/photos/Gallery.tsx
@@ -61,7 +61,6 @@ export const Gallery = observer(function ({gallery}: Props) {
     borderRadius: 5,
     paddingHorizontal: 10,
     position: 'absolute' as const,
-    width: 46,
     zIndex: 1,
     ...(isOverflow
       ? {
@@ -112,11 +111,11 @@ export const Gallery = observer(function ({gallery}: Props) {
               testID="altTextButton"
               accessibilityRole="button"
               accessibilityLabel="Add alt text"
-              accessibilityHint="Opens modal for inputting image alt text"
+              accessibilityHint=""
               onPress={() => {
                 handleAddImageAltText(image)
               }}
-              style={[styles.imageControl, imageControlLabelStyle]}>
+              style={imageControlLabelStyle}>
               <Text style={styles.imageControlTextContent}>ALT</Text>
             </TouchableOpacity>
             <View style={imageControlsSubgroupStyle}>
@@ -187,9 +186,14 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   imageControlTextContent: {
+    borderRadius: 6,
     color: 'white',
     fontSize: 12,
     fontWeight: 'bold',
     letterSpacing: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.75)',
+    borderWidth: 0.5,
+    paddingHorizontal: 10,
+    paddingVertical: 3,
   },
 })
diff --git a/src/view/com/modals/ChangeHandle.tsx b/src/view/com/modals/ChangeHandle.tsx
index ad7ff5a6..a5c74bc0 100644
--- a/src/view/com/modals/ChangeHandle.tsx
+++ b/src/view/com/modals/ChangeHandle.tsx
@@ -144,8 +144,11 @@ export function Component({onChanged}: {onChanged: () => void}) {
             </Text>
           </TouchableOpacity>
         </View>
-        <Text type="2xl-bold" style={[styles.titleMiddle, pal.text]}>
-          Change my handle
+        <Text
+          type="2xl-bold"
+          style={[styles.titleMiddle, pal.text]}
+          numberOfLines={1}>
+          Change handle
         </Text>
         <View style={styles.titleRight}>
           {isProcessing ? (
diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx
index 804192a3..9d6501d5 100644
--- a/src/view/com/util/Views.web.tsx
+++ b/src/view/com/util/Views.web.tsx
@@ -22,7 +22,7 @@ import {
   View,
   ViewProps,
 } from 'react-native'
-import {addStyle, colors} from 'lib/styles'
+import {addStyle} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
 
 interface AddedProps {
@@ -124,12 +124,6 @@ const styles = StyleSheet.create({
     marginLeft: 'auto',
     marginRight: 'auto',
   },
-  containerLight: {
-    backgroundColor: colors.gray1,
-  },
-  containerDark: {
-    backgroundColor: colors.gray7,
-  },
   fixedHeight: {
     height: '100vh',
   },
diff --git a/src/view/com/util/forms/DropdownButton.tsx b/src/view/com/util/forms/DropdownButton.tsx
index 04346d91..10076360 100644
--- a/src/view/com/util/forms/DropdownButton.tsx
+++ b/src/view/com/util/forms/DropdownButton.tsx
@@ -339,7 +339,9 @@ const DropdownItems = ({
                     color={pal.text.color as string}
                   />
                 )}
-                <Text style={[styles.label, pal.text]}>{item.label}</Text>
+                <Text style={[styles.label, pal.text]} numberOfLines={1}>
+                  {item.label}
+                </Text>
               </TouchableOpacity>
             )
           } else if (isSep(item)) {
diff --git a/src/view/com/util/images/Gallery.tsx b/src/view/com/util/images/Gallery.tsx
index 1a29b453..723db289 100644
--- a/src/view/com/util/images/Gallery.tsx
+++ b/src/view/com/util/images/Gallery.tsx
@@ -63,6 +63,5 @@ const styles = StyleSheet.create({
     position: 'absolute',
     left: 6,
     bottom: 6,
-    width: 46,
   },
 })
diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx
index 2dda9069..a55ff905 100644
--- a/src/view/com/util/post-embeds/index.tsx
+++ b/src/view/com/util/post-embeds/index.tsx
@@ -184,6 +184,5 @@ const styles = StyleSheet.create({
     position: 'absolute',
     left: 6,
     bottom: 6,
-    width: 46,
   },
 })
diff --git a/src/view/screens/AppPasswords.tsx b/src/view/screens/AppPasswords.tsx
index cb1896b4..3adbf09d 100644
--- a/src/view/screens/AppPasswords.tsx
+++ b/src/view/screens/AppPasswords.tsx
@@ -140,8 +140,8 @@ function AppPasswordsHeader() {
           pal.text,
           isDesktopWeb && styles.descriptionDesktop,
         ]}>
-        These passwords can be used to log onto Bluesky in other apps without
-        giving them full access to your account or your password.
+        Use app passwords to login to other Bluesky clients without giving full
+        access to your account or password.
       </Text>
     </>
   )
@@ -289,5 +289,6 @@ const styles = StyleSheet.create({
 
   trashIcon: {
     color: 'red',
+    minWidth: 16,
   },
 })
diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx
index c7365371..1571a614 100644
--- a/src/view/screens/Settings.tsx
+++ b/src/view/screens/Settings.tsx
@@ -331,8 +331,8 @@ export const SettingsScreen = withAuthRequired(
                 style={pal.text as FontAwesomeIconStyle}
               />
             </View>
-            <Text type="lg" style={pal.text}>
-              Change my handle
+            <Text type="lg" style={pal.text} numberOfLines={1}>
+              Change handle
             </Text>
           </TouchableOpacity>
           <View style={styles.spacer20} />
diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx
index 34a0852d..d595bc52 100644
--- a/src/view/shell/Drawer.tsx
+++ b/src/view/shell/Drawer.tsx
@@ -424,6 +424,7 @@ const styles = StyleSheet.create({
     flex: 1,
     paddingTop: 20,
     paddingBottom: 50,
+    maxWidth: 300,
   },
   viewDarkMode: {
     backgroundColor: '#1B1919',