new EmptyScreen component, using it in /bookings (#708)

* new EmptyScreen component, using it in /bookings

* Linting fixes

Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>

lib/emails/EventAttendeeMail.ts

@@ -59,7 +59,8 @@ export default class EventAttendeeMail extends EventMail {
       </tr>
       <tr>
         <td>When</td>
-        <td>${this.getInviteeStart().format("dddd, LL")}<br>${this.getInviteeStart().format("h:mma")} (${this.calEvent.attendees[0].timeZone
+        <td>${this.getInviteeStart().format("dddd, LL")}<br>${this.getInviteeStart().format("h:mma")} (${
+        this.calEvent.attendees[0].timeZone
       })</td>
       </tr>
       <tr>
@@ -141,8 +142,9 @@ export default class EventAttendeeMail extends EventMail {
       to: `${this.calEvent.attendees[0].name} <${this.calEvent.attendees[0].email}>`,
       from: `${this.calEvent.organizer.name} <${this.getMailerOptions().from}>`,
       replyTo: this.calEvent.organizer.email,
-      subject: `Confirmed: ${this.calEvent.type} with ${this.calEvent.team?.name || this.calEvent.organizer.name
-        } on ${this.getInviteeStart().format("LT dddd, LL")}`,
+      subject: `Confirmed: ${this.calEvent.type} with ${
+        this.calEvent.team?.name || this.calEvent.organizer.name
+      } on ${this.getInviteeStart().format("LT dddd, LL")}`,
       html: this.getHtmlRepresentation(),
       text: this.getPlainTextRepresentation(),
     };

lib/emails/EventOrganizerMail.ts

@@ -51,8 +51,9 @@ export default class EventOrganizerMail extends EventMail {
   }
 
   protected getAdditionalFooter(): string {
-    return `<p style="color: #4b5563; margin-top: 20px;">Need to make a change? <a href=${process.env.BASE_URL + "/bookings"
-      } style="color: #161e2e;">Manage my bookings</a></p>`;
+    return `<p style="color: #4b5563; margin-top: 20px;">Need to make a change? <a href=${
+      process.env.BASE_URL + "/bookings"
+    } style="color: #161e2e;">Manage my bookings</a></p>`;
   }
 
   protected getImage(): string {
@@ -107,12 +108,14 @@ export default class EventOrganizerMail extends EventMail {
       </tr>
       <tr>
         <td>When</td>
-        <td>${this.getOrganizerStart().format("dddd, LL")}<br>${this.getOrganizerStart().format("h:mma")} (${this.calEvent.organizer.timeZone
+        <td>${this.getOrganizerStart().format("dddd, LL")}<br>${this.getOrganizerStart().format("h:mma")} (${
+        this.calEvent.organizer.timeZone
       })</td>
       </tr>
       <tr>
         <td>Who</td>
-        <td>${this.calEvent.attendees[0].name}<br /><small><a href="mailto:${this.calEvent.attendees[0].email
+        <td>${this.calEvent.attendees[0].name}<br /><small><a href="mailto:${
+        this.calEvent.attendees[0].email
       }">${this.calEvent.attendees[0].email}</a></small></td>
       </tr>
       <tr>

lib/emails/EventRejectionMail.ts

@@ -68,8 +68,9 @@ export default class EventRejectionMail extends EventMail {
       to: `${this.calEvent.attendees[0].name} <${this.calEvent.attendees[0].email}>`,
       from: `${this.calEvent.organizer.name} <${this.getMailerOptions().from}>`,
       replyTo: this.calEvent.organizer.email,
-      subject: `Rejected: ${this.calEvent.type} with ${this.calEvent.organizer.name
-        } on ${this.getInviteeStart().format("dddd, LL")}`,
+      subject: `Rejected: ${this.calEvent.type} with ${
+        this.calEvent.organizer.name
+      } on ${this.getInviteeStart().format("dddd, LL")}`,
       html: this.getHtmlRepresentation(),
       text: this.getPlainTextRepresentation(),
     };

lib/types/SVGComponent.ts

@@ -0,0 +1 @@
+export type SVGComponent = React.FunctionComponent<React.SVGProps<SVGSVGElement>>;