[B] Fix up new dialog modal styles

Author: jen-castiron

client/src/global/components/Annotation/Annotation/UserContent/Flag/Modal.js

@@ -8,13 +8,15 @@ import IconComposer from "global/components/utility/IconComposer";
 import { FormContext } from "helpers/contexts";
 import { useApiCallback, useFromStore } from "hooks";
 import { annotationsAPI, commentsAPI } from "api";
+import Modal from "global/components/dialog/Modal";
 import * as Styled from "./styles";
 
 export default function FlagAnnotationModal({
   id,
   annotationId,
   type,
-  dialog
+  dialog,
+  dialogId
 }) {
   const { t } = useTranslation();
 
@@ -53,21 +55,8 @@ export default function FlagAnnotationModal({
   const colorScheme = useFromStore("ui.persistent.reader.colors.colorScheme");
   const styleType = colorScheme === "dark" ? "secondary" : "primary";
 
-  const handleEsc = e => {
-    if (e.key === "Escape") {
-      // prevent also exiting full screen in FF
-      e.preventDefault();
-      dialog.onCloseClick();
-    }
-  };
-
   return (
-    <Styled.Dialog
-      className="dialog"
-      ref={dialog.dialogRef}
-      inert={!dialog.open ? "" : undefined}
-      onKeyDown={handleEsc}
-    >
+    <Modal id={dialogId} dialog={dialog} maxWidth={600}>
       <header className="dialog__header">
         <Styled.Heading>
           {t("reader.report_annotation.header", {
@@ -110,6 +99,7 @@ export default function FlagAnnotationModal({
               {t("actions.report")}
             </button>
             <button
+              type="button"
               className={classNames(
                 buttonClasses,
                 "button-icon-secondary--dull"
@@ -126,7 +116,7 @@ export default function FlagAnnotationModal({
           </Styled.ButtonGroup>
         </Styled.Form>
       </FormContext.Provider>
-    </Styled.Dialog>
+    </Modal>
   );
 }
 
@@ -135,6 +125,7 @@ FlagAnnotationModal.displayName = "Annotation.Annotation.UserContent.FlagModal";
 FlagAnnotationModal.propTypes = {
   id: PropTypes.string.isRequired,
   type: PropTypes.string.isRequired,
+  dialogId: PropTypes.string.isRequired,
   dialog: PropTypes.object.isRequired,
   annotationId: PropTypes.string
 };

client/src/global/components/Annotation/Annotation/UserContent/Flag/Toggle.js

@@ -5,6 +5,7 @@ import useDialog from "@castiron/hooks/useDialog";
 import { annotationsAPI, commentsAPI } from "api";
 import Modal from "./Modal";
 import * as Styled from "../styles";
+import { useUID } from "react-uid";
 
 export default function FlagModalToggle({ record, annotationId }) {
   const { t } = useTranslation();
@@ -17,6 +18,8 @@ export default function FlagModalToggle({ record, annotationId }) {
   const handleUnflag =
     record.type === "annotations" ? unflagAnnotation : unflagComment;
 
+  const uid = useUID();
+
   return (
     <>
       {record?.attributes?.flagged ? (
@@ -27,12 +30,14 @@ export default function FlagModalToggle({ record, annotationId }) {
         <Styled.SecondaryButton
           ref={dialog.toggleRef}
           onClick={dialog.onToggleClick}
+          aria-controls={uid}
         >
           {t("actions.report")}
         </Styled.SecondaryButton>
       )}
       <Modal
         id={record.id}
+        modalId={uid}
         annotationId={annotationId}
         type={record.type}
         dialog={dialog}

client/src/global/components/Annotation/Annotation/UserContent/Flag/styles.js

@@ -1,9 +1,5 @@
 import styled from "@emotion/styled";
-import {
-  respond,
-  defaultFocusStyle,
-  transparentize
-} from "theme/styles/mixins";
+import { respond } from "theme/styles/mixins";
 
 export const Form = styled.form`
   --TextArea-border-color: var(--color);
@@ -35,22 +31,3 @@ export const ButtonGroup = styled.div`
 export const Heading = styled.h2`
   color: ${$dark => ($dark ? `var(--strong-color)` : `var(--box-color)`)};
 `;
-
-export const Dialog = styled.dialog`
-  position: fixed;
-  top: 50%;
-  transform: translate(0, -50%);
-  max-height: 60dvh;
-  width: min(90vw, 600px);
-  border-radius: 20px;
-  border: none;
-  &:focus-visible {
-    ${defaultFocusStyle}
-  }
-  &::backdrop {
-    background-color: ${transparentize("neutralBlack", 0.3)};
-  }
-  .reader.scheme-dark & {
-    background: var(--color-base-neutral90);
-  }
-`;

client/src/global/components/dialog/Modal/Modal.js

@@ -0,0 +1,64 @@
+import PropTypes from "prop-types";
+import IconComposer from "global/components/utility/IconComposer";
+import * as Styled from "./styles";
+import { useTranslation } from "react-i18next";
+
+/**
+ * Uses the same styles as the existing dialog, but with native HTML.
+ * Eventually this component should fully replace dialog/Wrapper.
+ */
+export default function Modal({
+  id,
+  dialog,
+  children,
+  showCloseButton,
+  maxWidth
+}) {
+  const { t } = useTranslation();
+
+  const handleEsc = e => {
+    if (e.key === "Escape") {
+      // prevent also exiting full screen in FF
+      e.stopPropagation();
+    }
+  };
+
+  const style = {
+    ...(maxWidth ? { maxWidth } : {})
+  };
+
+  return (
+    <Styled.Dialog
+      id={id}
+      ref={dialog.dialogRef}
+      onKeyDown={handleEsc}
+      {...(!dialog.open ? { inert: "" } : {})}
+    >
+      <Styled.Wrapper>
+        <div className="dialog" style={style}>
+          {showCloseButton ? (
+            <button
+              onClick={dialog.onCloseClick}
+              className="dialog__close"
+              aria-controls={id}
+            >
+              <IconComposer icon="close16" size={24} />
+              <span className="screen-reader-text">{t("modals.close")}</span>
+            </button>
+          ) : null}
+          {children}
+        </div>
+      </Styled.Wrapper>
+    </Styled.Dialog>
+  );
+}
+
+Modal.displayName = "Dialog.Modal";
+
+Modal.propTypes = {
+  id: PropTypes.string.isRequired,
+  dialog: PropTypes.object.isRequired,
+  children: PropTypes.node.isRequired,
+  showCloseButton: PropTypes.bool,
+  maxWidth: PropTypes.number
+};

client/src/global/components/dialog/Modal/index.js

@@ -0,0 +1 @@
+export { default } from "./Modal";

client/src/global/components/dialog/Modal/styles.js

@@ -0,0 +1,46 @@
+import styled from "@emotion/styled";
+import { transparentize, defaultTransitionProps } from "theme/styles/mixins";
+
+export const Dialog = styled.dialog`
+  background-color: transparent;
+  margin: 0px;
+  padding: 0px;
+  border: 0px;
+  max-inline-size: 100dvw;
+  max-block-size: 100dvh;
+  inline-size: 100%;
+  block-size: 100%;
+  overflow-y: scroll;
+  transition: opacity ${defaultTransitionProps}, display ${defaultTransitionProps};
+  opacity: 1;
+
+  @starting-style {
+    opacity: 0;
+  }
+
+  &::backdrop {
+    .backend & {
+      background-color: ${transparentize("neutralBlack", 0.35)};
+    }
+  
+    .browse & {
+      background-color: ${transparentize("neutralWhite", 0.1)};
+    }
+  
+    .reader & {
+      background-color: ${transparentize("neutralBlack", 0.7)};
+    }
+  }
+}
+`;
+
+export const Wrapper = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  block-size: auto;
+  min-block-size: 100%;
+  padding-block: 30px;
+  padding-inline: var(--container-padding-inline-responsive);
+`;

client/src/global/components/dialog/index.js

@@ -1,9 +1,11 @@
 import Wrapper from "./Wrapper";
+import Modal from "./Modal";
 import Confirm from "./Confirm";
 import ResetPassword from "./ResetPassword";
 
 export default {
   Wrapper,
+  Modal,
   Confirm,
   ResetPassword
 };