Size the spinning gear on developer avatars, add a mobile layout for the XP bar in the profile

components/Avatar.tsx

@@ -12,6 +12,7 @@ export default function Avatar(props: {
 	onClick?: () => void | undefined;
 	className?: string | undefined;
 	online?: boolean;
+	gearSize?: number;
 }) {
 	const { session, status } = useCurrentSession();
 	const user = props.user ?? session?.user;
@@ -39,7 +40,7 @@ export default function Avatar(props: {
 			</div>
 			{admin ? (
 				<div className="absolute z-10 -bottom-2 -left-2 text-slate-300 animate-spin-slow">
-					<BsGearFill size={36}></BsGearFill>
+					<BsGearFill size={props.gearSize ?? 36}></BsGearFill>
 				</div>
 			) : (
 				<></>

components/Container.tsx

@@ -226,6 +226,7 @@ export default function Container(props: ContainerProps) {
 										imgHeightOverride="h-11"
 										showLevel={false}
 										borderThickness={2}
+										gearSize={24}
 									/>
 								</Link>
 							) : (

components/XpProgressBar.tsx

@@ -12,21 +12,44 @@ export default function XpProgressBar({
 	const [hovered, setHovered] = useState(false);
 
 	return (
-		<div
-			className={`radial-progress text-accent m-2 text-${hovered ? "xs" : "sm"}`}
-			style={
-				{
-					"--value": (user.xp / xpRequiredForNextLevel(user.level)) * 100,
-					"--size": size,
-				} as any
-			}
-			role="progressbar"
-			onMouseEnter={() => setHovered(true)}
-			onMouseLeave={() => setHovered(false)}
-		>
-			{hovered
-				? `${user.xp}/${xpRequiredForNextLevel(user.level)}`
-				: `Lvl ${user.level}`}
+		<div className="text-accent m-2">
+			{/* Desktop layout */}
+			<div
+				className={`max-sm:hidden radial-progress text-${hovered ? "xs" : "sm"}`}
+				style={
+					{
+						"--value":
+							((user.xp - xpRequiredForNextLevel(user.level - 1)) /
+								(xpRequiredForNextLevel(user.level) -
+									xpRequiredForNextLevel(user.level - 1))) *
+							100,
+						"--size": size,
+					} as any
+				}
+				role="progressbar"
+				onMouseEnter={() => setHovered(true)}
+				onMouseLeave={() => setHovered(false)}
+			>
+				{hovered
+					? `${user.xp}/${xpRequiredForNextLevel(user.level)}`
+					: `Lvl ${user.level}`}
+			</div>
+			{/* Desktop layout */}
+			<div className="sm:hidden">
+				<div className="divider" />
+				<div>
+					Level {user.level} - XP: {user.xp}/
+					{xpRequiredForNextLevel(user.level)}
+				</div>
+				<progress
+					className="progress progress-accent"
+					value={user.xp - xpRequiredForNextLevel(user.level - 1)}
+					max={
+						xpRequiredForNextLevel(user.level) -
+						xpRequiredForNextLevel(user.level - 1)
+					}
+				/>
+			</div>
 		</div>
 	);
 }

components/competition/MatchScheduleCard.tsx

@@ -230,6 +230,7 @@ export default function MatchScheduleCard(props: {
 																		showLevel={false}
 																		borderThickness={2}
 																		onClick={() => remindUserOnSlack(user._id!)}
+																		gearSize={25}
 																	/>
 																) : (
 																	<div className="w-12 h-12"></div>

lib/Xp.ts

@@ -9,7 +9,7 @@ export function levelToXp(level: number) {
 }
 
 export function xpRequiredForNextLevel(level: number) {
-	return levelToXp(level + 1);
+	return Math.max(levelToXp(level + 1), 0);
 }
 
 export function levelToClassName(level: number | undefined) {

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sj3",
-	"version": "1.1.2",
+	"version": "1.1.3",
 	"private": true,
 	"repository": "https://github.com/Decatur-Robotics/Gearbox",
 	"license": "CC BY-NC-SA 4.0",