Updates to UI

src/app.scss

@@ -18,8 +18,10 @@
   --large-curve: 0.9375rem;
 }
 
+html,
 body {
   margin: 0;
+  min-height: 100vh;
 }
 
 a {

src/components/profile/Profile.svelte

@@ -2,13 +2,10 @@
   import {onMount} from "svelte";
   import {getUser} from "~/api/login";
   import LazyDelay from "~/lib/LazyDelay.svelte";
+  import type {ProfileData} from "~/stores/login";
 
   export let id: "@me" | number;
-  let user: {
-    email: string;
-    username: string;
-    display_name: string;
-  };
+  let user: ProfileData;
   let userIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==";
 
   onMount(async () => {

src/components/settings/Settings.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import LazyDelay from "~/lib/LazyDelay.svelte";
+  import {profileStore} from "~/stores/login";
+</script>
+
+<div class="settings-widget">
+  <div class="settings-content">
+    {#if $profileStore}
+      <div>Honestly I'm just too lazy to make this yet</div>
+    {:else}
+      <LazyDelay delayMs={500}>Loading...</LazyDelay>
+    {/if}
+  </div>
+</div>
+
+<style lang="scss">
+  @import "../../assets/panel.scss";
+
+  .settings-widget {
+    @include panel;
+
+    > .settings-content {
+      background: var(--bg-panel);
+      border-radius: var(--large-curve);
+      display: flex;
+      flex-direction: column;
+      padding: 12px 24px;
+
+      > .icon {
+        margin: 0 auto 12px auto;
+        width: 150px;
+        height: 150px;
+        border-radius: var(--small-curve);
+      }
+
+      > .displayName {
+        margin: 0;
+      }
+
+      > .username {
+        color: #8e8e8e;
+        margin: 0;
+      }
+
+      > .email {
+        margin: 0;
+      }
+    }
+  }
+</style>

src/lib/HeaderDropdown.svelte

@@ -7,19 +7,34 @@
 
   let open = false;
 
-  function handleClick() {
-    open = !open;
-  }
-
   function logoutAction() {
     loginStore.set(null);
     navigate("/");
   }
+
+  function clickOutside(element, callbackFunction) {
+    function onClick(event) {
+      if (!element.contains(event.target)) {
+        callbackFunction();
+      }
+    }
+
+    document.body.addEventListener("click", onClick);
+
+    return {
+      update(newCallbackFunction) {
+        callbackFunction = newCallbackFunction;
+      },
+      destroy() {
+        document.body.removeEventListener("click", onClick);
+      },
+    };
+  }
 </script>
 
-<div class="dropdown {open ? 'dropdown-open' : ''}">
+<div class="dropdown {open ? 'dropdown-open' : ''}" use:clickOutside={() => (open = false)}>
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div class="dropdown-header" on:click={handleClick}>
+  <div class="dropdown-header" on:click={() => (open = !open)}>
     <div class="dropdown-title">
       {#if profile.icon == "0"}
         <img
@@ -68,6 +83,10 @@
 
     &.dropdown-open {
       background-color: var(--bg-panel-action);
+
+      -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
+      -moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
+      box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.5);
     }
 
     > .dropdown-header {
@@ -78,10 +97,6 @@
       height: 100%;
       padding: 0 16px;
 
-      &:hover {
-        background-color: var(--bg-panel);
-      }
-
       > .dropdown-title {
         display: flex;
         align-items: center;

src/routes/settings/SettingsRoute.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
+  import Settings from "~/components/settings/Settings.svelte";
   import Page from "~/lib/Page.svelte";
-
 </script>
 
 <Page>
-  
+  <Settings />
 </Page>

src/stores/login.ts

@@ -21,6 +21,7 @@ export interface ProfileData {
   icon: string;
   display_name: string;
   username: string;
+  email: string;
 }
 
 export const profileStore = writable<ProfileData>(undefined);