From 82c5244589d35bc6e8d632cfad11c47a5f4d516e Mon Sep 17 00:00:00 2001
From: Avinash Lingaloo <avinashlng1080@gmail.com>
Date: Fri, 20 Jan 2023 21:17:01 +0400
Subject: [PATCH] MM-44652 - Fix long team name (#6943)

* fix long team name

* minor code refactor

* adds a comment to explain the 85%

* update snapshots
---
 .../__snapshots__/index.test.tsx.snap         | 112 +++++++++-------
 .../header/__snapshots__/header.test.tsx.snap | 112 +++++++++-------
 .../categories_list/header/header.tsx         | 122 ++++++++++--------
 3 files changed, 200 insertions(+), 146 deletions(-)

diff --git a/app/screens/home/channel_list/categories_list/__snapshots__/index.test.tsx.snap b/app/screens/home/channel_list/categories_list/__snapshots__/index.test.tsx.snap
index f9a4925f82..5cbb06c9f7 100644
--- a/app/screens/home/channel_list/categories_list/__snapshots__/index.test.tsx.snap
+++ b/app/screens/home/channel_list/categories_list/__snapshots__/index.test.tsx.snap
@@ -39,44 +39,87 @@ exports[`components/categories_list should render channels error 1`] = `
     <View
       style={
         {
-          "alignItems": "center",
           "flexDirection": "row",
           "justifyContent": "space-between",
         }
       }
     >
       <View
-        accessible={true}
-        focusable={false}
-        onClick={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
         style={
           {
-            "alignItems": "center",
-            "flexDirection": "row",
-            "justifyContent": "space-between",
+            "width": "85%",
           }
         }
       >
-        <Text
+        <View
           style={
             {
-              "color": "#ffffff",
-              "fontFamily": "Metropolis-SemiBold",
-              "fontSize": 28,
-              "fontWeight": "600",
-              "lineHeight": 36,
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
             }
           }
-          testID="channel_list_header.team_display_name"
         >
-          Test Team!
-        </Text>
+          <View
+            accessible={true}
+            focusable={false}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+              }
+            }
+          >
+            <Text
+              ellipsizeMode="tail"
+              numberOfLines={2}
+              style={
+                {
+                  "color": "#ffffff",
+                  "fontFamily": "Metropolis-SemiBold",
+                  "fontSize": 28,
+                  "fontWeight": "600",
+                  "lineHeight": 36,
+                }
+              }
+              testID="channel_list_header.team_display_name"
+            >
+              Test Team!
+            </Text>
+          </View>
+        </View>
+        <View
+          style={
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "paddingRight": 60,
+            }
+          }
+        >
+          <Text
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={
+              {
+                "color": "rgba(255,255,255,0.64)",
+                "fontFamily": "OpenSans-SemiBold",
+                "fontSize": 11,
+                "fontWeight": "600",
+                "lineHeight": 16,
+              }
+            }
+            testID="channel_list_header.server_display_name"
+          />
+        </View>
       </View>
       <View
         accessible={true}
@@ -104,6 +147,7 @@ exports[`components/categories_list should render channels error 1`] = `
             "borderRadius": 14,
             "height": 28,
             "justifyContent": "center",
+            "marginTop": 7,
             "opacity": 1,
             "width": 28,
           }
@@ -121,30 +165,6 @@ exports[`components/categories_list should render channels error 1`] = `
         />
       </View>
     </View>
-    <View
-      style={
-        {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "paddingRight": 60,
-        }
-      }
-    >
-      <Text
-        ellipsizeMode="tail"
-        numberOfLines={1}
-        style={
-          {
-            "color": "rgba(255,255,255,0.64)",
-            "fontFamily": "OpenSans-SemiBold",
-            "fontSize": 11,
-            "fontWeight": "600",
-            "lineHeight": 16,
-          }
-        }
-        testID="channel_list_header.server_display_name"
-      />
-    </View>
   </View>
   <View
     style={
diff --git a/app/screens/home/channel_list/categories_list/header/__snapshots__/header.test.tsx.snap b/app/screens/home/channel_list/categories_list/header/__snapshots__/header.test.tsx.snap
index a016dddf93..4e56e5134e 100644
--- a/app/screens/home/channel_list/categories_list/header/__snapshots__/header.test.tsx.snap
+++ b/app/screens/home/channel_list/categories_list/header/__snapshots__/header.test.tsx.snap
@@ -19,44 +19,87 @@ exports[`components/channel_list/header Channel List Header Component should mat
   <View
     style={
       {
-        "alignItems": "center",
         "flexDirection": "row",
         "justifyContent": "space-between",
       }
     }
   >
     <View
