Clean up model upload page

equinor · Sep 24, 2024 · bf48b9a · bf48b9a
1 parent 4862aef
commit bf48b9a
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 49 deletions.
diff --git a/src/features/HandleModel/HandleModelComponent/HandleModelComponent.styled.ts b/src/features/HandleModel/HandleModelComponent/HandleModelComponent.styled.ts
@@ -9,12 +9,14 @@ export const Wrapper = styled.div`
 `;
 
 export const CustomContent = styled.div`
+  max-width: 40rem;
   display: flex;
   flex-direction: column;
   row-gap: ${spacings.X_LARGE};
 `;
 
 export const UploadDiv = styled.div`
+  max-width: 40rem;
   display: flex;
   flex-direction: column;
 

diff --git a/src/features/HandleModel/HandleModelComponent/HandleModelComponent.tsx b/src/features/HandleModel/HandleModelComponent/HandleModelComponent.tsx
@@ -169,16 +169,18 @@ export const HandleModelComponent = ({
 
       {uploading && (
         <Styled.UploadDiv>
-          <Typography variant="h3">
+          <Typography variant="h4" as="h2">
             Upload progress: {progress !== undefined && progress.toFixed(0)}%
           </Typography>
-          {<LinearProgress variant="determinate" value={progress} />}
+          {<LinearProgress variant="indeterminate" value={progress} />}
         </Styled.UploadDiv>
       )}
 
       {progress === 100 && modelId && (
         <Styled.InfoNavigation>
-          <Typography variant="h3">Model finish uploaded!</Typography>
+          <Typography variant="h4" as="h2">
+            Upload complete
+          </Typography>
           <div>
             <Button
               onClick={() => {
@@ -188,7 +190,7 @@ export const HandleModelComponent = ({
                 navigate(path);
               }}
             >
-              Go to model view
+              Open model
             </Button>
           </div>
         </Styled.InfoNavigation>

diff --git a/src/features/HandleModel/SidePane/SidePane.styled.ts b/src/features/HandleModel/SidePane/SidePane.styled.ts
@@ -6,9 +6,6 @@ import { theme } from '../../../tokens/theme';
 export const SidebarWrapper = styled.div`
   heigth: 100%;
   max-width: 256px;
-  > div {
-    border-color: ${theme.light.ui.background.medium};
-  }
 `;
 
 export const StyledSidebarContent = styled(SideBar.Content)`

diff --git a/src/features/ModelView/ModelMetadataView/ModelMetadataView.styled.tsx b/src/features/ModelView/ModelMetadataView/ModelMetadataView.styled.tsx
@@ -24,3 +24,7 @@ export const DescriptionMeta = styled.div`
   align-items: flex-start;
   row-gap: ${spacings.MEDIUM};
 `;
+
+export const UploadingMeta = styled.div`
+  max-width: 40rem;
+`;
diff --git a/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx b/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx
@@ -299,14 +299,14 @@ export const ModelMetadataView = ({
         </Styled.DescriptionMeta>
       )}
       {isAddUploading && (
-        <>
-          <Typography variant="h3">Add model metadata</Typography>
+        <Styled.UploadingMeta>
           <Typography variant="body_long">
-            At least one type of metadata (outcrop analogue, stratigraphic
-            column, or deposition environment) is required when adding a new
-            model.
+            While your model is being uploaded, you can add some metadata like
+            outcrop analogue, stratigraphic column, or gross depositional
+            environment. Please note that at least one type of metadata is
+            required for PEPM models before they can be approved later on.
           </Typography>
-        </>
+        </Styled.UploadingMeta>
       )}
 
       <Typography variant="h3" as="h2">

diff --git a/src/pages/AddModel/AddModel.styled.tsx b/src/pages/AddModel/AddModel.styled.tsx
@@ -2,26 +2,16 @@ import styled from 'styled-components';
 import { spacings } from '../../tokens/spacings';
 
 export const PageLayout = styled.div`
-  display: flex;
-  fled-direction: row;
-  flex: auto;
-  position: relative;
-  width: 100%;
+  display: grid;
+  grid-template-areas: 'sidebar content';
+  grid-template-columns: 16rem 1fr;
   height: 100%;
 `;
 
 export const Content = styled.div`
-  display: flex;
-  fled-direction: column;
-
-  width: 100%;
-  overflow: scroll;
-
-  padding: ${spacings.XX_LARGE} ${spacings.X_LARGE};
-`;
-
-export const InnerContent = styled.div`
   display: flex;
   flex-direction: column;
-  row-gap: ${spacings.X_LARGE};
+  row-gap: ${spacings.XXX_LARGE};
+  padding: ${spacings.X_LARGE} ${spacings.X_LARGE}
+    calc(${spacings.XXXX_LARGE} + ${spacings.X_LARGE});
 `;
diff --git a/src/pages/AddModel/AddModel.tsx b/src/pages/AddModel/AddModel.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable max-lines */
 /* eslint-disable max-lines-per-function */
-import { Snackbar } from '@equinor/eds-core-react';
+import { Snackbar, Typography } from '@equinor/eds-core-react';
 import { useMutation } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import {
@@ -26,7 +26,7 @@ import * as Styled from './AddModel.styled';
 
 enum UploadProcess {
   STARTED = 'We are uploading your new model. Please keep this browser tab open.',
-  SUCCESS = 'Model successfully uploaded and is now beeing processed. You may close this browser tab now.',
+  SUCCESS = 'Model successfully uploaded and is now beeing processed.',
   FAILED = 'File upload failed.',
 }
 
@@ -300,26 +300,25 @@ export const AddModel = () => {
       <SidePane uploading={uploading} />
 
       <Styled.Content>
-        <div>
-          <Styled.InnerContent>
-            <HandleModelComponent
-              confirm={uploadModel}
-              uploading={uploading}
-              defaultMetadata={defaultMetadata}
-              progress={progress}
+        <Typography variant="h2" as="h1">
+          New model
+        </Typography>
+        <HandleModelComponent
+          confirm={uploadModel}
+          uploading={uploading}
+          defaultMetadata={defaultMetadata}
+          progress={progress}
+          isAddUploading={progress > 0}
+          modelId={modelId}
+        />
+        {modelId !== '' && (
+          <>
+            <ModelMetadataView
+              modelIdParent={modelId}
               isAddUploading={progress > 0}
-              modelId={modelId}
             />
-            {modelId !== '' && (
-              <>
-                <ModelMetadataView
-                  modelIdParent={modelId}
-                  isAddUploading={progress > 0}
-                />
-              </>
-            )}
-          </Styled.InnerContent>
-        </div>
+          </>
+        )}
       </Styled.Content>
 
       <Snackbar