refactoring and better disc detail icon button scaling

cdleveille · Jun 9, 2024 · 28532cd · 28532cd
1 parent 5203e8f
commit 28532cd
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 55 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -149,10 +149,12 @@ h1 {
 }
 
 .disc-detail-btn {
-	width: 6.5vmin !important;
-	height: 6.5vmin !important;
-	min-width: 2.2rem !important;
-	min-height: 2.2rem !important;
+	width: 6vmin !important;
+	height: 6vmin !important;
+	max-width: 3rem !important;
+	max-height: 3rem !important;
+	min-width: 2rem !important;
+	min-height: 2rem !important;
 }
 
 .add-or-remove-btn {

diff --git a/src/components/disc/Disc.tsx b/src/components/disc/Disc.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 
 import { useAppContext } from "@hooks";
 import { Stack, Zoom } from "@mui/material";
+import { getDiscGradientBackground } from "@util";
 
 import type { DiscProps } from "@types";
 
@@ -12,31 +13,13 @@ export const Disc = ({ disc }: DiscProps) => {
 
 	const { showDiscDetailModal } = useAppContext();
 
-	const {
-		name,
-		brand,
-		category,
-		stability,
-		speed,
-		glide,
-		turn,
-		fade,
-		color,
-		background_color: backgroundColor
-	} = disc;
-
-	const innerGradient = backgroundColor === "#000000" ? "#333333" : backgroundColor;
-	const outerGradient = backgroundColor === "#000000" ? "#000000" : "#222222";
-
-	const gradient: React.CSSProperties = {
-		background: `radial-gradient(circle, ${innerGradient} 50%, ${outerGradient} 100%)`
-	};
+	const { name, brand, category, stability, speed, glide, turn, fade, color, background_color } = disc;
 
 	return (
 		<div className="disc-container">
 			<div
 				className="disc"
-				style={{ ...gradient, color }}
+				style={{ color, background: getDiscGradientBackground(background_color) }}
 				onMouseEnter={() => setIsHovered(true)}
 				onMouseLeave={() => setIsHovered(false)}
 				onClick={() => showDiscDetailModal(disc)}

diff --git a/src/components/disc/DiscDetail.tsx b/src/components/disc/DiscDetail.tsx
@@ -3,19 +3,17 @@
 import Image from "next/image";
 import toast from "react-hot-toast";
 
-import { useAuth } from "@clerk/nextjs";
 import { IconButton } from "@components";
 import { useApi, useAppContext } from "@hooks";
 import AddIcon from "@mui/icons-material/Add";
 import NavigateBeforeIcon from "@mui/icons-material/NavigateBefore";
 import NavigateNextIcon from "@mui/icons-material/NavigateNext";
 import RemoveIcon from "@mui/icons-material/Remove";
-import { copyToClipboard } from "@util";
+import { copyToClipboard, getDiscGradientBackground } from "@util";
 
 import type { DiscDetailProps } from "@types";
 
 export const DiscDetail = ({ disc }: DiscDetailProps) => {
-	const { isSignedIn } = useAuth();
 	const { filteredDiscs, selectedBag, showDiscDetailModal } = useAppContext();
 	const { isLoading, addDiscToBag, removeDiscFromBag } = useApi();
 
@@ -25,41 +23,22 @@ export const DiscDetail = ({ disc }: DiscDetailProps) => {
 	const showPreviousDisc = () => previousDisc && showDiscDetailModal(previousDisc);
 	const showNextDisc = () => nextDisc && showDiscDetailModal(nextDisc);
 
-	const {
-		id,
-		name,
-		brand,
-		category,
-		stability,
-		speed,
-		glide,
-		turn,
-		fade,
-		pic,
-		color,
-		background_color: backgroundColor
-	} = disc;
-
-	const innerGradient = backgroundColor === "#000000" ? "#333333" : backgroundColor;
-	const outerGradient = "#000000";
-
-	const gradient: React.CSSProperties = {
-		background: `radial-gradient(circle, ${innerGradient} 50%, ${outerGradient} 95%)`
-	};
+	const { id, name, brand, category, stability, speed, glide, turn, fade, pic, color, background_color } = disc;
 
 	const isDiscInBag = selectedBag?.discs.includes(id) ?? false;
 
+	const iconFontSize = "max(1rem, min(2rem, 4vmin))";
+
 	return (
 		<div
 			className="disc-detail"
-			style={{ ...gradient, color, border: `0.5vmin solid rgba(0, 0, 0, 0.05)` }}
+			style={{ color, background: getDiscGradientBackground(background_color) }}
 			onClick={() => {
 				copyToClipboard(window.location.href);
 				toast.success("Link copied");
 			}}
 		>
-			{isSignedIn &&
-				selectedBag &&
+			{selectedBag &&
 				(isDiscInBag ? (
 					<IconButton
 						className="add-or-remove-btn disc-detail-btn absolute-centered-horizontally"
@@ -71,7 +50,7 @@ export const DiscDetail = ({ disc }: DiscDetailProps) => {
 						}}
 						disabled={isLoading}
 					>
-						<RemoveIcon sx={{ fontSize: "2rem" }} />
+						<RemoveIcon sx={{ fontSize: iconFontSize }} />
 					</IconButton>
 				) : (
 					<IconButton
@@ -84,7 +63,7 @@ export const DiscDetail = ({ disc }: DiscDetailProps) => {
 						}}
 						disabled={isLoading}
 					>
-						<AddIcon sx={{ fontSize: "2rem" }} />
+						<AddIcon sx={{ fontSize: iconFontSize }} />
 					</IconButton>
 				))}
 			<div className="disc-detail-name">{name}</div>
@@ -110,7 +89,7 @@ export const DiscDetail = ({ disc }: DiscDetailProps) => {
 				className="disc-detail-btn absolute-centered-vertically"
 				style={{ left: "3vmin", cursor: !previousDisc ? "auto" : "pointer" }}
 			>
-				<NavigateBeforeIcon sx={{ fontSize: "2rem" }} />
+				<NavigateBeforeIcon sx={{ fontSize: iconFontSize }} />
 			</IconButton>
 			<IconButton
 				aria-label="next"
@@ -120,7 +99,7 @@ export const DiscDetail = ({ disc }: DiscDetailProps) => {
 				className="disc-detail-btn absolute-centered-vertically"
 				style={{ right: "3vmin", cursor: !nextDisc ? "auto" : "pointer" }}
 			>
-				<NavigateNextIcon sx={{ fontSize: "2rem" }} />
+				<NavigateNextIcon sx={{ fontSize: iconFontSize }} />
 			</IconButton>
 		</div>
 	);

diff --git a/src/util/index.ts b/src/util/index.ts
@@ -43,3 +43,9 @@ export const copyToClipboard = (text: string) => {
 	if (!isClient) return;
 	navigator.clipboard.writeText(text);
 };
+
+export const getDiscGradientBackground = (backgroundColor: string) => {
+	const innerGradient = backgroundColor === "#000000" ? "#333333" : backgroundColor;
+	const outerGradient = backgroundColor === "#000000" ? "#000000" : "#222222";
+	return `radial-gradient(circle, ${innerGradient} 50%, ${outerGradient} 100%)`;
+};