fix: more style tweaks

apps/registry/app/[username]/jobs/page.js

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import Hero from '../../../src/ui/Hero';
 import JobList from './JobList';
+import Loading from '../../components/Loading';
 
 export default function Jobs({ params }) {
   const username = params.username;
@@ -47,7 +48,6 @@ export default function Jobs({ params }) {
     );
     router.push(`/${username}/letter?job=${job.id}`);
   };
-
   return (
     <div className="p-6">
       <Hero
@@ -58,7 +58,7 @@ export default function Jobs({ params }) {
           search."
       />
 
-      {!jobs && <div>Loading...</div>}
+      {!jobs && <Loading />}
       <JobList jobs={jobs} makeCoverletter={makeCoverletter} />
     </div>
   );

apps/registry/app/[username]/letter/page.js

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import { useSearchParams } from 'next/navigation';
 import ReactMarkdown from 'react-markdown';
 import Hero from '../../../src/ui/Hero';
+import Loading from '../../components/Loading';
 
 export default function Letter({ params }) {
   const searchParams = useSearchParams();
@@ -53,7 +54,6 @@ export default function Letter({ params }) {
   const handleGenerate = () => {
     setSubmitting(true);
   };
-
   return (
     <div className="p-6 bg-gray-50 min-h-screen">
       <Hero
@@ -89,9 +89,12 @@ export default function Letter({ params }) {
           {submitting ? 'GENERATING' : 'GENERATE'}
         </button>
       </div>
-      {letter && (
-        <div className="border border-gray-300 rounded-md p-6 bg-white shadow-md">
-          <ReactMarkdown>{letter}</ReactMarkdown>
+      {submitting && <Loading />}
+      {!submitting && letter && (
+        <div className="min-w-full border border-gray-300 rounded-md p-6 bg-white shadow-md">
+          <ReactMarkdown className="m-auto prose lg:prose-xl">
+            {letter}
+          </ReactMarkdown>
         </div>
       )}
     </div>

apps/registry/app/[username]/suggestions/page.js

@@ -4,6 +4,7 @@ import axios from 'axios';
 import { useEffect, useState } from 'react';
 import Hero from '../../../src/ui/Hero';
 import ReactMarkdown from 'react-markdown';
+import Loading from '../../components/Loading';
 
 export default function Suggestions({ params }) {
   const { username } = params;
@@ -62,9 +63,12 @@ export default function Suggestions({ params }) {
         </button>
       </div>
       <br />
+      {submitting && <Loading />}
       {!submitting && suggestions && (
-        <div className="border border-gray-300 rounded-md p-6 bg-white shadow-md">
-          <ReactMarkdown>{suggestions}</ReactMarkdown>
+        <div className="min-w-full border border-gray-300 rounded-md p-6 bg-white shadow-md prose lg:prose-xl">
+          <ReactMarkdown className="m-auto prose lg:prose-xl">
+            {suggestions}
+          </ReactMarkdown>
         </div>
       )}
     </div>

apps/registry/app/components/Loading.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+const Loading = () => {
+  return (
+    <div className="flex justify-center items-center m-8">
+      <div className="flex flex-col items-center p-8 bg-white rounded-lg shadow-lg">
+        <svg
+          className="animate-spin h-10 w-10 text-secondary-500 mb-4"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          ></circle>
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291l2.414 2.415A8.001 8.001 0 014 12H0c0 2.489.92 4.778 2.414 6.585l1.586-1.294z"
+          ></path>
+        </svg>
+        <div className="text-secondary-700 text-lg font-medium">Loading...</div>
+      </div>
+    </div>
+  );
+};
+
+export default Loading;

apps/registry/app/explore/page.js

@@ -4,6 +4,7 @@
 import axios from 'axios';
 import React, { useEffect, useState } from 'react';
 import Link from 'next/link';
+import Loading from '../components/Loading';
 
 const formatLocation = (location) => {
   if (!location) return 'Location not provided';
@@ -53,7 +54,7 @@ const Resumes = () => {
   return (
     <div className="max-w-4xl mx-auto p-6">
       {!data.length ? (
-        <div className="text-center">Loading...</div>
+        <Loading />
       ) : (
         <>
           <input

apps/registry/package.json

@@ -22,6 +22,7 @@
     "@pinecone-database/pinecone": "^0.1.6",
     "@prisma/client": "^4.15.0",
     "@supabase/supabase-js": "^2.39.6",
+    "@tailwindcss/typography": "^0.5.13",
     "@vercel/analytics": "^1.3.1",
     "ai": "^3.1.14",
     "async": "^3.2.4",

apps/registry/tailwind.config.js

@@ -67,7 +67,8 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+
+  plugins: [require('@tailwindcss/typography')],
 };
 
 // my tailwind semantic colors are called accent, secondary, success, and danger. they have values 50,100,200,300,400,500,600,700,800,900,950.