style: implement new design

capraconsulting · Dec 17, 2024 · 29e5dec · 29e5dec · vercel · Dec 17, 2024
1 parent 8d327a0
commit 29e5dec
Show file tree

Hide file tree

Showing 16 changed files with 5,814 additions and 4,495 deletions.
diff --git a/app/package.json b/app/package.json
@@ -27,6 +27,7 @@
     "kysely-postgres-js": "^2.0.0",
     "nodemailer": "^6.9.14",
     "postgres": "^3.4.4",
+    "svelte-icons": "^2.1.0",
     "validator": "^13.12.0",
     "zod": "^3.23.8"
   },

diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml
diff --git a/app/src/components/external/RegistrationFormExternal.svelte b/app/src/components/external/RegistrationFormExternal.svelte
@@ -37,6 +37,7 @@
         type="text"
         name="fullName"
         id="fullName"
+        placeholder="Fornavn Etternavn"
         bind:value={$form.fullName}
       />
       {#if $errors.fullName}
@@ -49,9 +50,10 @@
       <Input
         size="sm"
         class="bg-white"
-        type="text"
+        type="email"
         name="email"
         id="email"
+        placeholder="E-post"
         bind:value={$form.email}
       />
       {#if $errors.email}
@@ -67,6 +69,7 @@
         type="text"
         name="telephone"
         id="telephone"
+        placeholder="123 45 678"
         bind:value={$form.telephone}
       />
       {#if $errors.telephone}
@@ -75,8 +78,8 @@
     </div>
 
     <div class="flex flex-col gap-1">
-      <Label class="font-bold" for="firm">Selskap</Label>
-      <Input size="sm" class="bg-white" type="text" name="firm" id="firm" bind:value={$form.firm} />
+      <Label class="font-bold" for="firm">Bedrift/selskap</Label>
+      <Input size="sm" class="bg-white" type="text" name="firm" id="firm" bind:value={$form.firm} placeholder="Organisasjon" />
       {#if $errors.firm}
         <p class="text-xs text-red-600">Fyll inn gyldig selskapsnavn (minst 2 bokstaver).</p>
       {/if}

diff --git a/app/src/components/external/UnregistrationFormExternal.svelte b/app/src/components/external/UnregistrationFormExternal.svelte
@@ -42,7 +42,7 @@
     </div>
 
     {#if $errors.email}
-      <p class="text-xs text-red-600">Fyll inn gyldig epost.</p>
+      <p class="text-xs text-red-600">Fyll inn gyldig e-post.</p>
     {/if}
   </form>
 {/if}
diff --git a/app/src/components/shared/Deadline.svelte b/app/src/components/shared/Deadline.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { formatDateWithWeekDay, formatTime } from "$lib/utils/date.util";
+  import { formatDate, formatTime } from "$lib/utils/date.util";
   export let deadline: string;
 </script>
 
-<div class="flex gap-1">
+<div class="flex text-sm gap-1 rounded-xl bg-gray-100 py-2 px-4 w-fit">
   <p>
-    Fristen for å melde seg på er {formatDateWithWeekDay(deadline)} kl {formatTime(deadline)}
+    Påmeldingsfrist kl.{formatTime(deadline)}, {formatDate(deadline)}
   </p>
 </div>
diff --git a/app/src/components/shared/EventBadges.svelte b/app/src/components/shared/EventBadges.svelte
@@ -8,23 +8,23 @@
 
 <div class="flex flex-wrap items-center gap-2">
   {#if event.openForExternals}
-    <Badge rounded class="h-6 whitespace-nowrap border border-black bg-transparent dark:bg-zinc-800"
+    <Badge class="rounded-lg h-6 whitespace-nowrap border border-gray-300 bg-transparent dark:bg-zinc-800"
       >For alle</Badge
     >
   {:else}
-    <Badge rounded class="h-6 whitespace-nowrap border border-black bg-transparent dark:bg-zinc-800"
+    <Badge rounded class="rounded-lg h-6 whitespace-nowrap border border-gray-300 bg-transparent dark:bg-zinc-800"
       >Kun interne</Badge
     >
   {/if}
-  <Badge rounded class="h-6 whitespace-nowrap border border-black bg-transparent dark:bg-zinc-800"
+  <Badge rounded class="rounded-lg h-6 whitespace-nowrap border border-gray-300 bg-transparent dark:bg-zinc-800"
     >{event.category}</Badge
   >
-  <Badge rounded class="h-6 whitespace-nowrap border border-black bg-transparent dark:bg-zinc-800">
+  <Badge rounded class="rounded-lg h-6 whitespace-nowrap border border-gray-300 bg-transparent dark:bg-zinc-800">
     {formatDate(event.start)}
   </Badge>
 
   {#if event.attending}
-    <Badge rounded class="h-6 whitespace-nowrap border-none bg-yellowSpark text-black"
+    <Badge rounded class="rounded-lg h-6 whitespace-nowrap border-none bg-yellowSpark text-black"
       >Du er påmeldt</Badge
     >
   {/if}

diff --git a/app/src/components/shared/EventCard.svelte b/app/src/components/shared/EventCard.svelte
@@ -9,36 +9,28 @@
 </script>
 
 <a
-  class="flex flex-col rounded-3xl last:relative hover:bg-ireneGreen hover:transition-[2s] dark:hover:bg-zinc-700 sm:flex-row"
+  class="flex flex-col last:relative sm:flex-row"
   href={`/event/${event._id}`}
 >
-  <div class="flex h-full w-full flex-col">
-    <div class="max-h-[240px] min-h-[240px] sm:max-h-[300px] sm:min-h-[300px]">
+  <div class="group flex h-full w-full flex-col hover:underline">
+    <div class="max-h-[260px] min-h-[260px] sm:max-h-[300px] sm:min-h-[300px] md:max-h-[240px] md:min-h-[240px]
+    lg:max-h-[200px] lg:min-h-[200px] xl:max-h-[240px] xl:min-h-[240px] overflow-hidden rounded-2xl">
       {#if event.image}
         <img
-          class="h-full w-full rounded-3xl object-cover"
+          class="h-full w-full object-cover transition duration-300 ease-in-out group-hover:scale-105"
           src={urlFor(event.image).url()}
           alt="Bilde for arrangementet: {event.title}"
         />
       {:else}
-        <div class="h-full w-full rounded-3xl bg-zinc-100 dark:bg-zinc-800" />
+        <div class="h-full w-full bg-zinc-100 dark:bg-zinc-800" />
       {/if}
     </div>
 
-    <div class="m-3 grid h-full grid-cols-1 content-between gap-2 sm:m-5">
+    <div class="my-3 grid h-full grid-cols-1 content-between gap-2 sm:my-5">
       <div class="flex flex-col gap-2 break-words">
-        <h2 class="text-2xl font-semibold">
+        <h2 class="text-xl font-semibold line-clamp-2">
           {event.title}
         </h2>
-        <EventBadges {event} />
-        {#if event.summary}
-          <p class="text-base font-light sm:text-lg">{event.summary}</p>
-        {/if}
-      </div>
-
-      <div class="mt-4 flex justify-between">
-        <EventLogos {event} height={6} />
-        <ArrowRight class="mr-2" size="20" />
       </div>
     </div>
   </div>

diff --git a/app/src/components/shared/EventCategoryFilter.svelte b/app/src/components/shared/EventCategoryFilter.svelte
@@ -30,14 +30,14 @@
   };
 </script>
 
-<ButtonGroup class="mt-8 flex-row gap-2 shadow-none">
+<ButtonGroup class="pb-7 flex-row md:self-end gap-2 shadow-none">
   {#each categories as { title, keyword }}
     <Button
       on:click={() => handleCategoryChange(keyword)}
       class={`${
         selectedCategory === keyword
           ? "h-7 !rounded-lg !border-zinc-800 bg-zinc-800 text-white hover:bg-zinc-800 dark:bg-zinc-600 dark:hover:bg-zinc-600"
-          : "h-7 !rounded-lg border border-black hover:bg-ireneGreen dark:border-zinc-800 dark:bg-zinc-800 dark:hover:border-zinc-700 dark:hover:bg-zinc-700"
+          : "h-7 !rounded-lg border border-black hover:bg-zinc-800 hover:text-white dark:border-zinc-800 dark:bg-zinc-800 dark:hover:border-zinc-700 dark:hover:bg-zinc-700"
       }`}
     >
       {title}

diff --git a/app/src/components/shared/EventInfoBox.svelte b/app/src/components/shared/EventInfoBox.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <div
-  class="flex h-full w-full flex-col gap-1 hyphens-auto rounded-xl bg-zinc-100 p-3 text-sm font-light dark:bg-zinc-800 sm:p-6 sm:text-base"
+  class="flex h-full w-full flex-col gap-1 hyphens-auto rounded-xl border p-3 text-sm font-light dark:bg-zinc-800 sm:p-6 sm:text-base"
 >
   <div class="flex items-center">
     <Lightbulb class="mr-2 flex-none" />

diff --git a/app/src/components/shared/EventListItem.svelte b/app/src/components/shared/EventListItem.svelte
@@ -8,17 +8,17 @@
 </script>
 
 <a
-  class="flex flex-col justify-between rounded-md bg-zinc-100 px-3 py-4 hover:bg-ireneGreen hover:transition-[2s] dark:border-zinc-800
-  dark:bg-zinc-800 dark:hover:bg-zinc-700 lg:flex-row"
+  class="flex flex-col justify-between rounded-md px-3 py-4 hover:transition-[3s] border border-gray-200 hover:border-gray-800 dark:border-zinc-800
+  dark:bg-zinc-800 dark:hover:bg-zinc-700 md:flex-row"
   href={`/event/${event._id}`}
 >
-  <div class="flex flex-col gap-3 px-0 font-light lg:flex-row lg:gap-2 lg:px-2">
+  <div class="flex flex-col gap-3 px-0 font-light md:flex-row lg:gap-2 lg:px-2">
     <h2 class="max-w-md truncate whitespace-pre-wrap pr-3 text-xl">
       {event.title}
     </h2>
     <EventBadges {event} />
   </div>
-  <div class="flex flex-row items-center justify-between gap-6 pt-4 lg:pt-0">
+  <div class="flex flex-row items-center justify-between gap-6 pt-4 md:pt-0">
     <EventLogos {event} height={5} />
     <ArrowRight class="mr-2" />
   </div>

diff --git a/app/src/components/shared/EventSummary.svelte b/app/src/components/shared/EventSummary.svelte
@@ -43,7 +43,7 @@
     <div class="group relative w-full sm:h-60 sm:w-[60%]">
       <div
         aria-hidden="true"
-        class="absolute left-0 top-0 h-full w-full rounded-xl duration-1000 group-hover:translate-x-2 group-hover:translate-y-2"
+        class="absolute left-0 top-0 h-full w-full rounded-xl"
         style="background: {event.image.palette.darkMuted.background}"
       ></div>
 

diff --git a/app/src/components/shared/RegistrationFoodPreference.svelte b/app/src/components/shared/RegistrationFoodPreference.svelte
@@ -12,6 +12,7 @@
     type="text"
     name="foodPreference"
     id="foodPreference"
+    placeholder="Skriv dine allergier og preferanser"
     bind:value={$form.foodPreference}
   />
 </div>
diff --git a/app/src/components/shared/SignInOrOut.svelte b/app/src/components/shared/SignInOrOut.svelte
@@ -24,8 +24,8 @@
   </div>
 {:else}
   <Button
-    color="dark"
-    class="h-7"
+    color="light"
+    class="h-7 border-none"
     pill
     on:click={async () => {
       isSigningIn = true;

diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
@@ -26,7 +26,7 @@
 
 <Header {auth} />
 
-<div class="mx-auto min-h-[90vh] p-4 sm:max-w-[1000px]">
+<div class="mx-auto min-h-[90vh] p-4 sm:px-12 sm:max-w-[1200px]">
   <main class="mb-16 mt-8">
     <slot />
   </main>

diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+  import ArrowDownIcon from "svelte-icons/fa/FaArrowDown.svelte";
+  import { Button } from "flowbite-svelte";
+
   import EventCard from "$components/shared/EventCard.svelte";
   import EventListItem from "$components/shared/EventListItem.svelte";
   import EventCategoryFilter from "$components/shared/EventCategoryFilter.svelte";
@@ -11,6 +14,8 @@
     if (!selectedCategory) return true;
     return category.toLowerCase() === selectedCategory;
   });
+
+  let amountOfVisibleEvents = 6;
 </script>
 
 <svelte:head>
@@ -31,9 +36,23 @@
 
   <div class="flex flex-col gap-4 py-5">
     {#if futureEventsFiltered.length}
-      {#each futureEventsFiltered as event}
+      {#each futureEventsFiltered.slice(0, amountOfVisibleEvents) as event}
         <EventListItem {event} />
       {/each}
+      {#if futureEventsFiltered.length >= amountOfVisibleEvents}
+        <div class="flex flex-wrap self-center mt-6">
+          <Button
+            class="hover:bg-zinc-800 hover:text-white dark:border-zinc-800 dark:bg-zinc-800 dark:hover:border-zinc-700 dark:hover:bg-zinc-700"
+            pill
+            color="light"
+            on:click={() => amountOfVisibleEvents += 6}
+            padding={3}
+          >
+            <span>Se flere arrangementer</span>
+            <span class="ml-2 w-[12px]"><ArrowDownIcon /></span>
+          </Button>
+        </div>
+      {/if}
     {:else}
       <div class="text-xl font-light">Fant ingen kommende arrangementer i denne kategorien 😭</div>
     {/if}
@@ -43,7 +62,7 @@
 <section class="pb-8">
   <h1 class="pb-12 pt-10 text-4xl font-semibold md:w-[30%] md:text-5xl">Tidligere arrangementer</h1>
 
-  <div class="grid grid-cols-1 gap-9 md:grid-cols-2">
+  <div class="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
     {#if pastEvents.length}
       {#each pastEvents as event}
         <EventCard {event} />