Compare commits

...

1 Commits

Author SHA1 Message Date
itsababseh
553677e853 feat(frontend): make Give Feedback button translucent with glassmorphism effect
Apply frosted glass (glassmorphism) styling to the Give Feedback and Tutorial
floating buttons so users can see text content underneath them.

Changes:
- Reduce background opacity from 1.0 to 0.55 (rgba(65,65,64,0.55))
- Add backdrop-blur-md for frosted glass blur effect
- Add subtle white border (border-white/10) for depth
- Add shadow-lg for elevation

Both the Give Feedback and Tutorial buttons are updated consistently.
2026-03-17 15:11:20 -07:00

View File

@@ -22,7 +22,7 @@ export function TallyPopupSimple() {
<Button
variant="primary"
onClick={handlers.handleResetTutorial}
className="mb-0 h-14 w-28 rounded-2xl bg-[rgba(65,65,64,1)] text-left font-sans text-lg font-medium leading-6"
className="mb-0 h-14 w-28 rounded-2xl bg-[rgba(65,65,64,0.55)] text-left font-sans text-lg font-medium leading-6 backdrop-blur-md border border-white/10 shadow-lg"
>
Tutorial
</Button>
@@ -42,7 +42,7 @@ export function TallyPopupSimple() {
: String(state.isAuthenticated)
}
data-email={state.userEmail || "not-authenticated"}
className="mb-0 h-14 rounded-2xl bg-[rgba(65,65,64,1)] text-center font-sans text-lg font-medium leading-6"
className="mb-0 h-14 rounded-2xl bg-[rgba(65,65,64,0.55)] text-center font-sans text-lg font-medium leading-6 backdrop-blur-md border border-white/10 shadow-lg"
>
Give Feedback
</Button>