[ISSUE]: [UI/UX] Refinement of Modal Close Button (Geometry, Animation, and Contrast) #558

Description

Description

Problem

While interacting with the book detail modals, I observed three specific issues with the Close (X) button that deviate from the website's minimalist and high-end aesthetic:

1.Inappropriate Geometry: The button appears as an inconsistent oval shape rather than a synergetic shape.

2.Aesthetic Mismatch (Animation): On hover, the button executes a circular/spinning motion. This feels "noisy" and inconsistent with the "Quiet Sanctuary" philosophy of the rest of the site.

3.Contrast Issues:
Light Mode: The button's background shape is overly prominent and harsh.
Dark Mode: The hover state color blends too closely with the modal background, making the interaction feedback invisible.

Expected Behavior:

1. the button shape should be synergetic with its neighboring UI.
   2.no excessive noise animations.
   3.synergetic visuals.

Suggested Fix:

Fix Geometry: Standardize the button dimensions to ensure a proper synergetic shape instead of the current oval.

Refine Animation: Replace or remove the "spinning" hover effect with a subtle transition that matches the website's minimalist aesthetic.

Update Visibility: Correct the hover colors to ensure the button remains clearly visible in both Light and Dark modes.

Screenshots:

**note:** attached screenshot shows the oval shaped close button, and the hover shade mixes up with bg in dark mode. **note:** attached screenshot shows the oval shaped close button, and the hover shade mixes up with bg in light mode.

I would like to work on this issue under #GSSoC2026.
@devanshi14malhotra
please assign this to me!

Additional Context

No response