waffle/frontend/src/components/ChannelView.svelte

<script>
    import { HashIcon } from "svelte-feather-icons";
</script>

<style>
    .main-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        border-left: 1px solid var(--background-color-2);
    }

    .top-bar {
        height: 3.4em;
        width: 100%;
        padding: var(--space-xs);
        background-color: var(--background-color-1);
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--background-color-2);
    }

    .channel-heading {
        margin-left: var(--space-xxs);
    }

    .messages-container {
        height: 100%;
        width: 100%;
        background-color: var(--background-color-1);
    }

    .message-input-container {
        width: 100%;
        padding: var(--space-md);
        background-color: var(--background-color-1);
    }

    .message-input {
        height: 3.4em;
        width: 100%;
        background-color : var(--background-color-2);
        border: none;
        color: currentColor;
        border-radius: var(--radius-md);
        padding: var(--space-sm);
    }
</style>

<div class="main-container">
    <div class="top-bar">
        <HashIcon />
        <span class="h5 channel-heading">channel name</span>
    </div>
    <div class="messages-container">

    </div>
    <div class="message-input-container">
        <input type="text" class="message-input">
    </div>
</div>