Feature/conversion check server

package.json

@@ -39,6 +39,7 @@
         "@types/react-plotly.js": "^2.2.4",
         "@types/react-router-dom": "^5.1.5",
         "@types/sinon": "7.0.6",
+        "@types/uuid": "^9.0.7",
         "@typescript-eslint/eslint-plugin": "^5.42.1",
         "@typescript-eslint/parser": "^5.42.1",
         "@webpack-cli/serve": "^1.7.0",
@@ -91,7 +92,7 @@
         "webpack-dev-server": "^4.10.1"
     },
     "dependencies": {
-        "@aics/simularium-viewer": "^3.6.2",
+        "@aics/simularium-viewer": "^3.6.4",
         "@ant-design/css-animation": "^1.7.3",
         "@ant-design/icons": "^4.0.6",
         "antd": "^4.23.6",
@@ -114,7 +115,8 @@
         "react-waypoint": "^9.0.3",
         "redux": "4.2.0",
         "redux-logic": "^3.0.3",
-        "reselect": "4.0.0"
+        "reselect": "4.0.0",
+        "uuid": "^9.0.1"
     },
     "resolutions": {
         "react": "^16",

src/components/ConversionFileErrorModal/index.tsx

@@ -2,10 +2,9 @@ import { Button } from "antd";
 import React from "react";
 
 import CustomModal from "../CustomModal";
-import { Exclamation } from "../Icons";
+import { AvailableEngines } from "../../state/trajectory/conversion-data-types";
 
 import styles from "./style.css";
-import { AvailableEngines } from "../../state/trajectory/conversion-data-types";
 
 interface ConversionFileErrorModalProps {
     closeModal: () => void;
@@ -33,7 +32,7 @@ const ConversionFileErrorModal: React.FC<ConversionFileErrorModalProps> = ({
             onCancel={closeModal}
         >
             <div>
-                <div className={styles.redText}>
+                <div className={styles.redWarningText}>
                     {" "}
                     {"We're sorry, there was a problem importing your file."}
                 </div>{" "}

src/components/ConversionFileErrorModal/style.css

@@ -7,7 +7,7 @@
     padding: 15px 15px 0px 15px;
 }
 
-.error-modal .red-text {
+.error-modal .red-warning-text {
     color: var(--brick-red);
     padding: 10px 0px;
 }

src/components/ConversionServerErrorModal/index.tsx

@@ -0,0 +1,51 @@
+import { Button } from "antd";
+import React from "react";
+
+import CustomModal from "../CustomModal";
+import { Exclamation } from "../Icons";
+
+import styles from "./style.css";
+
+interface ConversionServerErrorModalProps {
+    closeModal: () => void;
+}
+
+const ConversionServerErrorModal: React.FC<ConversionServerErrorModalProps> = ({
+    closeModal,
+}) => {
+    return (
+        <CustomModal
+            className={styles.serverErrorModal}
+            title="File import cannot be completed"
+            open
+            footer={
+                <Button type="primary" onClick={closeModal}>
+                    OK
+                </Button>
+            }
+            centered
+            onCancel={closeModal}
+        >
+            <p className={styles.redText}>
+                {" "}
+                {Exclamation} We&apos;re sorry, the server is currently
+                experiencing an issue.
+            </p>
+            <p>
+                {" "}
+                Please try again at a later time. For further assistance, please
+                visit{" "}
+                <a
+                    href="https://forum.allencell.org/"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    {" "}
+                    The Allen Cell Discussion Forum.{" "}
+                </a>
+            </p>
+        </CustomModal>
+    );
+};
+
+export default ConversionServerErrorModal;

src/components/ConversionServerErrorModal/style.css

@@ -0,0 +1,34 @@
+.server-error-modal :global(.ant-modal-content) {
+    width: 425px;
+}
+
+.server-error-modal :global(.ant-modal-close-x) {
+    /* specifying here prevents hover behavior */
+    color: var(--light-theme-modal-close-x);
+    font-size: 12px;
+    position: relative;
+    top: -3px;
+}
+
+.server-error-modal  :global(.ant-modal-header) {
+    padding: 12px 24px;
+}
+
+.server-error-modal :global(.ant-modal-title) {
+    font-size: 14px;
+    font-weight: 400;
+}
+
+.server-error-modal :global(.ant-modal-body) {
+    padding: 20px 20px 0px;
+}
+
+.server-error-modal .red-text {
+    color: var(--warning-text-color);
+    padding-bottom: 1px;
+}
+
+.server-error-modal :global(.ant-modal-footer) {
+    background-color: var(--modal-content-bg);
+    padding: 6px 16px 12px;
+}

src/components/theme/light-theme.css

@@ -11,6 +11,11 @@
     color: var(--light-theme-btn-primary-color);
 }
 
+.light-theme :global(.ant-btn-primary):hover {
+    background-color: var(--light-theme-btn-primary-hover-bg);
+    color: var(--light-theme-btn-primary-hover-color);
+}
+
 .light-theme :global(.ant-btn-primary[disabled]) {
     background: var(--light-button-disabled-background);
     border: var(--light-button-disabled-border);