chore: refactor model page styles and microcopy

equinor · Sep 19, 2024 · 579b039 · 579b039
1 parent 7fb1af1
commit 579b039
Show file tree

Hide file tree

Showing 30 changed files with 261 additions and 362 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,15 +106,17 @@ export const GrossDepositionEnviromentGroup = ({
   return (
     <>
       <Styled.Wrapper>
-        <Typography variant="h3">Gross Depositional Environment</Typography>
+        <Typography variant="h4">
+          Gross Depositional Environment (GDE)
+        </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>GDE</Table.Cell>
+              <Table.Cell>Depositional environment</Table.Cell>
               <Table.Cell>Subenvironment</Table.Cell>
-              <Table.Cell>Architectural Element</Table.Cell>
+              <Table.Cell>Architectural element</Table.Cell>
             </Table.Row>
           </Table.Head>
 
@@ -132,31 +134,25 @@ export const GrossDepositionEnviromentGroup = ({
                     />
                   </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>
-                  <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>
+                  {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>