From b20369b49ba4d5e2b3bda969b625920a95601ed0 Mon Sep 17 00:00:00 2001
From: Linde Vrenne <lindeav@stud.ntnu.no>
Date: Fri, 9 Oct 2026 12:38:22 +0200
Subject: [PATCH] feat: lagt til figma styling

---
 frontend/src/App.css  | 220 +++++++-----------------------------------
 frontend/src/App.tsx  |   6 +-
 frontend/src/main.tsx |   1 +
 frontend/src/tema.css |  90 +++++++++++++++++
 4 files changed, 130 insertions(+), 187 deletions(-)
 create mode 100644 frontend/src/tema.css

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 32b3c38..f987250 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,197 +1,48 @@
-.counter {
-  font-size: 16px;
-  padding: 5px 10px;
-  border-radius: 5px;
-  color: var(--accent);
-  background: var(--accent-bg);
-  border: 2px solid transparent;
-  transition: border-color 0.3s;
-  margin-bottom: 24px;
+/* Hjemskjerm – styling etter Figma (Handlelappen – notatbok).
+   Farger og skrift kommer fra tema.css. */
 
-  &:hover {
-    border-color: var(--accent-border);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
+#root {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 48px 24px;
 }
 
-.hero {
-  position: relative;
-
-  .base,
-  .framework,
-  .vite {
-    inset-inline: 0;
-    margin: 0 auto;
-  }
-
-  .base {
-    width: 170px;
-    position: relative;
-    z-index: 0;
-  }
-
-  .framework,
-  .vite {
-    position: absolute;
-  }
-
-  .framework {
-    z-index: 1;
-    top: 34px;
-    height: 28px;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
-      scale(1.4);
-  }
-
-  .vite {
-    z-index: 0;
-    top: 107px;
-    height: 26px;
-    width: auto;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
-      scale(0.8);
-  }
-}
-
-#center {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  place-content: center;
-  place-items: center;
-  flex-grow: 1;
-
-  @media (max-width: 1024px) {
-    padding: 32px 20px 24px;
-    gap: 18px;
-  }
-}
-
-#next-steps {
-  display: flex;
-  border-top: 1px solid var(--border);
-  text-align: left;
-
-  & > div {
-    flex: 1 1 0;
-    padding: 32px;
-    @media (max-width: 1024px) {
-      padding: 24px 20px;
-    }
-  }
-
-  .icon {
-    margin-bottom: 16px;
-    width: 22px;
-    height: 22px;
-  }
-
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    text-align: center;
-  }
-}
-
-#docs {
-  border-right: 1px solid var(--border);
-
-  @media (max-width: 1024px) {
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
-}
-
-#next-steps ul {
-  list-style: none;
-  padding: 0;
+/* Søkefelt + knapp */
+.search {
   display: flex;
-  gap: 8px;
-  margin: 32px 0 0;
-
-  .logo {
-    height: 18px;
-  }
-
-  a {
-    color: var(--text-h);
-    font-size: 16px;
-    border-radius: 6px;
-    background: var(--social-bg);
-    display: flex;
-    padding: 6px 12px;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-    transition: box-shadow 0.3s;
-
-    &:hover {
-      box-shadow: var(--shadow);
-    }
-    .button-icon {
-      height: 18px;
-      width: 18px;
-    }
-  }
-
-  @media (max-width: 1024px) {
-    margin-top: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    li {
-      flex: 1 1 calc(50% - 8px);
-    }
-
-    a {
-      width: 100%;
-      justify-content: center;
-      box-sizing: border-box;
-    }
-  }
+  gap: 0.75rem;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 1.5rem;
 }
 
-#spacer {
-  height: 88px;
-  border-top: 1px solid var(--border);
-  @media (max-width: 1024px) {
-    height: 48px;
-  }
+.search input {
+  flex: 1;
+  max-width: 480px;
+  padding: 10px 14px;
+  font: 15px var(--font-ui);
+  color: var(--blekk);
+  background: var(--hvit);
+  border: 1px solid var(--blekk);
+  border-radius: 8px;
 }
 
-.ticks {
-  position: relative;
-  width: 100%;
-
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: -4.5px;
-    border: 5px solid transparent;
-  }
-
-  &::before {
-    left: 0;
-    border-left-color: var(--border);
-  }
-  &::after {
-    right: 0;
-    border-right-color: var(--border);
-  }
+.search input:focus {
+  outline: 2px solid var(--bringebaer);
+  outline-offset: 2px;
 }
 
