chore: refactor model page styles and micro copy (#324)

* chore: refactor model page styles and microcopy * Fix heading levels and nesting * Add custom styles for loading and error state on the model page * Add conditional rendering of metadata tables * Clean up model upload page * Fix alignment on upload page * Backtrack previously deleted validation rules in upload form * Remove unused heading * Remove uploading status from snackbar (replaced by static message) and reset to default duration * chore: Small pr changes. --------- Co-authored-by: mheggelund <[email protected]>
equinor · Oct 3, 2024 · 2631e27 · 2631e27
1 parent 564fcb5
commit 2631e27
Show file tree

Hide file tree

Showing 37 changed files with 466 additions and 465 deletions.
diff --git a/src/components/AreaCoordinates/AreaCoordinates.styled.tsx b/src/components/AreaCoordinates/AreaCoordinates.styled.tsx
@@ -5,13 +5,7 @@ import { theme } from '../../tokens/theme';
 
 export const StyledDialog = styled(Dialog)`
   width: fit-content;
-  max-width: 90vw;
   max-height: 90vh;
-
-  @media (min-width: 700px) {
-    max-height: 90vh;
-    overflow-x: scroll;
-  }
 `;
 
 export const ContentSplitter = styled.div`
@@ -23,32 +17,41 @@ export const ContentSplitter = styled.div`
 export const Selects = styled.div`
   display: flex;
   flex-direction: column;
-
   row-gap: ${spacings.XXX_LARGE};
-
-  @media (min-width: 750px) {
-    min-width: 450px;
-  }
+  width: 28rem;
 `;
 
 export const CoordinateFields = styled.div`
   display: flex;
   flex-direction: column;
-
   row-gap: ${spacings.LARGE};
 `;
 
 export const Content = styled(Dialog.CustomContent)`
   display: flex;
   flex-direction: column;
   justify-content: start;
-
   row-gap: ${spacings.SMALL};
+
+  .coordinate-errors {
+    padding: 0;
+    margin: 0 0 0 ${spacings.LARGE};
+
+    p,
+    li {
+      color: ${theme.light.danger.text};
+    }
+
+    li:has(p:empty) {
+      display: none;
+    }
+  }
 `;
 
 export const CoordinateGroup = styled.div`
   display: flex;
   flex-direction: column;
+  row-gap: 1rem;
 `;
 
 export const CoordinateInputs = styled.div`
@@ -60,14 +63,13 @@ export const CoordinateInputs = styled.div`
 export const Warning = styled(Banner)`
   div {
     background-color: ${theme.light.info.warning};
-    max-width: 450px;
   }
 `;
 
 export const Buttons = styled.div`
   display: flex;
   flex-direction: row;
-  column-gap: ${spacings.MEDIUM};
+  column-gap: ${spacings.SMALL};
 `;
 
 export { StyledDialog as Dialog };
diff --git a/src/components/AreaCoordinates/AreaCoordinates.tsx b/src/components/AreaCoordinates/AreaCoordinates.tsx
@@ -313,7 +313,7 @@ export const AreaCoordinates = ({
                 </Styled.CoordinateInputs>
               </Styled.CoordinateGroup>
               <Styled.CoordinateGroup>
-                <Typography variant="h6">Bottom Right Corner </Typography>
+                <Typography variant="h6">Bottom Right Corner</Typography>
                 <Styled.CoordinateInputs>
                   <CoordinateInput
                     label="X end"
@@ -340,7 +340,7 @@ export const AreaCoordinates = ({
               {activeAreaResultList &&
                 activeAreaResultList?.length > 0 &&
                 edit && (
-                  <Styled.Warning elevation="none">
+                  <Styled.Warning>
                     <Banner.Message>
                       IMPORTANT - this model area has one or more results in
                       object or variogram cases. Changing the coordinates will

diff --git a/src/components/AreaCoordinates/hooks/AreaCoordinates.hooks.ts b/src/components/AreaCoordinates/hooks/AreaCoordinates.hooks.ts
@@ -19,29 +19,29 @@ export const validateCoordinates = async (
 ) => {
   const errors: CoordinateErrorType = {};
   if (!activeArea || activeArea.modelAreaTypeId === '') {
-    errors.area = 'Model area needs to be selected';
+    errors.area = 'You must select a model area';
   }
 
   if (area && area.coordinates[0].x === area.coordinates[1].x) {
-    errors.x0 = 'X coordinates can´t be equal.';
+    errors.x0 = "X start/end coordinates can't be equal.";
   }
   if (area && area.coordinates[0].y === area.coordinates[1].y) {
-    errors.y0 = 'Y coordinates can´t be equal.';
+    errors.y0 = "Y start/end coordinates can't be equal.";
   }
   if (area && NotANumber(area.coordinates[0].x)) {
-    errors.x0 = 'Coordinates can´t be string, just numbers are allowed.';
+    errors.x0 = 'Coordinates must be a number';
   }
   if (area && NotANumber(area.coordinates[0].y)) {
-    errors.y0 = 'Coordinates can´t be string, just numbers are allowed.';
+    errors.y0 = 'Coordinates must be a number';
   }
   if (area && NotANumber(area.coordinates[1].x)) {
-    errors.x1 = 'Coordinates can´t be string, just numbers are allowed.';
+    errors.x1 = 'Coordinates must be a number';
   }
   if (area && NotANumber(area.coordinates[1].y)) {
-    errors.y1 = 'Coordinates can´t be string, just numbers are allowed.';
+    errors.y1 = 'Coordinates must be a number';
   }
   if (area && area.coordinates[1].x === 0) {
-    errors.x1 = 'Bottom right corner can not be 0.';
+    errors.x1 = 'Bottom right corner must be greater than 0';
   }
 
   if (
@@ -51,7 +51,7 @@ export const validateCoordinates = async (
       // @ts-expect-error Autocomplete
       area.coordinates[0].x === '')
   ) {
-    errors.x0 = 'All fields must be filled in';
+    errors.x0 = 'You must enter all four coordinates';
   }
 
   if (
@@ -61,7 +61,7 @@ export const validateCoordinates = async (
       // @ts-expect-error Autocomplete
       area.coordinates[0].y === '')
   ) {
-    errors.y0 = 'All fields must be filled in';
+    errors.y0 = 'You must enter all four coordinates';
   }
 
   if (
@@ -71,7 +71,7 @@ export const validateCoordinates = async (
       // @ts-expect-error Autocomplete
       area.coordinates[1].x === '')
   ) {
-    errors.x1 = 'All fields must be filled in';
+    errors.x1 = 'You must enter all four coordinates';
   }
 
   if (
@@ -81,7 +81,7 @@ export const validateCoordinates = async (
       // @ts-expect-error Autocomplete
       area.coordinates[1].y === '')
   ) {
-    errors.y1 = 'All fields must be filled in';
+    errors.y1 = 'You must enter all four coordinates';
   }
 
   return errors;

diff --git a/src/components/ErrorBanner/ErrorBanner.styled.tsx b/src/components/ErrorBanner/ErrorBanner.styled.tsx
diff --git a/src/components/ErrorBanner/ErrorBanner.tsx b/src/components/ErrorBanner/ErrorBanner.tsx
diff --git a/src/components/ErrorMessage/ErrorMessage.tsx b/src/components/ErrorMessage/ErrorMessage.tsx
@@ -1,17 +1,38 @@
+import { Typography } from '@equinor/eds-core-react';
 import { CoordinateErrorType } from '../AreaCoordinates/hooks/AreaCoordinates.hooks';
 
 export const ErrorMessage = ({ errors }: { errors: CoordinateErrorType }) => {
   return (
     <>
-      {errors && (
-        <div>
-          {' '}
-          <p>{errors.area}</p>
-          <p>{errors.x0}</p>
-          <p>{errors.y0}</p>
-          <p>{errors.x1}</p>
-          <p>{errors.y1}</p>
-        </div>
+      {/* Only render the <ul> wrapper if there are one or more errors */}
+      {Object.values(errors).some((error) => !!error) && (
+        <ul className="coordinate-errors">
+          <li>
+            <Typography group="input" variant="helper">
+              {errors.area}
+            </Typography>
+          </li>
+          <li>
+            <Typography group="input" variant="helper">
+              {errors.x0}
+            </Typography>
+          </li>
+          <li>
+            <Typography group="input" variant="helper">
+              {errors.y0}
+            </Typography>
+          </li>
+          <li>
+            <Typography group="input" variant="helper">
+              {errors.x1}
+            </Typography>
+          </li>
+          <li>
+            <Typography group="input" variant="helper">
+              {errors.y1}
+            </Typography>
+          </li>
+        </ul>
       )}
     </>
   );

diff --git a/...ositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.styled.ts b/...ositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.styled.ts
@@ -3,16 +3,14 @@ import { spacings } from '../../../tokens/spacings';
 export const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
-
   row-gap: ${spacings.MEDIUM};
-`;
 
-export const ArcElCell = styled.div`
-  display: flex;
-  flex-direction: row;
-  white-space: nowrap;
+  th,
+  td {
+    white-space: nowrap;
+  }
 
-  > p {
-    padding-right: ${spacings.X_SMALL};
+  ul {
+    padding-inline: ${spacings.MEDIUM} 0;
   }
 `;
diff --git a/...ossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx b/...ossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx
@@ -106,57 +106,55 @@ export const GrossDepositionEnviromentGroup = ({
   return (
     <>
       <Styled.Wrapper>
-        <Typography variant="h3">Gross Depositional Environment</Typography>
-        <Table>
-          <Table.Head>
-            <Table.Row>
-              <Table.Cell></Table.Cell>
-              <Table.Cell>Gross Depositional Environment (GDE)</Table.Cell>
-              <Table.Cell>Depositional Environment</Table.Cell>
-              <Table.Cell>Subenvironment</Table.Cell>
-              <Table.Cell>Architectural Element</Table.Cell>
-            </Table.Row>
-          </Table.Head>
-
-          <Table.Body>
-            {gdeGroups.map((row) => (
-              <Table.Row key={row.geologicalGroupId}>
-                <Table.Cell>
-                  <Button
-                    variant="ghost_icon"
-                    onClick={() => deleteGdeRow(row.geologicalGroupId)}
-                  >
-                    <Icon
-                      data={deleteIcon}
-                      title={'Delete gross deposition enviroment row'}
-                    />
-                  </Button>
-                </Table.Cell>
-                <Table.Cell>
-                  <Styled.ArcElCell>
-                    {row.grossDepEnv.identifier}
-                  </Styled.ArcElCell>
-                </Table.Cell>
-                <Table.Cell>
-                  <Styled.ArcElCell>{row.depEnv.identifier}</Styled.ArcElCell>
-                </Table.Cell>
-                <Table.Cell>
-                  <Styled.ArcElCell>{row.subenv.identifier}</Styled.ArcElCell>
-                </Table.Cell>
-                <Table.Cell>
-                  <Styled.ArcElCell>
-                    {row.architecturalElements.map((a) => (
-                      <p key={a.geologicalStandardId}>{a.identifier},</p>
-                    ))}
-                  </Styled.ArcElCell>
-                </Table.Cell>
+        <Typography variant="h4" as="h3">
+          Gross Depositional Environment (GDE)
+        </Typography>
+        {gdeGroups.length > 0 && (
+          <Table>
+            <Table.Head>
+              <Table.Row>
+                <Table.Cell></Table.Cell>
+                <Table.Cell>GDE</Table.Cell>
+                <Table.Cell>Depositional environment</Table.Cell>
+                <Table.Cell>Subenvironment</Table.Cell>
+                <Table.Cell>Architectural element</Table.Cell>
               </Table.Row>
-            ))}
-          </Table.Body>
-        </Table>
+            </Table.Head>
+
+            <Table.Body>
+              {gdeGroups.map((row) => (
+                <Table.Row key={row.geologicalGroupId}>
+                  <Table.Cell>
+                    <Button
+                      variant="ghost_icon"
+                      onClick={() => deleteGdeRow(row.geologicalGroupId)}
+                    >
+                      <Icon
+                        data={deleteIcon}
+                        title={'Delete gross deposition enviroment row'}
+                      />
+                    </Button>
+                  </Table.Cell>
+                  <Table.Cell>{row.grossDepEnv.identifier}</Table.Cell>
+                  <Table.Cell>{row.depEnv.identifier}</Table.Cell>
+                  <Table.Cell>{row.subenv.identifier}</Table.Cell>
+                  <Table.Cell>
+                    {row.architecturalElements.length > 0 && (
+                      <ul>
+                        {row.architecturalElements.map((a) => (
+                          <li key={a.geologicalStandardId}>{a.identifier}</li>
+                        ))}
+                      </ul>
+                    )}
+                  </Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table>
+        )}
         <div>
           <Button variant="outlined" onClick={handleGdeDialog}>
-            Add Row
+            Add GDE…
           </Button>
         </div>
       </Styled.Wrapper>