Repository navigation
Fix: Refine modal close buttons for perfect geometry and "Quiet Sanctuary" aesthetic - #888
Merged
Merged
Conversation
✅ Deploy Preview for bibliodrift-dm ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
Author
|
hey @devanshi14malhotra , |
devanshi14malhotra
added
level:beginner
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
fixes #558
This PR addresses and resolves all requirements outlined in issue #558 .
Description:
Issue: The modal close buttons (.close-genre-modal and .modal-close-btn) were exhibiting several UI/UX bugs that deviated from our premium, minimalist aesthetic:
1.They were stretching into inconsistent oval shapes inside flex containers.
2.The hover state featured a noisy 90-degree spinning animation.
3.The hover background was harsh in light mode, and blended too much into the background in dark mode.
Changes made:
Perfect Geometry: Enforced an absolute circle by adding aspect-ratio: 1/1 and flex-shrink: 0, preventing any parent flex containers from squishing the button into an oval.
Minimalist Default State: Stripped the default background styling, making the button completely transparent until hovered.
Elegant Micro-interactions: Replaced the jarring rotate(90deg) animation with a sophisticated, physical scale(1.04) on hover and scale(0.96) on active clicks, utilizing a premium cubic-bezier transition curve.
Semantic Color Theory: Introduced a subtle, sophisticated crimson/terracotta hover state.
Testing:
Verified on both index.html (Genre Modal) and library.html (Book Detail Modal).
Tested hover and active states in both Light and Dark mode ([data-theme="night"]).
Screenshots:
screenshot 1: this screenshot showing present ui of the genre section
screenshot 2: this screenshot showing the changed synergetic and geometric UI in light mode . including proper hover animation .
screenshot 3: this screenshot showing the changed synergetic UI in dark mode . including proper hover animation .