[Gekidou] Update bottom sheet style for title and button (#6166)

* Update bottom sheet style for title and button

* title margin bottom

* Fix more teams list

app/components/team_sidebar/add_team/team_list.tsx

@@ -24,7 +24,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
         flexShrink: 1,
     },
     contentContainer: {
-        marginVertical: 4,
+        marginBottom: 4,
     },
     empty: {
         flex: 1,

app/components/team_sidebar/add_team/team_list_item/team_list_item.tsx

@@ -11,6 +11,7 @@ import {useServerUrl} from '@context/server';
 import {useTheme} from '@context/theme';
 import {dismissBottomSheet} from '@screens/navigation';
 import {makeStyleSheetFromTheme} from '@utils/theme';
+import {typography} from '@utils/typography';
 
 import type TeamModel from '@typings/database/models/servers/team';
 
@@ -19,6 +20,32 @@ type Props = {
     currentUserId: string;
 }
 
+const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
+    return {
+        container: {
+            height: 64,
+            marginBottom: 2,
+        },
+        touchable: {
+            display: 'flex',
+            flexDirection: 'row',
+            borderRadius: 4,
+            alignItems: 'center',
+            height: '100%',
+            width: '100%',
+        },
+        text: {
+            color: theme.centerChannelColor,
+            marginLeft: 16,
+            ...typography('Body', 200),
+        },
+        icon_container: {
+            width: 40,
+            height: 40,
+        },
+    };
+});
+
 export default function TeamListItem({team, currentUserId}: Props) {
     const theme = useTheme();
     const styles = getStyleSheet(theme);
@@ -51,30 +78,3 @@ export default function TeamListItem({team, currentUserId}: Props) {
         </View>
     );
 }
-
-const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
-    return {
-        container: {
-            height: 64,
-            marginVertical: 2,
-        },
-        touchable: {
-            display: 'flex',
-            flexDirection: 'row',
-            borderRadius: 4,
-            alignItems: 'center',
-            height: '100%',
-            width: '100%',
-        },
-        text: {
-            color: theme.centerChannelColor,
-            fontSize: 16,
-            lineHeight: 24,
-            marginLeft: 16,
-        },
-        icon_container: {
-            width: 40,
-            height: 40,
-        },
-    };
-});

app/screens/bottom_sheet/button.tsx

@@ -8,6 +8,7 @@ import CompassIcon from '@components/compass_icon';
 import TouchableWithFeedback from '@components/touchable_with_feedback';
 import {useTheme} from '@context/theme';
 import {makeStyleSheetFromTheme} from '@utils/theme';
+import {typography} from '@utils/typography';
 
 type Props = {
     onPress?: (e: GestureResponderEvent) => void;
@@ -15,6 +16,33 @@ type Props = {
     testID?: string;
     text?: string;
 }
+
+const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
+    return {
+        button: {
+            backgroundColor: theme.buttonBg,
+            display: 'flex',
+            flexDirection: 'row',
+            paddingVertical: 14,
+            paddingHorizontal: 24,
+            borderRadius: 4,
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: 48,
+        },
+        text: {
+            color: theme.buttonColor,
+            paddingHorizontal: 8,
+            ...typography('Body', 200, 'SemiBold'),
+        },
+        icon_container: {
+            width: 24,
+            height: 24,
+            marginTop: 2,
+        },
+    };
+});
+
 export default function BottomSheetButton({onPress, icon, testID, text}: Props) {
     const theme = useTheme();
     const styles = getStyleSheet(theme);
@@ -44,31 +72,3 @@ export default function BottomSheetButton({onPress, icon, testID, text}: Props)
         </TouchableWithFeedback>
     );
 }
-
-const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
-    return {
-        button: {
-            backgroundColor: theme.buttonBg,
-            display: 'flex',
-            flexDirection: 'row',
-            paddingVertical: 14,
-            paddingHorizontal: 24,
-            borderRadius: 4,
-            alignItems: 'center',
-            justifyContent: 'center',
-            height: 48,
-        },
-        text: {
-            color: theme.buttonColor,
-            fontWeight: 'bold',
-            fontSize: 16,
-            lineHeight: 18,
-            paddingHorizontal: 1,
-        },
-        icon_container: {
-            width: 24,
-            height: 24,
-            marginBottom: 1,
-        },
-    };
-});

app/screens/bottom_sheet/content.tsx

@@ -28,10 +28,13 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
         container: {
             flex: 1,
         },
-        titleContainer: {marginVertical: 4},
+        titleContainer: {
+            marginTop: 4,
+            marginBottom: 12,
+        },
         titleText: {
             color: theme.centerChannelColor,
-            ...typography('Heading', 700, 'SemiBold'),
+            ...typography('Heading', 600, 'SemiBold'),
         },
         separator: {
             height: 1,