ui and message fixes

cornell-dti · Dec 19, 2024 · b84907d · b84907d
1 parent ed96c51
commit b84907d
Show file tree

Hide file tree

Showing 5 changed files with 3,928 additions and 3,910 deletions.
diff --git a/src/scripts/email/wrapped-email.js b/src/scripts/email/wrapped-email.js
@@ -46,6 +46,7 @@ firebase_admin_1["default"].initializeApp({
 });
 dotenv.config();
 var resend = new resend_1.Resend(process.env.RESEND_API_KEY);
+// DO NOT SEND TO ACTUAL PROD YET YOU HAVENT CHANGED SUBJECT LINE
 /** Returns an array of email objects to send - should be at most 100 per day.
 - totalEmails is a list of all the user emails to send to.
 - batchSize should be 49 or less to maintain free emailing.
@@ -63,7 +64,7 @@ var createBatches = function (totalEmails, batchSize) {
             // but dti will not see recievers
             to: ['ns848@cornell.edu'],
             bcc: totalEmails.slice(i, Math.min(i + batchSize, totalEmails.length)),
-            subject: 'QMI testing batch ' + i + '!',
+            subject: 'Check Out Your QMI Wrapped! : batch ' + i,
             html: wrapped_html_1.HTML
         });
         i += batchSize;

diff --git a/src/scripts/email/wrapped-email.ts b/src/scripts/email/wrapped-email.ts
@@ -12,6 +12,8 @@ admin.initializeApp({
 dotenv.config();
 const resend = new Resend(process.env.RESEND_API_KEY);
 
+// DO NOT SEND TO ACTUAL PROD YET YOU HAVENT CHANGED SUBJECT LINE
+
 /** Returns an array of email objects to send - should be at most 100 per day. 
 - totalEmails is a list of all the user emails to send to. 
 - batchSize should be 49 or less to maintain free emailing.
@@ -31,7 +33,7 @@ const createBatches =  (totalEmails: string[], batchSize: number) => {
                 // but dti will not see recievers
                 to: ['ns848@cornell.edu'],
                 bcc: totalEmails.slice(i, Math.min(i+batchSize, totalEmails.length)),
-                subject: 'QMI testing batch ' + i + '!',
+                subject: 'Check Out Your QMI Wrapped! : batch ' + i,
                 html: HTML
             }
         )

diff --git a/src/scripts/email/wrapped-html.js b/src/scripts/email/wrapped-html.js
diff --git a/src/scripts/email/wrapped-html.ts b/src/scripts/email/wrapped-html.ts
@@ -1,63 +1,56 @@
 /* eslint-disable max-len */
