Restyle action buttons

components/buffer-header.js

@@ -96,34 +96,64 @@ export default function BufferHeader(props) {
 		if (props.isBouncer) {
 			if (props.network.isupport.get("BOUNCER_NETID")) {
 				actions = html`
-					<a href="#" onClick=${handleJoinClick}>Join</a>
-					${" "}
-					<a href="#" onClick=${handleManageNetworkClick}>Manage network</a>
+					<button
+						key="join"
+						onClick=${handleJoinClick}
+					>Join channel</button>
+					<button
+						key="manage"
+						onClick=${handleManageNetworkClick}
+					>Manage network</button>
 				`;
 			} else {
 				actions = html`
-					<a href="#" onClick=${handleAddNetworkClick}>Add network</a>
-					${" "}
-					<a href="#" onClick=${handleCloseClick}>Disconnect</a>
+					<button
+						key="add"
+						onClick=${handleAddNetworkClick}
+					>Add network</button>
+					<button
+						key="disconnect"
+						class="danger"
+						onClick=${handleCloseClick}
+					>Disconnect</button>
 				`;
 			}
 		} else {
 			actions = html`
-				<a href="#" onClick=${handleJoinClick}>Join</a>
-				${" "}
-				<a href="#" onClick=${handleCloseClick}>Disconnect</a>
+				<button
+					key="join"
+					onClick=${handleJoinClick}
+				>Join channel</button>
+				<button
+					key="disconnect"
+					class="danger"
+					onClick=${handleCloseClick}
+				>Disconnect</button>
 			`;
 		}
 		break;
 	case BufferType.CHANNEL:
-		actions = html`<a href="#" onClick=${handleCloseClick}>Part</a>`;
+			actions = html`
+				<button
+					key="part"
+					class="danger"
+					onClick=${handleCloseClick}
+				>Leave</button>
+			`;
 		break;
 	case BufferType.NICK:
-		actions = html`<a href="#" onClick=${handleCloseClick}>Close</a>`;
+			actions = html`
+				<button
+					key="close"
+					class="danger"
+					onClick=${handleCloseClick}
+				>Close</button>
+			`;
 		break;
 	}
 
 	return html`
+		<span class="title">${props.buffer.name}</span>
 		<span class="description">${description}</span>
 		<span class="actions">${actions}</span>
 	`;

style.css

@@ -5,8 +5,18 @@
 	--expander-background: #b5b5b5;
 	--expander-background-hover: #a6a6a6;
 	--expander-border: #6c6c6c;
-	--green: green;
 
+	--button-color: #eff7ef;
+	--button-background: #282879;
+	--button-background-hover: #00007C;
+	--button-border: #222;
+
+	--danger-button-color: #eff7ef;
+	--danger-button-background: red;
+	--danger-button-background-hover: #B20000;
+	--danger-button-border: #222;
+
+	--green: green;
 	--gray: #4a4a4a;
 }
 
@@ -17,6 +27,10 @@
 		--sidebar-background: #131618;
 		--expander-background: #424446;
 		--expander-background-hover: #2a2d2f;
+		--button-background: #282879;
+		--button-background-hover: #00007C;
+		--danger-button-background: #B20000;
+		--danger-button-background-hover: red;
 		--green: #53b266;
 
 		--red: #fb615b;
@@ -37,6 +51,32 @@ body {
 	font-family: monospace;
 }
 
+button {
+	background: var(--button-background);
+	transition: background 0.25s linear;
+	color: var(--button-color);
+	cursor: pointer;
+	padding: 0.25rem 0.5rem;
+	border-style: solid;
+	border-color: var(--button-border);
+	border-width: 1px;
+	font-size: 0.8rem;
+}
+
+button:hover {
+	background: var(--button-background-hover);
+}
+
+button.danger {
+	background: var(--danger-button-background);
+	color: var(--danger-button-color);
+	border-color: var(--danger-button-border);
+}
+
+button.danger:hover {
+	background: var(--danger-button-background-hover);
+}
+
 #buffer, #connect {
 	color: var(--main-color);
 	background: var(--main-background);
@@ -66,7 +106,7 @@ body {
 	padding: 0;
 	margin: 0;
 	background: var(--expander-background);
-	transition: background 0.25s linear;
+	transition: background 0.2s linear;
 	border: none;
 	width: 10px;
 }
@@ -113,7 +153,7 @@ body {
 	padding-left: 20px;
 }
 
-#buffer-header, #member-list-header {
+#member-list-header {
 	color: var(--main-color);
 	background-color: var(--main-background);
 	box-sizing: border-box;
@@ -122,8 +162,27 @@ body {
 }
 
 #buffer-header {
+	color: var(--main-color);
+	background-color: var(--main-background);
+	box-sizing: border-box;
+	border-bottom: 1px solid var(--sidebar-background);
+
 	grid-row: 1;
 	grid-column: 2;
+
+	display: flex;
+	flex-direction: row;
+}
+
+#buffer-header .title {
+	display: none;
+	padding: 5px 10px;
+	align-self: center;
+}
+
+#buffer-header .description {
+	flex-grow: 1;
+	padding: 5px 10px;
 }
 
 #buffer-header .status-here {
@@ -136,8 +195,14 @@ body {
 	color: red;
 }
 
-#buffer-header .actions {
-	float: right;
+.actions {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+}
+
+.actions button {
+	border-width: 0 0 1px 1px;
 }
 
 #buffer {
@@ -560,4 +625,8 @@ kbd {
 	#member-list-header {
 		border-left: none;
 	}
+
+	#buffer-header .title {
+		display: block;
+	}
 }