-/* === MIDLERTIDIG STYLING FOR HJEMKJERM === */
-.search {
-  display: flex;
-  gap: 0.75rem;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 1.5rem;
+.search button {
+  background: var(--bringebaer);
+  color: var(--hvit);
+  border: none;
+  border-radius: 8px;
+  padding: 10px 16px;
+  font: 500 15px var(--font-ui);
+  cursor: pointer;
 }
 
+/* Produktliste */
 .product-list {
   list-style: none;
   padding: 0;
@@ -204,7 +55,7 @@
   gap: 1rem;
   align-items: center;
   padding: 0.75rem 0;
-  border-bottom: 1px solid #444;
+  border-bottom: 1px solid #e5e5e5;
 }
 
 .product img,
@@ -212,7 +63,8 @@
   width: 64px;
   height: 64px;
   object-fit: contain;
-  background: #fff;
+  background: var(--hvit);
+  border: 1px solid var(--burgunder);
   border-radius: 6px;
   flex-shrink: 0;
 }
\ No newline at end of file
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 9461e05..fd4dd23 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -64,10 +64,10 @@ function App() {
 
   return (
     <main>
-      <h1>Handlelappen</h1>
+      <h1>Handle<em>lappen</em></h1>
 
       <div className="search">
-        <label htmlFor="search">Søk etter varer</label>
+        <label htmlFor="search" className="etikett">Søk etter varer</label>
         <input
           id="search"
           type="search"
@@ -86,7 +86,7 @@ function App() {
       )}
 
       {data && data.products.length > 0 && (
-        <ul className="product-list">
+        <ul className="product-list kort">
           {data.products.map((product) => {
             const price = lowestPrice(product.prices);
             return (
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 35d827f..f044fb2 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -4,6 +4,7 @@ import { ApolloProvider } from "@apollo/client/react";
 import './index.css'
 import App from './App.tsx'
 import { apolloClient } from "./apolloClient";
+import './tema.css'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
diff --git a/frontend/src/tema.css b/frontend/src/tema.css
new file mode 100644
index 0000000..5258fae
--- /dev/null
+++ b/frontend/src/tema.css
@@ -0,0 +1,90 @@
+/* Handlelappen – notatbok: farger og skrift fra Figma (siden «Grunnlag») */
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&family=Kalam:wght@400;700&display=swap');
+
+:root {
+  /* Farger */
+  --hvit: #ffffff;       /* bakgrunn og lapper */
+  --blekk: #141414;      /* tekst og linjer */
+  --burgunder: #65081f;  /* håndskrift, merke, kant på kort */
+  --bringebaer: #d3045d; /* knapper, kommentarer */
+  --rosa: #fce8f0;       /* lapper, markering */
+
+  /* Skrift */
+  --font-ui: 'Geist', system-ui, sans-serif;
+  --font-mono: 'Geist Mono', ui-monospace, monospace;
+  --font-aksent: 'Instrument Serif', Georgia, serif;
+  --font-lapp: 'Kalam', cursive;
+}
+
+body {
+  margin: 0;
+  background: var(--hvit);
+  color: var(--blekk);
+  font-family: var(--font-ui);
+}
+
+/* Etiketter som «01 · KATEGORIER» */
+.etikett {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+/* Kursiv aksent i overskrifter, f.eks. <h1>Handle<em>lappen</em></h1> */
+h1 em, h2 em {
+  font-family: var(--font-aksent);
+  font-style: italic;
+  font-weight: 400;
+  color: var(--burgunder);
+}
+
+/* Knapper */
+.knapp {
+  background: var(--bringebaer);
+  color: var(--hvit);
+  border: none;
+  border-radius: 8px;
+  padding: 10px 16px;
+  font: 500 15px var(--font-ui);
+  cursor: pointer;
+}
+
+/* Rutemønster bak kategoriene */
+.rutemonster {
+  background-color: #fafafa;
+  background-image:
+    linear-gradient(#eeeeee 1px, transparent 1px),
+    linear-gradient(90deg, #eeeeee 1px, transparent 1px);
+  background-size: 24px 24px;
+}
+
+/* Kategorikort: burgunder kant og skarp skygge */
+.kort {
+  background: var(--hvit);
+  border: 1px solid var(--burgunder);
+  border-radius: 10px;
+  box-shadow: 3px 3px 0 var(--burgunder);
+  padding: 16px;
+  transition: box-shadow 0.15s, transform 0.15s;
+}
+.kort:hover {
+  border-width: 2px;
+  box-shadow: 5px 5px 0 var(--burgunder);
+  transform: translate(-1px, -1px);
+}
+
+/* Handlelappen: hvit lapp med rosa linjer, rød marg og tynn svart kontur */
+.lapp {
+  font-family: var(--font-lapp);
+  color: var(--burgunder);
+  background-color: var(--hvit);
+  background-image: repeating-linear-gradient(
+    transparent 0 31px, var(--rosa) 31px 32px);
+  border: 1px solid var(--blekk);
+  border-left: 3px solid var(--bringebaer);
+  padding: 16px 16px 16px 28px;
+  line-height: 32px;
+  box-shadow: 6px 6px 0 var(--rosa);
+  transform: rotate(-1deg);
+}