MM-66509: Reduce channel banner height and adjust padding (#9267)

* MM-66509: Reduce channel banner height and adjust padding
- Reduce banner height from 40px to 32px
- Decrease padding from 10px to 5px (top/bottom) and 16px to 8px (left/right)
- Add center alignment to banner text container
- Apply typography styles directly to banner text

app/constants/view.ts

@@ -31,7 +31,7 @@ export const CALL_NOTIFICATION_BAR_HEIGHT = 40;
 
 export const ANNOUNCEMENT_BAR_HEIGHT = 40;
 export const BOOKMARKS_BAR_HEIGHT = 48;
-export const CHANNEL_BANNER_HEIGHT = 40;
+export const CHANNEL_BANNER_HEIGHT = 32;
 
 export const HOME_PADDING = {
     paddingLeft: 18,

app/screens/channel/header/channel_banner/channel_banner.tsx

@@ -7,6 +7,7 @@ import {Text, TouchableOpacity, View} from 'react-native';
 
 import ExpandedAnnouncementBanner from '@components/announcement_banner/expanded_announcement_banner';
 import RemoveMarkdown from '@components/remove_markdown';
+import {CHANNEL_BANNER_HEIGHT} from '@constants/view';
 import {useTheme} from '@context/theme';
 import {useDefaultHeaderHeight} from '@hooks/header';
 import {bottomSheet} from '@screens/navigation';
@@ -26,11 +27,11 @@ const CLOSE_BUTTON_ID = 'channel-banner-close';
 
 const getStyleSheet = (bannerTextColor: string) => ({
     container: {
-        paddingTop: 10,
-        paddingBottom: 10,
+        paddingTop: 5,
+        paddingBottom: 5,
         paddingLeft: 16,
         paddingRight: 16,
-        height: 40,
+        height: CHANNEL_BANNER_HEIGHT,
     },
     containerTopItem: {
         borderTopLeftRadius: 12,
@@ -45,9 +46,12 @@ const getStyleSheet = (bannerTextColor: string) => ({
     bannerTextContainer: {
         flex: 1,
         flexGrow: 1,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
     },
     bannerText: {
         textAlign: 'center' as const,
+
     },
 });