@oxy.so/services 9.1.0 → 10.0.0

package/src/ui/screens/LanguageSelectorScreen.tsx

@@ -197,7 +197,7 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = () => {
                                             </Text>
                                         </View>
                                     ) : canRemove ? (
-                                        <Button appearance="plain" tone="neutral" size="small" iconOnly stopPropagation
+                                        <Button appearance="plain" tone="neutral" size="sm" iconOnly stopPropagation
                                             onPress={() => handleRemove(entry.code)} disabled={isBusy}
                                             accessibilityLabel={`${t('language.remove')} ${entry.name}`}
                                             icon={<Ionicons name="close-circle" size={REMOVE_ICON_SIZE} color={bloomTheme.colors.textSecondary} />} />

package/src/ui/screens/LegalDocumentsScreen.tsx

@@ -112,7 +112,7 @@ const LegalDocumentsScreen: React.FC<BaseScreenProps> = ({
     if (documentType) {
         return (
                 <Loading
-                    size="large"
+                    size="lg"
                     color={bloomTheme.colors.text}
                     text={t('legal.opening') || 'Opening document...'}
                 />

package/src/ui/screens/NotificationsScreen.tsx

@@ -90,8 +90,8 @@ const NotificationsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) =>
                             }
                             rightElement={
                                 <Switch
-                                    value={values.pushEnabled}
-                                    onValueChange={() => toggle('pushEnabled')}
+                                    checked={values.pushEnabled}
+                                    onCheckedChange={() => toggle('pushEnabled')}
                                     disabled={isSaving}
                                 />
                             }
@@ -111,8 +111,8 @@ const NotificationsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) =>
                             }
                             rightElement={
                                 <Switch
-                                    value={values.emailDigest}
-                                    onValueChange={() => toggle('emailDigest')}
+                                    checked={values.emailDigest}
+                                    onCheckedChange={() => toggle('emailDigest')}
                                     disabled={isSaving}
                                 />
                             }
@@ -139,8 +139,8 @@ const NotificationsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) =>
                             }
                             rightElement={
                                 <Switch
-                                    value={values.securityAlerts}
-                                    onValueChange={() => toggle('securityAlerts')}
+                                    checked={values.securityAlerts}
+                                    onCheckedChange={() => toggle('securityAlerts')}
                                     disabled={isSaving}
                                 />
                             }
@@ -168,8 +168,8 @@ const NotificationsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) =>
                             }
                             rightElement={
                                 <Switch
-                                    value={values.marketingEmails}
-                                    onValueChange={() => toggle('marketingEmails')}
+                                    checked={values.marketingEmails}
+                                    onCheckedChange={() => toggle('marketingEmails')}
                                     disabled={isSaving}
                                 />
                             }

package/src/ui/screens/PaymentGatewayScreen.tsx

@@ -197,7 +197,7 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
                 <Button
                     appearance="solid" tone="accent"
                     onPress={handleClose}
-                    size="small"
+                    size="sm"
                     icon={<Ionicons name="close" size={16} />}
                     iconPosition="right"
                 >

package/src/ui/screens/PreferencesScreen.tsx