-      accessible={true}
-      focusable={false}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
       style={
         {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "justifyContent": "space-between",
+          "width": "85%",
         }
       }
     >
-      <Text
+      <View
         style={
           {
-            "color": "#ffffff",
-            "fontFamily": "Metropolis-SemiBold",
-            "fontSize": 28,
-            "fontWeight": "600",
-            "lineHeight": 36,
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "space-between",
           }
         }
-        testID="channel_list_header.team_display_name"
       >
-        Test!
-      </Text>
+        <View
+          accessible={true}
+          focusable={false}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+            }
+          }
+        >
+          <Text
+            ellipsizeMode="tail"
+            numberOfLines={2}
+            style={
+              {
+                "color": "#ffffff",
+                "fontFamily": "Metropolis-SemiBold",
+                "fontSize": 28,
+                "fontWeight": "600",
+                "lineHeight": 36,
+              }
+            }
+            testID="channel_list_header.team_display_name"
+          >
+            Test!
+          </Text>
+        </View>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "paddingRight": 60,
+          }
+        }
+      >
+        <Text
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          style={
+            {
+              "color": "rgba(255,255,255,0.64)",
+              "fontFamily": "OpenSans-SemiBold",
+              "fontSize": 11,
+              "fontWeight": "600",
+              "lineHeight": 16,
+            }
+          }
+          testID="channel_list_header.server_display_name"
+        />
+      </View>
     </View>
     <View
       accessible={true}
