Feature/ant5

.babelrc

@@ -13,7 +13,7 @@
   ],
   "presets": [
     "@babel/preset-react",
-    ["@babel/preset-env", { "modules": false }],
+    ["@babel/preset-env", { "modules": "auto" }],
     "@babel/preset-typescript"
   ],
   "env": {

package.json

@@ -35,11 +35,13 @@
         "@types/jest": "^26.0.24",
         "@types/jsdom": "12.2.2",
         "@types/lodash": "4.14.121",
+        "@types/node": "^22.8.4",
         "@types/react": "^18.2.39",
         "@types/react-dom": "^18.2.17",
         "@types/react-plotly.js": "^2.2.4",
         "@types/react-router-dom": "^5.1.5",
         "@types/sinon": "7.0.6",
+        "@types/styled-components": "^5.1.34",
         "@types/uuid": "^9.0.7",
         "@typescript-eslint/eslint-plugin": "^5.42.1",
         "@typescript-eslint/parser": "^5.42.1",
@@ -85,7 +87,7 @@
         "style-loader": "3.3.1",
         "ts-jest": "^29.0.3",
         "ts-node": "10.9.1",
-        "typescript": "4.5",
+        "typescript": "5.6.3",
         "typescript-plugin-css-modules": "5.0.0",
         "url-loader": "^4.1.1",
         "webpack": "^5.94.0",
@@ -96,8 +98,8 @@
     "dependencies": {
         "@aics/simularium-viewer": "^3.9.0",
         "@ant-design/css-animation": "^1.7.3",
-        "@ant-design/icons": "^4.0.6",
-        "antd": "^4.23.6",
+        "@ant-design/icons": "^4.8.3",
+        "antd": "^5.22.3",
         "axios": "^1.7.4",
         "bowser": "^2.11.0",
         "classnames": "2.2.5",
@@ -119,13 +121,8 @@
         "redux": "4.2.0",
         "redux-logic": "^3.0.3",
         "reselect": "4.0.0",
+        "styled-components": "^6.1.13",
         "use-debounce": "^9.0.4",
         "uuid": "^9.0.1"
-    },
-    "resolutions": {
-        "react": "^16",
-        "react-dom": "^16",
-        "@types/react": "^16",
-        "@types/react-dom": "^16"
     }
 }

src/components/AgentTree/style.css

@@ -44,10 +44,6 @@
     height: 40px;
 }
 
-.container :global(.header-checkbox .ant-checkbox) {
-    top: 3.5px;
-}
-
 .sub-menu {
     flex-flow: row;
 }

src/components/AgentTreeSubmenu/index.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { Checkbox as AntdCheckbox } from "antd";
 import { map, noop } from "lodash";
 import { CheckboxChangeEvent, CheckboxOptionType } from "antd/lib/checkbox";
-import { CheckboxValueType } from "antd/lib/checkbox/Group";
 const CheckboxGroup = AntdCheckbox.Group;
 
 import Checkbox from "../Checkbox";
@@ -11,7 +10,7 @@ import { CHECKBOX_TYPE_STAR } from "../../constants";
 interface AgentTreeSubmenuProps {
     checkedAgents: string[];
     options: CheckboxOptionType[];
-    onChange: (values: CheckboxValueType[]) => void;
+    onChange: (values: string[]) => void;
     checkboxType?: CHECKBOX_TYPE_STAR;
 }
 import styles from "./style.css";

src/components/ColorPicker/index.tsx

@@ -7,6 +7,7 @@ import { useDebounce } from "use-debounce";
 
 import { AGENT_COLORS } from "../../containers/ViewerPanel/constants";
 import { ColorChange } from "../../constants/interfaces";
+import { COLORPICKER_POPOVER_OFFSET } from "../../constants";
 import { SetRecentColorsAction } from "../../state/selection/types";
 
 import styles from "./style.css";
