Add black border to tag filter

webclient/src/Classes.js

@@ -155,6 +155,9 @@ function NewClassTable(props) {
 								{name}
 							</Label>
 						)}
+
+						<p/>
+						<p>No upcoming classes.</p>
 					</Segment>
 				)}
 			</div>
@@ -275,32 +278,42 @@ export function Classes(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);
+								setTagFilter(false);
-								tagFilterCache = name;
+								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>
-
 
 			{classes.length && courses.length ?
 				sortByCourse ?

webclient/src/Courses.js

@@ -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);
+								setTagFilter(false);
-								tagFilterCache = name;
+								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'>

webclient/src/light.css

@@ -138,11 +138,17 @@ body {
 	flex-wrap: wrap;
 }
 
-.newclasstable .ui.tag.label {
+.ui.tag.label {
 	padding-left: 1rem;
 	padding-right: 0.5rem;
 }
 
+.labelbox {
+	display: inline;
+	padding: 0.55rem 0.1rem;
+	border: 2px solid black;
+}
+
 .usage {
 	height: 100vh;
 	background-color: black;