From 6a904325d2de830ca538d125792c4f95d9f5b465 Mon Sep 17 00:00:00 2001
From: LeonaS <laspark@stud.ntnu.no>
Date: Wed, 16 Sep 2026 13:42:38 +0100
Subject: [PATCH] Fikset css

---
 README.md                        |  3 ++
 src/components/SortFilterBar.css | 64 +++++++++++++++++++++++++++++++-
 src/components/SortFilterBar.tsx | 17 ++++++---
 3 files changed, 77 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 0a456af..3ce23b3 100644
--- a/README.md
+++ b/README.md
@@ -195,4 +195,7 @@ Leona:
   KI ble videre brukt til å implementere fiksen: gjenopprette importen, legge sortBy og minRating til som props på SearchLayout, MainLayout og FavoritesLayout, og kalle sortAndFilterMovies(...) på riktig filmliste i hver av disse komponentene før den sendes til MovieList.
 
   Løsningen ble verifisert med `tsc --noEmit` og `npm run build` (begge grønne), og gjennomgått og forstått av gruppen før den ble tatt i bruk.
+
+  CSS:
+  Brukte også claude til å designe CSSen til filter-delen, slik at den matcher med resten av nettsiden.
 ```
diff --git a/src/components/SortFilterBar.css b/src/components/SortFilterBar.css
index 0f55a18..72f489e 100644
--- a/src/components/SortFilterBar.css
+++ b/src/components/SortFilterBar.css
@@ -2,6 +2,66 @@
   display: flex;
   gap: 1.5rem;
   flex-wrap: wrap;
-  align-items: center;
-  margin-bottom: 1rem;
+  align-items: flex-end;
+  padding-bottom: 24px;
+  margin-bottom: 24px;
+  border-bottom: 1px solid var(--border);
+}
+
+.sort-filter-bar__field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  text-align: left;
+}
+
+.sort-filter-bar__label {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text-h);
+}
+
+.sort-filter-bar__value {
+  color: var(--accent);
+  font-weight: 700;
+}
+
+.sort-filter-bar__select {
+  font: inherit;
+  font-size: 16px;
+  padding: 8px 12px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: var(--bg);
+  color: var(--text-h);
+  cursor: pointer;
+}
+
+.sort-filter-bar__select:hover {
+  border-color: var(--accent-border);
+}
+
+.sort-filter-bar__select:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.sort-filter-bar__range {
+  width: 180px;
+  accent-color: var(--accent);
+}
+
+.sort-filter-bar__range:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+@media (max-width: 480px) {
+  .sort-filter-bar {
+    gap: 1rem;
+  }
+
+  .sort-filter-bar__range {
+    width: 100%;
+  }
 }
diff --git a/src/components/SortFilterBar.tsx b/src/components/SortFilterBar.tsx
index e09f9d4..a174627 100644
--- a/src/components/SortFilterBar.tsx
+++ b/src/components/SortFilterBar.tsx
@@ -11,9 +11,13 @@ type SortFilterBarProps = {
 export function SortFilterBar({ sortBy, onSortChange, minRating, onMinRatingChange }: SortFilterBarProps) {
   return (
     <div className="sort-filter-bar">
-      <label>
-        Sorter etter:
-        <select value={sortBy} onChange={(e) => onSortChange(e.target.value as SortOption)}>
+      <label className="sort-filter-bar__field">
+        <span className="sort-filter-bar__label">Sorter etter</span>
+        <select
+          className="sort-filter-bar__select"
+          value={sortBy}
+          onChange={(e) => onSortChange(e.target.value as SortOption)}
+        >
           <option value="popularity">Popularitet</option>
           <option value="rating">Vurdering</option>
           <option value="release_date">Nyeste først</option>
@@ -21,9 +25,12 @@ export function SortFilterBar({ sortBy, onSortChange, minRating, onMinRatingChan
         </select>
       </label>
 
-      <label>
-        Min. vurdering: {minRating}
+      <label className="sort-filter-bar__field">
+        <span className="sort-filter-bar__label">
+          Min. vurdering <span className="sort-filter-bar__value">{minRating}</span>
+        </span>
         <input
+          className="sort-filter-bar__range"
           type="range"
           min={0}
           max={10}