mirror of
https://github.com/purrgrammer/grimoire.git
synced 2026-04-10 15:36:53 +02:00
e6e663c3d8
* feat: add separate gradients for Grimoire members based on login state Updates the UserName component to display different gradient colors for Grimoire members depending on whether they are the logged-in user: - Orange-yellow gradient for logged-in Grimoire members (current user) - Purple-blue gradient for other Grimoire members (not logged in) This visual distinction makes it easier to identify your own username versus other Grimoire members in feeds and conversations. * refine: make blue tone more subtle in Grimoire member gradient Changes the non-logged-in Grimoire member gradient from cyan-500 to blue-400 for a softer, more subtle blue tone on the bottom-right diagonal of the gradient. * refine: reposition blue to match yellow placement in gradients Rearranges the purple-blue gradient to start with blue-400 (matching the top-left position of yellow-500 in the orange-yellow gradient) and transition through purple-500 to purple-600. Gradient order: - Logged-in: yellow → orange → orange - Other members: blue → purple → purple * refine: adjust purple tones to match accent color Updates the gradient to use purple-400 and purple-500 (instead of purple-500 and purple-600) to better match the accent purple (HSL 270 100% 70%) used for regular usernames in dark mode. Final gradient: blue-400 → purple-400 → purple-500 * refine: improve gradients to match theme colors and work across themes Updates both Grimoire member gradients to better align with their non-member equivalents while ensuring visibility in both light and dark themes: **Logged-in gradient** (orange-dominant to match highlight color): - Changed: yellow-500 → orange-500 → orange-600 - To: orange-400 → orange-500 → amber-600 - Matches highlight (HSL 25 90% 35% light, 27 96% 61% dark) **Non-logged-in gradient** (purple-dominant to match accent color): - Changed: blue-400 → purple-400 → purple-500 - To: violet-500 → purple-500 → fuchsia-600 - Matches accent (HSL 270 100% 70% dark) - More saturated to stand out in light theme Both gradients now maintain their primary colors while being more visible and consistent across light and dark themes. * feat: add 4-color gradients with bright highlights for classy look Enhances both Grimoire member gradients with a subtle bright color at the top for a more stylish, classy appearance: **Logged-in gradient:** - yellow-300 → orange-400 → orange-500 → amber-600 - Bright yellow shimmer at top, deepening to amber **Non-logged-in gradient:** - violet-400 → violet-500 → purple-500 → fuchsia-600 - Lighter violet glow at top, transitioning to purple-pink The 4-color gradients add depth and sophistication while maintaining the theme color alignment (orange for highlight, purple for accent). * refine: simplify to elegant 2-color gradients and add badge check icon Simplifies Grimoire member styling for a more elegant appearance: **Gradient changes:** - Direction: bg-gradient-to-br → bg-gradient-to-tr (diagonal from top-left) - Logged-in: Simplified to orange-400 → amber-600 (warm elegant gradient) - Non-logged-in: Simplified to violet-500 → fuchsia-600 (cool elegant gradient) **Badge check icon:** - Added BadgeCheck icon after member names - Icon scales automatically with username size using w-[1em] h-[1em] - Provides visual verification of Grimoire membership The simpler 2-color gradients with top-right direction create a more refined, classy look while the badge check adds instant recognition. * fix: make BadgeCheck icon visible by separating from gradient text The badge icon was invisible because it inherited the text-transparent class from the parent span. Fixed by: - Moving gradient styling to only the displayName span - Giving BadgeCheck its own explicit color (orange-500 for logged-in, violet-500 for others) - Icon now properly visible and color-coordinated with the gradient * feat: add subtle gradient to BadgeCheck icon matching username The badge icon now has its own subtle gradient that continues from the username gradient's ending color: - Logged-in: amber-600 → amber-400 (darker to brighter amber) - Others: fuchsia-600 → fuchsia-400 (darker to brighter fuchsia) - Both use bg-gradient-to-tr direction to match username This creates a cohesive visual flow where the gradient subtly continues from the username into the verification badge. * fix: use solid colors for BadgeCheck icon (gradients don't work on SVG) The bg-clip-text technique only works on actual text elements, not SVG paths. Reverted to solid colors that complement the gradient themes: - Logged-in: text-amber-500 (matches the amber gradient tones) - Others: text-fuchsia-500 (matches the fuchsia gradient tones) The icon is now visible and color-coordinated with the username gradients. --------- Co-authored-by: Claude <noreply@anthropic.com>