From 268f2e841d5b2132d1ec48a20808a910450d983a Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Fri, 24 Jul 2026 20:02:44 +0000
Subject: [PATCH] Nudge checkmark/login icon vertical alignment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Checklist checkmarks (Challenge, todo-cards, newsletter): mt-0.5 -> mt-1,
  centering against the first line's glyphs instead of sitting flush at
  the very top edge.
- Navbar login icon: -translate-y-0.5 — its round head vs. wide shoulders
  read as optically bottom-heavy next to the cart icon despite both
  having a mathematically centered bounding box.
---
 app/challenge/page.tsx                           | 2 +-
 app/components/Navbar.tsx                        | 7 ++++++-
 app/newsletter/components/WeeklyBenefits.tsx     | 2 +-
 app/newsletter/components/WeeklyImpulsesHero.tsx | 2 +-
 app/todo-cards/components/Focus.tsx              | 2 +-
 app/todo-cards/components/TodoKartenHero.tsx     | 2 +-
 6 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/app/challenge/page.tsx b/app/challenge/page.tsx
index b7d938d..c23012d 100644
--- a/app/challenge/page.tsx
+++ b/app/challenge/page.tsx
@@ -78,7 +78,7 @@ function IconCheckCircle() {
 
 function Check() {
   return (
-    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" className="shrink-0 mt-0.5">
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" className="shrink-0 mt-1">
       <path d="M3 9.5l4 4L15 4" stroke="#f6a701" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
   );
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index 14035f1..6a7d41d 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -113,7 +113,12 @@ function AccountLink() {
       aria-label={loggedIn ? "Mein Konto (eingeloggt)" : "Anmelden"}
       className="relative flex h-11 w-11 items-center justify-center shrink-0 active:scale-[0.9] transition-transform"
     >
-      <svg viewBox="0 0 24 24" className="h-7 w-7 text-text-primary" fill="none" aria-hidden="true">
+      {/* -translate-y-0.5 — the glyph's own bounding box centers fine
+          mathematically, but the round head (light, isolated) versus the
+          wide shoulders (heavier, at the bottom) reads as optically
+          bottom-heavy next to the cart icon, sitting visibly lower.
+          Nudged up to match (fixed 2026-07-24). */}
+      <svg viewBox="0 0 24 24" className="h-7 w-7 text-text-primary -translate-y-0.5" fill="none" aria-hidden="true">
         <circle cx="12" cy="8" r="3.6" stroke="currentColor" strokeWidth="1.8" />
         <path d="M4.5 20c1.2-4 4-6 7.5-6s6.3 2 7.5 6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
       </svg>
diff --git a/app/newsletter/components/WeeklyBenefits.tsx b/app/newsletter/components/WeeklyBenefits.tsx
index b7e25dc..86cbdf8 100644
--- a/app/newsletter/components/WeeklyBenefits.tsx
+++ b/app/newsletter/components/WeeklyBenefits.tsx
@@ -13,7 +13,7 @@ const benefits = [
 // recolored from outside the SVG when loaded via <img src>/next/image).
 function IconCheck() {
   return (
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="size-5 shrink-0 mt-0.5">
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="size-5 shrink-0 mt-1">
       <path d="M4 10.5l4.5 4.5L16 5.5" stroke="#f6a701" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
   );
diff --git a/app/newsletter/components/WeeklyImpulsesHero.tsx b/app/newsletter/components/WeeklyImpulsesHero.tsx
index 637a0c8..d69bbe4 100644
--- a/app/newsletter/components/WeeklyImpulsesHero.tsx
+++ b/app/newsletter/components/WeeklyImpulsesHero.tsx
@@ -21,7 +21,7 @@ function LockIcon() {
 // <img src>/next/image, same fix/reasoning as todo-cards's own IconCheck.
 function IconCheck() {
   return (
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="size-5 shrink-0 mt-0.5">
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="size-5 shrink-0 mt-1">
       <path d="M4 10.5l4.5 4.5L16 5.5" stroke="#f6a701" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
   );
diff --git a/app/todo-cards/components/Focus.tsx b/app/todo-cards/components/Focus.tsx
index d460011..40ad20a 100644
--- a/app/todo-cards/components/Focus.tsx
+++ b/app/todo-cards/components/Focus.tsx
@@ -14,7 +14,7 @@ const bullets = [
 // the SVG when loaded via <img src>/next/image).
 function IconCheck() {
   return (
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="size-5 shrink-0 mt-0.5">
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="size-5 shrink-0 mt-1">
       <path d="M4 10.5l4.5 4.5L16 5.5" stroke="#f6a701" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
   );
diff --git a/app/todo-cards/components/TodoKartenHero.tsx b/app/todo-cards/components/TodoKartenHero.tsx
index e099bf5..8107da4 100644
--- a/app/todo-cards/components/TodoKartenHero.tsx
+++ b/app/todo-cards/components/TodoKartenHero.tsx
@@ -19,7 +19,7 @@ const checklist = [
 // Check() component, for the same orange-checkmark look (fixed 2026-07-24).
 function IconCheck() {
   return (
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="size-5 shrink-0 mt-0.5">
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="size-5 shrink-0 mt-1">
       <path d="M4 10.5l4.5 4.5L16 5.5" stroke="#f6a701" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
   );