Added boxShadow attribute to DevicePage to add a shadow to bottom nav.

airpartners / aq-web-client

Web app for end-users.

https://airpartners-ade.web.app/

2 stars 0 forks source link

Added boxShadow attribute to DevicePage to add a shadow to bottom nav. #32

Closed anushadatar closed 3 years ago

anushadatar commented 3 years ago

Addressed issue 14 by adding a boxShadow attribute to the styles section associated with the bottom navigation bar on DevicePage so that the layer height of the bottom navigation bar is self evident. I decided to use a 1px width on the bar to try to match the top gutter, but I am open to making changes if others prefer other widths.

Here's a screenshot with the new boxShadow: https://gyazo.com/e8edf08d6e22816301c0dfcffc904dc7. Here's one with 2px boxShadow, which I decided against in favor of 1px: https://gyazo.com/bcfe37a8e056fd0416bfd97c5c02327a

minhkhang1795 commented 3 years ago

I think the first number should be 0px instead of 16px so that it doesn't shift to the right? boxShadow: "16px -1px 28px rgba(0,0,0,0.25)", Besides that everything looks good :D

I also tried with this one, which is the current box shadow of the top bar, and it looks like the one below. We can choose whichever.

0px 2px 4px -1px rgba(0,0,0,0.2), 
0px 4px 5px 0px rgba(0,0,0,0.14), 
0px 1px 10px 0px rgba(0,0,0,0.12)

anushadatar commented 3 years ago

The last option lgtm, thanks Khang!

New screenshot: https://gyazo.com/e39dbc4ba2ee9c735a9c7ae46fdd0c09