frontend: make "create channel" modal functional

frontend/public/global.css

@@ -19,10 +19,24 @@
 :root {
 	--background-color-1: hsl(180, 11%, 7%);
 	--background-color-2: hsl(180, 11%, 12%);
+	--background-color-3: hsl(180, 11%, 17%);
 	--foreground-color-1: rgb(253, 254, 255);
 	--foreground-color-2: rgb(218, 219, 220);
 	--foreground-color-3: rgb(153, 154, 155);
 
+	--purple-1: hsl(280, 88%, 50%);
+	--blue-1: hsl(200, 88%, 50%);
+	--green-1: hsl(140, 88%, 50%);
+	--yellow-1: hsl(50, 88%, 65%);
+	--red-1: hsl(2, 88%, 65%);
+
+	--purple-2: hsl(280, 88%, 40%);
+	--blue-2: hsl(200, 88%, 40%);
+	--green-2: hsl(140, 88%, 40%);
+	--yellow-2: hsl(50, 88%, 60%);
+	--red-2: hsl(2, 88%, 60%);
+
+
 	--space-unit: 1em;
 	--space-xxs: calc(0.25 * var(--space-unit));
 	--space-xs: calc(0.5 * var(--space-unit));
@@ -88,6 +102,89 @@ body {
 	margin-left: var(--space-xxs);
 }
 
+.modal-backdrop {
+	position: absolute;
+	width: 100vw;
+	height: 100vh;
+	z-index: 0;
+	top: 50%;
+	left: 50%;
+	background-color: rgba(0, 0, 0, 0.4);
+	transform: translate(-50%, -50%);
+}
+
+.modal {
+	display: flex;
+	flex-direction: column;
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	background-color: var(--background-color-2);
+	border-radius: var(--radius-lg);
+	padding: var(--space-md);
+}
+
+.modal-header {
+	margin-bottom: var(--space-md);
+	text-align: center;
+}
+
+.modal-footer {
+	margin-top: auto;
+	padding-top: var(--space-norm);
+}
+
+.modal-primary-action {
+	float: right;
+}
+
+.modal-secondary-action {
+	float: left;
+}
+
+.input-label {
+	text-transform: uppercase;
+	color: var(--foreground-color-2);
+}
+
+.input {
+	background-color : var(--background-color-3);
+	border: none;
+	color: currentColor;
+	border-radius: var(--radius-md);
+	padding: var(--space-sm);
+	font-size: inherit;
+	line-height: inherit;
+}
+
+.button {
+	background-color: var(--background-color-2);
+	text-align: center;
+	border: none;
+	padding: var(--space-sm);
+	border-radius: var(--radius-md);
+	color: currentColor;
+	font: inherit;
+	max-height: 3em;
+}
+
+.button:hover {
+	background-color: var(--background-color-3)
+}
+
+.button-accent {
+	background-color: var(--purple-2);
+}
+
+.button-accent:hover {
+	background-color: var(--purple-1);
+}
+
+.button-accent:disabled {
+	background-color: var(--purple-2);
+}
+
 .h1 {
 	font-size: 2.488rem;
 }

frontend/src/components/modals/CreateChannel.svelte

@@ -2,41 +2,42 @@
     import { fade, fly } from "svelte/transition";
     import { quintInOut } from "svelte/easing";
     import { overlayStore } from "../../stores";
+    import request from "../../request";
+    import { apiRoute } from "../../storage";
+
+    let channelName = "";
+    let createButtonEnabled = true;
+
+    const close = () => overlayStore.close('createChannel');
+    const create = async () => {
+        createButtonEnabled = false;
+        await request("POST", apiRoute("channels"), true, {
+            name: channelName
+        });
+        close();
+    };
 </script>
 
 <style>
-    .modal-backdrop {
+    .full-width {
-        position: absolute;
+        width: 100%;
-        width: 100vw;
-        height: 100vh;
-        z-index: 0;
-        top: 50%;
-        left: 50%;
-        background-color: rgba(0, 0, 0, 0.4);
-        transform: translate(-50%, -50%);
-    }
-
-    .modal-header {
-        display: block;
-        margin-bottom: var(--space-xxs);
-    }
-
-    .modal {
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        min-width: 450px;
-        min-height: 370px;
-        background-color: var(--background-color-2);
-        padding: var(--space-md);
-        border-radius: var(--radius-lg);
     }
 </style>
 
-<div class="modal-backdrop" transition:fade="{{ duration: 350, easing: quintInOut }}" on:click="{() => overlayStore.close('createChannel')}">
+<div class="modal-backdrop" transition:fade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }">
-    <div class="modal" transition:fly="{{ duration: 350, easing: quintInOut, y: 15 }}">
+    <div class="modal" transition:fly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation>
-        <span class="h2 modal-header">Create Channel</span>
+        <div class="modal-header">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus earum blanditiis, numquam debitis inventore, fugit quidem ipsa, cum quibusdam accusamus repudiandae aut vitae necessitatibus. Libero, sit! Ex placeat illum iure!
+            <span class="h3">Create Channel</span>
+        </div>
+
+        <label class="input-label">
+            Channel Name
+            <input class="input full-width" bind:value={ channelName } />
+        </label>
+
+        <div class="modal-footer">
+            <button class="button modal-secondary-action" on:click="{ close }">Cancel</button>
+            <button class="button button-accent modal-primary-action" on:click="{ create }" disabled="{ !createButtonEnabled }">Create</button>
+        </div>
     </div>
 </div>