fix: Properly center prose again (#383)

Author: matheus23

src/app/docs/layout.jsx

@@ -67,7 +67,7 @@ export default function DocsLayout({children, sections = {}}) {
         <div className="relative flex h-full flex-col px-4 pt-14 sm:px-6 lg:px-8">
           <main className="flex-auto">
             <article className="flex h-full flex-col pb-10 pt-16">
-              <Prose className="flex-auto">{children}</Prose>
+              <Prose className="flex-auto centered-prose">{children}</Prose>
               <footer className="mx-auto mt-16 w-full max-w-2xl lg:max-w-5xl">
               </footer>
             </article>

src/app/docs/protocols/docs/page.mdx

@@ -4,7 +4,7 @@ import {ThemeImage} from '@/components/ThemeImage'
 
 A protocol for a mutable key-value store. Authors create and join documents, multiple users read from them, write to them, and sync with them, subscribing to live updates in real time. {{className: 'lead'}}
 
-<div className='not-prose in-prose mb-5'>
+<div className='not-prose mb-5'>
   <ThemeImage
     lightSrc='/diagrams/documents.svg'
     darkSrc='/diagrams/documents_dark.svg'

src/app/docs/protocols/gossip/page.mdx

@@ -12,7 +12,7 @@ export const metadata = {
 
 Gossip broadcasts messages to a network of live devices.{{ className: 'lead' }}
 
-<div className='not-prose in-prose mb-5'>
+<div className='not-prose mb-5'>
   <ThemeImage
     lightSrc='/diagrams/gossip_swarm_light.svg'
     darkSrc='/diagrams/gossip_swarm_dark.svg'

src/app/docs/tour/page.mdx

@@ -39,7 +39,7 @@ This paragraph touches on five key points worth understanding in iroh:
 We'll touch on each of these on the tour, and by the end you should have a good understanding of how they all fit together. The code we'll be writing here will build & execute, but it won't _do_ much. We'll link to examples and other resources along the way so you can explore further.
 
 <Button
-  className="not-prose in-prose"
+  className="not-prose"
   href="/docs/tour/1-endpoints"
   aria-label="Begin the Tour: 1. Endpoints"
   variant="secondary"

src/app/page.jsx

@@ -95,7 +95,7 @@ export default function Page() {
               <h3 className='text-3xl font-bold mb-4'>Build your own protocol</h3>
               <p className='mb-10 text-iroh-gray-600 dark:text-iroh-gray-400'>Don&apos;t see a protocol you need? Build your own! Iroh gives you a reliable foundation for building distributed systems that reach the edge. The rest is up to you.</p>
               <Link href="/docs/quickstart" className={clsx(
-                "my-4 p-3 transition bg-iroh-gray-800 shadow-sm text-iroh-purple-500 hover:bg-iroh-gray-700 hover:text-gray-200 text-lg")}>
+                "my-4 p-3 transition bg-iroh-gray-800 shadow-xs text-iroh-purple-500 hover:bg-iroh-gray-700 hover:text-gray-200 text-lg")}>
                 <span>Protocol Docs</span>
               </Link>
             </div>

src/components/Code.jsx

@@ -267,7 +267,7 @@ export function CodeGroup({children, title, ...props}) {
     <CodeGroupContext.Provider value={true}>
       <Container
         {...containerProps}
-        className="not-prose in-prose my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10"
+        className="not-prose my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10"
       >
         <CodeGroupHeader title={title} {...headerProps}>
           {children}

src/components/GithubStars.jsx

@@ -6,7 +6,7 @@ export default function GithubStars(props) {
   return (
     <Link href="https://github.com/n0-computer/iroh" className='p-2 -mt-2 flex text-sm leading-5 fill-zinc-400 text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-600 dark:hover:fill-zinc-600 hover:bg-black/10 rounded'>
       <GithubIcon className="h-5 w-5" />
-      <span className='ml-2 mt-0'>6.5k</span>
+      <span className='ml-2 mt-0'>6.7k</span>
     </Link>
   )
 }

src/components/SendmePage.jsx

@@ -55,8 +55,8 @@ export default function SendmePage() {
         </div>
         <Image src="/img/sendme/sendme_hero_1.svg" alt='one computer sending files to another computer through a pipe' width='1600' height='900' className='md:-mt-20' />
 
-        <div className='md:-mt-20 mx-5 md:mx-0 h-10 border-l border-r shadow-sm' />
-        <div className='mx-5 md:mx-0 border-t border-l border-r shadow-sm'>
+        <div className='md:-mt-20 mx-5 md:mx-0 h-10 border-l border-r shadow-xs' />
+        <div className='mx-5 md:mx-0 border-t border-l border-r shadow-xs'>
           <div className='md:flex'>
             <div className='px-5 py-10 border-b md:border-r md:w-5/12'>
               <h2 className='text-4xl text-zinc-700 font-koulen'>File transfer<br />doesn&apos;t need to be complicated</h2>
@@ -92,8 +92,8 @@ export default function SendmePage() {
           </div>
         </div>
 
-        <div className='mx-5 md:mx-0 h-5 border-l border-r shadow-sm' />
-        <div className='mx-5 md:mx-0 border-t border-l border-r shadow-sm'>
+        <div className='mx-5 md:mx-0 h-5 border-l border-r shadow-xs' />
+        <div className='mx-5 md:mx-0 border-t border-l border-r shadow-xs'>
           <div className='px-5 pt-10'>
             <h3 className='font-koulen text-zinc-600 text-xl'>USING SENDME:</h3>
           </div>
@@ -139,8 +139,8 @@ export default function SendmePage() {
           </div>
         </div>
 
-          <div className='mx-5 md:mx-0 h-5 border-l border-r shadow-sm' />
-          <div className='mx-5 md:mx-0 border-t border-l border-r shadow-sm'>
+          <div className='mx-5 md:mx-0 h-5 border-l border-r shadow-xs' />
+          <div className='mx-5 md:mx-0 border-t border-l border-r shadow-xs'>
             <div>
               <div className='p-5'>
                 <h3 className='text-2xl md:text-3xl font-koulen'>Free, for files & folders of any size</h3>

src/components/UsersShowcase.jsx

@@ -77,7 +77,7 @@ export const UsersShowcase = function UsersShowcase() {
                       alt={projects[currentIndex].title}
                       width={150}
                       height={150}
-                      className='rounded-lg overflow-hidden shadow-sm mx-auto mb-5'
+                      className='rounded-lg overflow-hidden shadow-xs mx-auto mb-5'
                       />
                   </Link>
                   <Link className='cursor-pointer' href={projects[currentIndex].href}>

src/styles/tailwind.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&family=Space+Mono&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&family=Space+Mono&display=swap");
 
 @import "tailwindcss";
 
@@ -26,7 +26,7 @@
 }
 
 @layer utilities {
-  .in-prose {
+  .centered-prose {
     max-width: 50rem;
     margin-left: calc(50% - min(50%, 33rem));
     margin-right: calc(50% - min(50%, 33rem));