Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Redesign of Rooms page #132

Merged
merged 19 commits into from
Oct 17, 2021
Merged

Redesign of Rooms page #132

merged 19 commits into from
Oct 17, 2021

Conversation

blenderskool
Copy link
Owner

Rooms page gets a subtle refresh! ✨

Rooms page is the landing page of Blaze PWA, and it finally gets a subtle design refresh along with more options to better navigate Blaze. Prominent changes are as follows:

  • A welcome greeting at the top based on user's nickname.
  • Install button that triggers PWA installation flow on the device they are on.
    Shown only if PWAs are supported on the device and Blaze is not currently installed.
  • Each room shows the last-joined time by the user.
    This data is also stored locally in the user's device.
  • Navigation(Bottom tabs on mobile) for other new pages being added in Blaze v3.

There are a bunch of other non-prominent changes such as:

  • Addition of new shades of the Blaze primary color to our palette.
  • Styling improvements to existing components.
  • Codebase structure improvements allowing for component-level scoped SCSS, and reduced clashing.

Mobile

Desktop

@blenderskool
Configure scoped css
c43cd97 
Components are updated to use scoped css
@blenderskool
Add classnames package
17f3888
@blenderskool
Update prop types and class composition
557b983
@blenderskool
Update global button styles
7fd35a6
@blenderskool
Add PWAInstall context to track beforeinstallprompt
7e39f16
@blenderskool
Update z-index of Modal and Toast container
43d2cc3
@blenderskool
Add useLocalStorageSelector hook
c0ba1a2 
This hook can reactively query localStorage data
@blenderskool
Add AppLanding layout
c734b4e
@blenderskool
Add new colors to the palette
efb8d20
@blenderskool
Update recent rooms UI based on new design
d3acd82
@blenderskool
Replace localStorage hooks with react-localstorage-hooks package
0e3650b 
react-localstorage-hooks is a package that is extracted from the
hooks designed in this project. The package adds additional hooks
with improved API and is therefore being used
@blenderskool
Add date-fns and react-localstorage-hooks packages
fcf0089
@blenderskool
Add rooms reducer and last join time of each room
a0f7c85
@blenderskool
Add overflow ellipsis to title
9fdc9fe
@blenderskool
Add localstorage schema updation logic
0fe1f52
@blenderskool
Fix rooms list overflowing on tab nav
5796ea4
@blenderskool
Update last joined messaging
3bffb1a
@blenderskool
Fix equality function
e14de2a
@blenderskool blenderskool added this to the 3.0 milestone Oct 17, 2021
@blenderskool blenderskool merged commit 80b82a0 into 3.0 Oct 17, 2021
@blenderskool blenderskool deleted the rooms-redesign branch October 17, 2021 11:31
@blenderskool blenderskool mentioned this pull request Oct 17, 2021
Closed
14 tasks
@blenderskool blenderskool mentioned this pull request Jan 3, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
3.0
Development

Successfully merging this pull request may close these issues.
1 participant
@blenderskool