From 85fd4916e27ee45a9a01a87093a1925fd6c64696 Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Fri, 6 Feb 2026 18:23:59 +0530
Subject: [PATCH] style(chat): update chat button to match nav button style

Changed JKSessionChatButton from bare icon to proper Button component:
- Uses Button from reactstrap with btn-custom-outline class
- Matches other nav buttons (Invite, Volume, Video, etc.)
- Icon sized at 16x16px with 0.2rem right margin
- "Chat" text label added
- Unread badge repositioned for button layout
- Reduced opacity when window is open (visual feedback)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/client/JKSessionChatButton.js  | 35 ++++++++++---------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/jam-ui/src/components/client/JKSessionChatButton.js b/jam-ui/src/components/client/JKSessionChatButton.js
index adbcf01ec..dc786de58 100644
--- a/jam-ui/src/components/client/JKSessionChatButton.js
+++ b/jam-ui/src/components/client/JKSessionChatButton.js
@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { Button } from 'reactstrap';
 import {
   openChatWindow,
   setActiveChannel,
@@ -38,29 +39,30 @@ const JKSessionChatButton = ({ sessionId }) => {
 
   return (
     <div style={{ position: 'relative', display: 'inline-block' }}>
-      <img
-        src={chatIcon}
-        alt="Chat"
+      <Button
+        className='btn-custom-outline'
+        outline
+        size="md"
         onClick={handleClick}
-        role="button"
-        tabIndex={0}
         aria-label={`Open chat${unreadCount > 0 ? ` (${unreadCount} unread)` : ''}`}
         aria-pressed={isWindowOpen}
-        style={{
-          cursor: 'pointer',
-          width: '24px',
-          height: '24px',
-          opacity: isWindowOpen ? 0.6 : 1
-        }}
         title="Open session chat"
-      />
+        style={{ opacity: isWindowOpen ? 0.6 : 1 }}
+      >
+        <img
+          src={chatIcon}
+          alt="Chat"
+          style={{ width: '16px', height: '16px', marginRight: '0.2rem' }}
+        />
+        Chat
+      </Button>
       {unreadCount > 0 && (
         <div
           style={{
             position: 'absolute',
-            top: '-6px',
-            right: '-6px',
-            backgroundColor: '#dc3545', // Bootstrap danger red
+            top: '-8px',
+            right: '-8px',
+            backgroundColor: '#dc3545',
             color: 'white',
             borderRadius: '10px',
             padding: '2px 6px',
@@ -69,7 +71,8 @@ const JKSessionChatButton = ({ sessionId }) => {
             lineHeight: '1',
             minWidth: '18px',
             textAlign: 'center',
-            boxShadow: '0 1px 3px rgba(0,0,0,0.3)'
+            boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
+            zIndex: 1
           }}
         >
           {getBadgeText()}