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 {