feat: update "upload my data" ui (#741) (#743)

* feat: update "upload my data" ui (#741)

* feat: updated title text (#741)

---------

Co-authored-by: Fran McDade <[email protected]>

Author: frano-m

app/components/Entity/components/ConfigureWorkflowInputs/components/Main/components/Stepper/components/Step/SequencingStep/components/UploadMyData/constants.ts

@@ -1,13 +1,7 @@
-import { PALETTE } from "@databiosphere/findable-ui/lib/styles/common/constants/palette";
 import styled from "@emotion/styled";
-import { Paper } from "@mui/material";
+import { Alert } from "@mui/material";
 
-export const StyledPaper = styled(Paper)`
-  background-color: ${PALETTE.SMOKE_LIGHT};
-  display: grid;
-  gap: 8px;
-  justify-items: center;
-  padding: 24px;
-  text-align: center;
+export const StyledAlert = styled(Alert)`
+  padding: 20px;
   width: 100%;
 `;

app/components/Entity/components/ConfigureWorkflowInputs/components/Main/components/Stepper/components/Step/SequencingStep/components/UploadMyData/uploadMyData.styles.ts

@@ -1,22 +1,23 @@
 import { Props } from "./types";
-import { StyledPaper } from "./uploadMyData.styles";
-import { Typography } from "@mui/material";
+import { Typography, AlertTitle } from "@mui/material";
 import { TYPOGRAPHY_PROPS } from "@databiosphere/findable-ui/lib/styles/common/mui/typography";
-import { PAPER_PROPS } from "./constants";
+import { ALERT_PROPS } from "@databiosphere/findable-ui/lib/components/common/Alert/constants";
 import { useEffect } from "react";
+import { StyledAlert } from "./uploadMyData.styles";
 
 export const UploadMyData = ({ onConfigure, stepKey }: Props): JSX.Element => {
   useEffect(() => {
     onConfigure(stepKey, []);
   }, [onConfigure, stepKey]);
   return (
-    <StyledPaper {...PAPER_PROPS}>
-      <Typography
-        color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
-        variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}
-      >
-        I&#39;ll upload my data directly to Galaxy.
+    <StyledAlert {...ALERT_PROPS.STANDARD_INFO}>
+      <AlertTitle variant={TYPOGRAPHY_PROPS.VARIANT.BODY_LARGE_500}>
+        Upload Your Data in Galaxy
+      </AlertTitle>
+      <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400_2_LINES}>
+        You will have an opportunity to upload your own data to your Galaxy
+        history.
       </Typography>
-    </StyledPaper>
+    </StyledAlert>
   );
 };