From 6329cb2cec4260a26f1dceedab5a427d071360bd Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Wed, 21 Sep 2022 10:56:45 -0500
Subject: [PATCH] style changes for better contrast

---
 .../pages/basePages/listPage/listPage.jsx     |  2 +-
 .../pages/basePages/listPage/listPage.less    | 27 ++++++++++---------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx
index 3ef9d54fd..6c097afe0 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.jsx
+++ b/client/homebrew/pages/basePages/listPage/listPage.jsx
@@ -126,7 +126,7 @@ const ListPage = createClass({
 					onClick={this.handleSortDirChange}
 					className='sortDir'
 				>
-					{this.state.sortDir == 'asc' ? <i className='fas fa-sort-amount-up'></i> : <i className='fas fa-sort-amount-down'></i>}
+					{this.state.sortDir == 'asc' ? <i className='fas fa-sort-up'></i> : <i className='fas fa-sort-down'></i>}
 				</button>
 				: ''
 			}
diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less
index fcdaea69e..aa6fe707e 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.less
+++ b/client/homebrew/pages/basePages/listPage/listPage.less
@@ -35,10 +35,11 @@
 		top                : 0;
 		left               : 0;
 		width              : 100%;
+		height             : 30px;
 		background-color   : #555;
 		border-top         : 1px solid #666;
+		border-bottom         : 1px solid #666;
 		color              : white;
-		padding            : 2px;
 		text-align         : center;
 		z-index            : 500;
 		display            : flex;
@@ -56,19 +57,24 @@
 		.sort-option {
 			display: flex;
 			align-items: center;
-			padding: 0 5px;
+			padding: 0 8px;
+			color: #ccc;
+			height: 100%;
 
+			&:hover{
+				background-color : #444;
+			}
 
 			&.active {
 			font-weight: bold;
-			color: white;
-			border: 1px solid darkcyan;
-			border-radius: 5px;
+			color: #ddd;
+			background-color: #333;
+			
 			button {
 				color: white;
-
+				font-weight: 800;
 				&.sortDir {
-					background-color: darkcyan;
+					padding-left: 5px;
 				}
 			}
 		}
@@ -88,13 +94,8 @@
 				text-transform   : uppercase;
 				font-weight      : normal;
 				font-size        : 11px;
-				color            : #888;
+				color            : #ccc;
 				padding          : 0;
-				&.sortDir{
-					width : auto;
-					padding-left: 5px;
-					color: white;
-				}
 			}