From d47e01f28f6430eb32e0499d950624a222511b4d Mon Sep 17 00:00:00 2001
From: Craig Kaiser <craig@kaiserengineering.io>
Date: Mon, 12 Aug 2024 10:08:44 -0400
Subject: [PATCH] styling

---
 package.json                          | 15 +++++++--------
 postcss.config.js                     | 10 +++++-----
 src/components/Matches.svelte         |  6 +++---
 src/lib/matches.svelte.ts             |  4 +++-
 src/routes/events/[slug]/+page.svelte | 12 ++++++------
 tailwind.config.js                    |  5 +----
 6 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/package.json b/package.json
index bb8d371..8934b6a 100644
--- a/package.json
+++ b/package.json
@@ -37,16 +37,19 @@
 		"@vercel/analytics": "^1.3.1",
 		"autoprefixer": "^10.4.20",
 		"bits-ui": "^0.21.13",
+		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.1",
 		"dayjs": "^1.11.12",
 		"eslint": "^9.9.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.43.0",
 		"formsnap": "^1.0.1",
+		"framer-motion": "^11.3.24",
 		"globals": "^15.9.0",
 		"i": "^0.3.7",
 		"jsdom": "^24.1.1",
 		"less": "^4.2.0",
+		"lucide-react": "^0.427.0",
 		"lucide-svelte": "^0.427.0",
 		"mode-watcher": "^0.4.1",
 		"postcss": "^8.4.41",
@@ -61,10 +64,12 @@
 		"svelte-check": "^3.8.5",
 		"svelte-french-toast": "^1.2.0",
 		"svelte-hamburgers": "^4.2.1",
+		"svelte-inview": "^4.0.2",
 		"sveltekit-superforms": "^2.16.1",
 		"tailwind-merge": "^2.5.1",
 		"tailwind-variants": "^0.2.1",
 		"tailwindcss": "^3.4.9",
+		"tailwindcss-animate": "^1.0.7",
 		"tournament-pairings": "^1.5.2",
 		"tslib": "^2.6.3",
 		"typedoc": "^0.26.5",
@@ -74,13 +79,7 @@
 		"vite": "^5.4.0",
 		"vitest": "^2.0.5",
 		"zod": "^3.23.8",
-		"zod-validation-error": "^3.3.1",
-		"class-variance-authority": "^0.7.0",
-		"framer-motion": "^11.3.24",
-		"lucide-react": "^0.427.0",
-		"svelte-inview": "^4.0.2",
-		"tailwindcss-animate": "^1.0.7"
+		"zod-validation-error": "^3.3.1"
 	},
-	"type": "module",
-	"dependencies": {}
+	"type": "module"
 }
diff --git a/postcss.config.js b/postcss.config.js
index 0f77216..2e7af2b 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,6 @@
 export default {
-	plugins: {
-		tailwindcss: {},
-		autoprefixer: {}
-	}
-};
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/components/Matches.svelte b/src/components/Matches.svelte
index 665217a..8331dc0 100644
--- a/src/components/Matches.svelte
+++ b/src/components/Matches.svelte
@@ -127,12 +127,12 @@
 	);
 </script>
 
-<div class="mb-4 block flex text-sm font-bold">
-	Matches {#if subscriptionStatus && subscriptionStatus === 'SUBSCRIBED'}
+<div class="mb-4 block flex justify-center text-sm font-bold">
+	{#if subscriptionStatus && subscriptionStatus === 'SUBSCRIBED'}
 		<Zap class="fill-green-200 text-green-500" />
 	{:else}
 		<Zapoff class="fill-red-200 text-red-500" />
-	{/if}:
+	{/if}
 </div>
 
 <div class="rounded rounded-2xl p-2 dark:bg-gray-800">
diff --git a/src/lib/matches.svelte.ts b/src/lib/matches.svelte.ts
index c0179d0..8945d3c 100644
--- a/src/lib/matches.svelte.ts
+++ b/src/lib/matches.svelte.ts
@@ -342,7 +342,9 @@ export class Matches extends Base {
 		const availableTeams = allTeams.filter((team) => !teamsPlayingThisRound.includes(team));
 
 		if (availableTeams.length === 0) {
-			throw new Error('No available teams to assign as referees.');
+			throw new Error(
+				'No available teams to assign as referees, too many courts for the number of teams?'
+			);
 		}
 
 		// Sort available teams by the number of times they have refereed, ascending
diff --git a/src/routes/events/[slug]/+page.svelte b/src/routes/events/[slug]/+page.svelte
index cb192f7..7c29619 100644
--- a/src/routes/events/[slug]/+page.svelte
+++ b/src/routes/events/[slug]/+page.svelte
@@ -99,8 +99,8 @@
 		</div>
 	{/if}
 
-	<Tabs.Root value={readOnly ? 'matches' : 'settings'}>
-		<Tabs.List class="mb-4 grid w-full gap-2 {tabsWidth} dark:bg-gray-700">
+	<Tabs.Root class="w-full lg:w-1/2" value={readOnly ? 'matches' : 'settings'}>
+		<Tabs.List class="mb-4 grid gap-2 {tabsWidth} dark:bg-gray-700">
 			{#if !readOnly}
 				<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
 				<Tabs.Trigger disabled={isCreate} value="teams">Teams</Tabs.Trigger>
@@ -113,7 +113,7 @@
 		{#if !readOnly}
 			<Tabs.Content value="settings">
 				<Card.Root
-					class="relative flex max-w-xl flex-col items-start justify-between rounded-3xl border border-gray-500/70 bg-background p-7 dark:bg-gray-700"
+					class="relative flex flex-col items-center justify-between rounded-3xl border border-gray-500/70 bg-background p-7 dark:bg-gray-700"
 				>
 					<BorderBeam size={150} duration={12} />
 
@@ -129,7 +129,7 @@
 
 			<Tabs.Content value="teams">
 				<Card.Root
-					class="min-w-xl relative flex max-w-xl flex-col items-start justify-between rounded-3xl border border-gray-500/70 bg-background p-7 dark:bg-gray-700"
+					class="relative flex flex-col items-center justify-between rounded-3xl border border-gray-500/70 bg-background p-7 dark:bg-gray-700"
 				>
 					<BorderBeam size={150} duration={12} />
 					<Card.Header>
@@ -147,7 +147,7 @@
 
 		<Tabs.Content value="matches">
 			<Card.Root
-				class="relative flex flex-col rounded-3xl border border-gray-500/70 bg-background p-7 dark:bg-gray-700"
+				class="relative flex flex-col items-center justify-between rounded-3xl border border-gray-500/70 bg-background p-7 dark:bg-gray-700"
 			>
 				<BorderBeam size={150} duration={12} />
 				<Card.Header>
@@ -164,7 +164,7 @@
 
 		<Tabs.Content value="standings">
 			<Card.Root
-				class="min-w-xl relative flex max-w-xl flex-col rounded-3xl border border-gray-500/70 bg-background p-7 dark:bg-gray-700"
+				class="relative flex flex-col items-center justify-between rounded-3xl border border-gray-500/70 bg-background p-7 dark:bg-gray-700"
 			>
 				<BorderBeam size={150} duration={12} />
 				<Card.Header>
diff --git a/tailwind.config.js b/tailwind.config.js
index ec1f24b..1269b29 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,10 +8,7 @@ const config = {
 	theme: {
 		container: {
 			center: true,
-			padding: '2rem',
-			screens: {
-				'2xl': '1400px'
-			}
+			padding: '2rem'
 		},
 		extend: {
 			colors: {