UI4: Modal Post-Migration Fixes #4718

Jon-edge · 2024-01-16T23:37:55Z

iOS (left) and small screen Android (right):

We need a redesign for FlipInput. Empty title whitespace, but moving the inner card up would make weird margins with the close button if it were on the top corner of the card

CHANGELOG

Does this branch warrant an entry to the CHANGELOG?

Yes
No

Dependencies

none

Requirements

If you have made any visual changes to the GUI. Make sure you have:

Tested on iOS device
Tested on Android device
Tested on small-screen device (iPod Touch)
Tested on large-screen device (tablet)

To see the specific tasks where the Asana app for GitHub is being used, see below:
- https://app.asana.com/0/0/1206340123332862

src/components/ui4/ModalUi4.tsx

src/components/themed/ModalParts.tsx

swansontec · 2024-01-17T23:47:19Z

src/components/modals/ButtonsModal.tsx

+    justifyContent: 'space-between',
+    alignSelf: 'center', // Shrink view around buttons
+    alignItems: 'stretch', // Stretch our children out
+    flexDirection: 'column'


Not needed, since the "column" direction is already the default.

swansontec · 2024-01-17T23:49:20Z

src/components/modals/ButtonsModal.tsx


-          return <MainButton key={key} label={label} marginRem={0.5} type={type} onPress={handlePress} />
-        })}
+            return <MainButton key={key} label={label} marginRem={0.25} type={type} onPress={handlePress} layout="column" />


Why not use ButtonUi4 directly, and avoid having to hack MainButton?

I wanted to avoid the rename of escape to tertiary, but you're right that's probably better since we barely use that button type in this modal.

Ok, we can do it later then.

src/components/modals/PasswordReminderModal.tsx

Jon-edge · 2024-01-18T01:31:32Z

src/components/modals/ConfirmContinueModal.tsx

-            </View>
+    <ModalUi4
+      bridge={bridge}
+      warning={warning}


I was unable to get the corner of the yellow border to round on iOS...

Jon-edge · 2024-01-18T01:35:02Z

src/components/modals/PasswordReminderModal.tsx

-        {
-          // Hack around the Android keyboard glitch:
-          Platform.OS === 'android' ? <View style={{ flex: 1 }} /> : null
-        }
        <ButtonsViewUi4


Hack not needed. Keyboard is fine on Android on a small screen

Jon-edge · 2024-01-18T01:35:17Z

src/components/modals/PasswordReminderModal.tsx

-          <ModalMessage>{lstrings.password_reminder_enter_password_below}</ModalMessage>
-        </ScrollView>
+      <ModalUi4 bridge={bridge} title={lstrings.password_reminder_remember_your_password} onCancel={this.handleCancel}>
+        <ModalMessage>{lstrings.password_reminder_you_will_need_your_password}</ModalMessage>


No need for a scrollview here, looks fine on a small Android.

Jon-edge

Added some comments in this PR

swansontec

Some small stuff we can hit post-staging if needed, but let's get this in.

swansontec · 2024-01-18T05:43:53Z

src/components/modals/WalletListModal.tsx

