Skip to content

Commit f0aae97

Browse files
HMarzbanclaude
HMarzban
and
claude
committed
fix(email-templates): give the unsubscribe button a hover state
The Unsubscribe button and the Manage preferences link had no hover state. Both now darken their fill by 7% on hover, the same recipe as the webapp btn-primary, in light and dark. The rule sits behind (hover: hover), so touch screens get no sticky hover. The strip nav is now a flex row with a 16px gap, so two quiet links never sit close together. Verified in a browser on a local render: light and dark fill, hover and the focus-visible ring. Refs #445 Co-Authored-By: Claude Opus 5.5 <[email protected]>
1 parent a3b9da0 commit f0aae97

2 files changed

Lines changed: 24 additions & 3 deletions

File tree

‎packages/email-templates/src/__tests__/__snapshots__/engine.test.ts.snap‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -680,6 +680,10 @@ exports[`renderUnsubscribePage snapshot — success 1`] = `
680680
font-family: inherit;
681681
cursor: pointer;
682682
}
683+
/* daisyUI btn hover: the same hue, 7% darker. */
684+
@media (hover: hover) {
685+
.primary:hover { background: color-mix(in oklab, #1a73e8, #000 7%); }
686+
}
683687
.strip {
684688
display: flex;
685689
flex-wrap: wrap;
@@ -694,7 +698,7 @@ exports[`renderUnsubscribePage snapshot — success 1`] = `
694698
line-height: 20px;
695699
}
696700
.email { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
697-
.strip nav { margin-left: auto; }
701+
.strip nav { display: flex; gap: 16px; margin-left: auto; }
698702
.quiet {
699703
display: inline-flex;
700704
align-items: center;
@@ -712,6 +716,9 @@ exports[`renderUnsubscribePage snapshot — success 1`] = `
712716
.strip { border-top-color: #2d3f57; }
713717
.message, .strip { color: #a4a7ae; }
714718
.primary { background: #6ea8ff; color: #0b1220; }
719+
@media (hover: hover) {
720+
.primary:hover { background: color-mix(in oklab, #6ea8ff, #000 7%); }
721+
}
715722
.quiet { color: #6ea8ff; }
716723
a:focus-visible, button:focus-visible { outline-color: #6ea8ff; }
717724
}
@@ -853,6 +860,10 @@ exports[`renderUnsubscribePage snapshot — error 1`] = `
853860
font-family: inherit;
854861
cursor: pointer;
855862
}
863+
/* daisyUI btn hover: the same hue, 7% darker. */
864+
@media (hover: hover) {
865+
.primary:hover { background: color-mix(in oklab, #1a73e8, #000 7%); }
866+
}
856867
.strip {
857868
display: flex;
858869
flex-wrap: wrap;
@@ -867,7 +878,7 @@ exports[`renderUnsubscribePage snapshot — error 1`] = `
867878
line-height: 20px;
868879
}
869880
.email { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
870-
.strip nav { margin-left: auto; }
881+
.strip nav { display: flex; gap: 16px; margin-left: auto; }
871882
.quiet {
872883
display: inline-flex;
873884
align-items: center;
@@ -885,6 +896,9 @@ exports[`renderUnsubscribePage snapshot — error 1`] = `
885896
.strip { border-top-color: #2d3f57; }
886897
.message, .strip { color: #a4a7ae; }
887898
.primary { background: #6ea8ff; color: #0b1220; }
899+
@media (hover: hover) {
900+
.primary:hover { background: color-mix(in oklab, #6ea8ff, #000 7%); }
901+
}
888902
.quiet { color: #6ea8ff; }
889903
a:focus-visible, button:focus-visible { outline-color: #6ea8ff; }
890904
}

‎packages/email-templates/templates/unsubscribe.eta‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,10 @@
9393
font-family: inherit;
9494
cursor: pointer;
9595
}
96+
/* daisyUI btn hover: the same hue, 7% darker. */
97+
@media (hover: hover) {
98+
.primary:hover { background: color-mix(in oklab, <%= it.h.COLORS.primary %>, #000 7%); }
99+
}
96100
.strip {
97101
display: flex;
98102
flex-wrap: wrap;
@@ -107,7 +111,7 @@
107111
line-height: 20px;
108112
}
109113
.email { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
110-
.strip nav { margin-left: auto; }
114+
.strip nav { display: flex; gap: 16px; margin-left: auto; }
111115
.quiet {
112116
display: inline-flex;
113117
align-items: center;
@@ -125,6 +129,9 @@
125129
.strip { border-top-color: #2d3f57; }
126130
.message, .strip { color: #a4a7ae; }
127131
.primary { background: #6ea8ff; color: #0b1220; }
132+
@media (hover: hover) {
133+
.primary:hover { background: color-mix(in oklab, #6ea8ff, #000 7%); }
134+
}
128135
.quiet { color: #6ea8ff; }
129136
a:focus-visible, button:focus-visible { outline-color: #6ea8ff; }
130137
}

0 commit comments

Comments
 (0)