General fixes (#1249)

* make documents rosa

* change dark border color

* do not put committee links on new line

* fix position links on board page

* make punctuation uniform in navbar

* fix nicknames in search result

* fix news search z-index

* optimize images

* fix privacy policy page

* add board documents

Author: fgren

src/app.css

@@ -45,7 +45,7 @@
   --muted: oklch(28% 0.004 0);
   --muted-background: oklch(20.5% 0.006 285.885);
   --muted-foreground: oklch(72% 0.006 0);
-  --border: oklch(42% 0.005 0);
+  --border: oklch(33% 0.005 0);
   --secondary-foreground: oklch(90% 0.002 0);
   --secondary-hover: oklch(28% 0.004 0);
   --accent: oklch(30% 0.006 0);

src/lib/components/search/ArticleSearchResult.svelte

@@ -6,6 +6,7 @@
   const { data }: { data: ArticleSearchReturnAttributes } = $props();
   import dayjs from "dayjs";
   import MemberAvatar from "$lib/components/member/MemberAvatar.svelte";
+  import { getFullName } from "$lib/utils/client/member";
 </script>
 
 <Command.LinkItem
@@ -27,7 +28,7 @@
       <MemberAvatar member={data.author} class="size-4" />
 
       <span class="text-muted-foreground line-clamp-1"
-        >{`${data.author.firstName} "${data.author.nickname}" ${data.author.lastName}`}</span
+        >{getFullName(data.author)}</span
       >
     </div>
   </div>

src/routes/(app)/about/+page.svelte

@@ -91,7 +91,7 @@
       >
       <div
         class="before:to-[rgba(0, 0, 0, 1)] before:from-accent bg-rosa-300 relative hidden w-1/2 rounded-r-md bg-cover bg-center before:absolute before:left-0 before:mr-0 before:h-full before:w-60 before:bg-linear-to-r sm:block"
-        style="background-image: url('https://files.dsek.se/files/public/photos/dchip.jpg')"
+        style="background-image: url('https://files.dsek.se/files/public/photos/dchip.webp')"
       >
         <img
           src="https://www.dchip.se/images/rosa_panter.png"

src/routes/(app)/board/+page.svelte

@@ -9,6 +9,7 @@
   import ArrowRight from "@lucide/svelte/icons/arrow-right";
   import * as Avatar from "$lib/components/ui/avatar";
   import { getFileUrl } from "$lib/files/client";
+  import { getPositionLink } from "$lib/utils/positions";
 
   let { data }: { data: PageData } = $props();
 </script>
@@ -32,10 +33,17 @@
       <p>{m.board_prose()}</p>
 
       <div class="mt-4 flex flex-col gap-2 md:flex-row">
-        <Button disabled size="sm" variant="rosa"
-          ><Pen /> Läs verksamhetsplanen <ArrowRight /></Button
+        <Button
+          href="https://files.dsek.se/documents/public/2025/HTM2/Verksamhetsplan_2026.pdf"
+          target="_blank"
+          size="sm"
+          variant="rosa"><Pen /> Läs verksamhetsplanen <ArrowRight /></Button
         >
-        <Button disabled size="sm" variant="lila"
+        <Button
+          href="https://files.dsek.se/documents/public/2026/S11/Likabehandlingsplan_styrelsen.pdf"
+          target="_blank"
+          size="sm"
+          variant="lila"
           ><Pen /> Styrelsens likabehandlingsplan <ArrowRight /></Button
         >
       </div>
@@ -59,7 +67,7 @@
           </a>
           <a
             class="mt-1 hover:underline"
-            href="/positions/{boardMember.position.id}"
+            href={getPositionLink(boardMember.position.id)}
             ><h6>
               {boardMember.position.name}
             </h6></a
@@ -84,7 +92,7 @@
           </div>
           <a
             class="mt-1 hover:underline"
-            href="/positions/{boardMember.position.id}"
+            href={getPositionLink(boardMember.position.id)}
             ><h6>
               {boardMember.position.name}
             </h6></a

src/routes/(app)/committees/+layout.svelte

@@ -14,7 +14,7 @@
 
   import * as m from "$paraglide/messages";
   import LinksDialog from "./LinksDialog.svelte";
-  import { marked } from "marked";
+  import { Marked } from "marked";
   import { isAuthorized } from "$lib/utils/authorization";
   import apiNames from "$lib/utils/apiNames";
   import { page } from "$app/state";
@@ -25,6 +25,18 @@
   let canEdit = $state(isAuthorized(apiNames.COMMITTEE.UPDATE, page.data.user));
 
   let committee = $derived(data.committee);
+
+  const renderer = {
+    // needed to preserve line breaks
+    br(): string {
+      return `
+            <span><br /></span>`;
+    },
+  };
+
+  const breakMarked = new Marked();
+
+  breakMarked.use({ renderer });
 </script>
 
 <div class="sm:layout-container sm:py-0">
@@ -90,7 +102,7 @@
         href="/about#committees"><ArrowLeft class="size-4" />{m.back()}</a
       >
       <div
-        class="[&_a]:text-muted-foreground [&_a]:hover:text-foreground flex flex-col gap-1 [&_a]:transition-all [&_strong]:font-medium"
+        class="[&_a]:text-muted-foreground [&_a]:hover:text-foreground flex flex-col gap-1 leading-normal [&_a]:transition-all [&_strong]:font-medium"
       >
         <span class="font-medium">{committee.name}</span>
         <a href="/committees/{committee.shortName}">{m.committees_about()}</a>
@@ -100,9 +112,8 @@
         <a href="/committees/{committee.shortName}/news"
           >{m.committees_news()}</a
         >
-        <span>&nbsp;</span>
         <!-- eslint-disable-next-line svelte/no-at-html-tags Already sanitized -->
-        {@html marked.parseInline(data.links?.markdown ?? "")}
+        {@html breakMarked.parseInline(data.links?.markdown ?? "")}
       </div>
       {#if canEdit}
         <LinksDialog {data} />

src/routes/(app)/documents/Meeting.svelte

@@ -59,23 +59,26 @@
           disabled={!notice}
           variant="outline"
           class="cursor-pointer rounded-sm"
-          ><FileText /> {m.documents_notice()}</Button
+          ><FileText class="text-rosa-background" />
+          {m.documents_notice()}</Button
         ></a
       >
       <a href={agenda && agenda.thumbnailUrl!}
         ><Button
           variant="outline"
           disabled={!agenda}
           class="cursor-pointer rounded-sm"
-          ><FileText /> {m.documents_agenda()}</Button
+          ><FileText class="text-rosa-background" />
+          {m.documents_agenda()}</Button
         ></a
       >
       <a href={minutes && minutes.thumbnailUrl!}
         ><Button
           variant="outline"
           disabled={!minutes}
           class="cursor-pointer rounded-sm"
-          ><FileText /> {m.documents_minutes()}</Button
+          ><FileText class="text-rosa-background" />
+          {m.documents_minutes()}</Button
         ></a
       >
     </div>

src/routes/(app)/news/ArticleSearchResult.svelte

@@ -2,6 +2,7 @@
   import MemberAvatar from "$lib/components/member/MemberAvatar.svelte";
 
   import type { ArticleSearchReturnAttributes } from "$lib/search/searchTypes";
+  import { getFullName } from "$lib/utils/client/member";
   import { getLocale } from "$paraglide/runtime";
   const { data }: { data: ArticleSearchReturnAttributes } = $props();
   import dayjs from "dayjs";
@@ -26,7 +27,7 @@
         <MemberAvatar member={data.author} class="size-4" />
 
         <span class="text-muted-foreground line-clamp-1"
-          >{`${data.author.firstName} "${data.author.nickname}" ${data.author.lastName}`}</span
+          >{getFullName(data.author)}</span
         >
       </div>
     </div>

src/routes/(app)/news/NewsSearch.svelte

@@ -90,7 +90,7 @@
 
   {#if groupedResults.articles.length > 0}
     <ScrollArea
-      class="bg-background absolute! mr-4 max-h-48 max-w-108 overflow-scroll rounded-md border-[1px] sm:mr-0 sm:max-w-128 sm:min-w-128"
+      class="bg-background absolute! z-50 mr-4 max-h-48 max-w-108 overflow-scroll rounded-md border-[1px] sm:mr-0 sm:max-w-128 sm:min-w-128"
     >
       {#each groupedResults.articles as result, i (`article-${i}`)}
         <ArticleSearchResult data={result.data} />

src/routes/(app)/onboarding/+page.svelte

@@ -51,7 +51,7 @@
 <SetPageTitle title={m.onboarding()} />
 <div
   class="hero-image min-h-screen bg-cover bg-center"
-  style:--url="url({getFileUrl('minio/files/public/photos/stock2.jpg')})"
+  style:--url="url({getFileUrl('minio/files/public/photos/stock2.webp')})"
 >
   <div class="min-h-screen bg-cover py-16 md:bg-transparent">
     <div

src/routes/(app)/privacy-policy/+page.svelte

@@ -281,4 +281,6 @@ Integritetsskyddsmyndigheten kontaktas på följande e-postadress:
 `;
 </script>
 
-<MarkdownBody class="max-w-full" body={policy} />
+<div class="layout-container">
+  <MarkdownBody class="max-w-full" body={policy} />
+</div>