feat: initial logins

src/routes/space/[id]/+page.svelte

@@ -8,11 +8,10 @@
     import Feedback from "$lib/components/Feedback.svelte";
     import { onMount } from "svelte";
     import { gmapsLoader } from "$lib";
+    import Button from "$lib/components/Button.svelte";
 
     const { data } = $props();
-    const { space, supabase } = $derived(data);
-
-    let adminMode = $state(true);
+    const { space, supabase, adminMode } = $derived(data);
 
     const place = $derived(space.building_location as google.maps.places.PlaceResult);
     const imgUrls = $derived(
@@ -109,20 +108,18 @@
         class="feedbackButton"
         onclick={() => {
             isFeedbackPromptVisible = true;
-        }}>Review the study space?</button
+        }}
     >
+        Help categorise this space
+    </button>
 
-    {#if adminMode}
-        <a href={`/space/${space.id}/edit`} class="editButton">Edit</a>
-    {:else}
-        <button
-            type="button"
-            class="reportButton"
-            onclick={() => {
-                isReportVisible = true;
-            }}>Report</button
-        >
-    {/if}
+    <div class="actions">
+        {#if adminMode}
+            <Button href="/space/{space.id}/edit" type="link">Edit</Button>
+        {:else}
+            <Button onclick={() => (isReportVisible = true)} style="red">Report</Button>
+        {/if}
+    </div>
 </main>
 
 <style>
@@ -221,17 +218,6 @@
         border-radius: 0.5rem;
         border: 2px solid #eaffeb;
     }
-    .reportButton {
-        width: 100%;
-        padding: 0.4rem;
-        border-radius: 0.5rem;
-        border: none;
-        background-color: #bd4949;
-        color: #ffffff;
-        font-size: 1rem;
-        cursor: pointer;
-        margin-top: 1rem;
-    }
     .feedbackButton {
         width: 100%;
         padding: 0.7rem;
@@ -244,17 +230,9 @@
         margin-top: 1rem;
         text-align: center;
     }
-    .editButton {
-        width: 100%;
-        padding: 0.4rem;
-        border-radius: 0.5rem;
-        border: none;
-        background-color: #49bd85;
-        color: #ffffff;
-        font-size: 1rem;
-        cursor: pointer;
-        margin-top: 1rem;
-        text-decoration: none;
-        text-align: center;
+    .actions {
+        display: flex;
+        flex-direction: column;
+        padding-top: 1rem;
     }
 </style>