From 15c51d9ec70715adc71e56350958cade44d8df76 Mon Sep 17 00:00:00 2001
From: Simon Ser <contact@emersion.fr>
Date: Fri, 26 Jun 2020 15:16:07 +0200
Subject: [PATCH] Rename sidebar and topbar

---
 components/app.js         | 10 +++++-----
 components/buffer-list.js |  2 +-
 components/member-list.js |  2 +-
 style.css                 | 26 +++++++++++++-------------
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/components/app.js b/components/app.js
index ac96019..0a49b95 100644
--- a/components/app.js
+++ b/components/app.js
@@ -508,10 +508,10 @@ export default class App extends Component {
 			activeBuffer = this.state.buffers.get(this.state.activeBuffer);
 		}
 
-		var topbar = null;
+		var bufferHeader = null;
 		if (activeBuffer) {
-			topbar = html`
-				<section id="topbar">
+			bufferHeader = html`
+				<section id="buffer-header">
 					<${BufferHeader} buffer=${activeBuffer} onClose=${() => this.close(activeBuffer.name)}/>
 				</section>
 			`;
@@ -530,10 +530,10 @@ export default class App extends Component {
 		}
 
 		return html`
-			<section id="sidebar">
+			<section id="buffer-list">
 				<${BufferList} buffers=${this.state.buffers} activeBuffer=${this.state.activeBuffer} onBufferClick=${this.handleBufferListClick}/>
 			</section>
-			${topbar}
+			${bufferHeader}
 			<${ScrollManager} target=${this.buffer} scrollKey=${this.state.activeBuffer}>
 				<section id="buffer" ref=${this.buffer}>
 					<${Buffer} buffer=${activeBuffer} onNickClick=${this.handleNickClick}/>
diff --git a/components/buffer-list.js b/components/buffer-list.js
index 423361c..bbb09c1 100644
--- a/components/buffer-list.js
+++ b/components/buffer-list.js
@@ -59,7 +59,7 @@ function compareBuffers(a, b) {
 
 export default function BufferList(props) {
 	return html`
-		<ul id="buffer-list">
+		<ul>
 			${Array.from(this.props.buffers.values()).sort(compareBuffers).map(buf => html`
 				<${BufferItem} key=${buf.name} buffer=${buf} onClick=${() => props.onBufferClick(buf.name)} active=${props.activeBuffer == buf.name}/>
 			`)}
diff --git a/components/member-list.js b/components/member-list.js
index e605265..dd84889 100644
--- a/components/member-list.js
+++ b/components/member-list.js
@@ -16,7 +16,7 @@ function MemberItem(props) {
 
 export default function MemberList(props) {
 	return html`
-		<ul id="buffer-list">
+		<ul>
 			${Array.from(this.props.members.entries()).sort().map(([nick, membership]) => html`
 				<${MemberItem} key=${nick} nick=${nick} membership=${membership} onClick=${() => props.onNickClick(nick)}/>
 			`)}
diff --git a/style.css b/style.css
index 07b2c92..ca31ca8 100644
--- a/style.css
+++ b/style.css
@@ -12,56 +12,56 @@ body {
 	font-family: monospace;
 }
 
-#sidebar, #buffer, #connect, #member-list {
+#buffer-list, #buffer, #connect, #member-list {
 	width: 100%;
 	height: 100%;
 	overflow: auto;
 }
 
-#sidebar {
+#buffer-list {
 	background-color: #e3e3e3;
 	grid-column: 1;
 	grid-row: 1 / 4;
 }
 
-#sidebar ul {
+#buffer-list ul {
 	list-style-type: none;
 	margin: 0;
 	padding: 0;
 }
-#sidebar li a {
+#buffer-list li a {
 	display: inline-block;
 	width: 100%;
 	padding: 2px 10px;
 	box-sizing: border-box;
 }
-#sidebar li.active a {
+#buffer-list li.active a {
 	color: white;
 	background-color: #4a4a4a;
 }
-#sidebar li.unread-message a {
+#buffer-list li.unread-message a {
 	color: #b37400;
 }
 
-#topbar, #member-list-header {
+#buffer-header, #member-list-header {
 	box-sizing: border-box;
 	padding: 5px 10px;
 	border-bottom: 1px solid #e3e3e3;
 }
 
-#topbar {
+#buffer-header {
 	grid-row: 1;
 	grid-column: 2;
 }
 
-#topbar .status-here {
+#buffer-header .status-here {
 	color: green;
 }
-#topbar .status-gone {
+#buffer-header .status-gone {
 	color: orange;
 }
 
-#topbar .actions {
+#buffer-header .actions {
 	float: right;
 }
 
@@ -133,11 +133,11 @@ body {
 a {
 	color: green;
 }
-#sidebar a, a.timestamp, a.nick {
+#buffer-list a, a.timestamp, a.nick {
 	color: #4a4a4a;
 	text-decoration: none;
 }
-#sidebar a:hover, #sidebar a:active,
+#buffer-list a:hover, #buffer-list a:active,
 a.timestamp:hover, a.timestamp:active,
 a.nick:hover, a.nick:active {
 	text-decoration: underline;