Beautiful Design App

Project Showcase
607

Releasing this beast thanks to @Lucas_Pires’ code for having custom tab icons.

The tab icon here has 4 states:

  • Not chosen (not the notifications tab), no unread notifications: Grey bell
  • Chosen (viewing notifications tab), no unread notifications: Violet bell
  • Not chosen, at least 1 unread: Grey bell with red dot
  • Chosen, at least 1 unread: Violet bell with red dot

Pros: Look cool, can use this idea as a base to notify people of something that needs their attention.

Cons: Have to put this code (wrapped behind 2 If Then Else columns) in every damn single details view for it to work correctly, and configure the correct flow + user journey for it to work. I imagine it would be easier if I don’t want a dynamic icon, but knowing if the user is viewing the notifications tab or not is already hard.

Cloudinary links for these images:

https://res.cloudinary.com/[yourusername]/image/fetch/e_colorize,co_rgb:999999/https://i.imgur.com/hiZuvbA.png

https://res.cloudinary.com/[yourusername]/image/fetch/e_colorize,co_rgb:2E3192/https://i.imgur.com/hiZuvbA.png

https://res.cloudinary.com/[yourusername]/image/fetch/l_fetch:aHR0cHM6Ly9pLmltZ3VyLmNvbS8ycXhHNjhZLnBuZw==,w_150,h_150,x_100,y_-100/https://i.imgur.com/EE9kLeN.png

https://res.cloudinary.com/[yourusername]/image/fetch/l_fetch:aHR0cHM6Ly9pLmltZ3VyLmNvbS8ycXhHNjhZLnBuZw==,w_150,h_150,x_100,y_-100/https://i.imgur.com/rIPOE9q.png

This was documented in our Notion:

Hope this helps @Robert_Petitto @Jeff_Hager @Darren_Murphy and all others.

15 Likes