New design system #3645
Comments
mergify bot
pushed a commit
that referenced
this issue
May 6, 2020
### Description create versions of colors, fonts, and Button for the Mobile Redesign ### Other changes While much of the existing interface remains, I removed the standard prop and added an optional size prop. I believe this is justified as it wasn't clear what standard meant. ### Tested I copied the existing test for Button, pointed it to v2 version and all the test passed. then because it was using `enzyme` i rewrote it to use `testing library` ### iOS  ### Android  ### Related issues - Fixes #3645 ### Backwards compatibility no removed `standard` prop
|
This is a good start, we should just be aware that there will be things in progress and that we might complete part of these |
|
I've detailed some bullets and added |
mergify bot
pushed a commit
that referenced
this issue
May 15, 2020
### Description This adds/updates the following elements on the Home screen with the new design: - Transaction feed - Send/Request bar at the bottom I've left the settings on the right and balance at the top until we can add the drawer menu. Also `Avatar` is the old one. Next steps: - Transaction drilldown - Notification panel - Send/Request flow - Animate hide/show of Send/Request bottom bar as the user scrolls ### Other changes - Fix visual glitch in the nav bar when scrolling down at the beginning of the home screen. ### Tested <img src="https://user-images.githubusercontent.com/57791/81957823-6b782a80-960d-11ea-9b2b-77570f1e0c62.png" width="50%" /><img src="https://user-images.githubusercontent.com/57791/81960473-4c7b9780-9611-11ea-83f9-22455d596ed7.png" width="50%" /> ### Related issues - Epic #3645 ### Backwards compatibility Yes.
mergify bot
pushed a commit
that referenced
this issue
May 15, 2020
### Description Back when `Button.v2` came out It used `TouchableOpacity` as i couldn't get it to keep the ripple affect inside the curves, instead it ignored them, but not in a cool way. it stoped on the square edge, which looked super tacky. but no more! Now it does it the right way. rippling to the curvaceous border and no further ### Other changes renames `colorsEnum` to `Colors` ### Tested confirmed it looks right ### Related issues - Epic #3645 ### Backwards compatibility might have some merge issue with the colorsEnum change but hopefully worth it
This was referenced May 21, 2020
mergify bot
pushed a commit
that referenced
this issue
May 22, 2020
### Description This implements the Notifications redesign. Note: `Avatar` used is the old one. Copies and icons are not entirely final. Next steps: - Transaction drilldown - Send/Request flow - Animate hide/show of Send/Request bottom bar as the user scrolls ### Other changes - Added a generic `Card` component with shadow and optional rounded corners ### Tested Some screenshots (though there are more variations). **`<SimpleMessagingCard />`** <img src="https://user-images.githubusercontent.com/57791/82349558-8d512300-99fa-11ea-89ae-7b68dbc6eb24.png" width="50%" /><img src="https://user-images.githubusercontent.com/57791/82350053-24b67600-99fb-11ea-90af-4054449fa035.png" width="50%" /> **`<RequestMessagingCard />`** <img src="https://user-images.githubusercontent.com/57791/82350180-4f083380-99fb-11ea-8579-8b44614c76e3.png" width="50%" /><img src="https://user-images.githubusercontent.com/57791/82350208-57606e80-99fb-11ea-81cd-52e8f82ef181.png" width="50%" /> **`<AggregatedRequestsMessagingCard />`** <img src="https://user-images.githubusercontent.com/57791/82350954-42d0a600-99fc-11ea-8a7a-884479f323f0.png" width="50%" /><img src="https://user-images.githubusercontent.com/57791/82351946-90014780-99fd-11ea-876a-c5a48ae28db4.png" width="50%" /> **Screens** Navigation bar is currently broken with the update to `react-navigation` v5. Will update soon. <img src="https://user-images.githubusercontent.com/57791/82350901-32b8c680-99fc-11ea-9b2a-4b163a09cdfd.png" width="50%" /><img src="https://user-images.githubusercontent.com/57791/82352003-a7d8cb80-99fd-11ea-94c1-fe4adfb7f107.png" width="50%" /> ### Related issues - Epic #3645 ### Backwards compatibility Yes.
mergify bot
pushed a commit
that referenced
this issue
Jun 24, 2020
### Description Implements new search text input https://www.figma.com/file/zt7aTQ5wuXycIwxq5oAmF9/Wallet--Refresh?node-id=986%3A4151 ### Other changes * Fix flickering of hamburger icon to 1px top/bottom when scrolling * Remove Invite screen from drawer menu * Fix incorrect error message on PinCode Screen ### Tested Android and iPhone ### Related issues - Related to #3645 ### Backwards compatibility Yes ### Screenshots  
mergify bot
pushed a commit
that referenced
this issue
Jun 25, 2020
### Description Redesign of ImportContactsScreen ### Other changes Refactored to use hooks ### Tested Yes ### Related issues Part of #3645 Closes #4178 ### Backwards compatibility Yes    
mergify bot
pushed a commit
that referenced
this issue
Jun 25, 2020
### Description Redesigning Account Key screen in onboarding https://www.figma.com/file/zt7aTQ5wuXycIwxq5oAmF9/Wallet--Refresh?node-id=5404%3A440. I've straggled to make multiline input to work as expected on both platform, when `placeholder` is multiline, but no luck. So I've decided to use short placeholder for now and later come back to this problem. This means, that instead of full 24 words as a placeholder you would see only a first couple of them followed by `...` (see Screenshots) ### Tested Android and iPhone ### Related issues - Related to #3645 ### Backwards compatibility Yes ### Screenshots    
mergify bot
pushed a commit
that referenced
this issue
Jun 25, 2020
### Description - Fix insufficient fund error briefly shown while fetching the balance after enter the invide code - Hide back button when no back action is possible - Tweak VerificationLoadingScreen and Interstitial with new colors and fonts - Update onboarding colors from latest design changes - Fix nav bar visible in the onboarding success screen ### Tested Yes ;-) ### Related issues - #3645 - Fixes #4164 ### Backwards compatibility Yes
jeanregisser
added a commit
that referenced
this issue
Jun 30, 2020
### Description Gave some love to the Android app ❤️💅 Highlights: - Make the status bar transparent - Feels much nicer - Replace `react-native-safe-area-view` by an upgrade to `react-native-safe-area-context` which now has a native `SafeAreaView`. Previous implementation relied on `onLayout` on the JS side which caused a 2nd render to make it work. Also new implementation correctly works with Android devices with a notch. - Fix splash screen layout and transition - It now draws under the status bar like the rest of the app - Fix default app theme preview briefly shown before our own splash screen - Fix unreadable navigation bar (Back, Home, Tasks) on Android < Oreo Note: - Using a transparent status bar changes the window `adjustResize` behaviour and doesn't resize it anymore (I believe this is to prevent background image appearing differently when the keyboard is up). `KeyboardSpacer` view is now rendered on Android too. ### Tested **New launch transition (Android Pie, API 28)**  **Previous launch transition (Android Pie, API 28)**  **Enter invite code (Android Marshmallow, API 23), before/after** <img src="https://user-images.githubusercontent.com/57791/86004702-f3769000-ba13-11ea-8c92-8e3880793711.png" width="50%" /><img src="https://user-images.githubusercontent.com/57791/86004848-2a4ca600-ba14-11ea-888a-d4cb95a38187.png" width="50%" /> **Enter invite code (Android Pie, API 28), before/after** <img src="https://user-images.githubusercontent.com/57791/86004940-46504780-ba14-11ea-8f02-6b123bdf9ca7.png" width="50%" /><img src="https://user-images.githubusercontent.com/57791/86005003-5cf69e80-ba14-11ea-961b-74c1bb15c815.png" width="50%" /> **Dialog (Android Marshmallow, API 23), before/after** <img src="https://user-images.githubusercontent.com/57791/86005091-77c91300-ba14-11ea-956b-e4b9cda21058.png" width="50%" /><img src="https://user-images.githubusercontent.com/57791/86005140-86172f00-ba14-11ea-8bc0-6076d2f42a41.png" width="50%" /> **Dialog (Android Pie, API 28), before/after** <img src="https://user-images.githubusercontent.com/57791/86005203-9cbd8600-ba14-11ea-9873-01ecd74a2da1.png" width="50%" /><img src="https://user-images.githubusercontent.com/57791/86005243-a7781b00-ba14-11ea-96b4-0d4185bdcf0f.png" width="50%" /> **QR scan (Android Marshmallow, API 23), before/after** <img src="https://user-images.githubusercontent.com/57791/86005348-d2626f00-ba14-11ea-99a6-817e894d03af.png" width="50%" /><img src="https://user-images.githubusercontent.com/57791/86005389-e312e500-ba14-11ea-88c6-b392bff88181.png" width="50%" /> **QR scan (Android Pie, API 28), before/after** <img src="https://user-images.githubusercontent.com/57791/86005434-f3c35b00-ba14-11ea-8887-a334240bc003.png" width="50%" /><img src="https://user-images.githubusercontent.com/57791/86005457-f9b93c00-ba14-11ea-98b7-11bc19155454.png" width="50%" /> **Wallet home (Android Marshmallow, API 23), before/after** <img src="https://user-images.githubusercontent.com/57791/86006238-f7a3ad00-ba15-11ea-8533-331dd379ea2c.png" width="50%" /><img src="https://user-images.githubusercontent.com/57791/86006629-8a444c00-ba16-11ea-97a5-668798a75a4d.png" width="50%" /> **Wallet home (Android Pie, API 28), before/after** <img src="https://user-images.githubusercontent.com/57791/86007508-c9bf6800-ba17-11ea-984e-c1c2f57f86b0.png" width="50%" /><img src="https://user-images.githubusercontent.com/57791/86007521-cfb54900-ba17-11ea-8771-7242382523ea.png" width="50%" /> ### Related issues - #3645 - Fixes #2492 ### Backwards compatibility Yes
This was referenced Jun 30, 2020
mergify bot
pushed a commit
that referenced
this issue
Jun 30, 2020
### Description * Remove `ImportWalletEmpty` screen and implement a Dialog instead https://www.figma.com/file/zt7aTQ5wuXycIwxq5oAmF9/Wallet--Refresh?node-id=6490%3A3591 * Fix redundant PIN ask screen during Account Key set-up. * Some small bugfix ### Tested iOS emulator ### Related issues - Related to #3645 - Fix #3679 ### Backwards compatibility Yes
mergify bot
pushed a commit
that referenced
this issue
Jul 1, 2020
### Description Help tab redesign https://www.figma.com/file/zt7aTQ5wuXycIwxq5oAmF9/Wallet--Refresh?node-id=3114%3A34886 ### Tested iOS simulator ### Related issues - Related to #3645 ### Backwards compatibility Yes ### Screenshots  
mergify bot
pushed a commit
that referenced
this issue
Jul 2, 2020
### Description
This implements custom brandings, along with a private branding for Valora.
Custom brandings are held in the `packages/mobiles/branding` folder. There are currently `celo` and `valora` brandings.
The `valora` branding is a private branding, held in a separate repository.
The idea is that each branding can override any of the files in `packages/mobile`.
A custom branding does that by defining the files it wants to override, following the same directory structure as the content of `packages/mobile`.
A postinstall script then rsync items into their final place based on the selected branding.
With this solution, files/assets that are branded need to be git ignored in their final location in the folder structure.
See `packages/mobile/.gitignore`.
By default the valora branding is selected when you run the sync script, it checkouts the private repo, and defaults to the celo branding if checkout fails.
You can manually switch branding:
```
# branding_name can be "valora" or "celo"
$ ./scripts/sync_branding -b branding_name
```
Make sure to select the `celo` branding before running tests to prevent changing snapshots.
The process for updating the private valora branding is as follow:
- make changes in `packages/mobile/branding/valora` and commit and push them to the private repo (master or PR, depending on the extent of the changes, this is very similar to maintaining a git submodule or nom package fork).
- update the `valora_branding_sha` in `packages/mobile/scripts/sync_branding.sh`
We can probably add tooling around this later on. Though these shouldn't change that much.
Note: celo icon is temporarily black because I haven't added an adaptive icon for it yet.
### Other changes
- Brandings can define branding specific config in `src/brandingConfig`, this is for the app name, email support etc...
- Removed hardcoded app name from i18n strings, `{{appName}}` is used instead.
- See valora specific changes (new icon, splash) in the private repo.
- Add `rsync` to `celohq:node10-gcloud:v3` docker image so CircleCI can successfully run `yarn install`
### Tested
Yes ;-)
### Related issues
- #3645
### Backwards compatibility
Yes.
mergify bot
pushed a commit
that referenced
this issue
Jul 3, 2020
### Description This PR adds more branded images and cleans up existing ones. See assets diff: valora-inc/valora-app-branding@eefeea1...d5249be ### Other changes - Branded assets are now being cleaned up in their final destination folder when switching branding. This is to avoid confusion having assets from the previously synced branding laying around unused. - Also now switching to the default celo branding when running test ### Tested Yes ;-) ### Related issues - #3645 ### Backwards compatibility Yes.
mergify bot
pushed a commit
that referenced
this issue
Jul 8, 2020
### Description This PR adds the [onboarding education screen](https://www.figma.com/file/zt7aTQ5wuXycIwxq5oAmF9/Wallet--Refresh?node-id=5404%3A1099). We now also skip the language screen when we can directly detect a supported locale. See assets diff: valora-inc/valora-app-branding@d5249be...8a74a2c ### Tested Updated jest and e2e tests. ### Related issues - #3645 ### Backwards compatibility Yes
mergify bot
pushed a commit
that referenced
this issue
Jul 9, 2020
### Description This PR implements the [onboarding success screen redesign](https://www.figma.com/file/zt7aTQ5wuXycIwxq5oAmF9/Wallet--Refresh?node-id=5592%3A335). This also adds a subtle shadow on iOS to the Valora logo like in the designs. See assets diff: valora-inc/valora-app-branding@8a74a2c...4f414a0 ### Other changes - Fix fast refresh triggered constantly while building android (when both iOS and Android dev apps are running) ### Tested Yes. ### Related issues - #3645 ### Backwards compatibility Yes
|
Are we ready to close this ? @jeanregisser |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://www.figma.com/file/zt7aTQ5wuXycIwxq5oAmF9/Wallet--Refresh?node-id=2930%3A0
Invite (deprecated for now)The text was updated successfully, but these errors were encountered: