[STYLE CHANGE] Cleaner and Better design for the "Read a Shloka" Section.

[EshaalakshmiDS]

Description:

In the "read a shloka" page of the Moksh website, I want to suggest a change in the look of the quote box and the typography of its text. I want to also change the style and add hover effect on the buttons namely- "New Quote" and "Tweet."

Reason for Change:

The reason I want to implement this change is because it will add a cleaner finish look and better readability of the quote in a smaller quote box. The motive behind the button style change is to make it blend with the theme and color palette of the Moksh Page as currently it looks quite simple. We can also change hover effect for the button when we click.

Current Styling:

-The size of the Shlok quote box(container) is quite huge. -The button style is outdated and its placement doesnt fit well. -The date and time placement needs to be changed.

Proposed Styling: -Smaller more centered box with blurred background image for the shloka display. -Change in the button color and text font. -The date and time being displayed on the screen must be on one side together, rather than on either side of the screen.

Screenshots or Design Mockups (optional):

Before:

Suggested Design Change:

https://github.com/akshitagupta15june/Moksh/assets/97681609/65e82c9a-772a-41e0-9b72-0d111d9f20a3

Additional Information (optional): Please assign me this issue and accept it under SWOC S4. I would like to further work on changing the UX/UI of other pages/elements with my designs if needed, but will need assisstance and help in coding.

Priority Level (optional):

• [x] High

[github-actions[bot]]

Congratulations, @EshaalakshmiDS! 🎉 Thank you for creating your issue for Moksh. Your contribution is greatly appreciated and we look forward to working with you to resolve the issue. Keep up the great work! Should you have any queries or require guidance, do not hesitate to ask.

[EshaalakshmiDS]

@akshitagupta15june I request you to please assign this issue to me and consider it under SWOC''23. Thank you.

[Himanshu0917]

I would like to work on this issue. Please assign it to me.

[akshitagupta15june]

go for it @EshaalakshmiDS

[Shiv10122003]

please assign me this issue under @iwoc i will do it as given in mocks.

[shivam101203]

please assign this issue under iwoc @akshitagupta15june

[EshaalakshmiDS]

@akshitagupta15june As I previously couldnt contribute to this issue during SWOC, I would like to once again take up this task as a part of GSSOC'24. Kindly consider me as an assignee for this issue. Hey, I request you to assign level label to the issues according to the guidelines, so that we can start making pull requests. Thank you.