@@ -84,6 +127,7 @@ exports[`components/channel_list/header Channel List Header Component should mat
           "borderRadius": 14,
           "height": 28,
           "justifyContent": "center",
+          "marginTop": 7,
           "opacity": 1,
           "width": 28,
         }
@@ -101,29 +145,5 @@ exports[`components/channel_list/header Channel List Header Component should mat
       />
     </View>
   </View>
-  <View
-    style={
-      {
-        "alignItems": "center",
-        "flexDirection": "row",
-        "paddingRight": 60,
-      }
-    }
-  >
-    <Text
-      ellipsizeMode="tail"
-      numberOfLines={1}
-      style={
-        {
-          "color": "rgba(255,255,255,0.64)",
-          "fontFamily": "OpenSans-SemiBold",
-          "fontSize": 11,
-          "fontWeight": "600",
-          "lineHeight": 16,
-        }
-      }
-      testID="channel_list_header.server_display_name"
-    />
-  </View>
 </View>
 `;
diff --git a/app/screens/home/channel_list/categories_list/header/header.tsx b/app/screens/home/channel_list/categories_list/header/header.tsx
index ea94719e49..0d66b56f48 100644
--- a/app/screens/home/channel_list/categories_list/header/header.tsx
+++ b/app/screens/home/channel_list/categories_list/header/header.tsx
@@ -26,6 +26,8 @@ import LoadingUnreads from './loading_unreads';
 import PlusMenu from './plus_menu';
 import {SEPARATOR_HEIGHT} from './plus_menu/separator';
 
+const PLUS_BUTTON_SIZE = 28;
+
 type Props = {
     canCreateChannels: boolean;
     canJoinChannels: boolean;
@@ -60,9 +62,10 @@ const getStyles = makeStyleSheetFromTheme((theme: Theme) => ({
     },
     plusButton: {
         backgroundColor: changeOpacity(theme.sidebarText, 0.08),
-        height: 28,
-        width: 28,
-        borderRadius: 14,
+        height: PLUS_BUTTON_SIZE,
+        width: PLUS_BUTTON_SIZE,
+        borderRadius: PLUS_BUTTON_SIZE / 2,
+        marginTop: PLUS_BUTTON_SIZE / 4,
         justifyContent: 'center',
         alignItems: 'center',
     },
@@ -88,6 +91,13 @@ const getStyles = makeStyleSheetFromTheme((theme: Theme) => ({
         justifyContent: 'space-between',
         height: 40,
     },
+    outsideBox: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+    firstBox: {
+        width: '85%', // ratio derived from the design
+    },
 }));
 
 const hitSlop: Insets = {top: 10, bottom: 30, left: 20, right: 20};
@@ -171,59 +181,63 @@ const ChannelListHeader = ({
     let header;
     if (displayName) {
         header = (
-            <>
-                <View style={styles.headerRow}>
-                    <TouchableWithoutFeedback
-                        onPress={onHeaderPress}
-                    >
-                        <View style={styles.headerRow}>
-                            <Text
-                                style={styles.headingStyles}
-                                testID='channel_list_header.team_display_name'
-                            >
-                                {displayName}
-                            </Text>
-                        </View>
-                    </TouchableWithoutFeedback>
-                    <TouchableWithFeedback
-                        hitSlop={hitSlop}
-                        onPress={onPress}
-                        style={styles.plusButton}
-                        testID='channel_list_header.plus.button'
-                        type='opacity'
-                    >
-                        <CompassIcon
-                            style={styles.plusIcon}
-                            name={'plus'}
-                        />
-                    </TouchableWithFeedback>
-                </View>
-                <View style={styles.subHeadingView}>
-                    <Text
-                        numberOfLines={1}
-                        ellipsizeMode='tail'
-                        style={styles.subHeadingStyles}
-                        testID='channel_list_header.server_display_name'
-                    >
-                        {serverDisplayName}
-                    </Text>
-                    {(pushProxyStatus !== PUSH_PROXY_STATUS_VERIFIED) && (
-                        <TouchableWithFeedback
-                            onPress={onPushAlertPress}
-                            testID='channel_list_header.push_alert'
-                            type='opacity'
+            <View style={styles.outsideBox}>
+                <View style={styles.firstBox}>
+                    <View style={styles.headerRow}>
+                        <TouchableWithoutFeedback
+                            onPress={onHeaderPress}
                         >
-                            <CompassIcon
-                                name='alert-outline'
-                                color={theme.errorTextColor}
-                                size={14}
-                                style={styles.pushAlert}
-                            />
-                        </TouchableWithFeedback>
-                    )}
-                    <LoadingUnreads/>
+                            <View style={styles.headerRow}>
+                                <Text
+                                    numberOfLines={2}
+                                    ellipsizeMode='tail'
+                                    style={styles.headingStyles}
+                                    testID='channel_list_header.team_display_name'
+                                >
+                                    {displayName}
+                                </Text>
+                            </View>
+                        </TouchableWithoutFeedback>
+                    </View>
+                    <View style={styles.subHeadingView}>
+                        <Text
+                            numberOfLines={1}
+                            ellipsizeMode='tail'
+                            style={styles.subHeadingStyles}
+                            testID='channel_list_header.server_display_name'
+                        >
+                            {serverDisplayName}
+                        </Text>
+                        {(pushProxyStatus !== PUSH_PROXY_STATUS_VERIFIED) && (
+                            <TouchableWithFeedback
+                                onPress={onPushAlertPress}
+                                testID='channel_list_header.push_alert'
+                                type='opacity'
+                            >
+                                <CompassIcon
+                                    name='alert-outline'
+                                    color={theme.errorTextColor}
+                                    size={14}
+                                    style={styles.pushAlert}
+                                />
+                            </TouchableWithFeedback>
+                        )}
+                        <LoadingUnreads/>
+                    </View>
                 </View>
-            </>
+                <TouchableWithFeedback
+                    hitSlop={hitSlop}
+                    onPress={onPress}
+                    style={styles.plusButton}
+                    testID='channel_list_header.plus.button'
+                    type='opacity'
+                >
+                    <CompassIcon
+                        style={styles.plusIcon}
+                        name={'plus'}
+                    />
+                </TouchableWithFeedback>
+            </View>
         );
     } else {
         header = (