diff --git a/.infra/rdev/values.yaml b/.infra/rdev/values.yaml
index e0f3ecd97..ac2af22fb 100644
--- a/.infra/rdev/values.yaml
+++ b/.infra/rdev/values.yaml
@@ -2,7 +2,7 @@ stack:
   services:
     explorer:
       image:
-        tag: sha-29601284
+        tag: sha-282ed091
       replicaCount: 1
       env:
         # env vars common to all deployment stages
diff --git a/client/src/components/AnnoDialog/AnnoDialog.tsx b/client/src/components/AnnoDialog/AnnoDialog.tsx
index b83ce0c8d..50961bac5 100644
--- a/client/src/components/AnnoDialog/AnnoDialog.tsx
+++ b/client/src/components/AnnoDialog/AnnoDialog.tsx
@@ -1,115 +1,65 @@
 import React from "react";
-import { Button, Dialog, Classes, Colors, Tooltip } from "@blueprintjs/core";
+import { Button, Dialog, Classes, Tooltip } from "@blueprintjs/core";
+import { AnnoDialogProps } from "./types";
+import { DialogBody, DialogForm, ErrorText, SecondaryText } from "./style";
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
-type State = any;
-
-// eslint-disable-next-line @typescript-eslint/ban-types --- FIXME: disabled temporarily on migrate to TS.
-export class AnnoDialog extends React.PureComponent<{}, State> {
-  // eslint-disable-next-line @typescript-eslint/ban-types --- FIXME: disabled temporarily on migrate to TS.
-  constructor(props: {}) {
-    super(props);
-    this.state = {};
-  }
-
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
-  render() {
-    const {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'isActive' does not exist on type 'Readon... Remove this comment to see the full error message
-      isActive,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'text' does not exist on type 'Readonly<{... Remove this comment to see the full error message
-      text,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'title' does not exist on type 'Readonly<... Remove this comment to see the full error message
-      title,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'instruction' does not exist on type 'Rea... Remove this comment to see the full error message
-      instruction,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'cancelTooltipContent' does not exist on ... Remove this comment to see the full error message
-      cancelTooltipContent,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'errorMessage' does not exist on type 'Re... Remove this comment to see the full error message
-      errorMessage,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'validationError' does not exist on type ... Remove this comment to see the full error message
-      validationError,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'annoSelect' does not exist on type 'Read... Remove this comment to see the full error message
-      annoSelect,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'annoInput' does not exist on type 'Reado... Remove this comment to see the full error message
-      annoInput,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'secondaryInstructions' does not exist on... Remove this comment to see the full error message
-      secondaryInstructions,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'secondaryInput' does not exist on type '... Remove this comment to see the full error message
-      secondaryInput,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'handleCancel' does not exist on type 'Re... Remove this comment to see the full error message
-      handleCancel,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'handleSubmit' does not exist on type 'Re... Remove this comment to see the full error message
-      handleSubmit,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'primaryButtonText' does not exist on typ... Remove this comment to see the full error message
-      primaryButtonText,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'secondaryButtonText' does not exist on t... Remove this comment to see the full error message
-      secondaryButtonText,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'handleSecondaryButtonSubmit' does not ex... Remove this comment to see the full error message
-      handleSecondaryButtonSubmit,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'primaryButtonProps' does not exist on ty... Remove this comment to see the full error message
-      primaryButtonProps,
-    } = this.props;
-
-    return (
-      <Dialog icon="tag" title={title} isOpen={isActive} onClose={handleCancel}>
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-          }}
-        >
-          <div className={Classes.DIALOG_BODY}>
-            <div style={{ marginBottom: 20 }}>
-              <p>{instruction}</p>
-              {annoInput || null}
-              <p
-                style={{
-                  marginTop: 7,
-                  visibility: validationError ? "visible" : "hidden",
-                  color: Colors.ORANGE3,
-                }}
-              >
-                {errorMessage}
-              </p>
-              {/* we might rename, secondary button and secondary input are not related */}
-              {secondaryInstructions && (
-                <p style={{ marginTop: secondaryInstructions ? 20 : 0 }}>
-                  {secondaryInstructions}
-                </p>
-              )}
-              {secondaryInput || null}
-            </div>
-            {annoSelect || null}
+function AnnoDialog({
+  isActive,
+  text,
+  title,
+  instruction,
+  cancelTooltipContent,
+  errorMessage,
+  validationError,
+  annoInput,
+  secondaryInstructions,
+  secondaryInput,
+  handleCancel,
+  handleSubmit,
+  primaryButtonText,
+  primaryButtonProps,
+  inputProps,
+}: AnnoDialogProps): JSX.Element {
+  return (
+    <Dialog icon="tag" title={title} isOpen={isActive} onClose={handleCancel}>
+      <DialogForm
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <DialogBody className={Classes.DIALOG_BODY}>
+          <p>{instruction}</p>
+          {annoInput || null}
+          <ErrorText validationError={validationError}>
+            {errorMessage}
+          </ErrorText>
+          {secondaryInstructions && (
+            <SecondaryText secondaryInstructions={secondaryInstructions}>
+              {secondaryInstructions}
+            </SecondaryText>
+          )}
+          {secondaryInput || null}
+        </DialogBody>
+        <div className={Classes.DIALOG_FOOTER}>
+          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+            <Tooltip content={cancelTooltipContent}>
+              <Button onClick={handleCancel}>Cancel</Button>
+            </Tooltip>
+            <Button
+              {...primaryButtonProps}
+              {...inputProps}
+              onClick={handleSubmit}
+              disabled={!text || validationError}
+              intent="primary"
+              type="submit"
+            >
+              {primaryButtonText}
+            </Button>
           </div>
-          <div className={Classes.DIALOG_FOOTER}>
-            <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-              <Tooltip content={cancelTooltipContent}>
-                <Button onClick={handleCancel}>Cancel</Button>
-              </Tooltip>
-              {/* we might rename, secondary button and secondary input are not related */}
-              {handleSecondaryButtonSubmit && secondaryButtonText ? (
-                <Button
-                  onClick={handleSecondaryButtonSubmit}
-                  disabled={!text || validationError}
-                  intent="none"
-                  type="button"
-                >
-                  {secondaryButtonText}
-                </Button>
-              ) : null}
-              <Button
-                {...primaryButtonProps} // eslint-disable-line react/jsx-props-no-spreading -- Spreading props allows for modularity
-                onClick={handleSubmit}
-                disabled={!text || validationError}
-                intent="primary"
-                type="submit"
-              >
-                {primaryButtonText}
-              </Button>
-            </div>
-          </div>
-        </form>
-      </Dialog>
-    );
-  }
+        </div>
+      </DialogForm>
+    </Dialog>
+  );
 }
