From 207650066c2140db7fc5265296f84d2618355cf3 Mon Sep 17 00:00:00 2001
From: Ingrihka <ingrihka@stud.ntnu.no>
Date: Fri, 16 Oct 2026 13:13:45 +0200
Subject: [PATCH] feat: animert logo (#45)

---
 frontend/src/components/logo/Logo.css | 101 +++++++++++++++++++-------
 frontend/src/components/logo/Logo.tsx |  43 +++++++++++
 2 files changed, 119 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/components/logo/Logo.tsx

diff --git a/frontend/src/components/logo/Logo.css b/frontend/src/components/logo/Logo.css
index c508ff2..593fbe6 100644
--- a/frontend/src/components/logo/Logo.css
+++ b/frontend/src/components/logo/Logo.css
@@ -1,35 +1,86 @@
 /* Logo – fra Figma (Components → Logo) */
 .logo {
-    display: inline-flex;
-    align-items: center;
-    gap: 12px;
-    font: 600 18px var(--font-ui);
-    letter-spacing: -0.02em;
-    color: var(--text-primary);
-    text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  font: 600 18px var(--font-ui);
+  letter-spacing: -0.02em;
+  color: var(--text-primary);
+  text-decoration: none;
 }
 
-/* To skjeve lapper oppå hverandre */
-.logo__mark {
-    position: relative;
-    width: 26px;
-    height: 26px;
+/* Ikon: handlelapp som tegnes opp med haker */
+.logo__icon {
+  width: 28px;
+  height: 28px;
+  overflow: visible;
+  flex-shrink: 0;
+}
+.logo__back {
+  fill: var(--bg-brand);
+}
+.logo__paper {
+  fill: var(--note-paper);
+  stroke: var(--border-strong);
+  stroke-width: 1.2;
+}
+.logo__margin {
+  stroke: var(--note-margin);
+  stroke-width: 1;
+}
+.logo__line {
+  stroke: var(--text-muted);
+  stroke-width: 1.6;
+  stroke-linecap: round;
 }
 
-.logo__mark::before,
-.logo__mark::after {
-    content: "";
-    position: absolute;
-    inset: 3px;
-    border-radius: 2px;
+.logo__check {
+  fill: none;
+  stroke: var(--text-accent);
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dasharray: 8;
+  stroke-dashoffset: 8;
+  animation: logo-draw 0.35s ease-out 0.3s forwards;
+}
+.logo__check--2 {
+  animation-delay: 0.75s;
 }
 
-.logo__mark::before {
-    background: var(--bg-brand);
-    transform: rotate(-6deg);
+.logo__sheet {
+  transform-box: fill-box;
+  transform-origin: center;
+  transition: transform 0.3s ease;
+}
+.logo:hover .logo__sheet {
+  transform: rotate(-6deg);
+}
+.logo:hover .logo__check {
+  animation-name: logo-draw-again;
 }
 
-.logo__mark::after {
-    background: var(--bg-primary);
-    transform: rotate(8deg) translate(-2px, -2px);
-}
\ No newline at end of file
+@keyframes logo-draw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes logo-draw-again {
+  from {
+    stroke-dashoffset: 8;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+/* Respekter brukere som har skrudd av animasjoner */
+@media (prefers-reduced-motion: reduce) {
+  .logo__check {
+    animation: none;
+    stroke-dashoffset: 0;
+  }
+  .logo__sheet {
+    transition: none;
+  }
+}
diff --git a/frontend/src/components/logo/Logo.tsx b/frontend/src/components/logo/Logo.tsx
new file mode 100644
index 0000000..d1c813e
--- /dev/null
+++ b/frontend/src/components/logo/Logo.tsx
@@ -0,0 +1,43 @@
+import "./Logo.css";
+
+function Logo() {
+  return (
+    <a href="/" className="logo" aria-label="Handlelappen, til forsiden">
+      <svg className="logo__icon" viewBox="0 0 32 32" aria-hidden="true">
+        <rect
+          className="logo__back"
+          x="7"
+          y="4"
+          width="19"
+          height="24"
+          rx="2"
+          transform="rotate(-8 16 16)"
+        />
+        <g className="logo__sheet">
+          <g transform="rotate(5 16 16)">
+            <rect
+              className="logo__paper"
+              x="7"
+              y="4"
+              width="19"
+              height="24"
+              rx="2"
+            />
+            <line className="logo__margin" x1="11" y1="4.6" x2="11" y2="27.4" />
+            <line className="logo__line" x1="18" y1="11" x2="23" y2="11" />
+            <line className="logo__line" x1="18" y1="16.5" x2="23" y2="16.5" />
+            <line className="logo__line" x1="18" y1="22" x2="23" y2="22" />
+            <path className="logo__check" d="M12.8 11 l1.6 1.6 l2.6 -3.2" />
+            <path
+              className="logo__check logo__check--2"
+              d="M12.8 16.5 l1.6 1.6 l2.6 -3.2"
+            />
+          </g>
+        </g>
+      </svg>
+      <span>Handlelappen</span>
+    </a>
+  );
+}
+
+export default Logo;