Add black border to tag filter

2022-04-26 20:27:26 +00:00
parent 0aeecdcbba
commit 5d3ab17f74
3 changed files with 62 additions and 32 deletions
@@ -56,31 +56,42 @@ export function Courses(props) {
 			<p>
 				Filter by tag:
 				<div className='coursetags'>
-					{Object.entries(tags).map(([name, color]) =>
+					<div
+						className='labelbox'
+						style={{borderColor: tagFilter === false ? 'black' : 'transparent'}}
+					>
 						<Label
 							onClick={() => {
-								setTagFilter(name);
-								tagFilterCache = name;
+								setTagFilter(false);
+								tagFilterCache = false;
 							}}
 							as='a'
-							color={color}
 							tag
 						>
-							{name}
+							No Filter
 						</Label>
+					</div>
+
+					{Object.entries(tags).map(([name, color]) =>
+						<div
+							className='labelbox'
+							style={{borderColor: tagFilter === name ? 'black' : 'transparent'}}
+						>
+							<Label
+								onClick={() => {
+									setTagFilter(name);
+									tagFilterCache = name;
+								}}
+								as='a'
+								color={color}
+								tag
+							>
+								{name}
+							</Label>
+						</div>
 					)}
 				</div>
 			</p>
-			<p>
-				{tagFilter && <Button
-					onClick={() => {
-						setTagFilter(false);
-						tagFilterCache = false;
-					}}
-				>
-					Clear {tagFilter} filter
-				</Button>}
-			</p>

 			{courses ?
 				<Table basic='very'>