+
+export default AnnoDialog;
diff --git a/client/src/components/AnnoDialog/style.ts b/client/src/components/AnnoDialog/style.ts
new file mode 100644
index 000000000..0e7c2953d
--- /dev/null
+++ b/client/src/components/AnnoDialog/style.ts
@@ -0,0 +1,28 @@
+import styled from "@emotion/styled";
+
+interface ErrorTextProps {
+  validationError: boolean;
+}
+
+interface SecondaryTextProps {
+  secondaryInstructions: string;
+}
+
+export const DialogForm = styled.form`
+  margin: 0;
+  padding: 0;
+`;
+
+export const DialogBody = styled.div`
+  margin-bottom: 20px;
+`;
+
+export const ErrorText = styled.p<ErrorTextProps>`
+  margin-top: 7px;
+  visibility: ${(props) => (props.validationError ? "visible" : "hidden")};
+  color: #ff8c00;
+`;
+
+export const SecondaryText = styled.p<SecondaryTextProps>`
+  margin-top: ${(props) => (props.secondaryInstructions ? 20 : 0)};
+`;
diff --git a/client/src/components/AnnoDialog/types.ts b/client/src/components/AnnoDialog/types.ts
new file mode 100644
index 000000000..40a221450
--- /dev/null
+++ b/client/src/components/AnnoDialog/types.ts
@@ -0,0 +1,19 @@
+import { MouseEvent, SyntheticEvent } from "react";
+
+export interface AnnoDialogProps {
+  isActive: boolean;
+  text: string;
+  title: string;
+  instruction: string;
+  cancelTooltipContent: string;
+  errorMessage?: string;
+  validationError: boolean;
+  annoInput: JSX.Element | null;
+  secondaryInstructions?: string;
+  secondaryInput?: JSX.Element | null;
+  handleCancel: (e: SyntheticEvent<HTMLElement, Event>) => void;
+  handleSubmit: (e: MouseEvent<HTMLElement>) => void;
+  primaryButtonText: string;
+  primaryButtonProps: Record<string, unknown>;
+  inputProps: Record<string, unknown>;
+}
diff --git a/client/src/components/RightSideBar/components/GeneExpression/components/GeneSet/components/EditGenesetNameDialogue/EditGenesetNameDialogue.tsx b/client/src/components/RightSideBar/components/GeneExpression/components/GeneSet/components/EditGenesetNameDialogue/EditGenesetNameDialogue.tsx
index 5c03b66f5..5515e64e1 100644
--- a/client/src/components/RightSideBar/components/GeneExpression/components/GeneSet/components/EditGenesetNameDialogue/EditGenesetNameDialogue.tsx
+++ b/client/src/components/RightSideBar/components/GeneExpression/components/GeneSet/components/EditGenesetNameDialogue/EditGenesetNameDialogue.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
-import { AnnoDialog } from "components/AnnoDialog/AnnoDialog";
+import AnnoDialog from "components/AnnoDialog/AnnoDialog";
 import { LabelInput } from "components/LabelInput/LabelInput";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
