From 174d36dacdbd5be8263d09e134a26637d0db5d6b Mon Sep 17 00:00:00 2001
From: zkldi <20380519+zkldi@users.noreply.github.com>
Date: Fri, 22 Jul 2022 01:54:27 +0100
Subject: [PATCH] fix(client): add non-functional highlight indicator

---
 client/src/_assets/metronic-scss              |  2 +-
 .../sessions/SessionRaiseBreakdown.tsx        | 32 +++++++++++++++----
 client/src/components/util/Icon.tsx           |  4 ++-
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/client/src/_assets/metronic-scss b/client/src/_assets/metronic-scss
index 3924275de..f93aa62cf 160000
--- a/client/src/_assets/metronic-scss
+++ b/client/src/_assets/metronic-scss
@@ -1 +1 @@
-Subproject commit 3924275dec09dcc0f09708c8ada04b9ed568072b
+Subproject commit f93aa62cfb31bb9f656443a5de6d798ce313b7e5
diff --git a/client/src/components/sessions/SessionRaiseBreakdown.tsx b/client/src/components/sessions/SessionRaiseBreakdown.tsx
index 46b8b70db..d5bf7ac10 100644
--- a/client/src/components/sessions/SessionRaiseBreakdown.tsx
+++ b/client/src/components/sessions/SessionRaiseBreakdown.tsx
@@ -111,16 +111,17 @@ export default function SessionRaiseBreakdown({ sessionData }: { sessionData: Se
 							<div className="btn-group">
 								<SelectButton value={view} setValue={setView} id="lamps">
 									<Icon type="lightbulb" />
-									New Lamps
+									Lamps Only
 								</SelectButton>
 
 								<SelectButton value={view} setValue={setView} id="both">
 									<Icon type="bolt" />
 									Both
 								</SelectButton>
+
 								<SelectButton value={view} setValue={setView} id="grades">
 									<Icon type="sort-alpha-up" />
-									New Grades
+									Grades Only
 								</SelectButton>
 							</div>
 						</div>
@@ -350,7 +351,7 @@ function ElementStatTable({
 			const firstData = counts[element][0];
 
 			tableContents.push(
-				<tr key={element}>
+				<tr key={element} className="breakdown-hover-row">
 					<td
 						style={{
 							// @ts-expect-error this is a hack due to the funky type of colours and element.
@@ -369,7 +370,7 @@ function ElementStatTable({
 
 			for (const data of counts[element]!.slice(1)) {
 				tableContents.push(
-					<tr key={data.score.scoreID}>
+					<tr key={data.score.scoreID} className="breakdown-hover-row">
 						<BreakdownChartContents
 							{...data}
 							{...{ chartMap, songMap, fullSize, game, gptConfig, type }}
@@ -445,8 +446,6 @@ function BreakdownChartContents({
 			}
 		}
 
-		console.log(game);
-
 		if (score) {
 			return (
 				<>
@@ -467,7 +466,28 @@ function BreakdownChartContents({
 	return (
 		<>
 			<TitleCell noArtist chart={chart} game={game} song={song} />
+			<PseudHighlight highlight={score.highlight} onHighlightChange={() => void 0} />
 			<DifficultyCell alwaysShort chart={chart} game={game} />
 		</>
 	);
 }
+
+function PseudHighlight({
+	highlight,
+	onHighlightChange,
+}: {
+	highlight: boolean;
+	onHighlightChange: (hl: boolean) => void;
+}) {
+	return (
+		<td style={{ verticalAlign: "center" }}>
+			{highlight ? (
+				<Icon colour="warning" type="star" style={{ paddingTop: "0.1rem" }} />
+			) : (
+				<span className="breakdown-hover-highlight-button">
+					<Icon type="star" regular noPad />
+				</span>
+			)}
+		</td>
+	);
+}
diff --git a/client/src/components/util/Icon.tsx b/client/src/components/util/Icon.tsx
index 6644f4a8d..5bd1c93a2 100644
--- a/client/src/components/util/Icon.tsx
+++ b/client/src/components/util/Icon.tsx
@@ -7,10 +7,12 @@ export default function Icon({
 	onClick,
 	colour,
 	style,
+	regular,
 }: {
 	type: string;
 	noPad?: boolean;
 	brand?: boolean;
+	regular?: boolean;
 	onClick?: () => void;
 	colour?: "info" | "primary" | "danger" | "warning";
 	style?: CSSProperties;
@@ -18,7 +20,7 @@ export default function Icon({
 	return (
 		<i
 			onClick={onClick}
-			className={`fa${brand ? "b" : "s"} fa-${type} ${noPad ? "p-0" : ""} ${
+			className={`fa${regular ? "r" : brand ? "b" : "s"} fa-${type} ${noPad ? "p-0" : ""} ${
 				colour ? `text-${colour}` : ""
 			}`}
 			style={style}