microsoft / react-native-gallery

This repo contains the react-native Gallery app created by Microsoft
MIT License
130 stars 41 forks source link

Rejuvenate visuals to match current WinUI gallery #405

Open chrisglein opened 3 months ago

chrisglein commented 3 months ago

When React Native Gallery was created, it was before the WinUI gallery had experienced a significant visual rejuvenation. We should be able to show the same class of visuals with a bit of effort. Here are the high impact items I can identify.

Splash image and set of useful links

image Many of these are just as relevant within RN Gallery

Recently added/updated

image image

Design guidance

image

Control group subpages (with full color icons in page view)

image image

Contrast with RN Gallery which has groups only on the main page, and the icons are monochromatic: image

Work in progress snack to get started: https://snack.expo.dev/4NjQuP5ias-bJa04RLYIk?platform=web https://snack.expo.dev/wvKq-kD7PqlROjiiiswqx?platform=web

## Tasks
- [x] Add splash image to home page
- [x] Add list container for useful links
- [x] Add link to Getting started (https://aka.ms/reactnative)
- [x] Windows design (https://learn.microsoft.com/en-us/windows/apps/design/_)
- [x] Github (https://github.com/microsoft/react-native-windows/)
- [ ] Template Studio (https://marketplace.visualstudio.com/items?itemName=TemplateStudio.TemplateStudioForUWP)
- [x] Code samples (https://github.com/microsoft/react-native-windows-samples/)
- [x] Partner Center (https://developer.microsoft.com/en-us/windows/)
- [ ] https://github.com/microsoft/react-native-gallery/issues/433
- [ ] https://github.com/microsoft/react-native-gallery/issues/434
- [x] Replace monochromatic icons with full color icons (can take from https://github.com/microsoft/WinUI-Gallery/tree/main/WinUIGallery/Assets/ControlImages)
- [ ] https://github.com/microsoft/react-native-gallery/issues/435
- [x] Reshuffle groups to better align with WinUI gallery's grouping as appropriate (e.g. add Collections and move FlatList and friends into that)
- [ ] https://github.com/microsoft/react-native-gallery/issues/437
- [x] Code examples have a copy button
- [ ] https://github.com/microsoft/react-native-gallery/issues/216
- [x] Add indicator for new/updated samples
- [ ] https://github.com/microsoft/react-native-gallery/issues/436
- [x] Update readme image https://github.com/microsoft/react-native-gallery/blob/main/README.md
chrisglein commented 2 months ago

In checking dark mode with the rejuvenated home screen, I've also noticed some gaps in the existing code example implementation:

Before image

After image

Note added copy buttons.

chrisglein commented 2 months ago

As long as we're adding clipboard as a dependency, we should have a clipboard example:

image Compare to WinUI gallery's similar clipboard sample: image

chrisglein commented 2 months ago

And since linear gradient was needed for the home page, can create a sample for it too: image

chrisglein commented 2 months ago

With all merged (and a couple active) PRs:

Light mode https://github.com/microsoft/react-native-gallery/assets/26607885/0b2b1a1e-5b67-491d-a0c5-dd025e16ea8f

Dark mode https://github.com/microsoft/react-native-gallery/assets/26607885/65e8ff34-a319-48b0-a3ec-75d186cf20df

chrisglein commented 2 months ago

With all the stuff merged so far: image