frontend/public/global.css

@@ -84,7 +84,7 @@ body {
 	background-color: var(--background-color-1);
 }
 
-/* top bar */
+/* shared styles for all components */
 
 .top-bar {
 	display: flex;
@@ -102,8 +102,6 @@ body {
 	margin-left: var(--space-xxs);
 }
 
-/* modal */
-
 .modal-backdrop {
 	position: absolute;
 	width: 100vw;
@@ -128,7 +126,7 @@ body {
 }
 
 .modal-header {
-	margin-bottom: var(--space-norm);
+	margin-bottom: var(--space-md);
 	text-align: center;
 }
 
@@ -145,8 +143,6 @@ body {
 	float: left;
 }
 
-/* input */
-
 .input-label {
 	text-transform: uppercase;
 	color: var(--foreground-color-2);
@@ -162,8 +158,6 @@ body {
 	line-height: inherit;
 }
 
-/* button */
-
 .button {
 	background-color: var(--background-color-2);
 	text-align: center;
@@ -191,25 +185,6 @@ body {
 	background-color: var(--purple-2);
 }
 
-.icon-button {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	background-color: transparent;
-	color: var(--foreground-color-3);
-	text-align: center;
-	border: none;
-	border-radius: var(--radius-md);
-	font: inherit;
-	margin-left: auto;
-}
-
-.icon-button:hover {
-	color: var(--foreground-color-1);
-}
-
-/* text */
-
 .h1 {
 	font-size: 2.488rem;
 }

frontend/src/components/modals/CreateChannel.svelte

@@ -27,7 +27,7 @@
 <div class="modal-backdrop" transition:fade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }">
     <div class="modal" transition:fly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation>
         <div class="modal-header">
-            <span class="h4">Create Channel</span>
+            <span class="h3">Create Channel</span>
         </div>
 
         <label class="input-label">

frontend/src/components/modals/EditChannel.svelte

@@ -1,55 +0,0 @@
-<script>
-    import { fade, fly } from "svelte/transition";
-    import { quintInOut } from "svelte/easing";
-    import { overlayStore } from "../../stores";
-    import request from "../../request";
-    import { apiRoute } from "../../storage";
-
-    export let channel;
-
-    let channelName = channel.name;
-    let buttonsEnabled = true;
-
-    const close = () => overlayStore.close('editChannel');
-    const save = async () => {
-        buttonsEnabled = false;
-        await request("PUT", apiRoute(`channels/${channel.id}`), true, {
-            name: channelName
-        });
-        close();
-    };
-    const deleteChannel = async () => {
-        buttonsEnabled = false;
-        await request("DELETE", apiRoute(`channels/${channel.id}`), true);
-        close();
-    };
-</script>
-
-<style>
-    .full-width {
-        width: 100%;
-    }
-
-    .delete-button {
-        color: var(--red-2);
-    }
-</style>
-
-<div class="modal-backdrop" transition:fade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }">
-    <div class="modal" transition:fly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation>
-        <div class="modal-header">
-            <span class="h4">Edit 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 modal-secondary-action delete-button" on:click="{ deleteChannel }">Delete</button>
-            <button class="button button-accent modal-primary-action" on:click="{ save }" disabled="{ !buttonsEnabled }">Save</button>
-        </div>
-    </div>
-</div>

frontend/src/components/pages/main/Main.svelte

@@ -1,6 +1,7 @@
 <script>
     import { CloudIcon } from "svelte-feather-icons";
     import { gatewayStatus, selectedChannel } from "../../../stores";
+    import CreateChannel from "../../modals/CreateChannel.svelte";
     import ChannelView from "./ChannelView.svelte";
 import OverlayProvider from "./OverlayProvider.svelte";
     import Sidebar from "./Sidebar.svelte";

frontend/src/components/pages/main/OverlayProvider.svelte

@@ -1,12 +1,8 @@
 <script>
     import { overlayStore } from "../../../stores";
-    import EditChannel from "../../modals/EditChannel.svelte";
     import CreateChannel from "../../modals/CreateChannel.svelte";
 </script>
 
 {#if $overlayStore.createChannel}
-    <CreateChannel { ...$overlayStore.createChannel } />
+    <CreateChannel />
-{/if}
-{#if $overlayStore.editChannel}
-    <EditChannel { ...$overlayStore.editChannel } />
 {/if}

frontend/src/components/pages/main/Sidebar.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { HashIcon, PlusIcon, MoreVerticalIcon } from "svelte-feather-icons";
+    import { HashIcon, PlusIcon } from "svelte-feather-icons";
     import { channels, overlayStore, selectedChannel } from "../../../stores";
     import UserTopBar from "./UserTopBar.svelte";
 </script>
@@ -13,9 +13,6 @@
                     <HashIcon />
                 </div>
                 <span>{ channel.name }</span>
-                <button class="icon-button" on:click|stopPropagation="{ () => overlayStore.open('editChannel', { channel }) }">
-                    <MoreVerticalIcon />
-                </button>
             </button>
         {/each}
         <button on:click="{ () => overlayStore.open('createChannel') }" class="sidebar-button">
@@ -55,6 +52,7 @@
         border-radius: var(--radius-md);
         width: 100%;
         max-height: 3.4em;
+        text-align: center;
     }
 
     .sidebar-button span {
@@ -73,14 +71,6 @@
         height: 24px;
     }
 
-    .sidebar-button .icon-button {
-        visibility: hidden;
-    }
-
-    .sidebar-button:hover .icon-button {
-        visibility: visible;
-    }
-
     .sidebar-button.selected,
     .sidebar-button:hover {
         background-color: var(--background-color-2);

frontend/src/stores.js

@@ -222,18 +222,17 @@ class MessagesStoreProvider {
 class OverlayStore extends Store {
     constructor() {
         super({
-            createChannel: null,
+            createChannel: false
-            editChannel: null
         });
     }
 
-    open(name, props={}) {
+    open(name) {
-        this.value[name] = props;
+        this.value[name] = true;
         this.updated();
     }
 
     close(name) {
-        this.value[name] = null;
+        this.value[name] = false;
         this.updated();
     }
 }