From fc914b9cd882405363be4d919a0169c47ad4894d Mon Sep 17 00:00:00 2001
From: Parker <parkied@gmail.com>
Date: Fri, 29 Dec 2023 15:48:33 -0700
Subject: [PATCH] Consistent button size, typography styles for TOS and PP

---
 app/root.tsx                       |  18 +++--
 app/routes/_marketing+/privacy.tsx |  93 +++++++++++++++++---------
 app/routes/_marketing+/tos.tsx     | 103 +++++++++++++++++++----------
 package-lock.json                  |  77 +++++++++++++++++++++
 package.json                       |   1 +
 tailwind.config.ts                 |   3 +-
 6 files changed, 222 insertions(+), 73 deletions(-)

diff --git a/app/root.tsx b/app/root.tsx
index 0213743..f8ec336 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -154,7 +154,7 @@ function App() {
 	const userIsAdmin = user?.roles.find(role => role.name === 'admin')
 
 	let nav = (
-		<Button asChild size="sm" variant="default">
+		<Button asChild variant="default">
 			<Link to="/login">Log In</Link>
 		</Button>
 	)
@@ -162,7 +162,7 @@ function App() {
 		nav = (
 			<div className="flex grow items-center justify-between gap-1 sm:justify-end">
 				<div className="flex items-center justify-start gap-1">
-					<Button asChild className="px-4" size="sm" variant="default">
+					<Button asChild className="px-4" variant="default">
 						<Link to="/calendar" className="flex gap-2">
 							<Icon className="text-body-md" name="calendar" />
 							<span className="xsm:inline hidden">Calendar</span>
@@ -206,14 +206,18 @@ function App() {
 						<div className="font-light">Equestrian</div>
 						<div className="font-bold">Volunteer Scheduler</div>
 					</Link>
-					<div className="flex items-center justify-start gap-1">						
-						<Link to="/tos" className="text-sm mr-2">Terms of Service</Link>
-						<Link to="/privacy" className="text-sm">Privacy Policy</Link>
+					<div className="flex items-center justify-start gap-1">
+						<Link to="/tos" className="mr-2 text-sm">
+							Terms of Service
+						</Link>
+						<Link to="/privacy" className="text-sm">
+							Privacy Policy
+						</Link>
 					</div>
 
 					<ThemeSwitch userPreference={data.requestInfo.session.theme} />
 				</div>
-				
+
 				<div className="h-5" />
 				<Confetti confetti={data.flash?.confetti} />
 				<Toaster />
@@ -250,7 +254,7 @@ function UserDropdown() {
 							alt={user.name ?? user.username}
 							src={getUserImgSrc(user.imageId)}
 						/>
-						<span className="text-body-sm font-bold hidden sm:inline">
+						<span className="hidden text-body-sm font-bold sm:inline">
 							{user.name ?? user.username}
 						</span>
 					</Link>
diff --git a/app/routes/_marketing+/privacy.tsx b/app/routes/_marketing+/privacy.tsx
index 7d0ace4..3a1fee2 100644
--- a/app/routes/_marketing+/privacy.tsx
+++ b/app/routes/_marketing+/privacy.tsx
@@ -1,56 +1,87 @@
-import {
-	type V2_MetaFunction
-} from '@remix-run/node'
+import { type V2_MetaFunction } from '@remix-run/node'
 
 export const meta: V2_MetaFunction = () => {
 	return [
-		{ 
-			title: "Privacy Policy | TrotTrack.org",
+		{
+			title: 'Privacy Policy | TrotTrack.org',
 		},
 		{
-			property: "og:title",
-			content: "Privacy Policy | TrotTrack.org",
+			property: 'og:title',
+			content: 'Privacy Policy | TrotTrack.org',
 		},
 		{
-			name: "description",
-			content: "Read our Privacy Policy for TrotTrack.org, a nonprofit equestrian volunteer system that connects volunteers with equestrian organizations.",
+			name: 'description',
+			content:
+				'Read our Privacy Policy for TrotTrack.org, a nonprofit equestrian volunteer system that connects volunteers with equestrian organizations.',
 		},
-	];
-};
+	]
+}
 
 export default function PrivacyRoute() {
 	return (
-		<div className="container flex min-h-full flex-col justify-center pb-32 pt-20">			
-			<div className="mx-auto w-full max-w-lg">
-				<h1 className="text-2xl font-bold">Privacy Policy</h1>				
-			</div>
-			<p className="text-lg">By using our website and services, you agree to comply with the following privacy policy:</p>
+		<div className="container prose flex min-h-full flex-col justify-center pb-32 pt-20 dark:prose-invert">
+			<h1>Privacy Policy</h1>
+			<p className="text-lg">
+				By using our website and services, you agree to comply with the
+				following privacy policy:
+			</p>
 			<section>
-				<h2 className="text-xl font-bold">1. Information Collection</h2>
-				<p>We collect certain information when you use our website and services. This may include personal information such as your name, email address, and other contact details. We also collect non-personal information such as your IP address and browsing behavior.</p>
+				<h2>1. Information Collection</h2>
+				<p>
+					We collect certain information when you use our website and services.
+					This may include personal information such as your name, email
+					address, and other contact details. We also collect non-personal
+					information such as your IP address and browsing behavior.
+				</p>
 			</section>
 			<section>
-				<h2 className="text-xl font-bold">2. Use of Information</h2>
-				<p>We use the information we collect to provide and improve our website and services. We may use your personal information to communicate with you, respond to your inquiries, and send you relevant updates and notifications.</p>
+				<h2>2. Use of Information</h2>
+				<p>
+					We use the information we collect to provide and improve our website
+					and services. We may use your personal information to communicate with
+					you, respond to your inquiries, and send you relevant updates and
+					notifications.
+				</p>
 			</section>
 			<section>
-				<h2 className="text-xl font-bold">3. Information Sharing</h2>
-				<p>We may share your information with third-party service providers who assist us in operating our website and services. We may also share your information when required by law or to protect our rights and interests.</p>
+				<h2>3. Information Sharing</h2>
+				<p>
+					We may share your information with third-party service providers who
+					assist us in operating our website and services. We may also share
+					your information when required by law or to protect our rights and
+					interests.
+				</p>
 			</section>
 			<section>
-				<h2 className="text-xl font-bold">4. Data Security</h2>
-				<p>We take reasonable measures to protect the security of your information. However, please note that no method of transmission over the internet or electronic storage is completely secure.</p>
+				<h2>4. Data Security</h2>
+				<p>
+					We take reasonable measures to protect the security of your
+					information. However, please note that no method of transmission over
+					the internet or electronic storage is completely secure.
+				</p>
 			</section>
 			<section>
-				<h2 className="text-xl font-bold">5. Cookies</h2>
-				<p>We use cookies to enhance your browsing experience and provide personalized content. You can choose to disable cookies in your browser settings, but please note that some features of our website may not function properly.</p>
+				<h2>5. Cookies</h2>
+				<p>
+					We use cookies to enhance your browsing experience and provide
+					personalized content. You can choose to disable cookies in your
+					browser settings, but please note that some features of our website
+					may not function properly.
+				</p>
 			</section>
 			<section>
-				<h2 className="text-xl font-bold">6. Changes to this Privacy Policy</h2>
-				<p>We may update this privacy policy from time to time. Any changes will be posted on this page, and the revised policy will be effective immediately upon posting.</p>
-				<p>By using our website and services, you agree to this privacy policy. If you do not agree with any part of this policy, please do not use our website or services.</p>
+				<h2>6. Changes to this Privacy Policy</h2>
+				<p>
+					We may update this privacy policy from time to time. Any changes will
+					be posted on this page, and the revised policy will be effective
+					immediately upon posting.
+				</p>
+				<p>
+					By using our website and services, you agree to this privacy policy.
+					If you do not agree with any part of this policy, please do not use
+					our website or services.
+				</p>
 			</section>
 		</div>
-	);
+	)
 }
-
diff --git a/app/routes/_marketing+/tos.tsx b/app/routes/_marketing+/tos.tsx
index dd42954..51dd935 100644
--- a/app/routes/_marketing+/tos.tsx
+++ b/app/routes/_marketing+/tos.tsx
@@ -1,63 +1,98 @@
-import React from 'react';
-import {
-	type V2_MetaFunction
-} from '@remix-run/node'
+import { type V2_MetaFunction } from '@remix-run/node'
 
 export const meta: V2_MetaFunction = () => {
 	return [
-		{ 
-			title: "Terms of Service | TrotTrack.org",
+		{
+			title: 'Terms of Service | TrotTrack.org',
 		},
 		{
-			property: "og:title",
-			content: "Terms of Service | TrotTrack.org",
+			property: 'og:title',
+			content: 'Terms of Service | TrotTrack.org',
 		},
 		{
-			name: "description",
-			content: "Read or Terms of Service for TrotTrack.org, a nonprofit equestrian volunteer system that connects volunteers with equestrian organizations.",
+			name: 'description',
+			content:
+				'Read or Terms of Service for TrotTrack.org, a nonprofit equestrian volunteer system that connects volunteers with equestrian organizations.',
 		},
-	];
-};
+	]
+}
 
 export default function TermsOfServiceRoute() {
 	return (
-		<div className="container flex min-h-full flex-col justify-center pb-32 pt-20">			
-			<div className="mx-auto w-full max-w-lg">
-				<h1 className="text-2xl font-bold">Terms of Service</h1>				
-			</div>
-			<p className="text-lg">By using our website and services, you agree to comply with the following terms and conditions:</p>
+		<div className="container prose flex min-h-full flex-col justify-center pb-32 pt-20 dark:prose-invert">
+			<h1>Terms of Service</h1>
+			<p className="text-lg">
+				By using our website and services, you agree to comply with the
+				following terms and conditions:
+			</p>
 			<section>
-				<h2 className="text-xl font-bold">1. Acceptance of Terms</h2>
-				<p>These terms of service govern your use of TrotTrack.org. By accessing or using our website, you acknowledge that you have read, understood, and agree to be bound by these terms.</p>
+				<h2>1. Acceptance of Terms</h2>
+				<p>
+					These terms of service govern your use of TrotTrack.org. By accessing
+					or using our website, you acknowledge that you have read, understood,
+					and agree to be bound by these terms.
+				</p>
 			</section>
 			<section>
-				<h2 className="text-xl font-bold">2. Description of Services</h2>
-				<p>TrotTrack.org is a nonprofit equestrian volunteer system that connects volunteers with equestrian organizations. Our services include providing a platform for volunteers to find and sign up for volunteer opportunities, and for organizations to manage their volunteer programs.</p>
+				<h2>2. Description of Services</h2>
+				<p>
+					TrotTrack.org is a nonprofit equestrian volunteer system that connects
+					volunteers with equestrian organizations. Our services include
+					providing a platform for volunteers to find and sign up for volunteer
+					opportunities, and for organizations to manage their volunteer
+					programs.
+				</p>
 			</section>
 			<section>
-				<h2 className="text-xl font-bold">3. User Responsibilities</h2>
+				<h2>3. User Responsibilities</h2>
 				<p>As a user of TrotTrack.org, you agree to:</p>
 				<ul>
-					<li>Provide accurate and complete information when creating an account</li>
-					<li>Use the website and services in compliance with applicable laws and regulations</li>
+					<li>
+						Provide accurate and complete information when creating an account
+					</li>
+					<li>
+						Use the website and services in compliance with applicable laws and
+						regulations
+					</li>
 					<li>Respect the privacy and rights of other users</li>
-					<li>Not engage in any activity that may disrupt or interfere with the proper functioning of TrotTrack.org</li>
+					<li>
+						Not engage in any activity that may disrupt or interfere with the
+						proper functioning of TrotTrack.org
+					</li>
 				</ul>
 			</section>
 			<section>
-				<h2 className="text-xl font-bold">4. Intellectual Property</h2>
-				<p>All content and materials on TrotTrack.org, including but not limited to text, graphics, logos, images, and software, are the property of TrotTrack.org or its licensors and are protected by intellectual property laws. You may not reproduce, distribute, modify, or create derivative works of any content without prior written consent from TrotTrack.org.</p>
+				<h2>4. Intellectual Property</h2>
+				<p>
+					All content and materials on TrotTrack.org, including but not limited
+					to text, graphics, logos, images, and software, are the property of
+					TrotTrack.org or its licensors and are protected by intellectual
+					property laws. You may not reproduce, distribute, modify, or create
+					derivative works of any content without prior written consent from
+					TrotTrack.org.
+				</p>
 			</section>
 			<section>
-				<h2 className="text-xl font-bold">5. Limitation of Liability</h2>
-				<p>TrotTrack.org and its affiliates shall not be liable for any direct, indirect, incidental, special, or consequential damages arising out of or in connection with your use of the website or services.</p>
+				<h2>5. Limitation of Liability</h2>
+				<p>
+					TrotTrack.org and its affiliates shall not be liable for any direct,
+					indirect, incidental, special, or consequential damages arising out of
+					or in connection with your use of the website or services.
+				</p>
 			</section>
 			<section>
-				<h2 className="text-xl font-bold">6. Governing Law</h2>
-				<p>These terms of service shall be governed by and construed in accordance with the laws of the jurisdiction in which TrotTrack.org operates.</p>
-				<p>By using TrotTrack.org, you agree to these terms of service. If you do not agree with any part of these terms, please do not use our website or services.</p>
+				<h2>6. Governing Law</h2>
+				<p>
+					These terms of service shall be governed by and construed in
+					accordance with the laws of the jurisdiction in which TrotTrack.org
+					operates.
+				</p>
+				<p>
+					By using TrotTrack.org, you agree to these terms of service. If you do
+					not agree with any part of these terms, please do not use our website
+					or services.
+				</p>
 			</section>
 		</div>
-	);
+	)
 }
-
diff --git a/package-lock.json b/package-lock.json
index dbcd67f..1e33b90 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -82,6 +82,7 @@
         "@remix-run/dev": "^1.18.0",
         "@remix-run/eslint-config": "^1.18.0",
         "@remix-run/serve": "^1.18.0",
+        "@tailwindcss/typography": "^0.5.10",
         "@testing-library/jest-dom": "^5.16.5",
         "@total-typescript/ts-reset": "^0.4.2",
         "@types/bcryptjs": "^2.4.2",
@@ -4459,6 +4460,34 @@
         "node": ">=10"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz",
+      "integrity": "sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==",
+      "dev": true,
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
+    "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@tanstack/react-table": {
       "version": "8.9.2",
       "license": "MIT",
@@ -11097,11 +11126,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "dev": true,
@@ -20429,6 +20470,30 @@
         "defer-to-connect": "^2.0.0"
       }
     },
