Merge pull request #26 from sergical/sergical/bracket-styling

Add bracket styling: React Flow controls and champion stacking

Author: wesbos

src/components/bracket/Bracket.tsx

@@ -280,11 +280,12 @@ function generateNodes(): Node[] {
 	// CHAMPIONSHIP (center)
 	// ===========================================================================
 	const finalGame = bracket.finals[0];
+	// Center between left finalist (x=3) and right finalist (x=4.5)
 	nodes.push({
 		id: "championship",
 		type: finalGame?.winner ? "playerNode" : "emptySlot",
 		position: {
-			x: ROUND_GAP * 3.5,
+			x: ROUND_GAP * 3.75,
 			y: 0,
 		},
 		data: finalGame?.winner
@@ -645,15 +646,9 @@ function BracketContent() {
 				onInit={handleInit}
 			>
 				<Controls
+					className="bracket-controls"
 					orientation="horizontal"
 					showInteractive={false}
-					style={{
-						position: "absolute",
-						top: 0,
-						bottom: "auto",
-						right: 0,
-						left: "auto",
-					}}
 				/>
 			</ReactFlow>
 		</div>

src/components/bracket/bracket.css

@@ -5,22 +5,34 @@
 	align-items: center;
 	gap: 0;
 	position: relative;
-	[data-id*="finalist"] & {
-		/* border: 3px solid var(--yellow); */
+
+	/* Finalist and championship nodes - vertically stacked layout */
+	[data-id*="finalist"] &,
+	[data-id="championship"] & {
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
 		width: auto;
-		/* margin-left: -20px; */
 		.player-name {
 			padding-top: 20px;
 		}
+		.player-info {
+			text-align: center;
+			margin-left: 0;
+		}
 		.player-photo-ring {
 			margin-bottom: -30px;
 		}
 	}
-	[data-id*="right-finalist"] & {
-		/* margin-left: 20px; */
+
+	/* Finalist sizing */
+	[data-id*="finalist"] & .player-photo-ring {
+		--photo-size: 65px;
+	}
+
+	/* Championship sizing */
+	[data-id="championship"] & .player-photo-ring {
+		--photo-size: 80px;
 	}
 }
 
@@ -181,3 +193,44 @@
 	border: 2px solid black;
 	border-radius: 50%;
 }
+
+/* Custom bracket controls styling */
+.bracket-controls.react-flow__controls {
+	top: 0;
+	right: 0;
+	bottom: auto;
+	left: auto;
+	box-shadow: none;
+}
+
+.bracket-controls .react-flow__controls-button {
+	background: var(--black);
+	border: 2px solid var(--yellow) !important;
+	border-radius: 0;
+	color: var(--yellow);
+	width: 32px;
+	height: 32px;
+}
+
+.bracket-controls .react-flow__controls-button:hover {
+	background: var(--yellow);
+}
+
+.bracket-controls .react-flow__controls-button svg {
+	fill: var(--yellow);
+	max-width: 14px;
+	max-height: 14px;
+}
+
+.bracket-controls .react-flow__controls-button:hover svg {
+	fill: var(--black);
+}
+
+.bracket-container .react-flow__attribution {
+	background: var(--black);
+	padding: 4px 8px;
+}
+
+.bracket-container .react-flow__attribution a {
+	color: var(--yellow);
+}

src/components/roster/roster.css

@@ -2,6 +2,9 @@
 	display: grid;
 	--card-size: 300px;
 	grid-template-columns: repeat(auto-fill, minmax(var(--card-size), 1fr));
+	@media (max-width: 700px) {
+		--card-size: 200px;
+	}
 	@media (max-width: 500px) {
 		--card-size: 150px;
 	}