diff --git a/frontend/src/components/ChannelView.svelte b/frontend/src/components/ChannelView.svelte
index 9091ca1..a5b4883 100644
--- a/frontend/src/components/ChannelView.svelte
+++ b/frontend/src/components/ChannelView.svelte
@@ -4,6 +4,7 @@
import Messages from "./Messages.svelte";
import { quadInOut } from "svelte/easing";
import { maybeFly } from "../animations";
+ import { statusBarStore } from "../stores";
export let channel;
@@ -20,6 +21,11 @@
+ {#if $statusBarStore}
+
+ { $statusBarStore }
+
+ {/if}
diff --git a/frontend/src/stores.js b/frontend/src/stores.js
index e8f90ba..c6078fd 100644
--- a/frontend/src/stores.js
+++ b/frontend/src/stores.js
@@ -675,6 +675,7 @@ export const presenceStore = new PresenceStore();
export const unreadStore = new UnreadStore();
export const pluginStore = new PluginStore();
export const totalUnreadsStore = new Store(0, "TotalUnreadsStore");
+export const statusBarStore = new Store(null, "statusBarStore");
export const setMessageInputEvent = new Store(null, "event:setMessageInput");
export const sendMessageAction = createAction("sendMessageAction", async ({channelId, content}) => {
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 65759ed..72dcb61 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -40,7 +40,7 @@
--foreground-color-2: hsl(63, 10%, 82%);
--foreground-color-3: hsl(63, 2%, 60%);
--foreground-color-4: hsl(63, 2%, 49%);
- --foreground-special-color-1: hsl(180, 18%, 70%);
+ --foreground-special-color-1: hsl(180, 2%, 70%);
--colored-element-text-color: var(--foreground-color-1);
--purple-1: hsl(280, 78%, 50%);
@@ -131,10 +131,7 @@ body {
align-items: center;
justify-content: left;
width: 100%;
- padding-left: var(--space-sm);
- padding-right: var(--space-sm);
- padding-top: var(--space-sm);
- padding-bottom: var(--space-sm);
+ padding: var(--space-sm);
flex-grow: 0;
flex-shrink: 0;
}
@@ -147,6 +144,20 @@ body {
font-weight: bold;
}
+.info-bar {
+ display: flex;
+ align-items: center;
+ background-color: var(--background-color-0);
+ padding: var(--space-xxs);
+ margin: var(--space-xs);
+ border-radius: var(--radius-sm);
+}
+
+.info-bar .info-text {
+ margin-left: var(--space-sm);
+ color: var(--foreground-color-2);
+}
+
/* modal */
.modal-backdrop {