Enable resending verification emails

components/poll/poll-subheader.tsx

@@ -1,14 +1,25 @@
 import { formatRelative } from "date-fns";
 import * as React from "react";
 import { Trans, useTranslation } from "next-i18next";
-import Tooltip from "../tooltip";
+import Button from "../button";
 import { usePoll } from "../use-poll";
+import Popover from "../popover";
+import { useMutation } from "react-query";
+import axios from "axios";
 
 export interface PollSubheaderProps {}
 
 const PollSubheader: React.VoidFunctionComponent<PollSubheaderProps> = () => {
   const poll = usePoll();
   const { t } = useTranslation("app");
+
+  const {
+    mutate: sendVerificationEmail,
+    isLoading: isSendingVerificationEmail,
+    isSuccess: didSendVerificationEmail,
+  } = useMutation(async () => {
+    await axios.post(`/api/poll/${poll.urlId}/verify`);
+  });
   return (
     <div className="text-slate-500">
       <div className="md:inline">
@@ -37,22 +48,40 @@ const PollSubheader: React.VoidFunctionComponent<PollSubheaderProps> = () => {
               Verified
             </span>
           ) : (
-            <Tooltip
-              content={
-                <div className="max-w-sm">
+            <Popover
+              trigger={
+                <button className="badge transition-colors hover:text-indigo-500 hover:border-slate-300 hover:bg-slate-100 cursor-pointer text-slate-400">
+                  Unverified
+                </button>
+              }
+            >
+              <div className="max-w-sm">
+                <div className="mb-4">
                   <Trans
                     t={t}
                     i18nKey="unverifiedMessage"
                     values={{ email: poll.user.email }}
                     components={{
-                      b: <span className="email" />,
+                      b: (
+                        <span className="text-indigo-500 font-medium font-mono whitespace-nowrap" />
+                      ),
                     }}
                   />
                 </div>
-              }
-            >
-              <span className="badge text-slate-400">Unverified</span>
-            </Tooltip>
+                {didSendVerificationEmail ? (
+                  <div className="text-green-500">Verification email sent.</div>
+                ) : (
+                  <Button
+                    onClick={() => {
+                      sendVerificationEmail();
+                    }}
+                    loading={isSendingVerificationEmail}
+                  >
+                    Resend verification email
+                  </Button>
+                )}
+              </div>
+            </Popover>
           )
         ) : null}
       </div>