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;
}