Merge pull request #296 from zimmerman-team/feat/DX-2218

feat: DX-2218 - [Design Rebuilt] Connect data flow
zimmerman-team · Mar 2, 2025 · dba0a55 · dba0a55
2 parents c5689a7 + e096c91
commit dba0a55
Show file tree

Hide file tree

Showing 8 changed files with 161 additions and 74 deletions.
diff --git a/src/app/modules/dataset-module/routes/upload-module/component/stepper.tsx b/src/app/modules/dataset-module/routes/upload-module/component/stepper.tsx
@@ -81,14 +81,15 @@ export default function Stepper(
           css={`
             position: absolute;
             margin: 0;
-            left: 0;
+            left: -48px;
+            width: 128px;
+            text-align: center;
             font-size: 14px;
             font-family: ${props.index <= props.activeStep
                 ? "GothamNarrow-Bold"
                 : "GothamNarrow-Book"},
               "Helvetica Neue", sans-serif;
             color: ${props.index <= props.activeStep ? "#6061E5" : "#868E96"};
-            width: max-content;
           `}
         >
           {props.tab}

diff --git a/...modules/dataset-module/routes/upload-module/component/table/externalSearchTable/index.tsx b/...modules/dataset-module/routes/upload-module/component/table/externalSearchTable/index.tsx
@@ -97,31 +97,46 @@ export default function ExternalSearchTable(props: {
               data-cy={`table-row-${data.type}`}
             >
               {props.tableData.columns.map((val) => (
-                <TableCell key={val.key}>
+                <TableCell
+                  key={val.key}
+                  style={{
+                    padding: "10px 16px",
+                  }}
+                >
                   <div
                     css={`
                       display: flex;
                       align-items: center;
                       justify-content: space-between;
                       width: 100%;
+                      justify-content: ${data[val.key]
+                        ? "flex-start"
+                        : "center"};
                     `}
                   >
-                    <p
-                      title={data[val.key] as string}
-                      css={`
-                        margin: 0;
-                        overflow: hidden;
-                        max-width: 99%;
-                        white-space: nowrap;
-                        text-overflow: ellipsis;
-                        min-width: ${val.key === "id" ? "30px" : "auto"};
-                        text-align: ${val.key === "id" ? "center" : "left"};
-                      `}
-                    >
-                      {isValidDate(data[val.key])
-                        ? moment(data[val.key]).format("MMMM YYYY")
-                        : data[val.key] ?? ""}
-                    </p>
+                    {data[val.key] ? (
+                      <p
+                        title={data[val.key] as string}
+                        css={`
+                          margin: 0;
+                          overflow: hidden;
+                          max-width: 99%;
+                          white-space: nowrap;
+                          text-overflow: ellipsis;
+                          font-size: 12px;
+                          min-width: ${val.key === "id" ? "30px" : "auto"};
+                          text-align: ${val.key === "id" ? "center" : "left"};
+                          line-height: normal;
+                        `}
+                      >
+                        {isValidDate(data[val.key])
+                          ? moment(data[val.key]).format("MMMM YYYY")
+                          : data[val.key] ?? ""}
+                      </p>
+                    ) : (
+                      ""
+                    )}
+
                     {val.icon}
                   </div>
                 </TableCell>

diff --git a/src/app/modules/dataset-module/routes/upload-module/style.ts b/src/app/modules/dataset-module/routes/upload-module/style.ts
@@ -1,4 +1,5 @@
-import { Select, TextField, withStyles } from "@material-ui/core";
+import { Select, TextField, withStyles, InputLabel } from "@material-ui/core";
+import { pad } from "lodash";
 import { css } from "styled-components/macro";
 
 export const stepcss = css`
@@ -14,12 +15,11 @@ export const stepcss = css`
   justify-content: center;
   gap: 8px;
   padding: 16px 0;
-  @media (min-width: 768px) {
-    @media (max-width: 881px) {
-      top: 66px;
-    }
+  @media (max-width: 881px) {
+    top: 66px;
   }
 `;
+const gothamNarrowBold = "'GothamNarrow-Book', 'Helvetica Neue', sans-serif";
 
 export const uploadAreacss = (isDragActive: boolean, disabled?: boolean) => css`
   height: 131px;
@@ -74,8 +74,10 @@ export const metaDatacss = css`
     font-weight: 400;
     font-size: 48px;
     font-family: "GothamNarrow-Bold", "Helvetica Neue", sans-serif;
+    margin: 0;
+    margin-bottom: 36px;
+    line-height: normal;
 
-    margin-bottom: 4.5rem;
     @media (min-width: 768px) {
       @media (max-width: 1024px) {
         margin-top: 10px;
@@ -124,18 +126,27 @@ export const mobileDescriptioncss = css`
 
 export const CssTextField = withStyles({
   root: {
-    "& label.Mui-focused": {
+    "& .MuiInputLabel-outlined": {
+      fontSize: "18px",
+      lineHeight: "24px",
+      fontFamily: gothamNarrowBold,
       color: "#231D2C",
+      padding: "0px",
+      marginLeft: "9px",
     },
-    "&.MuiInputLabel-outlined": {
-      fontSize: "16px",
-      fontFamily: "'GothamNarrow-Book', 'Helvetica Neue', sans-serif",
+    "& label.Mui-focused": {
       color: "#231D2C",
+      lineHeight: "normal",
+      marginLeft: "0px",
+    },
+    "& .MuiFormLabel-filled": {
+      lineHeight: "normal",
+      marginLeft: "0px",
     },
     "& .MuiOutlinedInput-input": {
-      padding: "2px 14px",
-      height: "48px",
+      padding: "14.5px 24px",
       backgroundColor: "#Fff",
+      height: "24px",
     },
     "& .MuiFormHelperText-root": {
       color: "#231D2C",
@@ -148,8 +159,10 @@ export const CssTextField = withStyles({
     },
     "& .MuiOutlinedInput-multiline ": {
       backgroundColor: "#Fff",
+      padding: "0px",
     },
     "& .MuiOutlinedInput-root": {
+      fontSize: "18px",
       "& fieldset": {
         borderColor: "#231D2C",
         borderRadius: "10px",
@@ -170,17 +183,18 @@ export const CssSelectField = withStyles({
     "& label.Mui-focused": {
       color: "#231D2C",
     },
-    "&.MuiInputLabel-outlined": {
-      fontSize: "16px",
-      fontFamily: "'GothamNarrow-Book', 'Helvetica Neue', sans-serif",
+    "& .MuiInputLabel-outlined": {
+      fontSize: "18px",
+      fontFamily: gothamNarrowBold,
       color: "#231D2C",
+      lineHeight: "24px",
     },
     "&.MuiSelect-outlined": {
-      padding: "2px 14px",
-      height: "48px",
+      padding: "14.5px 24px",
       background: "#fff",
       display: "flex",
       alignItems: "center",
+      lineHeight: "24px",
     },
     "&.MuiFormHelperText-root": {
       color: "#231D2C",
@@ -206,3 +220,25 @@ export const CssSelectField = withStyles({
     },
   },
 })(Select);
+
+export const CssInputLabel = withStyles({
+  root: {
+    "&.MuiInputLabel-outlined": {
+      fontSize: "18px",
+      lineHeight: "24px",
+      fontFamily: gothamNarrowBold,
+      color: "#231D2C",
+      padding: "0px",
+      marginLeft: "9px",
+    },
+    "&.Mui-focused": {
+      color: "#231D2C",
+      lineHeight: "normal",
+      marginLeft: "0px",
+    },
+    "&.MuiFormLabel-filled": {
+      lineHeight: "normal",
+      marginLeft: "-2px",
+    },
+  },
+})(InputLabel);
diff --git a/src/app/modules/dataset-module/routes/upload-module/upload-steps/externalSearch.tsx b/src/app/modules/dataset-module/routes/upload-module/upload-steps/externalSearch.tsx
@@ -15,6 +15,7 @@ import ExternalSearchTable from "app/modules/dataset-module/routes/upload-module
 import { useCheckUserPlan } from "app/hooks/useCheckUserPlan";
 import { PrimaryButton } from "app/components/Styled/button";
 import { SearchIcon } from "app/assets/icons/Search";
+import { ChevronRight } from "@material-ui/icons";
 
 export interface IExternalDataset {
   name: string;
@@ -190,6 +191,9 @@ export default function ExternalSearch(props: {
         css={`
           display: flex;
           gap: 24px;
+          @media (max-width: 881px) {
+            margin-top: 40px;
+          }
         `}
       >
         <div
@@ -299,6 +303,7 @@ export default function ExternalSearch(props: {
                       url={dataset.url}
                       handleDownload={() => props.handleDownload(dataset)}
                       dataset={dataset}
+                      searchValue={props.searchValue}
                     />
                     <Box height={16} />
                   </Grid>
@@ -313,7 +318,8 @@ export default function ExternalSearch(props: {
                   { key: "name", label: "Title" },
                   { key: "description", label: "Description" },
                   { key: "datePublished", label: "Date" },
-                  { key: "source", label: "Source", icon: <SaveAltIcon /> },
+                  { key: "source", label: "Source" },
+                  { key: "download", label: "", icon: <ChevronRight /> },
                 ],
                 data: datasets,
               }}

diff --git a/src/app/modules/dataset-module/routes/upload-module/upload-steps/index.tsx b/src/app/modules/dataset-module/routes/upload-module/upload-steps/index.tsx
@@ -489,6 +489,10 @@ function DatasetUploadSteps(props: Props) {
           display: flex;
           flex-direction: column;
           justify-content: space-between;
+          @media (max-width: 881px) {
+            min-height: calc(100vh - 66px);
+            margin-top: 66px;
+          }
         `}
       >
         <Container maxWidth="lg">

diff --git a/src/app/modules/dataset-module/routes/upload-module/upload-steps/metaData.tsx b/src/app/modules/dataset-module/routes/upload-module/upload-steps/metaData.tsx
@@ -6,6 +6,7 @@ import MenuItem from "@material-ui/core/MenuItem";
 import InputLabel from "@material-ui/core/InputLabel";
 import FormControl from "@material-ui/core/FormControl";
 import {
+  CssInputLabel,
   CssSelectField,
   CssTextField,
   metaDatacss,
@@ -63,7 +64,7 @@ const SelectCategoryField = (props: {
   onChange: any;
 }) => (
   <FormControl variant="outlined" fullWidth>
-    <InputLabel id="select-label">Data category*</InputLabel>
+    <CssInputLabel id="select-label">Data category*</CssInputLabel>
     <CssSelectField
       fullWidth
       id="select"

diff --git a/src/app/modules/dataset-module/routes/upload-module/upload-steps/processing.tsx b/src/app/modules/dataset-module/routes/upload-module/upload-steps/processing.tsx
@@ -90,16 +90,20 @@ export default function Processing(props: ProcessingMetaDataProps) {
             display: flex;
             justify-content: center;
             align-items: center;
-            height: calc(100vh - 98px);
+            height: calc(100vh - 140px - 72px);
             flex-direction: column;
+            @media (max-width: 881px) {
+              height: calc(100vh - 156px - 72px);
+            }
           `}
         >
           <p
             css={`
               font-size: 18px;
               color: #231d2c;
               text-align: center;
-              margin-bottom: 45px;
+              margin: 0;
+              margin-bottom: 40px;
             `}
             dangerouslySetInnerHTML={{
               __html: props.processingMessage || "Data is being processed...",
@@ -108,7 +112,7 @@ export default function Processing(props: ProcessingMetaDataProps) {
 
           <div
             css={`
-              width: 399.71px;
+              width: 400px;
             `}
           >
             <p
@@ -125,22 +129,24 @@ export default function Processing(props: ProcessingMetaDataProps) {
               css={`
                 display: flex;
                 flex-wrap: wrap;
-                width: 399.71px;
+                width: 400px;
                 justify-content: space-between;
                 align-items: center;
                 p {
                   font-family: "GothamNarrow-Book", "Helvetica Neue", sans-serif;
                   font-size: 12px;
                   color: #adb5bd;
-                  margin-top: 0;
+                  margin: 0;
+                  line-height: normal;
+                  margin-top: 6.42px;
                 }
               `}
             >
               <div
                 css={`
                   width: 100%;
                   height: 6.42px;
-                  border-radius: 3px;
+
                   background-color: #dfe3e5;
 
                   border-radius: 3.211px;
@@ -151,6 +157,7 @@ export default function Processing(props: ProcessingMetaDataProps) {
                   css={`
                     width: ${props.percentageLoaded}%;
                     height: 100%;
+                    border-radius: 3px;
                     background: linear-gradient(
                       90deg,
                       #6466f1 7.48%,