fix: unregistration and preview message (#97)

Co-authored-by: Anton Lilleby <[email protected]>
capraconsulting · Jul 31, 2024 · 04774be · 04774be
1 parent dda099d
commit 04774be
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 40 deletions.
diff --git a/app/src/components/external/RegistrationFormExternal.svelte b/app/src/components/external/RegistrationFormExternal.svelte
@@ -106,7 +106,7 @@
       {/if}
     {/if}
 
-    <div class="pt-4 text-sm">
+    <div class="text-balance pt-4 text-sm">
       <span class="font-light"
         >Ved å melde deg på arrangementet samtykker du til at du har lest og forstått
       </span>

diff --git a/app/src/components/external/UnregistrationFormExternal.svelte b/app/src/components/external/UnregistrationFormExternal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { dateHasPassed } from "$lib/utils/date.util";
-  import { Input, Button, ButtonGroup, Spinner } from "flowbite-svelte";
+  import { Input, Button, Spinner } from "flowbite-svelte";
   import type { Event } from "$models/sanity.model";
 
   export let event: Event;
@@ -12,46 +12,38 @@
 
 {#if !dateHasPassed(event.deadline)}
   <form
-    class="mt-20 flex flex-col gap-6"
+    class="mt-20 flex flex-col gap-2"
     method="POST"
     action="?/submitUnregistrationExternal"
     use:enhance
   >
     <input type="text" name="subject" id="subject" class="hidden" />
 
-    <div
-      class="mb-8 flex flex-col items-start justify-center rounded-lg border p-4 dark:border-gray-700 dark:bg-gray-800 sm:p-8"
-    >
-      <div class="flex flex-col items-center gap-5">
-        <div class="items-start-4 flex flex-col">
-          <h4
-            class="text-2xl font-bold leading-none tracking-tight text-gray-900 dark:text-white sm:text-2xl"
-          >
-            <h2 class="pb-4 text-base font-bold sm:text-xl">Ønsker du å melde deg av?</h2>
-          </h4>
+    <h2 id="unregistration" class="pb-4 text-base font-bold sm:text-xl">
+      Ønsker du å melde deg av?
+    </h2>
 
-          <ButtonGroup class="w-100">
-            <Input
-              class="bg-white"
-              type="text"
-              placeholder="[email protected]"
-              name="email"
-              bind:value={$form.email}
-            />
-            <Button class="w-48" type="submit" color="light" disabled={$delayed}>
-              Meld meg av
-              <span class="w-3">
-                {#if $delayed}
-                  <Spinner color="gray" class="ml-2 " size="4" />
-                {/if}
-              </span>
-            </Button>
-          </ButtonGroup>
-          {#if $errors.email}
-            <p class="text-xs text-red-600">Fyll inn gyldig epost.</p>
-          {/if}
-        </div>
+    <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+      <Input
+        class="bg-white"
+        type="text"
+        placeholder="[email protected]"
+        name="email"
+        bind:value={$form.email}
+      />
+      <div class="flex items-center">
+        <Button pill color="dark" type="submit" disabled={$delayed}>
+          <span class="ml-3">Meld meg av</span>
+          <span class="w-3">
+            {#if $delayed}
+              <Spinner color="gray" class="ml-2 " size="4" />
+            {/if}
+          </span>
+        </Button>
       </div>
+      {#if $errors.email}
+        <p class="text-xs text-red-600">Fyll inn gyldig epost.</p>
+      {/if}
     </div>
   </form>
 {/if}
diff --git a/app/src/components/internal/UnregistrationFormInternal.svelte b/app/src/components/internal/UnregistrationFormInternal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { dateHasPassed } from "$lib/utils/date.util";
   import type { Event } from "$models/sanity.model";
-  import { Button, Spinner } from "flowbite-svelte";
+  import { Badge, Button, Spinner } from "flowbite-svelte";
 
   export let event: Event;
   export let enhance;
@@ -21,7 +21,7 @@
       use:enhance
     >
       <div class="flex w-full">
-        <Button pill color="light" type="submit" disabled={$delayed}>
+        <Button pill color="dark" type="submit" disabled={$delayed}>
           <span class="ml-3">Meld meg av</span>
           <span class="w-3">
             {#if $delayed}

diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
@@ -12,11 +12,16 @@
 {#if $isPreviewing}
   <a
     href={`/preview/disable?redirect=${$page.url.pathname}`}
-    class="box-shadow group fixed bottom-4 right-4 z-50 block rounded px-3 py-2 text-center text-xs font-medium leading-4 text-gray-800 shadow hover:bg-red-500 hover:text-white"
+    class="box-shadow group fixed bottom-14 right-4 z-50 block rounded bg-white px-3 py-2 text-center text-xs font-medium leading-4 shadow hover:bg-red-500 hover:text-white dark:text-gray-800"
   >
-    <span class="block group-hover:hidden">Preview Enabled</span>
-    <span class="hidden group-hover:block">Disable Preview</span>
+    <span class="block group-hover:hidden">Forhåndsvisning på</span>
+    <span class="hidden group-hover:block">Forhåndsvisning av</span>
   </a>
+  <span
+    class="box-shadow group fixed bottom-4 right-4 z-50 block rounded bg-black px-3 py-2 text-center text-xs font-medium leading-4 text-white shadow"
+  >
+    <span>For å se forhåndsvisning må arrangementet være publisert</span>
+  </span>
 {/if}
 
 <Header {auth} />

diff --git a/studio/sanity.config.ts b/studio/sanity.config.ts
@@ -33,7 +33,7 @@ export default defineConfig({
     }),
     structureTool({ title: "Struktur", defaultDocumentNode: getDefaultDocumentNode }),
     presentationTool({
-      title: "Presentasjon",
+      title: "Forhåndsvisning",
       previewUrl: {
         origin: process.env.SANITY_STUDIO_PREVIEW_URL,
         previewMode: {