adds dark mode

web/src/routes/trail/edit/[id]/+page.svelte

@@ -358,7 +358,7 @@
             style="display: none;"
             on:change={handleFileSelection}
         />
-        <hr />
+        <hr class="border-separator" />
         <h3 class="text-xl font-semibold">Basic Info</h3>
         <div class="flex gap-4 justify-around">
             <div class="flex flex-col items-center">
@@ -413,7 +413,7 @@
             ></Select>
         {/if}
         <Toggle name="public" label="Public" bind:value={$form.public}></Toggle>
-        <hr />
+        <hr class="border-separator"/>
         <h3 class="text-xl font-semibold">Waypoints</h3>
         <ul>
             {#each $form.expand.waypoints ?? [] as waypoint, i}
@@ -433,7 +433,7 @@
             on:click={beforeWaypointModalOpen}
             ><i class="fa fa-plus mr-2"></i>Add Waypoint</button
         >
-        <hr />
+        <hr class="border-separator"/>
         <h3 class="text-xl font-semibold">Photos</h3>
         <div class="flex gap-4 max-w-full overflow-x-scroll shrink-0">
             <button
@@ -460,7 +460,7 @@
                 </div>
             {/each}
         </div>
-        <hr />
+        <hr class="border-separator"/>
         <h3 class="text-xl font-semibold">Summit Book</h3>
         <ul>
             {#each $form.expand.summit_logs ?? [] as log, i}
@@ -479,7 +479,7 @@
             on:click={beforeSummitLogModalOpen}
             ><i class="fa fa-plus mr-2"></i>Add Entry</button
         >
-        <hr />
+        <hr class="border-separator"/>
         <Button
             primary={true}
             large={true}

web/src/routes/trail/view/[id]/+page.svelte

@@ -158,10 +158,11 @@
                 </h3>
             </div>
             {#if $currentUser && $currentUser.id == $trail.author}
-                <div class="px-4 py-2 bg-white rounded-full space-x-2">
+                <div class="px-4 py-2 bg-menu-background rounded-full space-x-2">
                     {#each dropdownItems as item}
                         <button
-                            class="rounded-full py-1 px-[10px] hover:bg-gray-100 focus:ring-4 ring-gray-200 transition-colors"
+                            data-title={item.text}
+                            class="tooltip btn-icon"
                             on:click={() => handleDropdownClick(item)}
                             ><i class="fa fa-{item.icon}"></i></button
                         >
@@ -201,13 +202,13 @@
         {/if}
     </section>
     {#if $trail.tags && $trail.tags.length > 0}
-        <hr />
+        <hr class="border-separator"/>
         <section class="flex p-8 gap-4 text-gray-600">
             {#each $trail.tags as tag}
                 <span class="py-2 px-4 border rounded-full">{tag}</span>
             {/each}
         </section>
-        <hr />
+        <hr class="border-separator"/>
     {/if}
     <section class="p-8">
         <Tabs {tabs} bind:activeTab></Tabs>