Feature/35711 header invite remove button redesign

src/components/Icon/Illustrations.ts

@@ -55,6 +55,7 @@ import OpenSafe from '@assets/images/simple-illustrations/simple-illustration__o
 import PalmTree from '@assets/images/simple-illustrations/simple-illustration__palmtree.svg';
 import Profile from '@assets/images/simple-illustrations/simple-illustration__profile.svg';
 import QRCode from '@assets/images/simple-illustrations/simple-illustration__qr-code.svg';
+import ReceiptWrangler from '@assets/images/simple-illustrations/simple-illustration__receipt-wrangler.svg';
 import SanFrancisco from '@assets/images/simple-illustrations/simple-illustration__sanfrancisco.svg';
 import ShieldYellow from '@assets/images/simple-illustrations/simple-illustration__shield.svg';
 import SmallRocket from '@assets/images/simple-illustrations/simple-illustration__smallrocket.svg';
@@ -89,6 +90,7 @@ export {
     MoneyMousePink,
     ReceiptsSearchYellow,
     ReceiptYellow,
+    ReceiptWrangler,
     RocketBlue,
     RocketOrange,
     SanFrancisco,

src/languages/en.ts

@@ -1675,6 +1675,7 @@ export default {
             bookTravelWithConcierge: 'Book travel with Concierge',
         },
         invite: {
+            member: 'Invite member',
             invitePeople: 'Invite new members',
             genericFailureMessage: 'An error occurred inviting the user to the workspace, please try again.',
             pleaseEnterValidLogin: `Please ensure the email or phone number is valid (e.g. ${CONST.EXAMPLE_PHONE_NUMBER}).`,

src/languages/es.ts

@@ -1699,6 +1699,7 @@ export default {
             bookTravelWithConcierge: 'Reserva viajes con Concierge',
         },
         invite: {
+            member: 'Invitar miembros',
             invitePeople: 'Invitar nuevos miembros',
             genericFailureMessage: 'Se produjo un error al invitar al usuario al espacio de trabajo. Vuelva a intentarlo..',
             pleaseEnterValidLogin: `Asegúrese de que el correo electrónico o el número de teléfono sean válidos (p. ej. ${CONST.EXAMPLE_PHONE_NUMBER}).`,

src/pages/workspace/WorkspaceMembersPage.js

@@ -9,6 +9,8 @@ import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView
 import Button from '@components/Button';
 import ConfirmModal from '@components/ConfirmModal';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import * as Expensicons from '@components/Icon/Expensicons';
+import * as Illustrations from '@components/Icon/Illustrations';
 import MessagesRow from '@components/MessagesRow';
 import networkPropTypes from '@components/networkPropTypes';
 import {withNetwork} from '@components/OnyxProvider';
@@ -415,6 +417,29 @@ function WorkspaceMembersPage(props) {
         );
     };
 
+    const getHeaderButtons = () => (
+        <View style={[styles.w100, styles.flexRow, isSmallScreenWidth && styles.mb3]}>
+            <Button
+                medium
+                success
+                onPress={inviteUser}
+                text={props.translate('workspace.invite.member')}
+                icon={Expensicons.Plus}
+                iconStyles={{transform: [{scale: 0.6}]}}
+                innerStyles={[isSmallScreenWidth && styles.alignItemsCenter]}
+                style={[isSmallScreenWidth && styles.flexGrow1]}
+            />
+            <Button
+                medium
+                danger
+                style={[styles.ml2, isSmallScreenWidth && styles.w50]}
+                isDisabled={selectedEmployees.length === 0}
+                text={props.translate('common.remove')}
+                onPress={askForConfirmationToRemove}
+            />
+        </View>
+    );
+
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
@@ -429,13 +454,17 @@ function WorkspaceMembersPage(props) {
             >
                 <HeaderWithBackButton
                     title={props.translate('workspace.common.members')}
+                    icon={Illustrations.ReceiptWrangler}
                     onBackButtonPress={() => {
                         setSearchValue('');
                         Navigation.goBack();
                     }}
                     shouldShowBackButton={isSmallScreenWidth}
                     guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS}
-                />
+                >
+                    {!isSmallScreenWidth && getHeaderButtons()}
+                </HeaderWithBackButton>
+                {isSmallScreenWidth && <View style={[styles.pl5, styles.pr5]}>{getHeaderButtons()}</View>}
                 <ConfirmModal
                     danger
                     title={props.translate('workspace.people.removeMembersTitle')}
@@ -454,45 +483,27 @@ function WorkspaceMembersPage(props) {
                         })
                     }
                 />
-                <View style={[styles.w100, styles.flex1, styles.mt3]}>
-                    <View style={[styles.w100, styles.flexRow, styles.ph5]}>
-                        <Button
-                            medium
-                            success
-                            text={props.translate('common.invite')}
-                            onPress={inviteUser}
-                        />
-                        <Button
-                            medium
-                            danger
-                            style={[styles.ml2]}
-                            isDisabled={selectedEmployees.length === 0}
-                            text={props.translate('common.remove')}
-                            onPress={askForConfirmationToRemove}
-                        />
-                    </View>
-                    <View style={[styles.w100, styles.mt4, styles.flex1]}>
-                        <SelectionList
-                            canSelectMultiple
-                            sections={[{data, indexOffset: 0, isDisabled: false}]}
-                            textInputLabel={props.translate('optionsSelector.findMember')}
-                            textInputValue={searchValue}
-                            onChangeText={(value) => {
-                                SearchInputManager.searchInput = value;
-                                setSearchValue(value);
-                            }}
-                            disableKeyboardShortcuts={removeMembersConfirmModalVisible}
-                            headerMessage={getHeaderMessage()}
-                            headerContent={getHeaderContent()}
-                            onSelectRow={(item) => toggleUser(item.accountID)}
-                            onSelectAll={() => toggleAllUsers(data)}
-                            onDismissError={dismissError}
-                            showLoadingPlaceholder={!isOfflineAndNoMemberDataAvailable && (!OptionsListUtils.isPersonalDetailsReady(props.personalDetails) || _.isEmpty(props.policyMembers))}
-                            showScrollIndicator
-                            shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
-                            inputRef={textInputRef}
-                        />
-                    </View>
+                <View style={[styles.w100, styles.flex1]}>
+                    <SelectionList
+                        canSelectMultiple
+                        sections={[{data, indexOffset: 0, isDisabled: false}]}
+                        textInputLabel={props.translate('optionsSelector.findMember')}
+                        textInputValue={searchValue}
+                        onChangeText={(value) => {
+                            SearchInputManager.searchInput = value;
+                            setSearchValue(value);
+                        }}
+                        disableKeyboardShortcuts={removeMembersConfirmModalVisible}
+                        headerMessage={getHeaderMessage()}
+                        headerContent={getHeaderContent()}
+                        onSelectRow={(item) => toggleUser(item.accountID)}
+                        onSelectAll={() => toggleAllUsers(data)}
+                        onDismissError={dismissError}
+                        showLoadingPlaceholder={!isOfflineAndNoMemberDataAvailable && (!OptionsListUtils.isPersonalDetailsReady(props.personalDetails) || _.isEmpty(props.policyMembers))}
+                        showScrollIndicator
+                        shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
+                        inputRef={textInputRef}
+                    />
                 </View>
             </FullPageNotFoundView>
         </ScreenWrapper>