@@ -101,7 +101,6 @@ export class EditGenesetNameDialogue extends React.PureComponent<{}, State> {
     return (
       <>
         <AnnoDialog
-          // @ts-expect-error ts-migrate(2322) FIXME: Type '{ isActive: boolean; inputProps: { "data-tes... Remove this comment to see the full error message
           isActive={genesetsUI.isEditingGenesetName === parentGeneset}
           inputProps={{
             "data-testid": `${genesetsUI.isEditingGenesetName}:rename-geneset-dialog`,
@@ -114,7 +113,6 @@ export class EditGenesetNameDialogue extends React.PureComponent<{}, State> {
           cancelTooltipContent="Close this dialog without renaming the gene set."
           primaryButtonText="Edit gene set name and description"
           text={newGenesetName}
-          secondaryText={newGenesetDescription}
           validationError={
             this.validate(newGenesetName, genesets) &&
             parentGenesetDescription === newGenesetDescription
diff --git a/client/src/components/RightSideBar/components/GeneExpression/components/GeneSet/components/GeneSetMenus/components/AddGeneToGenesetDialogue/AddGeneToGenesetDialogue.tsx b/client/src/components/RightSideBar/components/GeneExpression/components/GeneSet/components/GeneSetMenus/components/AddGeneToGenesetDialogue/AddGeneToGenesetDialogue.tsx
index aae2a83db..d21ca7558 100644
--- a/client/src/components/RightSideBar/components/GeneExpression/components/GeneSet/components/GeneSetMenus/components/AddGeneToGenesetDialogue/AddGeneToGenesetDialogue.tsx
+++ b/client/src/components/RightSideBar/components/GeneExpression/components/GeneSet/components/GeneSetMenus/components/AddGeneToGenesetDialogue/AddGeneToGenesetDialogue.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
-import { AnnoDialog } from "components/AnnoDialog/AnnoDialog";
+import AnnoDialog from "components/AnnoDialog/AnnoDialog";
 import { LabelInput } from "components/LabelInput/LabelInput";
 import parseBulkGeneString from "util/parseBulkGeneString";
 import actions from "actions";
@@ -70,7 +70,6 @@ export class AddGeneToGenesetDialogue extends React.PureComponent<{}, State> {
     return (
       <>
         <AnnoDialog
-          // @ts-expect-error ts-migrate(2322) FIXME: Type '{ isActive: boolean; inputProps: { "data-tes... Remove this comment to see the full error message
           isActive={genesetsUI.isAddingGenesToGeneset === geneset}
           inputProps={{ "data-testid": `${geneset}:create-label-dialog` }}
           primaryButtonProps={{