[Gekidou] update server selection ui (#5921)

* update server selection ui

* unify login/logout server option

app/screens/home/channel_list/servers/index.tsx

@@ -115,7 +115,7 @@ export default function Servers() {
                 renderContent,
                 snapPoints,
                 theme,
-                title: intl.formatMessage({id: 'servers.create_button', defaultMessage: 'Add a Server'}),
+                title: intl.formatMessage({id: 'servers.create_button', defaultMessage: 'Add a server'}),
             });
         }
     }, [isTablet, theme]);

app/screens/home/channel_list/servers/servers_list/index.tsx

@@ -51,11 +51,11 @@ const ServerList = ({servers}: Props) => {
     return (
         <BottomSheetContent
             buttonIcon='plus'
-            buttonText={intl.formatMessage({id: 'servers.create_button', defaultMessage: 'Add a Server'})}
+            buttonText={intl.formatMessage({id: 'servers.create_button', defaultMessage: 'Add a server'})}
             onPress={onAddServer}
             showButton={true}
             showTitle={!isTablet}
-            title={intl.formatMessage({id: 'your.servers', defaultMessage: 'Your Servers'})}
+            title={intl.formatMessage({id: 'your.servers', defaultMessage: 'Your servers'})}
         >
             <View style={styles.container}>
                 <FlatList

app/screens/home/channel_list/servers/servers_list/server_item/options/index.tsx

@@ -30,12 +30,27 @@ const styles = StyleSheet.create({
 const ServerOptions = ({progress, server}: Props) => {
     const intl = useIntl();
     const theme = useTheme();
+    const isLoggedIn = server.lastActiveAt > 0;
+    const sessionColor = isLoggedIn ? '#F58B00' : theme.sidebarTextActiveBorder;
+    const sessionIcon = isLoggedIn ? 'logout-variant' : 'exit-to-app';
+    const sessionText = isLoggedIn ? intl.formatMessage({
+        id: 'servers.logout',
+        defaultMessage: 'Log out',
+    }) : intl.formatMessage({
+        id: 'servers.login',
+        defaultMessage: 'Log in',
+    });
 
     const onEdit = useCallback(() => {
         // eslint-disable-next-line no-console
         console.log('ON EDIT');
     }, [server]);
 
+    const onLogin = useCallback(() => {
+        // eslint-disable-next-line no-console
+        console.log('ON Login');
+    }, [server]);
+
     const onLogout = useCallback(() => {
         // eslint-disable-next-line no-console
         console.log('ON Logout');
@@ -66,13 +81,13 @@ const ServerOptions = ({progress, server}: Props) => {
                 text={intl.formatMessage({id: 'servers.remove', defaultMessage: 'Remove'})}
             />
             <Option
-                color={theme.newMessageSeparator}
-                icon='exit-to-app'
-                onPress={onLogout}
+                color={sessionColor}
+                icon={sessionIcon}
+                onPress={isLoggedIn ? onLogout : onLogin}
                 positionX={OPTION_SIZE}
                 progress={progress}
                 style={styles.right}
-                text={intl.formatMessage({id: 'servers.logout', defaultMessage: 'Log out'})}
+                text={sessionText}
             />
         </View>
     );

app/screens/home/channel_list/servers/servers_list/server_item/options/option.tsx

@@ -58,7 +58,7 @@ const ServerOption = ({color, icon, onPress, positionX, progress, style, text}:
                     onPress={onPress}
                 >
                     <CompassIcon
-                        color={theme.sidebarText}
+                        color={theme.buttonColor}
                         name={icon}
                         size={24}
                     />

assets/base/i18n/en.json

@@ -366,9 +366,10 @@
   "screens.channel_details": "Channel Details",
   "screens.channel_edit": "Edit Channel",
   "search_bar.search": "Search",
-  "servers.create_button": "Add a Server",
+  "servers.create_button": "Add a server",
   "servers.default": "Default Server",
   "servers.edit": "Edit",
+  "servers.login": "Log in",
   "servers.logout": "Log out",
   "servers.remove": "Remove",
   "status_dropdown.set_away": "Away",
@@ -387,5 +388,5 @@
   "user.settings.general.nickname": "Nickname",
   "user.settings.general.position": "Position",
   "user.settings.general.username": "Username",
-  "your.servers": "Your Servers"
+  "your.servers": "Your servers"
 }