refactor: more constrast, clearer favs

src/routes/+page.svelte

@@ -177,7 +177,8 @@
     <div class="filterWrapper">
         <Button type="link" href="/filter?{searchParams}">
             <span class="search">
-                <img src={searchUrl} alt="search" /> Search
+                <img src={searchUrl} alt="search" />
+                Search
             </span>
         </Button>
     </div>
@@ -231,8 +232,8 @@
         display: grid;
         box-sizing: border-box;
         grid-template-columns: 1fr 1fr;
-        gap: 1rem;
-        padding: 1rem;
+        gap: 0.5rem;
+        padding: 0.5rem;
         max-width: 32rem;
         width: 100%;
         margin: 0 auto;
@@ -263,7 +264,6 @@
         border: none;
         color: #eaffeb;
         font-size: 1rem;
-        margin-right: 0.5rem;
         cursor: pointer;
     }
     .fav-button:hover {

src/routes/filter/+page.svelte

@@ -259,10 +259,12 @@
     }
     .time-filter-container input[type="time"] {
         background: none;
-        border: 2px solid #eaffeb;
+        border: 2px solid #000000;
         border-radius: 0.5rem;
         padding: 0.25rem 0.5rem;
-        color: #eaffeb;
+        color: #000000;
+        filter: brightness(0) saturate(100%) invert(98%) sepia(8%) saturate(555%) hue-rotate(54deg)
+            brightness(100%) contrast(102%);
     }
     .setToNow {
         display: flex;

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

@@ -108,16 +108,22 @@
     />
 {/if}
 <main>
-    <Carousel urls={imgUrls} />
-    <div class="nameContainer">
-        <div class="locationContainer">{space.location}</div>
+    <div class="imgContainer">
         {#await supabase.auth.getSession() then resp}
             {#if resp.data.session}
                 <div class="title-fav">
-                    <Favourite {isFavourite} onToggleFavourite={handleToggleFavourite} />
+                    <Favourite
+                        {isFavourite}
+                        onToggleFavourite={handleToggleFavourite}
+                        imgSize={27}
+                    />
                 </div>
             {/if}
         {/await}
+        <Carousel urls={imgUrls} />
+    </div>
+    <div class="nameContainer">
+        <div class="locationContainer">{space.location}</div>
     </div>
     {#if space.description != null && space.description.length > 0}
         <p class="descContainer">
@@ -226,11 +232,12 @@
         width: 100%;
         padding: 0.6rem;
         margin-top: -0.5rem;
-        background-color: #49bd85;
+        background-color: #189f5e;
         border-radius: 8px;
         font-size: 2.8rem;
         font-weight: bold;
         color: #ffffff;
+        z-index: 1;
     }
 
     .descContainer {
@@ -295,7 +302,7 @@
         padding: 0.7rem;
         border-radius: 0.5rem;
         border: none;
-        background-color: #49bd85;
+        background-color: #189f5e;
         color: #ffffff;
         font-size: 1rem;
         cursor: pointer;
@@ -335,18 +342,17 @@
         font-family: monospace;
         color: #eaffeb;
     }
-    /* .titleContainer {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin: -0.5rem 0 1rem;
-    } */
+    .imgContainer {
+        position: relative;
+    }
     .title-fav {
-        font-size: 2rem;
-        background: rgba(0, 0, 0, 0.4);
-        border-radius: 50%;
-        padding: 0.25rem;
-        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.7);
-        color: red;
+        position: absolute;
+        top: 0;
+        right: 0;
+        background: #189f5e;
+        border-radius: 0 0 0 0.5rem;
+        z-index: 1;
+        width: 3.75rem;
+        height: 3.75rem;
     }
 </style>

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

@@ -327,10 +327,18 @@
     <Text
         name="location"
         bind:value={studySpaceData.location}
-        placeholder="Room 123, Floor 1"
+        placeholder="Huxeley Labs 225"
+        maxlength={35}
         required
     />
 
+    {#if (studySpaceData.location ?? "").length > 25}
+        <p class="lengthPopup">
+            Try to keep the name succinct—for example, building + room name. Put any further
+            information like floor number in the description.
+        </p>
+    {/if}
+
     <div class="compulsoryTags">
         <div class="compulsoryContainer">
             <label for="volume">Sound level:</label>
@@ -629,7 +637,7 @@
     .additionalImages {
         padding: 0.5rem 1rem;
         border-radius: 0.5rem;
-        background: linear-gradient(-83deg, #3fb095, #49bd85);
+        background: linear-gradient(-83deg, #3fb095, #189f5e);
         box-shadow: 0rem 0rem 0.5rem #182125;
         color: #eaffeb;
         border: none;
@@ -662,4 +670,10 @@
         background-color: #eaffeb;
         border-radius: 5rem;
     }
+
+    .lengthPopup {
+        background-color: #2e4653;
+        border-radius: 0.5rem;
+        padding: 0.5rem;
+    }
 </style>

src/routes/space/reports/+page.svelte

@@ -99,7 +99,7 @@
         padding: 0.5rem;
         border-radius: 0.5rem;
         border: none;
-        background-color: #49bd85;
+        background-color: #189f5e;
         color: #ffffff;
         font-size: 1rem;
         cursor: pointer;