style: tweaked email templates

components/emails/confirmation.tsx

@@ -1,3 +1,5 @@
+import { Link } from '../custom/link';
+import { Note } from './components/note';
 import Email from './template';
 
 export default function ConfirmationTemplate(code: string) {
@@ -7,14 +9,25 @@ export default function ConfirmationTemplate(code: string) {
       <Email
         title={'Welcome!'}
         body={
-          <>
-            Thank you for subscribing. Please confirm your email address by
-            clicking{' '}
-            <a href={`${process.env.HOME_URL}/confirmation?code=${code}`}>
-              here
-            </a>
-            .
-          </>
+          <div className='mt-8'>
+            <p className='text-base text-gray-700 dark:text-gray-400'>
+              Dear subscriber,
+            </p>
+            <p className='mt-2 text-base text-gray-700 dark:text-gray-400'>
+              thank you for subscribing to our newsletter! Please click the
+              button below to confirm your subscription.
+            </p>
+            <div className='mt-8 flex justify-center'>
+              <Link
+                path={`${process.env.HOME_URL}/confirmation?code=${code}`}
+                text='Confirm Subscription'
+              />
+            </div>
+            <Note>
+              If you didn&apos;t subscribe to our newsletter, please ignore this
+              email.
+            </Note>
+          </div>
         }
       />
     )