Legacy polls notice (#141)

* Add notice for legacy polls

* Update badges

components/poll/manage-poll.tsx

@@ -29,6 +29,20 @@ const ManagePoll: React.VoidFunctionComponent<{
 
   const modalContext = useModalContext();
 
+  const handleChangeOptions = () => {
+    if (poll.legacy) {
+      modalContext.render({
+        overlayClosable: true,
+        title: "Sorry!",
+        description:
+          "This poll was created with an older version of Rallly and does not support this feature.",
+        cancelText: "Close",
+      });
+    } else {
+      openChangeOptionsModal();
+    }
+  };
+
   const { mutate: updatePollMutation, isLoading: isUpdating } =
     useUpdatePollMutation();
   const [
@@ -61,11 +75,7 @@ const ManagePoll: React.VoidFunctionComponent<{
                   }
                 : {
                     type: "date",
-                    date:
+                    date: start,
-                      start.indexOf("T") === -1
-                        ? start
-                        : // legacy polls
-                          new Date(start).toISOString().substring(0, 10),
                   };
             }),
             timeZone: poll.timeZone ?? "",
@@ -166,13 +176,11 @@ const ManagePoll: React.VoidFunctionComponent<{
           label="Edit details"
           onClick={openChangePollDetailsModa}
         />
-        {!poll.legacy ? (
         <DropdownItem
           icon={Table}
           label="Edit options"
-            onClick={openChangeOptionsModal}
+          onClick={handleChangeOptions}
         />
-        ) : null}
         <DropdownItem
           icon={Save}
           label="Export to CSV"

components/poll/poll-subheader.tsx

@@ -8,6 +8,7 @@ import Button from "../button";
 import { usePoll } from "../poll-context";
 import Popover from "../popover";
 import { usePreferences } from "../preferences/use-preferences";
+import Tooltip from "../tooltip";
 
 export interface PollSubheaderProps {}
 
@@ -36,15 +37,16 @@ const PollSubheader: React.VoidFunctionComponent<PollSubheaderProps> = () => {
           }}
         />
         &nbsp;
+        <span className="inline-flex space-x-1">
           {poll.role === "admin" ? (
             poll.verified ? (
-            <span className="inline-block cursor-default rounded-lg border border-green-400 bg-green-50 px-1 text-sm text-green-500">
+              <span className="inline-flex h-5 cursor-default items-center rounded-md bg-green-100/50 px-1 text-xs text-green-500 transition-colors">
                 Verified
               </span>
             ) : (
               <Popover
                 trigger={
-                <button className="inline-block rounded-lg border px-2 text-sm text-slate-400 transition-colors hover:bg-white hover:text-slate-700 hover:shadow-sm active:bg-gray-100">
+                  <button className="inline-flex h-5 items-center rounded-md bg-slate-200 px-1 text-xs text-slate-500 transition-colors hover:bg-slate-300 hover:shadow-sm active:bg-slate-200">
                     Unverified
                   </button>
                 }
@@ -63,7 +65,9 @@ const PollSubheader: React.VoidFunctionComponent<PollSubheaderProps> = () => {
                     />
                   </div>
                   {didSendVerificationEmail ? (
-                  <div className="text-green-500">Verification email sent.</div>
+                    <div className="text-green-500">
+                      Verification email sent.
+                    </div>
                   ) : (
                     <Button
                       onClick={() => {
@@ -78,6 +82,17 @@ const PollSubheader: React.VoidFunctionComponent<PollSubheaderProps> = () => {
               </Popover>
             )
           ) : null}
+          {poll.legacy && poll.role === "admin" ? (
+            <Tooltip
+              width={400}
+              content="This poll was created with an older version of Rallly. Some features might not work."
+            >
+              <span className="inline-flex h-5 cursor-default items-center rounded-md bg-amber-100 px-1 text-xs text-amber-500">
+                Legacy
+              </span>
+            </Tooltip>
+          ) : null}
+        </span>
       </div>
       <span className="hidden md:inline">&nbsp;&bull;&nbsp;</span>
       <span className="whitespace-nowrap">

components/tooltip.tsx

@@ -21,6 +21,7 @@ export interface TooltipProps {
   content?: React.ReactNode;
   disabled?: boolean;
   className?: string;
+  width?: number;
 }
 
 const Tooltip: React.VoidFunctionComponent<TooltipProps> = ({
@@ -29,6 +30,7 @@ const Tooltip: React.VoidFunctionComponent<TooltipProps> = ({
   children,
   disabled,
   content,
+  width,
 }) => {
   const arrowRef = React.useRef<HTMLDivElement | null>(null);
   const [open, setOpen] = React.useState(false);
@@ -109,6 +111,7 @@ const Tooltip: React.VoidFunctionComponent<TooltipProps> = ({
                   position: strategy,
                   top: y ?? "",
                   left: x ?? "",
+                  maxWidth: width,
                 },
               })}
             >