+    "@tailwindcss/typography": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz",
+      "integrity": "sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==",
+      "dev": true,
+      "requires": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "dependencies": {
+        "postcss-selector-parser": {
+          "version": "6.0.10",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+          "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^3.0.0",
+            "util-deprecate": "^1.0.2"
+          }
+        }
+      }
+    },
     "@tanstack/react-table": {
       "version": "8.9.2",
       "requires": {
@@ -24562,10 +24627,22 @@
       "version": "4.3.0",
       "dev": true
     },
+    "lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "dev": true
     },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
     "lodash.merge": {
       "version": "4.6.2",
       "dev": true
diff --git a/package.json b/package.json
index e9210ea..82a1e9e 100644
--- a/package.json
+++ b/package.json
@@ -109,6 +109,7 @@
     "@remix-run/dev": "^1.18.0",
     "@remix-run/eslint-config": "^1.18.0",
     "@remix-run/serve": "^1.18.0",
+    "@tailwindcss/typography": "^0.5.10",
     "@testing-library/jest-dom": "^5.16.5",
     "@total-typescript/ts-reset": "^0.4.2",
     "@types/bcryptjs": "^2.4.2",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 01ce7c6..7a73e4a 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,6 +2,7 @@ import type { Config } from 'tailwindcss'
 import defaultTheme from 'tailwindcss/defaultTheme.js'
 import tailwindcssRadix from 'tailwindcss-radix'
 import tailwindcssAnimate from 'tailwindcss-animate'
+import typography from '@tailwindcss/typography'
 
 export default {
 	content: ['./app/**/*.{ts,tsx,jsx,js}'],
@@ -158,5 +159,5 @@ export default {
 		},
 	},
 
-	plugins: [tailwindcssRadix, tailwindcssAnimate],
+	plugins: [tailwindcssRadix, tailwindcssAnimate, typography],
 } satisfies Config