@@ -158,8 +158,8 @@ const PreferencesScreen: React.FC<BaseScreenProps> = ({
                             }
                             rightElement={
                                 <Switch
-                                    value={reduceMotionPref}
-                                    onValueChange={handleReduceMotionToggle}
+                                    checked={reduceMotionPref}
+                                    onCheckedChange={handleReduceMotionToggle}
                                     disabled={isSaving}
                                 />
                             }

package/src/ui/screens/PrivacySettingsScreen.tsx

@@ -192,7 +192,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
     if (isLoading) {
         return (
             <>
-                <Loading size="large" color={bloomTheme.colors.text} />
+                <Loading size="lg" color={bloomTheme.colors.text} />
             </>
         );
     }
@@ -207,28 +207,28 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                             icon={<SettingsIcon name="lock-outline" color={bloomTheme.colors.primary} />}
                             title={t('privacySettings.isPrivateAccount') || 'Private Account'}
                             description={t('privacySettings.isPrivateAccountDesc') || 'Only approved followers can see your posts'}
-                            rightElement={<Switch value={settings.isPrivateAccount} onValueChange={() => toggle('isPrivateAccount')} disabled={isSaving} />}
+                            rightElement={<Switch checked={settings.isPrivateAccount} onCheckedChange={() => toggle('isPrivateAccount')} disabled={isSaving} />}
                             showChevron={false}
                         />
                         <SettingsListItem
                             icon={<SettingsIcon name="account-eye-outline" color={bloomTheme.colors.info} />}
                             title={t('privacySettings.profileVisibility') || 'Profile Visibility'}
                             description={t('privacySettings.profileVisibilityDesc') || 'Control who can view your profile'}
-                            rightElement={<Switch value={settings.profileVisibility} onValueChange={() => toggle('profileVisibility')} disabled={isSaving} />}
+                            rightElement={<Switch checked={settings.profileVisibility} onCheckedChange={() => toggle('profileVisibility')} disabled={isSaving} />}
                             showChevron={false}
                         />
                         <SettingsListItem
                             icon={<SettingsIcon name="circle-outline" color={bloomTheme.colors.success} />}
                             title={t('privacySettings.hideOnlineStatus') || 'Hide Online Status'}
                             description={t('privacySettings.hideOnlineStatusDesc') || 'Don\'t show when you\'re online'}
-                            rightElement={<Switch value={settings.hideOnlineStatus} onValueChange={() => toggle('hideOnlineStatus')} disabled={isSaving} />}
+                            rightElement={<Switch checked={settings.hideOnlineStatus} onCheckedChange={() => toggle('hideOnlineStatus')} disabled={isSaving} />}
                             showChevron={false}
                         />
                         <SettingsListItem
                             icon={<SettingsIcon name="clock-outline" color={bloomTheme.colors.secondary} />}
                             title={t('privacySettings.hideLastSeen') || 'Hide Last Seen'}
                             description={t('privacySettings.hideLastSeenDesc') || 'Don\'t show when you were last active'}
-                            rightElement={<Switch value={settings.hideLastSeen} onValueChange={() => toggle('hideLastSeen')} disabled={isSaving} />}
+                            rightElement={<Switch checked={settings.hideLastSeen} onCheckedChange={() => toggle('hideLastSeen')} disabled={isSaving} />}
                             showChevron={false}
                         />
                     </SettingsListGroup>
@@ -239,28 +239,28 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                             icon={<SettingsIcon name="tag-outline" color={bloomTheme.colors.primary} />}
                             title={t('privacySettings.allowTagging') || 'Allow Tagging'}
                             description={t('privacySettings.allowTaggingDesc') || 'Let others tag you in posts'}
-                            rightElement={<Switch value={settings.allowTagging} onValueChange={() => toggle('allowTagging')} disabled={isSaving} />}
+                            rightElement={<Switch checked={settings.allowTagging} onCheckedChange={() => toggle('allowTagging')} disabled={isSaving} />}
                             showChevron={false}
                         />
                         <SettingsListItem
                             icon={<SettingsIcon name="at" color={bloomTheme.colors.info} />}
                             title={t('privacySettings.allowMentions') || 'Allow Mentions'}
                             description={t('privacySettings.allowMentionsDesc') || 'Let others mention you'}
-                            rightElement={<Switch value={settings.allowMentions} onValueChange={() => toggle('allowMentions')} disabled={isSaving} />}
+                            rightElement={<Switch checked={settings.allowMentions} onCheckedChange={() => toggle('allowMentions')} disabled={isSaving} />}
                             showChevron={false}
                         />
                         <SettingsListItem
                             icon={<SettingsIcon name="message-outline" color={bloomTheme.colors.success} />}
                             title={t('privacySettings.allowDirectMessages') || 'Allow Direct Messages'}
                             description={t('privacySettings.allowDirectMessagesDesc') || 'Let others send you direct messages'}
-                            rightElement={<Switch value={settings.allowDirectMessages} onValueChange={() => toggle('allowDirectMessages')} disabled={isSaving} />}
+                            rightElement={<Switch checked={settings.allowDirectMessages} onCheckedChange={() => toggle('allowDirectMessages')} disabled={isSaving} />}
                             showChevron={false}
                         />
                         <SettingsListItem
                             icon={<SettingsIcon name="check-all" color={bloomTheme.colors.secondary} />}
                             title={t('privacySettings.hideReadReceipts') || 'Hide Read Receipts'}
                             description={t('privacySettings.hideReadReceiptsDesc') || 'Don\'t show read receipts in messages'}
-                            rightElement={<Switch value={settings.hideReadReceipts} onValueChange={() => toggle('hideReadReceipts')} disabled={isSaving} />}
+                            rightElement={<Switch checked={settings.hideReadReceipts} onCheckedChange={() => toggle('hideReadReceipts')} disabled={isSaving} />}
                             showChevron={false}
                         />
                     </SettingsListGroup>
@@ -271,28 +271,28 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                             icon={<SettingsIcon name="pulse" color={bloomTheme.colors.primary} />}
                             title={t('privacySettings.showActivity') || 'Show Activity Status'}
                             description={t('privacySettings.showActivityDesc') || 'Display your activity on your profile'}
-                            rightElement={<Switch value={settings.showActivity} onValueChange={() => toggle('showActivity')} disabled={isSaving} />}
+                            rightElement={<Switch checked={settings.showActivity} onCheckedChange={() => toggle('showActivity')} disabled={isSaving} />}
                             showChevron={false}
                         />
                         <SettingsListItem
                             icon={<SettingsIcon name="database-outline" color={bloomTheme.colors.info} />}
                             title={t('privacySettings.dataSharing') || 'Data Sharing'}
                             description={t('privacySettings.dataSharingDesc') || 'Allow sharing data for personalization'}
-                            rightElement={<Switch value={settings.dataSharing} onValueChange={() => toggle('dataSharing')} disabled={isSaving} />}
+                            rightElement={<Switch checked={settings.dataSharing} onCheckedChange={() => toggle('dataSharing')} disabled={isSaving} />}
                             showChevron={false}
                         />
                         <SettingsListItem
                             icon={<SettingsIcon name="map-marker-outline" color={bloomTheme.colors.warning} />}
                             title={t('privacySettings.locationSharing') || 'Location Sharing'}
                             description={t('privacySettings.locationSharingDesc') || 'Share your location'}
-                            rightElement={<Switch value={settings.locationSharing} onValueChange={() => toggle('locationSharing')} disabled={isSaving} />}
+                            rightElement={<Switch checked={settings.locationSharing} onCheckedChange={() => toggle('locationSharing')} disabled={isSaving} />}
                             showChevron={false}
                         />
                         <SettingsListItem
                             icon={<SettingsIcon name="chart-line" color={bloomTheme.colors.secondary} />}
                             title={t('privacySettings.analyticsSharing') || 'Analytics Sharing'}
                             description={t('privacySettings.analyticsSharingDesc') || 'Allow analytics data collection'}
-                            rightElement={<Switch value={settings.analyticsSharing} onValueChange={() => toggle('analyticsSharing')} disabled={isSaving} />}
+                            rightElement={<Switch checked={settings.analyticsSharing} onCheckedChange={() => toggle('analyticsSharing')} disabled={isSaving} />}
                             showChevron={false}
                         />
                     </SettingsListGroup>
@@ -303,28 +303,28 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                             icon={<SettingsIcon name="eye-off-outline" color={bloomTheme.colors.warning} />}
                             title={t('privacySettings.sensitiveContent') || 'Show Sensitive Content'}
                             description={t('privacySettings.sensitiveContentDesc') || 'Allow sensitive or explicit content'}
-                            rightElement={<Switch value={settings.sensitiveContent} onValueChange={() => toggle('sensitiveContent')} disabled={isSaving} />}
+                            rightElement={<Switch checked={settings.sensitiveContent} onCheckedChange={() => toggle('sensitiveContent')} disabled={isSaving} />}
                             showChevron={false}
                         />
                         <SettingsListItem
                             icon={<SettingsIcon name="filter-outline" color={bloomTheme.colors.success} />}
                             title={t('privacySettings.autoFilter') || 'Auto Filter'}
                             description={t('privacySettings.autoFilterDesc') || 'Automatically filter inappropriate content'}
-                            rightElement={<Switch value={settings.autoFilter} onValueChange={() => toggle('autoFilter')} disabled={isSaving} />}
+                            rightElement={<Switch checked={settings.autoFilter} onCheckedChange={() => toggle('autoFilter')} disabled={isSaving} />}
                             showChevron={false}
                         />
                         <SettingsListItem
                             icon={<SettingsIcon name="volume-off" color={bloomTheme.colors.info} />}
                             title={t('privacySettings.muteKeywords') || 'Mute Keywords'}
                             description={t('privacySettings.muteKeywordsDesc') || 'Hide posts containing muted keywords'}
-                            rightElement={<Switch value={settings.muteKeywords} onValueChange={() => toggle('muteKeywords')} disabled={isSaving} />}
+                            rightElement={<Switch checked={settings.muteKeywords} onCheckedChange={() => toggle('muteKeywords')} disabled={isSaving} />}
                             showChevron={false}
                         />
                         <SettingsListItem
                             icon={<SettingsIcon name="cellphone-screenshot" color={bloomTheme.colors.secondary} />}
                             title={t('privacySettings.blockScreenshots') || 'Block Screenshots'}
                             description={t('privacySettings.blockScreenshotsDesc') || 'Prevent screenshots of your content'}
-                            rightElement={<Switch value={settings.blockScreenshots} onValueChange={() => toggle('blockScreenshots')} disabled={isSaving} />}
+                            rightElement={<Switch checked={settings.blockScreenshots} onCheckedChange={() => toggle('blockScreenshots')} disabled={isSaving} />}
                             showChevron={false}
                         />
                     </SettingsListGroup>
@@ -332,7 +332,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                     {/* Blocked Users */}
                     <SettingsListGroup title={t('privacySettings.sections.blockedUsers') || 'BLOCKED USERS'}>
                         {isLoadingUsers ? (
-                            <Loading size="small" color={bloomTheme.colors.text} />
+                            <Loading size="sm" color={bloomTheme.colors.text} />
                         ) : blockedUsers.length === 0 ? (
                             <Text className="text-text-secondary text-center p-space-40">
                                 {t('privacySettings.noBlockedUsers') || 'No blocked users'}
@@ -349,7 +349,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                                         rightElement={
                                             <Button
                                                 appearance="solid" tone="danger"
-                                                size="small"
+                                                size="sm"
                                                 onPress={() => handleUnblock(userId)}
                                             >
                                                 {t('privacySettings.unblock') || 'Unblock'}
@@ -365,7 +365,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                     {/* Restricted Users */}
                     <SettingsListGroup title={t('privacySettings.sections.restrictedUsers') || 'RESTRICTED USERS'}>
                         {isLoadingUsers ? (
-                            <Loading size="small" color={bloomTheme.colors.text} />
+                            <Loading size="sm" color={bloomTheme.colors.text} />
                         ) : restrictedUsers.length === 0 ? (
                             <Text className="text-text-secondary text-center p-space-40">
                                 {t('privacySettings.noRestrictedUsers') || 'No restricted users'}
@@ -383,7 +383,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                                         rightElement={
                                             <Button
                                                 appearance="subtle" tone="neutral"
-                                                size="small"
+                                                size="sm"
                                                 onPress={() => handleUnrestrict(userId)}
                                             >
                                                 {t('privacySettings.unrestrict') || 'Unrestrict'}

package/src/ui/screens/ProfileScreen.tsx

@@ -210,7 +210,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                         {isOwnProfile ? (
                             <Button
                                 appearance="subtle" tone="neutral"
-                                size="small"
+                                size="sm"
                                 onPress={() => navigate?.('ManageAccount')}
                             >
                                 {t('editProfile.title') || 'Edit Profile'}

package/src/ui/screens/SearchSettingsScreen.tsx

@@ -70,7 +70,7 @@ const SearchSettingsScreen: React.FC<BaseScreenProps> = ({
     if (isLoading) {
         return (
             <>
-                <Loading size="large" color={bloomTheme.colors.text} />
+                <Loading size="lg" color={bloomTheme.colors.text} />
             </>
         );
     }
@@ -92,8 +92,8 @@ const SearchSettingsScreen: React.FC<BaseScreenProps> = ({
                             description={t('searchSettings.safeSearch.description') || 'Filter out explicit content from search results'}
                             rightElement={
                                 <Switch
-                                    value={settings.safeSearch}
-                                    onValueChange={() => toggle('safeSearch')}
+                                    checked={settings.safeSearch}
+                                    onCheckedChange={() => toggle('safeSearch')}
                                     disabled={isSaving}
                                 />
                             }
@@ -114,8 +114,8 @@ const SearchSettingsScreen: React.FC<BaseScreenProps> = ({
                             description={t('searchSettings.personalization.description') || 'Use your activity to improve search results'}
                             rightElement={
                                 <Switch
-                                    value={settings.searchPersonalization}
-                                    onValueChange={() => toggle('searchPersonalization')}
+                                    checked={settings.searchPersonalization}
+                                    onCheckedChange={() => toggle('searchPersonalization')}
                                     disabled={isSaving}
                                 />
                             }

package/src/ui/screens/UserListScreen.tsx

@@ -172,7 +172,7 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
               </Text> : null}
               {description ? <Text className="text-text-secondary text-sm mt-space-4" numberOfLines={2}>{description}</Text> : null}
             </View>} />
-          {!isCurrentUser && itemUserId ? <FollowButton userId={itemUserId} size="small" /> : null}
+          {!isCurrentUser && itemUserId ? <FollowButton userId={itemUserId} size="sm" /> : null}
         </View>
       );
     },

package/src/ui/screens/WelcomeNewUserScreen.tsx

@@ -182,10 +182,10 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: User }> = ({
         if (currentStep === totalSteps - 1) {
             return (
                 <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                    <Button appearance="subtle" tone="neutral" onPress={prevStep} size="small">
+                    <Button appearance="subtle" tone="neutral" onPress={prevStep} size="sm">
                         {t('welcomeNew.actions.back') || 'Back'}
                     </Button>
-                    <Button appearance="solid" tone="accent" onPress={finish} size="small">
+                    <Button appearance="solid" tone="accent" onPress={finish} size="sm">
                         {t('welcomeNew.actions.enter') || 'Enter'}
                     </Button>
                 </View>
@@ -195,11 +195,11 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: User }> = ({
             return (
                 <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
                     {avatarStepIndex > 0 && (
-                        <Button appearance="subtle" tone="neutral" onPress={skipToAvatar} size="small">
+                        <Button appearance="subtle" tone="neutral" onPress={skipToAvatar} size="sm">
                             {t('welcomeNew.actions.skip') || 'Skip'}
                         </Button>
                     )}
-                    <Button appearance="solid" tone="accent" onPress={nextStep} size="small">
+                    <Button appearance="solid" tone="accent" onPress={nextStep} size="sm">
                         {t('welcomeNew.actions.next') || 'Next'}
                     </Button>
                 </View>
@@ -208,10 +208,10 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: User }> = ({
         if (nameStepIndex >= 0 && currentStep === nameStepIndex) {
             return (
                 <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                    <Button appearance="subtle" tone="neutral" onPress={prevStep} size="small">
+                    <Button appearance="subtle" tone="neutral" onPress={prevStep} size="sm">
                         {t('welcomeNew.actions.back') || 'Back'}
                     </Button>
-                    <Button appearance="solid" tone="accent" onPress={submitName} size="small" disabled={!firstName.trim() || savingName} loading={savingName}>
+                    <Button appearance="solid" tone="accent" onPress={submitName} size="sm" disabled={!firstName.trim() || savingName} loading={savingName}>
                         {t('welcomeNew.actions.continue') || 'Continue'}
                     </Button>
                 </View>
@@ -220,10 +220,10 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: User }> = ({
         if (step.showAvatar) {
             return (
                 <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                    <Button appearance="subtle" tone="neutral" onPress={prevStep} size="small">
+                    <Button appearance="subtle" tone="neutral" onPress={prevStep} size="sm">
                         {t('welcomeNew.actions.back') || 'Back'}
                     </Button>
-                    <Button appearance="solid" tone="accent" onPress={nextStep} size="small">
+                    <Button appearance="solid" tone="accent" onPress={nextStep} size="sm">
                         {avatarUri ? (t('welcomeNew.actions.continue') || 'Continue') : (t('welcomeNew.actions.skip') || 'Skip')}
                     </Button>
                 </View>
@@ -231,10 +231,10 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: User }> = ({
         }
         return (
             <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                <Button appearance="subtle" tone="neutral" onPress={prevStep} size="small">
+                <Button appearance="subtle" tone="neutral" onPress={prevStep} size="sm">
                     {t('welcomeNew.actions.back') || 'Back'}
                 </Button>
-                <Button appearance="solid" tone="accent" onPress={nextStep} size="small">
+                <Button appearance="solid" tone="accent" onPress={nextStep} size="sm">
                     {t('welcomeNew.actions.next') || 'Next'}
                 </Button>
             </View>
@@ -296,7 +296,7 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: User }> = ({
                                 placeholderColor={`${colors.primary}20`}
                                 style={styles.avatar}
                             />
-                            <Button appearance="solid" tone="accent" size="small" onPress={openAvatarPicker}>
+                            <Button appearance="solid" tone="accent" size="sm" onPress={openAvatarPicker}>
                                 {avatarUri ? (t('welcomeNew.avatar.change') || 'Change Avatar') : (t('welcomeNew.avatar.add') || 'Add Avatar')}
                             </Button>
                         </View>

package/src/ui/screens/fileManagement/UploadBar.tsx

@@ -23,7 +23,7 @@ const UploadBar: React.FC<UploadBarProps> = ({ uploadProgress, t }) => (
                         accessibilityLabel={t('fileManagement.uploading')} />
                 ) : null}
             </View>
-            <Loading size="small" />
+            <Loading size="sm" />
         </Card>
     </View>
 );

package/src/ui/screens/trust/TrustCenterScreen.tsx

@@ -70,7 +70,7 @@ const TrustCenterScreen: React.FC<BaseScreenProps> = ({
     if (isLoading) {
         return (
                 <View className="items-center py-space-40">
-                    <Loading size="large" color={primaryColor} />
+                    <Loading size="lg" color={primaryColor} />
                 </View>
         );
     }

package/src/ui/screens/trust/TrustRulesScreen.tsx

@@ -70,7 +70,7 @@ const TrustRulesScreen: React.FC<BaseScreenProps> = () => {
     return (
         <>
             {isLoading ? (
-                <Loading size="large" color={bloomTheme.colors.primary} />
+                <Loading size="lg" color={bloomTheme.colors.primary} />
             ) : error ? (
                 <Text className="text-text-secondary text-base text-center px-screen-margin pt-space-40">
                     {error}