@@ -164,6 +165,8 @@ const ColorPicker = ({
             placement="bottomLeft"
             onOpenChange={togglePopover}
             trigger="click"
+            overlayInnerStyle={{ padding: 0 }}
+            align={{ targetOffset: COLORPICKER_POPOVER_OFFSET }}
         >
             <label
                 className={classNames(

src/components/ConversionCancelModal/index.tsx

@@ -1,11 +1,9 @@
-import { Button } from "antd";
+import { CustomButton } from "../CustomButton";
 import React from "react";
-import classNames from "classnames";
 
+import { ButtonClass } from "../../constants/interfaces";
 import CustomModal from "../CustomModal";
 
-import styles from "./style.css";
-
 interface ConversionCancelModalProps {
     continueProcessing: () => void;
     cancelProcessing: () => void;
@@ -17,15 +15,18 @@ const ConversionCancelModal: React.FC<ConversionCancelModalProps> = ({
 }) => {
     const footerButtons = (
         <>
-            <Button
-                className={classNames("primary-button", styles.wideButton)}
+            <CustomButton
+                variant={ButtonClass.LightPrimary}
                 onClick={cancelProcessing}
             >
                 Yes, cancel
-            </Button>
-            <Button className="secondary-button" onClick={continueProcessing}>
+            </CustomButton>
+            <CustomButton
+                variant={ButtonClass.LightSecondary}
+                onClick={continueProcessing}
+            >
                 No
-            </Button>
+            </CustomButton>
         </>
     );
 

src/components/ConversionErrorModal/index.tsx

@@ -1,7 +1,8 @@
-import { Button } from "antd";
 import React from "react";
 import classNames from "classnames";
 
+import { ButtonClass } from "../../constants/interfaces";
+import { CustomButton } from "../CustomButton";
 import CustomModal from "../CustomModal";
 import { Exclamation } from "../Icons";
 
@@ -19,9 +20,9 @@ const ConversionErrorModal: React.FC<ConversionErrorModalProps> = ({
     showForumMessage = true,
 }) => {
     const footerButton = (
-        <Button className="primary-button" onClick={closeModal}>
+        <CustomButton variant={ButtonClass.LightPrimary} onClick={closeModal}>
             OK
-        </Button>
+        </CustomButton>
     );
 
     return (

src/components/ConversionProcessingOverlay/index.tsx

@@ -1,7 +1,9 @@
 import React, { useState } from "react";
-import { Button, Divider, Spin } from "antd";
+import { Divider, Spin } from "antd";
 
+import { ButtonClass } from "../../constants/interfaces";
 import ConversionCancelModal from "../ConversionCancelModal";
+import { CustomButton } from "../CustomButton";
 import { UpRightArrow, GoBack } from "../Icons";
 
 import styles from "./style.css";
@@ -48,24 +50,26 @@ const ConversionProcessingOverlay = ({
                     </div>
                     <div>Processing...</div>
                 </div>
-                <h3>Open another instance of Simularium </h3>
-                <Button
-                    className="secondary-button"
+                <h3 className={styles.newInstanceText}>
+                    Open another instance of Simularium
+                </h3>
+                <CustomButton
+                    variant={ButtonClass.LightSecondary}
                     href={`https://simularium.allencell.org/viewer`}
                     target="_blank"
                 >
                     Open in new tab {UpRightArrow}
-                </Button>
+                </CustomButton>
             </div>
             <div className={styles.dividerContainer}>
                 <Divider> </Divider>
             </div>
-            <Button
-                className="secondary-button"
+            <CustomButton
+                variant={ButtonClass.LightSecondary}
                 onClick={() => setCancelModalOpen(true)}
             >
                 Cancel file import
-            </Button>
+            </CustomButton>
         </div>
     );
 

src/components/ConversionProcessingOverlay/style.css

@@ -12,6 +12,7 @@
 
 .title {
     color: var(--light-theme-color);
+    font-size: 24px;
     font-weight: 600;
 }
 
@@ -38,6 +39,12 @@
     padding: 30px 50px 10px;
 }
 
+.new-instance-text {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 0.5em;
+}
+
 .divider-container {
     width: 496px;
     margin-bottom: 26px;