snippet colors

client/homebrew/pages/basePages/listPage/brewItem/brewItem.less

@@ -269,6 +269,28 @@
 			display   : inline-block;
 			grid-area : tags;
 			min-width : 100px;
+			
+			span {
+				color:#606060;
+				background-color: hsla(from #c1b673 h s l / 20% );
+			}
+			.type {
+				color:#518251;
+				background-color: hsla(from currentColor h s l / 20% );
+			}
+			.system {
+				color: #c55656;
+				background-color: hsla(from currentColor h s l / 20% );
+			}
+			.group {
+				color            : #525252;
+				background-color: hsla(from currentColor h s l / 20% );
+			}
+			.meta {
+				color            : #5050b1;
+				background-color: hsla(from currentColor h s l / 20% );
+			}
+
 		}
 		.brewAuthors {
 			display            : inline-block;
@@ -379,7 +401,6 @@
 	padding               : 10px;
 	padding-top           : 100px;
 	padding-bottom        : 50px;
-	margin                : 10px;
 	font-size             : 13px;
 	color                 : white;
 	background-color      : grey;

client/homebrew/pages/basePages/listPage/listPage.jsx

@@ -294,13 +294,13 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 				<div className='layout-option' title='grid'>
 					<label>
 						<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'grid')} checked={layoutMode === 'grid'} />
-						<i className='fas fa-grip'></i>
+						<i className='fas fa-grip-vertical'></i>
 					</label>
 				</div>
 				<div className='layout-option' title='list'>
 					<label>
 						<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'list')} checked={layoutMode === 'list'} />
-						<i className='fas fa-grip'></i>
+						<i className='fas fa-list'></i>
 					</label>
 				</div>
 				<div className='layout-option' title='card'>

client/homebrew/pages/basePages/listPage/listPage.less

@@ -54,7 +54,7 @@
 					--columns             : 4;
 					display               : grid;
 					grid-template-columns : repeat(var(--columns), 1fr);
-					column-gap            : 40px;
+					gap            : 20px;
 					justify-items         : center;
 
 					@media screen and (max-width : 1700px) {--columns : 3;}