[Feature]: Shadows behind items

[sayyid5416]

Adding shadows behind items will enhance the visual appearance of whole app.

[fast4x]

Example in songs list?

[sayyid5416]

Example

Behind:

• Mini player
• navigation bar
• New action menu which is being discussed in #1419
• Up Icon which appears in songs list to scroll to top

etc

[sayyid5416]

Also behind this bar

[dAtA-TRoN]

Can you provide us an example? I'm just curious. I mean I know what drop shadow is, but I'm interested in the extent you have in mind.

[sayyid5416]

You mean a demo? wait

[dAtA-TRoN]

You mean a demo? wait

Like shown here?

https://github.com/fast4x/RiMusic/assets/71184627/365665e3-d8bb-4b1f-91ed-000d07133256

[sayyid5416]

Current (without shadow)

New (with shadow)

btw, Shadow could be refined more. It was made using photoshop in a hurry

[dAtA-TRoN]

Fantastic idea. This will dramatically improve the design of the app 👍🏼.

[sayyid5416]

• I already sent idea for bottom navigation above
• I'm sending few ideas for side navigation bar (obviously they need to be refined later)

IDEA 1

[sayyid5416]

IDEA 2

[AnyoneMouse]

IDEA 2

I like this one.

[dAtA-TRoN]

I anticipated you would approach it that way: The bottom bar looks quite sleek, but I find the sidebar to be somewhat peculiar. Initially, my sidebar mirrored yours in length, extending across the entire screen edge. However, I began to feel it appeared somewhat awkward, emphasizing the unused space. Consequently, I chose to shorten its display, as you've seen. Furthermore, I'm of the opinion that it shouldn't remain solely white (perhaps in the light theme). It was essential to me that the bar distinctly contrasts with the other buttons, not solely through a line, as users must immediately recognize it as the main navigation.

And how do you envision this drop shadow style within the black and pitch-black theme?

[dAtA-TRoN]

IDEA 2

Oh f*ck, it actually works 😂. I imagined this whole thing would look kind of dumb. But hey, I love it!

This one looks way better than idea 1.

Off topic: And now imagine if you could also adjust the height of this bar (or at least choose between top left or bottom left/ top right or bottom right), hide and show the icons, and rearrange them. That would be fantastic 😁.

[sayyid5416]

See.... you like it. I knew it 😏

[sayyid5416]

Regarding dark mode and pitch black mode: Drop shadow works with them too, you just need to modify the shadow color, blur, and opacity a little bit.

[dAtA-TRoN]

Please make a Mockup on this. Because we still have to sell it to fast4x 👀.

[sayyid5416]

IDEA 2 - Dark mode

Shadow got too harsh (you got the idea btw)

[dAtA-TRoN]

Cool cool, but black & pitch black are the true end bosses here.

[AnyoneMouse]

IDEA 2 - Dark mode

Shadow got too harsh (you got the idea btw)

I think the edges should be bright instead.

[AnyoneMouse]

I think the edges should be bright instead.

Not too bright though…

[sayyid5416]

I tried for pitch black, but I'm not master in photoshop - don't know how to create shadow of any color over pure black background.

A greyish shadow would work though I know it.

[sayyid5416]

I think the edges should be bright instead.

Not too bright though…

All these things can be fine tuned programmatically, these images are just for rough idea.

[AnyoneMouse]

I think the edges should be bright instead.

Not too bright though…

All these things can be fine tuned programmatically, these images are just for rough idea.

Got it

[sayyid5416]

I tried to create a very big yellow shadow (to test), but no color is working in photoshop over pure black.

There would be a way but I think its not worth it to learn that now 🤷‍♂️

[dAtA-TRoN]

I tried to create a very big yellow shadow (to test), but no color is working in photoshop over pure black.

There would be a way but I think its not worth it to learn that now 🤷‍♂️

Alternatively, the black and pitch-black themes simply remain flat, without a drop shadow because where there is no light, there is no shadow either 🤷🏻‍♂️.

[sayyid5416]

I tried to create a very big yellow shadow (to test), but no color is working in photoshop over pure black.

There would be a way but I think its not worth it to learn that now 🤷‍♂️

Alternatively, the black and pitch-black themes simply remain flat, without a drop shadow because where there is no light, there is no shadow either 🤷🏻‍♂️.

Well, That's another approach

[sayyid5416]

@fast4x I just noticed there is a shadow behind the top context hamburger menu. Can that be implemented in these areas?

[fast4x]

i think not