feat: add loader confirmation messages (#281)

Author: nicholaschiang

components/loader/checkmark.module.scss

@@ -3,17 +3,13 @@
   height: 80px;
   border-radius: 50%;
   display: block;
-  stroke-width: 2;
-  stroke: rgba(0, 0, 0, 0.3);
+  stroke-width: 4;
+  stroke: var(--background);
   stroke-miterlimit: 10;
   margin: 10% auto;
   animation: spinner 0.4s linear infinite;
 }
 
-:global(.dark) .checkmark {
-  stroke: var(--background);
-}
-
 .checked {
   animation: fill 0.3s ease-in-out 0.15s forwards,
     scale 0.4s ease-in-out 0.6s both;
@@ -32,7 +28,7 @@
   stroke-dashoffset: 80;
   stroke-width: 3;
   stroke-miterlimit: 10;
-  stroke: white;
+  stroke: var(--on-background);
   fill: none;
 }
 
@@ -69,6 +65,6 @@
 
 @keyframes fill {
   100% {
-    box-shadow: inset 0px 0px 0px 40px white;
+    box-shadow: inset 0px 0px 0px 40px var(--on-background);
   }
 }

components/loader/index.tsx

@@ -1,15 +1,20 @@
-import { useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 import cn from 'classnames';
 
 import Checkmark from './checkmark';
 import styles from './loader.module.scss';
 
-interface Props {
-  readonly active: boolean;
-  readonly checked?: boolean;
+export interface LoaderProps {
+  active: boolean;
+  checked?: boolean;
+  children?: ReactNode;
 }
 
-export default function Loader({ active, checked }: Props): JSX.Element {
+export default function Loader({
+  active,
+  checked,
+  children,
+}: LoaderProps): JSX.Element {
   const [visible, setVisible] = useState<boolean>(active);
   const [closing, setClosing] = useState<boolean>(false);
 
@@ -39,9 +44,10 @@ export default function Loader({ active, checked }: Props): JSX.Element {
           className={styles.overlayCheckmark}
           checked={checked}
         />
+        <article className={cn(styles.message, { [styles.visible]: checked })}>
+          {children}
+        </article>
       </div>
     </div>
   );
 }
-
-Loader.defaultProps = { checked: false };

components/loader/loader.module.scss

@@ -1,10 +1,10 @@
 .overlay {
   position: absolute;
-  top: -1px;
-  bottom: -1px;
-  left: -1px;
-  right: -1px;
-  background: rgba(0, 0, 0, 0.3);
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--background);
   opacity: 0;
   z-index: 1;
   visibility: hidden;
@@ -27,6 +27,8 @@
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
+  width: 100%;
+  padding: 24px;
 }
 
 .overlayCheckmark {
@@ -37,3 +39,16 @@
   box-sizing: border-box;
   display: inline-block;
 }
+
+article.message {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.25;
+  transition: opacity 0.4s ease 1.2s;
+  will-change: opacity;
+  opacity: 0;
+
+  &.visible {
+    opacity: 1;
+  }
+}

components/user/request-form.tsx

@@ -217,7 +217,11 @@ export default function RequestForm({
 
   return (
     <form className={styles.card} onSubmit={onSubmit}>
-      <Loader active={loading} checked={checked} />
+      <Loader active={loading} checked={checked}>
+        That’s it! You’ve been CC-ed on an email notifying {volunteer.firstName}{' '}
+        of your booking. Feel free to reach out directly; their contact info is
+        in that email.
+      </Loader>
       <div className={styles.inputs}>
         {!creating && (
           <UserSelect