GitHub and Buy Me a Coffee links, various tweaks

components/BuyMeACoffee.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+type BuyMeACoffeeProps = {
+	className?: string;
+};
+
+export default function BuyMeACoffee({ className = '' }: BuyMeACoffeeProps) {
+	return (
+		<a href="https://www.buymeacoffee.com/mcdoh" className={className} target="_blank">
+			<img src="/img/bmc-button.svg" alt="Buy Me A Coffee" className="h-full" />
+		</a>
+	);
+}

components/GitHubButton.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+type GitHubButtonProps = {
+	className?: string;
+};
+
+export default function GitHubButton({ className = '' }: GitHubButtonProps) {
+	return (
+		<a
+			href="https://github.com/mcdoh/tarokka"
+			className={className}
+			target="_blank"
+			rel="noopener noreferrer"
+		>
+			<button className="h-full w-full flex flex-row justify-center items-center gap-3 bg-slate-700 rounded-[6px] hover:bg-slate-600 transition cursor-pointer">
+				<img src="/img/github-mark-white.svg" alt="GitHub" className="h-[22px] w-[22px]" />
+				<img src="/img/github-logo-white.png" alt="GitHub" className="h-[22px]" />
+			</button>
+		</a>
+	);
+}

components/Notes.tsx

@@ -53,7 +53,7 @@ export default function Notes({ gameData: { dmID, cards, settings }, show }: Not
 				className={`transition-all duration-250 ${showNotes ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
 			>
 				<div
-					className={`fixed bottom-4 right-4 transition-all duration-250 bg-slate-800 border border-yellow-400 rounded-lg space-y-2 ${showNotes ? 'w-[33vw] h-[67vh]' : 'w-0 h-0'}`}
+					className={`fixed bottom-4 right-4 transition-all duration-250 bg-slate-800 border border-yellow-400 rounded-lg space-y-2 ${showNotes ? 'sm:w-[33vw] sm:h-[67vh] w-[80vw] h-[80vh]' : 'w-0 h-0'}`}
 				>
 					<CopyButton
 						copy={notes.map((note) => note!.join('\n')).join('\n\n')}

components/Settings.tsx

@@ -4,7 +4,9 @@ import { useState } from 'react';
 import { Settings as Gear } from 'lucide-react';
 import { Cinzel_Decorative } from 'next/font/google';
 
+import BuyMeACoffee from '@/components/BuyMeACoffee';
 import CopyButton from '@/components/CopyButton';
+import GitHubButton from '@/components/GitHubButton';
 import Scrim from '@/components/Scrim';
 import Switch from '@/components/Switch';
 import { CardStyle, GameUpdate } from '@/types';
@@ -114,6 +116,10 @@ export default function Settings({ gameData, changeAction }: SettingsProps) {
 					<Links />
 					<Permissions />
 					<CardStyle />
+					<span className="w-full flex flex-row justify-evenly">
+						<GitHubButton className="h-[35px] w-[125px]" />
+						<BuyMeACoffee className="h-[35px] w-[125px]" />
+					</span>
 				</div>
 			</Scrim>
 			<button