Make confirmation popup more stylish

src/shared/components/app/app.tsx

@@ -15,11 +15,26 @@ import { Theme } from "./theme";
 import AnonymousGuard from "../common/anonymous-guard";
 import { destroyTippy, setupTippy } from "../../tippy";
 import { adultConsentLocalStorageKey } from "../../config";
+import AdultConsentModal from "../common/adult-consent-modal";
 
-export class App extends Component<any, any> {
+interface AppState {
+  showAdultConsentModal: boolean;
+}
+
+function handleAdultConsent(i: App) {
+  localStorage.setItem(adultConsentLocalStorageKey, "true");
+  i.setState({ showAdultConsentModal: false });
+}
+
+export class App extends Component<any, AppState> {
   private isoData: IsoDataOptionalSite = setIsoData(this.context);
   private readonly mainContentRef: RefObject<HTMLElement>;
   private readonly rootRef = createRef<HTMLDivElement>();
+
+  state: AppState = {
+    showAdultConsentModal: false,
+  };
+
   constructor(props: any, context: any) {
     super(props, context);
     this.mainContentRef = createRef();
@@ -32,11 +47,7 @@ export class App extends Component<any, any> {
       siteRes?.site_view.site.content_warning &&
       !(siteRes?.my_user || localStorage.getItem(adultConsentLocalStorageKey))
     ) {
-      if (confirm(siteRes.site_view.site.content_warning)) {
+      this.setState({ showAdultConsentModal: true });
-        localStorage.setItem(adultConsentLocalStorageKey, "true");
-      } else {
-        history.back();
-      }
     }
 
     setupTippy(this.rootRef);
@@ -129,6 +140,14 @@ export class App extends Component<any, any> {
             </div>
             <Footer site={siteRes} />
           </div>
+          {siteRes?.site_view.site.content_warning && (
+            <AdultConsentModal
+              contentWarning={siteRes.site_view.site.content_warning}
+              show={this.state.showAdultConsentModal}
+              onBack={history.back}
+              onContinue={linkEvent(this, handleAdultConsent)}
+            />
+          )}
         </Provider>
       </>
     );

src/shared/components/common/adult-consent-modal.tsx

@@ -0,0 +1,59 @@
+import { Component, LinkedEvent, RefObject, createRef } from "inferno";
+import { modalMixin } from "../mixins/modal-mixin";
+
+interface AdultConsentModalProps {
+  contentWarning: string;
+  show: boolean;
+  onContinue: LinkedEvent<any, Event> | null;
+  onBack: () => void;
+}
+
+@modalMixin
+export default class AdultConsentModal extends Component<
+  AdultConsentModalProps,
+  any
+> {
+  readonly modalDivRef: RefObject<HTMLDivElement> = createRef();
+  readonly continueButtonRef: RefObject<HTMLButtonElement> = createRef();
+
+  render() {
+    const { contentWarning, onContinue, onBack } = this.props;
+
+    return (
+      <div
+        className="modal fade"
+        id="adultConsentModal"
+        tabIndex={-1}
+        aria-hidden
+        aria-label="Content warning"
+        data-bs-backdrop="static"
+        ref={this.modalDivRef}
+      >
+        <div className="modal-dialog modal-fullscreen-sm-down">
+          <div className="modal-content">
+            <div className="modal-body text-center align-middle text-body">
+              {contentWarning}
+            </div>
+            <footer className="modal-footer">
+              <button
+                type="button"
+                className="btn btn-success"
+                onClick={onContinue}
+                ref={this.continueButtonRef}
+              >
+                Continue
+              </button>
+              <button type="button" className="btn btn-danger" onClick={onBack}>
+                Go back
+              </button>
+            </footer>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  handleShow() {
+    this.continueButtonRef.current?.focus();
+  }
+}