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

@@ -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,
   },
 })

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 ? (

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',
   },

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)) {

src/view/com/util/images/Gallery.tsx

@@ -63,6 +63,5 @@ const styles = StyleSheet.create({
     position: 'absolute',
     left: 6,
     bottom: 6,
-    width: 46,
   },
 })

src/view/com/util/post-embeds/index.tsx

@@ -184,6 +184,5 @@ const styles = StyleSheet.create({
     position: 'absolute',
     left: 6,
     bottom: 6,
-    width: 46,
   },
 })

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,
   },
 })

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} />

src/view/shell/Drawer.tsx

@@ -424,6 +424,7 @@ const styles = StyleSheet.create({
     flex: 1,
     paddingTop: 20,
     paddingBottom: 50,
+    maxWidth: 300,
   },
   viewDarkMode: {
     backgroundColor: '#1B1919',