-// had to create online reference to image
-// link for removal: https://postimg.cc/delete/yMjb80dk/b39f9f21
-// link for qmi logo removal: https://postimg.cc/delete/3s8CZztS/456beac3
-// link for notification removal: https://postimg.cc/delete/0hYdT7HJ/610c84d2
 export const HTML =` 
-<div style="font-family: Proxima Nova, sans-serif; margin: 0 auto; font-size: 16px;">
+<div style="font-family: Roboto, sans-serif; margin: 0 auto; font-size: 16px;">
 
     <div style="text-align: center; padding-top: 40px;">
         <img src="https://i.postimg.cc/5y5RJj7c/wrappedemail.png"
             alt="Queue Me In Wrapped Header" style="height: 25%; width: 100%;">
     </div>
 
     <div style="padding: 20px; margin-bottom: 15px; margin-top: 15px;">
-        <p style="margin: 0; font-size: 16px;"><strong>Hi there!</strong></p>
+        <p style="margin: 0; font-size: 16px;"><strong>Hey there!</strong></p>
             <p style="line-height: 1.5; font-size: 16px;">
-            It's that time again when the semester is wrapping up. <br>
-            To celebrate, we present <strong>QueueMeIn Wrapped</strong> - a way for you to see your yearly office hour stats.
-            You can check out your Wrapped by going to your home page and clicking on the notification bell <a href="https://queueme.in/">here</a>!
+            As the semester is wrapping up, our team at Queue Me In wanted to celebrate all the hard work you've put in this semester — especially with office hours! <br>
+            Presenting <strong>Queue Me In Wrapped</strong>, a way for you to see your yearly office hour stats. Check it out by navigating to a class on your <a href="https://queueme.in/">home page</a> and clicking on the ribbon icon!
             </p>
 
             <p style="line-height: 1.5; font-size: 16px;">
-            Congrats on all your hard work!<br>
-            <i>- the Queue Me In Team</i> </p>
-        <div style="display:flex; justify-content: space-around">
-            <img src="https://i.postimg.cc/d0CmNLLF/Notification.png"
-                alt="Cornell QMI Icon" style="height: 50px;">
-            <img src="https://i.postimg.cc/d0CmNLLF/Notification.png"
-                alt="Cornell QMI Icon" style="height: 50px;">
-            <img src="https://i.postimg.cc/d0CmNLLF/Notification.png"
-                alt="Cornell QMI Icon" style="height: 50px;">
+            Congratulations on all your hard work this semester!<br>
+            <i>- The Queue Me In Team</i> </p>
+        <div style="width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 1.5em; padding-bottom: 1em; text-align: center;">
+            <img src="https://i.postimg.cc/d0CmNLLF/Notification.png" alt="Bell Icon" style="height: 50px;">
+            <img src="https://i.postimg.cc/d0CmNLLF/Notification.png" alt="Bell Icon" style="height: 50px;">
+            <img src="https://i.postimg.cc/d0CmNLLF/Notification.png" alt="Bell Icon" style="height: 50px;">
         </div>
 
     </div>
 
 </div>
 
-<table width="100%" cellpadding="0" cellspacing="0" style="background-color: #025488; color: white; padding: 15px 0; font-size: 16px; font-family: Roboto, sans-serif;">
+<table width="100%" cellpadding="0" cellspacing="0" style="background-color: #025488; color: white; padding: 15px 35px; font-size: 16px; font-family: Roboto, sans-serif; display: flex; justify-content: center">
     <tr>
         <td align="center">
             <!-- Container Table -->
-            <table width="600" cellpadding="0" cellspacing="0" style="max-width: 600px; width: 100%; text-align: center;">
-                
-                <!-- Heading -->
+            <table width="600" cellpadding="0" cellspacing="0" style="width: 100%; text-align: center;">
                 <tr>
+                <!-- Heading -->
+                    <td style="text-align: center; font-family: Lato, sans-serif; padding-left: 1.5em; padding-right: 1.5em;">
+                        <p style="color: white; margin: 0; font-size: 16px; font-weight: bold;">Office Hours</p>
+                        <p style="color: white; margin: 0; font-size: 16px; font-weight: bold;">Simplified.</p>
+                    </td>
                 <!-- Logo -->
-                    <td rowspan="2" style="padding-left: 20px; text-align: left; vertical-align: middle;">
+                    <td rowspan="2" style="padding-left: 1.5em; padding-right: 2em; text-align: center; vertical-align: middle;">
                         <img src="https://i.postimg.cc/Bb3cDMv1/Logo-Copy-2.png" alt="QMI Logo" style="display: block; max-height: 100%; width: auto; max-width: 80px;">
                     </td>
-                    <td style="text-align: center; font-family: Lato, sans-serif;">
-                        <p style="margin: 0; font-size: 16px; font-weight: bold;">Office Hours Simplified.</p>
-                    </td>
-                </tr>
-                <!-- Links -->
-                <tr>
-                    <td style="padding: 10px 35px; text-align: center;">
-                        <p style="margin: 0; font-size: 14px;">
-                            <a href="https://www.instagram.com/cornelldti/" style="color: #f7e9dc; text-decoration: underline;">DTI Instagram</a>
-                            <span style="margin: 0 5px;">•</span>
-                            <a href="https://queueme.in/" style="color: #f7e9dc; text-decoration: underline;">QueueMeIn</a>
+                     <!-- Links -->
+                    <td style="padding: 10px 1.5em; text-align: left;">
+                        <p style="margin: 0; font-size: 14px; ">
+                            <a href="https://www.instagram.com/cornelldti/" style="color: white; text-decoration: underline;">DTI Instagram</a>
+                            <br>
+                            <a href="https://www.cornelldti.org/" style="color: white; text-decoration: underline;">DTI Website</a>
+                            <br>
+                            <a href="https://queueme.in/" style="color: white; text-decoration: underline;">QueueMeIn</a>
+                            <br>
                         </p>
                     </td>
                 </tr>