I have successfully implemented a chat feature using Pusher, but now I want to customize the appearance by changing the color of the username for the logged-in user when they are active in the conversation. Currently, both my username and another user's username appear in black text, but I would like to highlight the logged-in user's username in a different color to distinguish their messages. (Apologies for my average English skills, feel free to ask for clarification if needed) Thank you for your assistance.
This code snippet is from my app.blade:
<div class="row">
<div class="col-md-12 col-md-offset-2">
<div class="col-md-12 col-md-offset-2">
<div class="panel-body panel-content" id="mess_cont">
<chat-messages id="mess" :messages="messages"></chat-messages>
</div>
<div class="panel-footer">
<chat-form
v-on:messagesent="addMessage"
:user="{{ Auth::user() }}"
></chat-form>
</div>
</div>
</div>
</div>
This section is from my ChatMessages.vue file:
<template>
<ul class="chat messages" >
<li class="left clearfix list-group-item" v-for="message in messages" >
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font" >
{{ message.user.firstName }}
{{ message.user.lastName}}
</strong>
</div>
<p>
{{ message.message }}
</p>
</div>
</li>
</ul>
</template>
<script>
export default {
props: ['messages']
};
</script>