diff --git a/src/components/ChatBox.vue b/src/components/ChatBox.vue index 78d72ff..afd2236 100644 --- a/src/components/ChatBox.vue +++ b/src/components/ChatBox.vue @@ -26,6 +26,9 @@ placeholder="Type your chat message here..." :disabled="sendingMessage"> +
+ Please login to send chat messages +
@@ -45,10 +48,11 @@ componentSettings = computed(() => store.state.components.chatBox), chatBoxVisible = computed(() => store.state.ui.visibleElements.has('chat')), - sendingEnabled = computed(() => { - return store.state.components.chatSending && - (!store.state.components.chatSending.loginRequired || store.state.loggedIn); + loginRequired = computed(() => { + return store.state.components.chatSending && store.state.components.chatSending.loginRequired + && !store.state.loggedIn; }), + sendingEnabled = computed(() => store.state.components.chatSending && !loginRequired.value), messageMaxLength = computed(() => store.state.components.chatSending?.maxLength), chatInput = ref(null), @@ -101,6 +105,7 @@ enteredMessage, sendMessage, messages, + loginRequired, sendingEnabled, sendingMessage, sendingError, @@ -175,6 +180,16 @@ } } + .chat__login { + font-size: 1.6rem; + padding: 1.2rem; + background-color: #333333; + color: #aaaaaa; + margin: 1.5rem -1.5rem -1.5rem; + border-bottom-left-radius: $global-border-radius; + border-bottom-right-radius: $global-border-radius; + } + @media (max-width: 25rem), (max-height: 30rem) { bottom: 6.5rem; left: 6.5rem; diff --git a/src/scss/style.scss b/src/scss/style.scss index c1e5955..4f74d32 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -111,6 +111,10 @@ h2 { margin-bottom: 1rem; } +a { + color: $global-text-color; +} + button { @extend %button; }