Improving the UI

[aboqasem]

Assalamualaykum, Jazakumullahu Khairan for the great work.

I'm trying to prevent the image from being stretched when on smaller sized tabs by adding more flexible rules to the background-image class, I've tested this change in Brave Browser and it works fine.

Hope you're accepting pull requests and suggestions on improving (if they actually do 😅) the app, thank you!

[aboqasem]

Also, I've added a border-radius for better-looking buttons.

[shahednasser]

Assalamualaykum @aboqasem , thank you for contributing to this project!

I love what you did it does look better. However, now that you changed the width and height properties for .background-image, the overlay is smaller than the height of the image.

I think this however can be replaced by removing the .overlay element and just adding a filter on .bacground-image to reduce brightness. Can you do that?

[aboqasem]

Thank you! That's right, I did what you suggested, you may have a look again.

[shahednasser]

Looks much better but I think one there's one last enhancement needed: When the image is loading, the background is white and so you can't really see anything. I think it would be better if we change the background color of the body to #2d2d2d so that while the image is loading, the user can still see something.

[shahednasser]

Great thank you for your work! It will be available in the next release.

@all-contributors please add @aboqasem for code

[allcontributors[bot]]

@shahednasser

I've put up a pull request to add @aboqasem! :tada:

[aboqasem]

Thanks to you for the great project, may Allah ﷻ bless you and accept this and all of your good deeds.