mirror of
https://github.com/yusufipk/YTChatHub.git
synced 2026-09-11 19:06:14 +00:00
feat: add reset stream button and move clear selection button inline
This commit is contained in:
@@ -98,12 +98,20 @@ export default function DashboardPage() {
|
||||
<div className="tab">
|
||||
Members <span className="tab__count">{newMembers.length}</span>
|
||||
</div>
|
||||
<button className="btn-reset" onClick={disconnect} title="Reset stream connection">
|
||||
🔄
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<section className="dashboard__grid">
|
||||
<div className="panel panel--chat">
|
||||
<div className="panel__header">
|
||||
<h2>💬 CHAT MESSAGES</h2>
|
||||
{selection && (
|
||||
<button className="btn-clear-inline" onClick={handleClear}>
|
||||
CLEAR
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<ChatListPanel
|
||||
messages={regularMessages}
|
||||
@@ -169,12 +177,6 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{selection && (
|
||||
<button className="btn-clear-fixed" onClick={handleClear}>
|
||||
CLEAR
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
|
||||
+48
-3
@@ -444,9 +444,10 @@ main {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-bottom: 0.875rem;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
background: #141414;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -487,6 +488,25 @@ main {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-clear-inline {
|
||||
padding: 0.35rem 0.75rem;
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
color: #ef4444;
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.5px;
|
||||
cursor: pointer;
|
||||
transition: all 150ms ease;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.btn-clear-inline:hover {
|
||||
background: rgba(239, 68, 68, 0.25);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-clear-fixed {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
@@ -511,6 +531,31 @@ main {
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.btn-reset {
|
||||
padding: 0.35rem 0.5rem;
|
||||
background: #2a2a2a;
|
||||
color: #e5e7eb;
|
||||
border: 1px solid #3a3a3a;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-reset:hover {
|
||||
background: #3a3a3a;
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.btn-reset:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.chatList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
Reference in New Issue
Block a user