web: adapt dialog announcements to the new theme

apps/web/src/common/dialog-controller.tsx

@@ -621,7 +621,7 @@ export function showEditReminderDialog(reminderId: string) {
   ));
 }
 
-export function showAnnouncementDialog(announcement: { id: string }) {
+export function showAnnouncementDialog(announcement: any) {
   return showDialog("AnnouncementDialog", (Dialog, perform) => (
     <Dialog
       announcement={announcement}

apps/web/src/components/announcements/body.jsx

@@ -220,7 +220,8 @@ function CalltoActions({ item, dismissAnnouncement }) {
       sx={{
         ...mapStyle(style),
         alignItems: "center",
-        justifyContent: "center"
+        justifyContent: "center",
+        gap: 1
       }}
     >
       {actions
@@ -234,15 +235,7 @@ function CalltoActions({ item, dismissAnnouncement }) {
             key={index}
             action={action}
             index={index}
-            variant={
-              index === 0
-                ? "primary"
-                : index === 1
-                ? "secondary"
-                : index === 2
-                ? "tertiary"
-                : "shade"
-            }
+            variant={index === 0 ? "accent" : "secondary"}
             sx={{
               ":first-of-type": {
                 mr: 1
@@ -276,10 +269,7 @@ function InlineCalltoActions({ item, dismissAnnouncement }) {
               textDecorationColor:
                 index === 0 ? alpha("accent", 0.7) : "border",
               color: index === 0 ? "accent" : "paragraph",
-              fontWeight: "bold",
-              ":first-of-type": {
-                mr: 1
-              }
+              fontWeight: "bold"
             }}
             dismissAnnouncement={dismissAnnouncement}
           />

apps/web/src/dialogs/announcement-dialog.jsx

@@ -17,16 +17,14 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import Modal from "react-modal";
-import { useTheme } from "@emotion/react";
 import { Flex } from "@theme-ui/components";
 import AnnouncementBody from "../components/announcements/body";
 import { store as announcementStore } from "../stores/announcement-store";
 import { useCallback } from "react";
+import BaseDialog from "../components/dialog";
 
 function AnnouncementDialog(props) {
   const { announcement, onClose } = props;
-  const theme = useTheme();
 
   const dismiss = useCallback(() => {
     announcementStore.get().dismiss(announcement.id);
@@ -34,60 +32,12 @@ function AnnouncementDialog(props) {
   }, [announcement, onClose]);
 
   return (
-    <Modal
-      isOpen={true}
-      onRequestClose={props.onClose}
-      shouldCloseOnEsc
-      shouldReturnFocusAfterClose
-      shouldFocusAfterRender
-      onAfterOpen={(e) => {
-        if (!props.onClose) return;
-        // we need this work around because ReactModal content spreads over the overlay
-        const child = e.contentEl.firstElementChild;
-        e.contentEl.onmousedown = function (e) {
-          if (!e.screenX && !e.screenY) return;
-          if (
-            e.x < child.offsetLeft ||
-            e.x > child.offsetLeft + child.clientWidth ||
-            e.y < child.offsetTop ||
-            e.y > child.offsetTop + child.clientHeight
-          ) {
-            props.onClose();
-          }
-        };
-      }}
-      style={{
-        content: {
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          display: "flex",
-          justifyContent: "center",
-          backgroundColor: undefined,
-          padding: 0,
-          overflowY: "hidden",
-          border: 0,
-          zIndex: 0
-        },
-        overlay: {
-          zIndex: 999,
-          background: "var(--backdrop)"
-        }
-      }}
-    >
+    <BaseDialog isOpen onClose={props.onClose} width={"30%"}>
       <Flex
         bg="background"
         sx={{
           position: "relative",
-          overflow: "hidden",
-          boxShadow: "4px 5px 18px 2px #00000038",
-          borderRadius: "dialog",
-          flexDirection: "column",
-          width: ["100%", "80%", "30%"],
-          maxHeight: ["100%", "80%", "80%"],
-          alignSelf: "center",
-          overflowY: "auto"
+          flexDirection: "column"
         }}
       >
         <AnnouncementBody
@@ -96,7 +46,7 @@ function AnnouncementDialog(props) {
           type="dialog"
         />
       </Flex>
-    </Modal>
+    </BaseDialog>
   );
 }
 export default AnnouncementDialog;