From cfdbe06d07cb71145f7f937b53d4d0f1c4ff1ffe Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Tue, 13 Sep 2022 12:26:28 -0500
Subject: [PATCH] move dir button next to active sort option

---
 .../pages/basePages/listPage/listPage.jsx     | 48 +++++++++----------
 .../pages/basePages/listPage/listPage.less    | 44 +++++++----------
 2 files changed, 40 insertions(+), 52 deletions(-)

diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx
index b81f9c8e0..98451d54f 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.jsx
+++ b/client/homebrew/pages/basePages/listPage/listPage.jsx
@@ -114,14 +114,23 @@ const ListPage = createClass({
 	},
 
 	renderSortOption : function(sortTitle, sortValue){
-		return <div>
-				  <button
-					  value={`${sortValue}`}
-					  onClick={this.handleSortOptionChange}
-					  className={`${(this.state.sortType == sortValue ? 'active' : '')}`}
-				  >
-  					{`${sortTitle}`}
-		 		  </button>
+		return <div className='sort-option'>
+			<button
+				value={`${sortValue}`}
+				onClick={this.handleSortOptionChange}
+				className={`${(this.state.sortType == sortValue ? 'active' : '')}`}
+			>
+				{`${sortTitle}`}
+			</button>
+			{this.state.sortType == sortValue ? 
+				<button
+					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>}
+				</button>
+				: ''
+			}
 		  </div>;
 	},
 
@@ -165,26 +174,17 @@ const ListPage = createClass({
 
 	renderSortOptions : function(){
 		return <div className='sort-container'>
-							<h6>Sort by :</h6>
-						{this.renderSortOption('Title', 'alpha')}
-						{this.renderSortOption('Created Date', 'created')}
-						{this.renderSortOption('Updated Date', 'updated')}
-						{this.renderSortOption('Views', 'views')}
-						{/* {this.renderSortOption('Latest', 'latest')} */}
+			<h6>Sort by :</h6>
+			{this.renderSortOption('Title', 'alpha')}
+			{this.renderSortOption('Created Date', 'created')}
+			{this.renderSortOption('Updated Date', 'updated')}
+			{this.renderSortOption('Views', 'views')}
+			{/* {this.renderSortOption('Latest', 'latest')} */}
 
-							<h6>Direction :</h6>
+			{this.renderFilterOption()}
 
-							<button
-								onClick={this.handleSortDirChange}
-								className='sortDir'
-							>
-								{`${(this.state.sortDir == 'asc' ? '\u25B2 ASC' : '\u25BC DESC')}`}
-							</button>
 
-						{this.renderFilterOption()}
 
-				
-			
 		</div>;
 	},
 
diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less
index a6d465420..6ee160fdc 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.less
+++ b/client/homebrew/pages/basePages/listPage/listPage.less
@@ -45,6 +45,9 @@
 		display            : flex;
 		justify-content    : center;
 		align-items        : center;
+		column-gap         : 15px;
+		row-gap            : 5px;
+		flex-wrap          : wrap;
 		h6{
 			text-transform : uppercase;
 			font-family    : 'Open Sans', sans-serif;
@@ -52,50 +55,35 @@
 			font-weight    : bold;
 		}
 		.filter-option {
-			background-color: transparent !important;
+			margin-left: 20px;
+			background-color : transparent !important;
+			font-size        : 11px;
 			i{
-				padding-right : 5px
+				padding-right : 5px;
 			}
 		}
 		button{
 				background-color : transparent;
 				font-family      : 'Open Sans', sans-serif;
-				font-size        : 11px;
 				text-transform   : uppercase;
 				font-weight      : normal;
+				font-size        : 11px;
 				color            : #888;
+				padding          : 0;
 				&.active{
 					font-weight      : bold;
-					text-decoration  : underline;
-					color            : unset;
+					color            : white;
+					border-bottom : 1px solid white;
 				}
 				&.sortDir{
-					width : 75px;
+					width : auto;
+					padding: 5px;
+					&:hover {
+						color: white;
+					}
 				}
 			}
 		
 		
 	}
-	h1 {
-		cursor: pointer;
-		&.active {
-			color: #58180D;
-		}
-		&.inactive {
-			color: #707070;
-			
-		}
-		&.active::before, &.inactive::before {
-			font-family: 'Font Awesome 5 Free';
-			font-weight: 900;
-			font-size: 0.6cm;
-    			padding-right: 0.5em;
-		}
-		&.active::before {
-			content: '\f107';
-		}
-		&.inactive::before {
-			content: '\f105';
-		}
-	}
 }