search

Mclilzee / zap-simulator

Zap Matrix Simulator
https://mclilzee.github.io/zap-simulator/
Other
4 stars 16 forks source link

Modal redesign #35

Open DigitalKnight0 opened 2 years ago

DigitalKnight0 commented 2 years ago

The current modal looks odd with the rest of the page's design.

Here's the new one that looks a bit better with the color codings in place modal-normal On hovers: modal-hover

DigitalKnight0 commented 2 years ago

@ManonLef

ManonLef commented 2 years ago

I love the updated round borders and this definitely fits in with the overall design better!

Personally I’m not a fan of the shadow effect, but you may feel different. It does increase contrast but that is needed because of that first tier light yellow only and not on the other colors I believe.

If it were me I’d still go for using the colors on the borders of the zap instead or make a new gradient of 5 colors that starts of with a slightly darker color.

For readability purposes I’d also consider increasing the fontsize by 2 and perhaps making it not bold since at these small sizes readability is compromised with bold text.

I’m just saying this from a design perspective. If you agree or somewhat agree I’d happily visually share my alternatives.

update; I 100% agree this is a better solution that the bordered button design. The buttons look way more in line with the overall design now.

DigitalKnight0 commented 2 years ago

@ManonLef I agree that the shadow looks somewhat out of context. As an alternative, i was thinking of adding a slight white shadow that will make the text glow and increase the readability without additional effects. Also, the button's background colors have been dimmed slightly to avoid the sharp yellow.

With that said, please do feel to share your alternative!

Mclilzee commented 2 years ago

The buttons looking great with my new update tho, i made their color also changes depending on the theme :(

DigitalKnight0 commented 2 years ago

@Mclilzee sorry i missed it (because you made no pr lol) but the new design looks great tbh! Screenshot_2022_0218_165202

Could you add the blur as well and we can finally see if everything fits well?

Mclilzee commented 2 years ago

I'll see what i can do

Mclilzee commented 2 years ago

@DigitalKnight0 done, idk how i'm supposed to pull request, when i push it just goes straight to the files since I don't have it forked :bad_cat:

Mclilzee commented 2 years ago

also check out the dark theme buttons image

DigitalKnight0 commented 2 years ago

@Mclilzee It looks good but the dark background falls out of place mostly due to modal's color tbh. I was thinking, maybe we can use body's background color (light one) for both themes? (It's a light greyish shade same as TOP) that might suit

DigitalKnight0 commented 2 years ago

Or change the modal's color to a darker shade on dark theme so it might fit with the button's dark background

Mclilzee commented 2 years ago

@DigitalKnight0 Sure, you have been assigned! mess around with the colors, i made your life much easier with the new way of handling themes. you just have to change values at the top.

DigitalKnight0 commented 2 years ago

:badcat: :sadcat:

ManonLef commented 2 years ago

I will leave you all to it for now :)

takinabradley commented 2 years ago

@Mclilzee @ManonLef @DigitalKnight0

It's not clear from the previous conversation- are there any ideas/tasks remaining for redesigning the modal, or should this issue be closed?

Mclilzee commented 2 years ago

That depends if @ManonLef have any artistic input about it

ManonLef commented 2 years ago

It looks great as is. If I get more comfortable with the code I might play around with some details myself, until then, no artistic ideas that should put this project on hold. @Mclilzee @takinabradley