conditional rendering message, update another button too

Author: erinz2020

frontend/src/components/BrutalismButton.jsx

@@ -40,12 +40,16 @@ export default function BrutalismButton({
         position: "relative",
         width: "auto",
         height: "auto",
-        background: backgroundColor,
-        border: `2px solid ${borderColor}`,
+        backgroundColor: disabled ? "gray" : backgroundColor,
+        border: disabled
+          ? "gray"
+          : borderColor
+            ? `2px solid ${borderColor}`
+            : `2px solid ${backgroundColor}`,
         boxShadow: boxShadowStyle,
         borderRadius: "4.8px",
         fontSize: "16px",
-        color: color,
+        color: disabled ? "black" : color,
         fontWeight: "bold",
         margin: "8px 8px 0 0",
         whiteSpace: "nowrap",
@@ -68,19 +72,19 @@ export default function BrutalismButton({
       >
         {children}
         <span style={{ marginLeft: 10 }}></span>
-        
-        {
-          noArrow ? null : <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="14"
-          height="14"
-          fill="currentColor"
-          className="bi bi-arrow-right-circle-fill"
-          viewBox="0 0 16 16"
-        >
-          <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0M4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z" />
-        </svg>
-        }
+
+        {noArrow ? null : (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="14"
+            height="14"
+            fill="currentColor"
+            className="bi bi-arrow-right-circle-fill"
+            viewBox="0 0 16 16"
+          >
+            <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0M4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z" />
+          </svg>
+        )}
       </a>
     </Button>
   );

frontend/src/pages/BulkImport/BulkImportTask.jsx

@@ -499,16 +499,22 @@ const BulkImportTask = observer(() => {
           >
             <FormattedMessage id="BULK_IMPORT_SEND_TO_IDENTIFICATION" />
           </MainButton>
-          <p
-            style={{
-              color: theme.grayColors.gray500,
-            }}
-          >
-            <FormattedMessage
-              id="BULK_IMPORT_SEND_TO_IDENTIFICATION_DISABLED_DESC"
-              defaultMessage="Button is disabled if detection or initial identification task is incomplete"
-            />
-          </p>
+          {((!userRoles?.includes("admin") &&
+            !userRoles?.includes("researcher")) ||
+            !store.locationIDString ||
+            task?.status !== "complete" ||
+            task?.iaSummary?.detectionStatus !== "complete") && (
+            <p
+              style={{
+                color: theme.grayColors.gray500,
+              }}
+            >
+              <FormattedMessage
+                id="BULK_IMPORT_SEND_TO_IDENTIFICATION_DISABLED_DESC"
+                defaultMessage="Button is disabled if detection or initial identification task is incomplete"
+              />
+            </p>
+          )}
         </Col>
       </Row>
       <Row>