i hate css, mobile works good, and now you can upload files

src/IntroDownloader.svelte

@@ -4,13 +4,19 @@
     import { onMount } from 'svelte';
     import { uploadIntro } from './api.js';
 
+    let enteredUploadTitle = '';
+    let selectedUploadGuild = null;
+    let selectedFile = null;
+    let uploadPromise = null;
+
     let enteredUrl = '';
     let enteredTitle = '';
-    let selectedFile = null;
     let selectedGuild = null;
-    let canDownloadAny = false;
     let downloadPromise = null;
-    let uploadPromise = null;
+
+    let canDownloadAny = false;
+
+
     let allowedGuildList = [];
 
     $: allowedGuildList = $member.guilds
@@ -32,9 +38,9 @@
 
     const upload = () => {
         // TODO: limit to 1 file
-        if (!!selectedGuild) {
+        if (!!selectedUploadGuild) {
             uploadPromise = (async () => {
-                await uploadIntro(selectedGuild.id, enteredTitle, selectedFile[0], $member.token);
+                await uploadIntro(selectedUploadGuild.id, enteredUploadTitle, selectedFile[0], $member.token);
                 await intros.fetchIntros($member.guilds);
             })();
         } else {
@@ -45,7 +51,7 @@
 
 {#if canDownloadAny}
     <div id="cardContent">
-        <div>
+        <div id="uploader">
             <h3>Download New Intro</h3>
             {#if !!downloadPromise}
                 {#await downloadPromise}
@@ -60,7 +66,9 @@
             {:else}
                 <select bind:value={selectedGuild}>
                     {#each allowedGuildList as guild}
-                        <option value={guild}>{guild.name}</option>
+                        <option value={guild}>
+                            {guild.name}
+                        </option>
                     {/each}
                 </select>
                 <input bind:value={enteredTitle} placeholder='enter intro title'>
@@ -68,7 +76,7 @@
                 <button on:click={download}>Download</button>
             {/if}
         </div>
-        <div>
+        <div id="uploader">
             <h3>Upload New Intro</h3>
             {#if !!uploadPromise}
                 {#await uploadPromise}
@@ -81,13 +89,20 @@
                     <button on:click={() => {uploadPromise = null}}>Ok</button>
                 {/await}
             {:else}
-                <select bind:value={selectedGuild}>
+                <select bind:value={selectedUploadGuild} placeholder='Choose Guild'>
                     {#each allowedGuildList as guild}
                         <option value={guild}>{guild.name}</option>
                     {/each}
                 </select>
-                <input bind:value={enteredTitle} placeholder='enter intro title'>
+                <input bind:value={enteredUploadTitle} placeholder='enter intro title'>
-                <input type="file" accept="audio/*, video/*" bind:files={selectedFile}>
+                <label for="fileSelect" id="uploadLabel">
+                    {#if !!selectedFile}
+                        {selectedFile[0].name}
+                    {:else}
+                        Select Intro
+                    {/if}
+                    <input id="fileSelect" type="file" accept="audio/*, video/*" bind:files={selectedFile}>
+                </label>
                 <button on:click={upload}>Upload</button>
             {/if}
         </div>
@@ -95,16 +110,17 @@
 {/if}
 
 <style>
-    div {
+    div#uploader {
         display: flex;
+        position: relative;
         width: 85%;
         height: 85%;
         flex-direction: column;
         align-items: center;
         background-color: #2a2a4a;
-        padding: 1.5em;
+        padding: 16px;
         box-shadow: 1px 3px 4px 1px #1f1f36;
-        margin: 0.5em;
+        margin: 16px;
     }
 
     h3 {
@@ -112,14 +128,47 @@
         margin-bottom: 2em;
     }
 
+    select {
+        appearance: none;
+        background-color: #393963;
+        color: lightgrey;
+        width: 100%;
+    }
+
+    option {
+        text-align: center;
+    }
+
     input, button {
         margin: 0.5em;
     }
 
+    label#uploadLabel {
+        width: 100%;
+        color: lightgray;
+        text-align: center;
+        border-style: none;
+        border-radius: 4px;
+        background-image: linear-gradient(0deg, #1f1f36, #23233d);
+        padding: 0.5em 0.5em 0.5em;
+        margin: 0 0 16px 0px;
+        user-select: none;
+    }
+
+    label#uploadLabel:hover {
+        background-image: linear-gradient(0deg, #34345b, #393963);
+        box-shadow: 1px 3px 15px 1px #1f1f36;
+        cursor: pointer;
+    }
+
+    input#fileSelect {
+        display: none;
+    }
+
     input {
+        width: 100%;
         border-style: solid;
         border-color: #323259;
-        width: 100%;
         text-align: center;
         color: lightgrey;
         background-image: linear-gradient(0deg, #23233d, #1f1f36);

src/app.html

@@ -13,7 +13,7 @@
             flex-direction: column;
             align-items: center;
             background-color: #313052;
-            font-family: 'Cantarell';
+            width: max-content;
         }
 
         h1, h2, h3, h4, h5, p, label, li {
@@ -22,13 +22,15 @@
 
         div#cardContent {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
-            width: 85%;
+            align-items: center;
             justify-items: center;
+            justify-content: center;
             background-color: #323259;
             box-shadow: 1px 3px 15px 1px #1f1f36;
-            margin: 2em;
+            margin-bottom: 2em;
             padding: 2em;
+            gap: 1em;
         }
 
         div#list {
@@ -43,6 +45,7 @@
 
         button, #list-item {
             color: lightgray;
+            font-family: 'JetBrains Mono';
             border-style: none;
             border-radius: 4px;
             background-image: linear-gradient(0deg, #1f1f36, #23233d);
@@ -50,6 +53,7 @@
             margin: 0 0 16px 0px;
             width: 100%;
             user-select: none;
+            overflow-wrap: break-word;
         }
 
         button:hover, #list-item:hover {
@@ -64,7 +68,5 @@
             background-image: linear-gradient(0deg, #40406e, #444475);
         }
     </style>
-	<body data-sveltekit-preload-data="hover">
+	<body data-sveltekit-preload-data="hover" style="display: block; margin: 0; width: 100%; overflow-x: hidden; overflow-y: scroll;">%sveltekit.body%</body>
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
 </html>

src/routes/+layout.svelte

@@ -0,0 +1,5 @@
+<script>
+    import './global.css';
+</script>
+
+<slot></slot>

src/routes/+page.svelte

@@ -28,11 +28,10 @@
     }
 </script>
 
-<h1>MemeJoin - A bot for user intros</h1>
-
 {#if !!$member}
 <div id="mainContent">
-    <p>{$member.username}</p>
+    <h1>MemeJoin - A bot for user intros</h1>
+    <p style='text-align:center;'>{$member.username}</p>
 
     <IntroDownloader />
     <div id="cardContent">
@@ -82,13 +81,15 @@
 {/if}
 
 <style>
-    div#mainContent {
+    h1 {
-        display: flex;
+        text-align: center;
-        flex-direction: column;
-        align-items: center;
-        width: 85%;
     }
 
+    div#mainContent {
+        display: grid;
+        top: 10em;
+        margin: 16px;
+    }
 
     div#guild {
         display: flex;
@@ -108,7 +109,7 @@
 
     div#channel-settings {
         display: flex;
-        width: 100%;
+        width: 85%;
         flex-direction: column;
         align-items: center;
         background-color: #2a2a4a;

src/routes/global.css

@@ -0,0 +1,8 @@
+@font-face {
+    font-family: 'JetBrains Mono';
+    src: url('/fonts/JetBrainsMono-Medium.woff2') format('woff');
+}
+
+body {
+    font-family: 'JetBrains Mono';
+}