From 8fb0fdbeed049a54477c9b34a9e6f43cb4c998fa Mon Sep 17 00:00:00 2001
From: shockrah <alejandros714@protonmail.com>
Date: Fri, 12 Feb 2021 18:11:20 -0800
Subject: [PATCH] Basic channel button css

---
 freechat-client/pages/index.html   |  9 ++-----
 freechat-client/sass/channels.scss | 42 ++++++++++++++++++++++++++++++
 freechat-client/sass/style.scss    |  5 +---
 3 files changed, 45 insertions(+), 11 deletions(-)
 create mode 100644 freechat-client/sass/channels.scss

diff --git a/freechat-client/pages/index.html b/freechat-client/pages/index.html
index 43cf367..03fb520 100644
--- a/freechat-client/pages/index.html
+++ b/freechat-client/pages/index.html
@@ -30,14 +30,9 @@
 </nav>
 
 <div class="wrapper" id="content-container">
-	<nav id="channels-container">
+	<nav>
 		<div class="channels-list-header"><h3>server name here</h3></div>
-		<ul class="list-unstyled components">
-			<li> <a href="#" class="btn btn-link">channel-name-here</a> </li>
-			<li> <a href="#" class="btn btn-link">channel-name-here</a> </li>
-			<li> <a href="#" class="btn btn-link">channel-name-here</a> </li>
-			<li> <a href="#" class="btn btn-link">channel-name-here</a> </li>
-			<li> <a href="#" class="btn btn-link">channel-name-here</a> </li>
+		<ul class="list-unstyled components" id="channels-list">
 		</ul>
 	</nav>
 	<!-- Sample data so we know what things should look like -->
diff --git a/freechat-client/sass/channels.scss b/freechat-client/sass/channels.scss
new file mode 100644
index 0000000..972e2c8
--- /dev/null
+++ b/freechat-client/sass/channels.scss
@@ -0,0 +1,42 @@
+@import 'general';
+
+.channel {
+	color: $text;
+	background-color: $top-grey;
+	text-decoration: none;
+}
+
+
+.channel a {
+	color: $text;
+	background-color: $top-grey;
+	text-decoration: none;
+}
+
+.channel a:focus {
+	background-color: $bar-grey !important;
+	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5) !important; // ghosty white outline
+}
+
+.channel a:hover {
+	background-color: $bar-grey !important;
+	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5) !important; // ghosty white outline
+}
+
+.channel a:active {
+	background-color: $bar-grey !important;
+	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5) !important; // ghosty white outline
+}
+
+.channel a:visited {
+	background-color: $bar-grey !important;
+	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5) !important; // ghosty white outline
+}
+
+.channel-name {
+	color: $text;
+}
+
+.channel-name:focus {
+	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5)
+}
diff --git a/freechat-client/sass/style.scss b/freechat-client/sass/style.scss
index 5314a9c..f41ea1e 100644
--- a/freechat-client/sass/style.scss
+++ b/freechat-client/sass/style.scss
@@ -1,6 +1,7 @@
 @import 'general';
 @import 'scroll';
 @import 'join-modal';
+@import 'channels';
 
 body {
     color: $text;
@@ -91,10 +92,6 @@ ul ul a {
     color: $text;
 }
 
-.message:hover {
-    background-color: $top-grey;
-}
-
 .message a:hover {
     background-color: $bar-grey;
     color: $text;