Fikset css til filter

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.
 ```

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%;
+  }
 }

src/components/SortFilterBar.tsx

@@ -11,19 +11,26 @@ 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>
           <option value="title">Alfabetisk</option>
         </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}