From 46a45a85360e6588b87c3724ef848f3dede39e18 Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Tue, 13 Sep 2022 10:57:28 -0500
Subject: [PATCH 01/23] replace sort table with divs and give UI styling

---
 .../pages/basePages/listPage/listPage.jsx     | 28 ++++----
 .../pages/basePages/listPage/listPage.less    | 66 ++++++++++---------
 2 files changed, 45 insertions(+), 49 deletions(-)

diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx
index 0969b9f2a..b81f9c8e0 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.jsx
+++ b/client/homebrew/pages/basePages/listPage/listPage.jsx
@@ -114,7 +114,7 @@ const ListPage = createClass({
 	},
 
 	renderSortOption : function(sortTitle, sortValue){
-		return <td>
+		return <div>
 				  <button
 					  value={`${sortValue}`}
 					  onClick={this.handleSortOptionChange}
@@ -122,7 +122,7 @@ const ListPage = createClass({
 				  >
   					{`${sortTitle}`}
 		 		  </button>
-		  </td>;
+		  </div>;
 	},
 
 	handleFilterTextChange : function(e){
@@ -150,7 +150,7 @@ const ListPage = createClass({
 	},
 
 	renderFilterOption : function(){
-		return <td>
+		return <div className='filter-option'>
 			<label>
 				<i className='fas fa-search'></i>
 				<input
@@ -160,37 +160,31 @@ const ListPage = createClass({
 					value={this.state.filterString}
 				/>
 			</label>
-		</td>;
+		</div>;
 	},
 
 	renderSortOptions : function(){
 		return <div className='sort-container'>
-			<table>
-				<tbody>
-					<tr>
-						<td>
 							<h6>Sort by :</h6>
-						</td>
 						{this.renderSortOption('Title', 'alpha')}
 						{this.renderSortOption('Created Date', 'created')}
 						{this.renderSortOption('Updated Date', 'updated')}
 						{this.renderSortOption('Views', 'views')}
 						{/* {this.renderSortOption('Latest', 'latest')} */}
-				    	<td>
+
 							<h6>Direction :</h6>
-						</td>
-						<td>
+
 							<button
 								onClick={this.handleSortDirChange}
 								className='sortDir'
 							>
 								{`${(this.state.sortDir == 'asc' ? '\u25B2 ASC' : '\u25BC DESC')}`}
 							</button>
-						</td>
+
 						{this.renderFilterOption()}
-					</tr>
-				</tbody>
-			</table>
+
+				
+			
 		</div>;
 	},
 
@@ -233,10 +227,10 @@ const ListPage = createClass({
 		return <div className='listPage sitePage'>
 			<link href='/themes/V3/5ePHB/style.css' rel='stylesheet'/>
 			{this.props.navItems}
+			{this.renderSortOptions()}
 
 			<div className='content V3'>
 				<div className='phb page'>
-					{this.renderSortOptions()}
 					{this.renderBrewCollection(this.state.brewCollection)}
 				</div>
 			</div>
diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less
index d4efbe445..a6d465420 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.less
+++ b/client/homebrew/pages/basePages/listPage/listPage.less
@@ -12,8 +12,8 @@
 	-moz-column-gap      : auto;
 }
 .listPage{
+	height : unset !important;
 	.content{
-		overflow-y : overlay;
 		.phb{
 			.noColumns();
 			height     : auto;
@@ -32,47 +32,49 @@
 	}
 	.sort-container{
 		font-family        : 'Open Sans', sans-serif;
-		position           : fixed;
-		top                : 35px;
-		left               : calc(50vw - 400px);
-		border             : 2px solid #58180D;
-		width              : 800px;
-		background-color   : #EEE5CE;
+		position           : sticky;
+		top                : 0;
+		left               : 0;
+		width              : 100%;
+		background-color   : #555;
+		border-top         : 1px solid #666;
+		color              : white;
 		padding            : 2px;
 		text-align         : center;
-		z-index            : 15;
+		z-index            : 500;
+		display            : flex;
+		justify-content    : center;
+		align-items        : center;
 		h6{
 			text-transform : uppercase;
 			font-family    : 'Open Sans', sans-serif;
 			font-size      : 11px;
 			font-weight    : bold;
-			color          : #58180D;
 		}
-		table{
-			margin : 0px;
-			vertical-align : middle;
-			tbody tr{
-				background-color: transparent !important;
-				i{
-					padding-right : 5px
-				}
-			button{
-					background-color : transparent;
-					color            : #58180D;
-					font-family    : 'Open Sans', sans-serif;
-					font-size      : 11px;
-					text-transform : uppercase;
-					font-weight      : normal;
-					&.active{
-						font-weight : bold;
-						border      : 2px solid #58180D;
-					}
-					&.sortDir{
-						width : 75px;
-					}
-				}
+		.filter-option {
+			background-color: transparent !important;
+			i{
+				padding-right : 5px
 			}
 		}
+		button{
+				background-color : transparent;
+				font-family      : 'Open Sans', sans-serif;
+				font-size        : 11px;
+				text-transform   : uppercase;
+				font-weight      : normal;
+				color            : #888;
+				&.active{
+					font-weight      : bold;
+					text-decoration  : underline;
+					color            : unset;
+				}
+				&.sortDir{
+					width : 75px;
+				}
+			}
+		
+		
 	}
 	h1 {
 		cursor: pointer;

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 02/23] 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';
-		}
-	}
 }

From bb25d30663bfe543ee9d4a1119238bb8c753799d Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Thu, 15 Sep 2022 12:29:25 -0500
Subject: [PATCH 03/23] flex working, but odd vertical spacing

---
 .../editor/metadataEditor/metadataEditor.jsx  | 34 +++++++------
 .../editor/metadataEditor/metadataEditor.less | 50 +++++++++++++------
 2 files changed, 54 insertions(+), 30 deletions(-)

diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
index 29c193323..a793c4f3f 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -231,23 +231,25 @@ const MetadataEditor = createClass({
 					value={this.props.metadata.title}
 					onChange={(e)=>this.handleFieldChange('title', e)} />
 			</div>
-			<div className='field description'>
-				<label>description</label>
-				<textarea value={this.props.metadata.description} className='value'
-					onChange={(e)=>this.handleFieldChange('description', e)} />
-			</div>
-			<div className='field thumbnail'>
-				<label>thumbnail</label>
-				<input type='text'
-					value={this.props.metadata.thumbnail}
-					placeholder='my.thumbnail.url'
-					className='value'
-					onChange={(e)=>this.handleFieldChange('thumbnail', e)} />
-				<button className='display' onClick={this.toggleThumbnailDisplay}>
-					<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
-				</button>
-				{this.renderThumbnail()}
+			<div className='field-group'>
+				<div className='field description'>
+					<label>description</label>
+					<textarea value={this.props.metadata.description} className='value'
+						onChange={(e)=>this.handleFieldChange('description', e)} />
+				</div>
+				<div className='field thumbnail'>
+					<label>thumbnail</label>
+					<input type='text'
+						value={this.props.metadata.thumbnail}
+						placeholder='my.thumbnail.url'
+						className='value'
+						onChange={(e)=>this.handleFieldChange('thumbnail', e)} />
+					<button className='display' onClick={this.toggleThumbnailDisplay}>
+						<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
+					</button>
+				</div>
 			</div>
+			{this.renderThumbnail()}
 
 			<StringArrayEditor label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]}
 				placeholder='add tag' unique={true}
diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less
index 96bb4858a..bfa1e63c1 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -7,10 +7,21 @@
 	width            : 100%;
 	padding          : 25px;
 	background-color : #999;
+	height           : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar.  probably a better way to dynamic get this.
+
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+
+	.field-group {
+		display: flex;
+		flex-direction: column;
+		flex: 5;
+		gap: 10px;
+	}
 	.field{
 		display       : flex;
 		width         : 100%;
-		margin-bottom : 10px;
 		&>label{
 			display        : inline-block;
 			vertical-align : top;
@@ -23,7 +34,7 @@
 		}
 		&>.value{
 			flex           : 1 1 auto;
-			min-width      : 200px;
+			width          : 50px;
 		}
 		&.thumbnail{
 			height      : 1.4em;
@@ -43,22 +54,33 @@
 					background-color: #777;
 				}
 			}
-			.thumbnail-preview{
-				position    : relative;
-				width       : 80px;
-				height      : min-content;
-				border      : 2px solid white;
-				margin-left : 5px;
-				max-height  : 115px;
+		}
+
+		&.description {
+			flex: 1;
+			textarea.value {
+				resize      : none;
+				height      : auto;
+				font-family : 'Open Sans', sans-serif;
+				font-size   : 0.8em;
 			}
 		}
 	}
-	.description.field textarea.value{
-		resize      : none;
-		height      : 5em;
-		font-family : 'Open Sans', sans-serif;
-		font-size   : 0.8em;
+
+
+	.thumbnail-preview {
+		position: relative;
+		justify-self: center;
+		width: 80px;
+		height: min-content;
+		border: 2px solid white;
+		flex: 1 1;
+		max-height: 115px;
+		aspect-ratio: 1 / 1;
+		object-fit: contain;
+		background-color: cadetblue;
 	}
+
 	.systems.field .value{
 		label{
 			vertical-align : middle;

From fc5d06be0ee8fe73c293f07a4ef48a24339e8784 Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Thu, 15 Sep 2022 13:19:27 -0500
Subject: [PATCH 04/23] fixed vertical spacing

---
 .../editor/metadataEditor/metadataEditor.jsx  | 34 ++++++++++---------
 .../editor/metadataEditor/metadataEditor.less | 19 ++++++++---
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
index a793c4f3f..25b4daac8 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -232,24 +232,26 @@ const MetadataEditor = createClass({
 					onChange={(e)=>this.handleFieldChange('title', e)} />
 			</div>
 			<div className='field-group'>
-				<div className='field description'>
-					<label>description</label>
-					<textarea value={this.props.metadata.description} className='value'
-						onChange={(e)=>this.handleFieldChange('description', e)} />
-				</div>
-				<div className='field thumbnail'>
-					<label>thumbnail</label>
-					<input type='text'
-						value={this.props.metadata.thumbnail}
-						placeholder='my.thumbnail.url'
-						className='value'
-						onChange={(e)=>this.handleFieldChange('thumbnail', e)} />
-					<button className='display' onClick={this.toggleThumbnailDisplay}>
-						<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
-					</button>
+				<div className='field-column'>
+					<div className='field description'>
+						<label>description</label>
+						<textarea value={this.props.metadata.description} className='value'
+							onChange={(e)=>this.handleFieldChange('description', e)} />
+					</div>
+					<div className='field thumbnail'>
+						<label>thumbnail</label>
+						<input type='text'
+							value={this.props.metadata.thumbnail}
+							placeholder='my.thumbnail.url'
+							className='value'
+							onChange={(e)=>this.handleFieldChange('thumbnail', e)} />
+						<button className='display' onClick={this.toggleThumbnailDisplay}>
+							<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
+						</button>
+					</div>
 				</div>
+				{this.renderThumbnail()}
 			</div>
-			{this.renderThumbnail()}
 
 			<StringArrayEditor label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]}
 				placeholder='add tag' unique={true}
diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less
index bfa1e63c1..b804b8772 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -9,19 +9,28 @@
 	background-color : #999;
 	height           : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar.  probably a better way to dynamic get this.
 
-	display: flex;
-	flex-wrap: wrap;
-	gap: 10px;
+	& > div {
+		margin-bottom: 10px;
+	}
 
 	.field-group {
 		display: flex;
-		flex-direction: column;
-		flex: 5;
+		width: 100%;
+		flex-wrap: wrap;
 		gap: 10px;
 	}
+
+	.field-column {
+		display: flex;
+		flex-direction: column;
+		flex: 5 0 200px;
+		gap: 10px;
+		
+	}
 	.field{
 		display       : flex;
 		width         : 100%;
+		min-width     : 200px;
 		&>label{
 			display        : inline-block;
 			vertical-align : top;

From 49a30577659765f6ed7f372266dd5e456c1d126c Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Thu, 15 Sep 2022 13:33:19 -0500
Subject: [PATCH 05/23] clear out some unused properties

---
 client/homebrew/editor/metadataEditor/metadataEditor.less | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less
index b804b8772..0e4ae434e 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -32,14 +32,11 @@
 		width         : 100%;
 		min-width     : 200px;
 		&>label{
-			display        : inline-block;
-			vertical-align : top;
 			width          : 80px;
 			font-size      : 11px;
 			font-weight    : 800;
 			line-height    : 1.8em;
 			text-transform : uppercase;
-			flex           : 0 0 auto;
 		}
 		&>.value{
 			flex           : 1 1 auto;

From b120c47faaaf1814c4badb6492703d494fe0977b Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Thu, 15 Sep 2022 13:38:09 -0500
Subject: [PATCH 06/23] add vertical scroll - auto

---
 client/homebrew/editor/metadataEditor/metadataEditor.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less
index 0e4ae434e..3bb866168 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -8,6 +8,7 @@
 	padding          : 25px;
 	background-color : #999;
 	height           : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar.  probably a better way to dynamic get this.
+	overflow-y       : auto;
 
 	& > div {
 		margin-bottom: 10px;

From 87a91941895ae9bf9cd96400c58f2cc1ec3d6ff8 Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Mon, 19 Sep 2022 10:08:52 -0500
Subject: [PATCH 07/23] remove unset on listPage height.

---
 client/homebrew/pages/basePages/listPage/listPage.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less
index 6ee160fdc..2286c2d6e 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.less
+++ b/client/homebrew/pages/basePages/listPage/listPage.less
@@ -12,7 +12,6 @@
 	-moz-column-gap      : auto;
 }
 .listPage{
-	height : unset !important;
 	.content{
 		.phb{
 			.noColumns();

From 10a349ade8047e966f02dd7746dd26099b1b7d2c Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Mon, 19 Sep 2022 10:27:02 -0500
Subject: [PATCH 08/23] change sortDir to always white.

---
 client/homebrew/pages/basePages/listPage/listPage.less | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less
index 2286c2d6e..2b804a4ce 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.less
+++ b/client/homebrew/pages/basePages/listPage/listPage.less
@@ -77,9 +77,7 @@
 				&.sortDir{
 					width : auto;
 					padding: 5px;
-					&:hover {
-						color: white;
-					}
+					color: white;
 				}
 			}
 		

From 8ac4d9358163229fcd1c109bde3183c18cde7836 Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Mon, 19 Sep 2022 10:47:35 -0500
Subject: [PATCH 09/23] change sort-container to baseline alignment

---
 client/homebrew/pages/basePages/listPage/listPage.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less
index 2b804a4ce..3f74fda79 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.less
+++ b/client/homebrew/pages/basePages/listPage/listPage.less
@@ -43,7 +43,7 @@
 		z-index            : 500;
 		display            : flex;
 		justify-content    : center;
-		align-items        : center;
+		align-items        : baseline;
 		column-gap         : 15px;
 		row-gap            : 5px;
 		flex-wrap          : wrap;

From 9fcc7b84c33302b4d2d2ffa8cde19149b17368fe Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Mon, 19 Sep 2022 11:06:33 -0500
Subject: [PATCH 10/23] set .sort-option to .active rather than button within.

---
 client/homebrew/pages/basePages/listPage/listPage.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx
index 98451d54f..3ef9d54fd 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.jsx
+++ b/client/homebrew/pages/basePages/listPage/listPage.jsx
@@ -114,11 +114,10 @@ const ListPage = createClass({
 	},
 
 	renderSortOption : function(sortTitle, sortValue){
-		return <div className='sort-option'>
+		return <div className={`sort-option ${(this.state.sortType == sortValue ? 'active' : '')}`}>
 			<button
 				value={`${sortValue}`}
 				onClick={this.handleSortOptionChange}
-				className={`${(this.state.sortType == sortValue ? 'active' : '')}`}
 			>
 				{`${sortTitle}`}
 			</button>

From 3c75ac6156955cf75185882a652d4b2246351fd5 Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Mon, 19 Sep 2022 11:30:44 -0500
Subject: [PATCH 11/23] change some .less to reflect new focus of .active

---
 .../pages/basePages/listPage/listPage.less    | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less
index 3f74fda79..fcdaea69e 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.less
+++ b/client/homebrew/pages/basePages/listPage/listPage.less
@@ -52,6 +52,27 @@
 			font-family    : 'Open Sans', sans-serif;
 			font-size      : 11px;
 			font-weight    : bold;
+		}
+		.sort-option {
+			display: flex;
+			align-items: center;
+			padding: 0 5px;
+
+
+			&.active {
+			font-weight: bold;
+			color: white;
+			border: 1px solid darkcyan;
+			border-radius: 5px;
+			button {
+				color: white;
+
+				&.sortDir {
+					background-color: darkcyan;
+				}
+			}
+		}
+			
 		}
 		.filter-option {
 			margin-left: 20px;
@@ -69,14 +90,9 @@
 				font-size        : 11px;
 				color            : #888;
 				padding          : 0;
-				&.active{
-					font-weight      : bold;
-					color            : white;
-					border-bottom : 1px solid white;
-				}
 				&.sortDir{
 					width : auto;
-					padding: 5px;
+					padding-left: 5px;
 					color: white;
 				}
 			}

From 49cc4180a7a125b9667c61ad9e92073e2abaad82 Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Tue, 20 Sep 2022 19:58:52 -0500
Subject: [PATCH 12/23] set only listPage to overflow-y scroll.

The pages are not all quite set up the same way.  /new/, /edit/, and /share/ all use an iframe and those iframes have their own scroll behavior.  /user/ doesn't have an iframe and so the `.content` portion of the page needs to scroll.
---
 client/homebrew/homebrew.less | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/client/homebrew/homebrew.less b/client/homebrew/homebrew.less
index 8c8f116b5..4df6ad7cc 100644
--- a/client/homebrew/homebrew.less
+++ b/client/homebrew/homebrew.less
@@ -11,7 +11,13 @@
 			position   : relative;
 			height     : calc(~"100% - 29px"); //Navbar height
 			flex       : auto;
+			overflow-y : hidden;
+		}
+		&.listPage .content {
 			overflow-y : scroll;
 		}
+		// &.editPage .content, &.sharePage .content, &.newPage .content {
+		// 	overflow-y : hidden;
+		// }
 	}
 }

From f2a8a6a03a6aed5afe4536d97a8b7a6de3048deb Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Tue, 20 Sep 2022 19:59:38 -0500
Subject: [PATCH 13/23] match scroll bar style of recentItems to UI

---
 client/homebrew/navbar/navbar.less | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index 39fbfaf5c..a29fff32a 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -78,6 +78,8 @@
 			width      : 100%;
 			overflow   : hidden auto;
 			max-height : ~"calc(100vh - 28px)";
+			scrollbar-color : #666 #333;
+			scrollbar-width : thin;
 			h4{
 				display          : block;
 				box-sizing       : border-box;

From 7623d3e93af34f4973b6ee66d2133125cd60dac5 Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Tue, 20 Sep 2022 20:37:55 -0500
Subject: [PATCH 14/23] set scrollbar to 'thin' in recentItems dropdown

---
 client/homebrew/homebrew.less                          | 5 +----
 client/homebrew/pages/basePages/listPage/listPage.less | 1 -
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/client/homebrew/homebrew.less b/client/homebrew/homebrew.less
index 4df6ad7cc..f4834a25c 100644
--- a/client/homebrew/homebrew.less
+++ b/client/homebrew/homebrew.less
@@ -16,8 +16,5 @@
 		&.listPage .content {
 			overflow-y : scroll;
 		}
-		// &.editPage .content, &.sharePage .content, &.newPage .content {
-		// 	overflow-y : hidden;
-		// }
 	}
-}
+}
\ No newline at end of file
diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less
index d4efbe445..21c2b6c7d 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.less
+++ b/client/homebrew/pages/basePages/listPage/listPage.less
@@ -13,7 +13,6 @@
 }
 .listPage{
 	.content{
-		overflow-y : overlay;
 		.phb{
 			.noColumns();
 			height     : auto;

From f337925af9f873ff3c1b92ebb2c6d4906c4e12bb Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Tue, 20 Sep 2022 23:46:25 -0500
Subject: [PATCH 15/23] add e.preventDefault() to mousedown event

---
 shared/naturalcrit/splitPane/splitPane.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx
index f7ad4bed4..38f84b220 100644
--- a/shared/naturalcrit/splitPane/splitPane.jsx
+++ b/shared/naturalcrit/splitPane/splitPane.jsx
@@ -69,7 +69,8 @@ const SplitPane = createClass({
 		this.setState({ isDragging: false });
 	},
 
-	handleDown : function(){
+	handleDown : function(e){
+		e.preventDefault();
 		this.setState({ isDragging: true });
 		//this.unFocus()
 	},

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 16/23] 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;
-				}
 			}
 		
 		

From 3754468cf48af18f9535f431698247e758187a4e Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Wed, 21 Sep 2022 11:12:23 -0500
Subject: [PATCH 17/23] change sortDir by clicking on sort title.

---
 client/homebrew/pages/basePages/listPage/listPage.jsx  | 2 +-
 client/homebrew/pages/basePages/listPage/listPage.less | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx
index 6c097afe0..e49a24906 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.jsx
+++ b/client/homebrew/pages/basePages/listPage/listPage.jsx
@@ -117,7 +117,7 @@ const ListPage = createClass({
 		return <div className={`sort-option ${(this.state.sortType == sortValue ? 'active' : '')}`}>
 			<button
 				value={`${sortValue}`}
-				onClick={this.handleSortOptionChange}
+				onClick={this.state.sortType == sortValue ? this.handleSortDirChange : this.handleSortOptionChange}
 			>
 				{`${sortTitle}`}
 			</button>
diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less
index aa6fe707e..9f274ce51 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.less
+++ b/client/homebrew/pages/basePages/listPage/listPage.less
@@ -69,10 +69,11 @@
 			font-weight: bold;
 			color: #ddd;
 			background-color: #333;
-			
+
 			button {
 				color: white;
 				font-weight: 800;
+				height: 100%;
 				&.sortDir {
 					padding-left: 5px;
 				}

From 0bf1328c17a6b73545225ab9d332e6b6ce12e6be Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Wed, 21 Sep 2022 11:29:42 -0500
Subject: [PATCH 18/23] change monster stat background color

---
 themes/V3/5ePHB/style.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/themes/V3/5ePHB/style.less b/themes/V3/5ePHB/style.less
index 98b52788f..c1fa09b7b 100644
--- a/themes/V3/5ePHB/style.less
+++ b/themes/V3/5ePHB/style.less
@@ -8,7 +8,7 @@
 	--HB_Color_HeaderUnderline       : #C0AD6A; // Gold
 	--HB_Color_HorizontalRule        : #9C2B1B; // Maroon
 	--HB_Color_HeaderText            : #58180D; // Dark Maroon
-	--HB_Color_MonsterStatBackground : #EEDBAB; // Light orange parchment
+	--HB_Color_MonsterStatBackground : #F2E5B5; // Light orange parchment
 	--HB_Color_CaptionText           : #766649; // Brown
 	--HB_Color_WatercolorStain       : #BBAD82; // Light brown
 	--HB_Color_Footnotes             : #C9AD6A; // Gold

From f3c9dde801f99cecb555be3f5d4ccc581bc07450 Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Wed, 21 Sep 2022 20:50:10 -0500
Subject: [PATCH 19/23] thumbnail preview de-uglification

---
 client/homebrew/editor/metadataEditor/metadataEditor.less | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.less b/client/homebrew/editor/metadataEditor/metadataEditor.less
index 3bb866168..9b2761306 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.less
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.less
@@ -80,12 +80,11 @@
 		justify-self: center;
 		width: 80px;
 		height: min-content;
-		border: 2px solid white;
 		flex: 1 1;
 		max-height: 115px;
 		aspect-ratio: 1 / 1;
 		object-fit: contain;
-		background-color: cadetblue;
+		background-color: #AAA;
 	}
 
 	.systems.field .value{

From 5458b8297ca857b98a771964e98962f69621edf5 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 22 Sep 2022 03:01:15 +0000
Subject: [PATCH 20/23] Bump googleapis from 107.0.0 to 108.0.0

Bumps [googleapis](https://github.com/googleapis/google-api-nodejs-client) from 107.0.0 to 108.0.0.
- [Release notes](https://github.com/googleapis/google-api-nodejs-client/releases)
- [Changelog](https://github.com/googleapis/google-api-nodejs-client/blob/main/CHANGELOG.md)
- [Commits](https://github.com/googleapis/google-api-nodejs-client/compare/googleapis-v107.0.0...googleapis-v108.0.0)

---
updated-dependencies:
- dependency-name: googleapis
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b2dc7cbab..4b27b1915 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,7 +24,7 @@
         "express-async-handler": "^1.2.0",
         "express-static-gzip": "2.1.7",
         "fs-extra": "10.1.0",
-        "googleapis": "107.0.0",
+        "googleapis": "108.0.0",
         "js-yaml": "^4.1.0",
         "jwt-simple": "^0.5.6",
         "less": "^3.13.1",
@@ -6173,9 +6173,9 @@
       }
     },
     "node_modules/googleapis": {
-      "version": "107.0.0",
-      "resolved": "https://registry.npmjs.org/googleapis/-/googleapis-107.0.0.tgz",
-      "integrity": "sha512-emMvsOEPvE9/DxrOVCMblQzKAhaar37c5JPAqYXoo+hxPpzFefkpN5ayIJFgatDpUWCSMvWtP3CcEWfFhFA7QA==",
+      "version": "108.0.0",
+      "resolved": "https://registry.npmjs.org/googleapis/-/googleapis-108.0.0.tgz",
+      "integrity": "sha512-wQuBzCObtjpfg3CksOfUlX3yT8clw/vJFdGSfs9cpn84WSxNK3U5sxYxEH3mPM+d+SrA8znKM9G8sOuwQceGIA==",
       "dependencies": {
         "google-auth-library": "^8.0.2",
         "googleapis-common": "^6.0.0"
@@ -17565,9 +17565,9 @@
       }
     },
     "googleapis": {
-      "version": "107.0.0",
-      "resolved": "https://registry.npmjs.org/googleapis/-/googleapis-107.0.0.tgz",
-      "integrity": "sha512-emMvsOEPvE9/DxrOVCMblQzKAhaar37c5JPAqYXoo+hxPpzFefkpN5ayIJFgatDpUWCSMvWtP3CcEWfFhFA7QA==",
+      "version": "108.0.0",
+      "resolved": "https://registry.npmjs.org/googleapis/-/googleapis-108.0.0.tgz",
+      "integrity": "sha512-wQuBzCObtjpfg3CksOfUlX3yT8clw/vJFdGSfs9cpn84WSxNK3U5sxYxEH3mPM+d+SrA8znKM9G8sOuwQceGIA==",
       "requires": {
         "google-auth-library": "^8.0.2",
         "googleapis-common": "^6.0.0"
diff --git a/package.json b/package.json
index 94f329689..955b1e492 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
     "express-async-handler": "^1.2.0",
     "express-static-gzip": "2.1.7",
     "fs-extra": "10.1.0",
-    "googleapis": "107.0.0",
+    "googleapis": "108.0.0",
     "js-yaml": "^4.1.0",
     "jwt-simple": "^0.5.6",
     "less": "^3.13.1",

From ca09e98d8f4382cdf3a4d9c1ff5110b0f2834330 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Sat, 24 Sep 2022 23:50:20 +1200
Subject: [PATCH 21/23] Exclude thumbnail from Google props

---
 server/homebrew.api.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/homebrew.api.js b/server/homebrew.api.js
index 8210fbb65..293e8f873 100644
--- a/server/homebrew.api.js
+++ b/server/homebrew.api.js
@@ -108,7 +108,7 @@ const excludePropsFromUpdate = (brew)=>{
 
 const excludeGoogleProps = (brew)=>{
 	const modified = _.clone(brew);
-	const propsToExclude = ['tags', 'systems', 'published', 'authors', 'owner', 'views'];
+	const propsToExclude = ['tags', 'systems', 'published', 'authors', 'owner', 'views', 'thumbnail'];
 	for (const prop of propsToExclude) {
 		delete modified[prop];
 	}

From e18e3cf7e4de7b428d6e1e8d9281aada9df1b658 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Sat, 24 Sep 2022 23:51:08 +1200
Subject: [PATCH 22/23] Remove thumbnail from Google brew properties

---
 server/googleActions.js | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/server/googleActions.js b/server/googleActions.js
index 7b86a34c1..4ccf7a1dd 100644
--- a/server/googleActions.js
+++ b/server/googleActions.js
@@ -125,8 +125,7 @@ const GoogleActions = {
 				description : file.description,
 				views       : parseInt(file.properties.views),
 				published   : file.properties.published ? file.properties.published == 'true' : false,
-				systems     : [],
-				thumbnail   : file.properties.thumbnail
+				systems     : []
 			};
 		});
 	  return brews;
@@ -146,8 +145,7 @@ const GoogleActions = {
 					editId    : brew.editId || nanoid(12),
 					pageCount : brew.pageCount,
 					renderer  : brew.renderer || 'legacy',
-					isStubbed : true,
-					thumbnail : brew.thumbnail
+					isStubbed : true
 				}
 			},
 			media : {
@@ -185,8 +183,7 @@ const GoogleActions = {
 				pageCount : brew.pageCount,
 				renderer  : brew.renderer || 'legacy',
 				isStubbed : true,
-				version   : 1,
-				thumbnail : brew.thumbnail || ''
+				version   : 1
 			}
 		};
 
@@ -265,7 +262,6 @@ const GoogleActions = {
 				views      : parseInt(obj.data.properties.views) || 0, //brews with no view parameter will return undefined
 				version    : parseInt(obj.data.properties.version) || 0,
 				renderer   : obj.data.properties.renderer ? obj.data.properties.renderer : 'legacy',
-				thumbnail  : obj.data.properties.thumbnail || '',
 
 				googleId : id
 			};

From 910868cfdb6f63927cd65047cf7224a2a32058d9 Mon Sep 17 00:00:00 2001
From: Trevor Buckner <calculuschild@gmail.com>
Date: Sun, 25 Sep 2022 22:20:44 -0400
Subject: [PATCH 23/23] Simplified sort arrow, removed duplicate "onClick"

---
 .../pages/basePages/listPage/brewItem/brewItem.jsx     |  4 ++--
 client/homebrew/pages/basePages/listPage/listPage.jsx  | 10 ++--------
 client/homebrew/pages/basePages/listPage/listPage.less |  8 ++++----
 3 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
index 79a4f7d0f..171fc5bb4 100644
--- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
+++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
@@ -96,7 +96,7 @@ const BrewItem = createClass({
 	render : function(){
 		const brew = this.props.brew;
 		if(Array.isArray(brew.tags)) {               // temporary fix until dud tags are cleaned
-			brew.tags = brew.tags?.filter(tag => tag); //remove tags that are empty strings
+			brew.tags = brew.tags?.filter((tag)=>tag); //remove tags that are empty strings
 		}
 		const dateFormatString = 'YYYY-MM-DD HH:mm:ss';
 
@@ -112,7 +112,7 @@ const BrewItem = createClass({
 					<div className='brewTags' title={`Tags:\n${brew.tags.join('\n')}`}>
 						<i className='fas fa-tags'/>
 						{brew.tags.map((tag, idx)=>{
-							let matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
+							const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
 							return <span className={matches[1]}>{matches[2]}</span>;
 						})}
 					</div>
diff --git a/client/homebrew/pages/basePages/listPage/listPage.jsx b/client/homebrew/pages/basePages/listPage/listPage.jsx
index e49a24906..162aba5e4 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.jsx
+++ b/client/homebrew/pages/basePages/listPage/listPage.jsx
@@ -121,14 +121,8 @@ const ListPage = createClass({
 			>
 				{`${sortTitle}`}
 			</button>
-			{this.state.sortType == sortValue ? 
-				<button
-					onClick={this.handleSortDirChange}
-					className='sortDir'
-				>
-					{this.state.sortDir == 'asc' ? <i className='fas fa-sort-up'></i> : <i className='fas fa-sort-down'></i>}
-				</button>
-				: ''
+			{this.state.sortType == sortValue &&
+				<i className={`sortDir fas ${this.state.sortDir == 'asc' ? 'fa-sort-up' : 'fa-sort-down'}`}></i>
 			}
 		  </div>;
 	},
diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less
index 9f274ce51..a88589265 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.less
+++ b/client/homebrew/pages/basePages/listPage/listPage.less
@@ -74,12 +74,12 @@
 				color: white;
 				font-weight: 800;
 				height: 100%;
-				&.sortDir {
+				& + .sortDir {
 					padding-left: 5px;
 				}
 			}
 		}
-			
+
 		}
 		.filter-option {
 			margin-left: 20px;
@@ -98,7 +98,7 @@
 				color            : #ccc;
 				padding          : 0;
 			}
-		
-		
+
+
 	}
 }