@@ -220,59 +220,60 @@ export function WalletListModal(props: Props) {
  // #endregion Renderers

  return (
-    <ThemedModal bridge={bridge} onCancel={handleCancel}>
-      <ModalTitle center>{headerTitle}</ModalTitle>
+    <ModalUi4


We might need to port the WalletList to use a FlatList from react-native-gesture-handler. When I tried this last week the list was not scrollable.

It's scrollable right now. The trick was to let the modal deal with the scroll directly.

swansontec · 2024-01-18T05:46:25Z

src/components/modals/ListModal.tsx

@@ -72,7 +72,7 @@ export function ListModal<T>({
  return (
    <ModalUi4 title={title} bridge={bridge} onCancel={handleCancel}>
      {message == null ? null : <ModalMessage>{message}</ModalMessage>}
-      {textInput == null ? null : (
+      {textInput == null || !textInput ? null : (


Since textInput has a default value up above, it will never be null. You can simply remove the == null check.

- Fix blur positioning for fullscreen modals - Remove extra view for rounding BlurView bounds - Remove extra view around non-scrolling children. This allows `flex: 1` children without a modal-wide scroll to work as they did before. - Move title handling into the modal itself.

This is an interim quick fix before we just fully remove dependencies on ModalParts. There's no need to retain anything from ModalParts anymore once fully migrated to UI4 - they weren't really doing anything special to begin with.

Quick hack fix to kind of obtain the result of ButtonsViewUi4 with consistent button widths. An additional audit will need to be performed to determine which buttons should be primary/secondary/tertiary before we can migrate them to ButtonsViewUi4 and enforce our rule of not having multiple buttons of the same type in a column layout.

Some modals have inconsistent centered titles and this change unifies them all. Making this change will allow us to easily center all titles later if that's what we prefer.

Needs a redesign. We have a bunch of empty title space here, and at the same time we can't push the FlipInput card all the way up there because then the X button would have weird alignment over the inner FlipInput card

- Use more UI4 - Add modal tests

Jon-edge force-pushed the jon/ui4/fix/modals branch 8 times, most recently from 0ce9fad to b7f0224 Compare January 17, 2024 23:37

swansontec requested changes Jan 18, 2024

View reviewed changes

Jon-edge force-pushed the jon/ui4/fix/modals branch from 7230d23 to 4f746c6 Compare January 18, 2024 01:29

Jon-edge commented Jan 18, 2024

View reviewed changes

Jon-edge force-pushed the jon/ui4/fix/modals branch from 4f746c6 to 3e2e7f6 Compare January 18, 2024 01:34

Jon-edge commented Jan 18, 2024

View reviewed changes

swansontec approved these changes Jan 18, 2024

View reviewed changes

Jon-edge force-pushed the jon/ui4/fix/modals branch 4 times, most recently from 5df29c8 to bcd561b Compare January 18, 2024 19:13

Jon-edge enabled auto-merge January 18, 2024 19:13

Jon-edge disabled auto-merge January 18, 2024 19:16

Jon-edge added 8 commits January 18, 2024 11:47

Partially "nuggetize" ModalParts

c4a268c

This is an interim quick fix before we just fully remove dependencies on ModalParts. There's no need to retain anything from ModalParts anymore once fully migrated to UI4 - they weren't really doing anything special to begin with.

Pull ModalTitle into the title prop of Ui4

e33c647

Some modals have inconsistent centered titles and this change unifies them all. Making this change will allow us to easily center all titles later if that's what we prefer.

Restyle FlipInputModal2

9091469

Needs a redesign. We have a bunch of empty title space here, and at the same time we can't push the FlipInput card all the way up there because then the X button would have weird alignment over the inner FlipInput card

Restyle WalletListMenuModal

b73cb15

Restyle ConfirmContinueModal

f0285fe

Restyle PasswordReminderModal

49c3a2c

Jon-edge added 6 commits January 18, 2024 11:47

Pull in changes from LoginUi to shrink tertiary button bounds

6795cc4

Restyle InsufficientFeesModal

beb9473

Restyle WalletListModal

dfbd08b

Update InputTesterScene

17b4100

- Use more UI4 - Add modal tests

Restyle HelpModal

4bca52f

Remove Search from FiatListModal

28f261c

Jon-edge force-pushed the jon/ui4/fix/modals branch from bcd561b to 28f261c Compare January 18, 2024 19:47

Jon-edge enabled auto-merge January 18, 2024 19:48

Jon-edge merged commit 93c0faf into develop Jan 18, 2024
2 checks passed

Jon-edge deleted the jon/ui4/fix/modals branch January 18, 2024 19:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI4: Modal Post-Migration Fixes #4718

UI4: Modal Post-Migration Fixes #4718

Jon-edge commented Jan 16, 2024 •

edited

Loading

swansontec Jan 17, 2024

swansontec Jan 17, 2024

Jon-edge Jan 18, 2024 •

edited

Loading

swansontec Jan 18, 2024

Jon-edge Jan 18, 2024 •

edited

Loading

Jon-edge Jan 18, 2024

Jon-edge Jan 18, 2024

Jon-edge left a comment

swansontec left a comment

swansontec Jan 18, 2024

Jon-edge Jan 18, 2024

swansontec Jan 18, 2024

UI4: Modal Post-Migration Fixes #4718

UI4: Modal Post-Migration Fixes #4718

Conversation

Jon-edge commented Jan 16, 2024 • edited Loading

CHANGELOG

Dependencies

Requirements

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jon-edge Jan 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jon-edge Jan 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jon-edge left a comment

Choose a reason for hiding this comment

swansontec left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jon-edge commented Jan 16, 2024 •

edited

Loading

Jon-edge Jan 18, 2024 •

edited

Loading

Jon-edge Jan 18, 2024 •

edited

Loading