Chore/app cleanup

src/components/ImageView/ImageView.styled.tsx

@@ -10,9 +10,9 @@ export const ImageWrapper = styled.div`
   border-style: solid;
   border-width: 1px;
   border-color: ${theme.light.ui.background.medium};
+  width: 100%;
 
-  max-width: 100%;
-
+  max-width: fit-content;
   height: fit-content;
 
   > h5 {

src/components/ImageView/ImageView.tsx

@@ -1,3 +1,4 @@
+import { Typography } from '@equinor/eds-core-react';
 import * as Styled from './ImageView.styled';
 
 export const ImageView = ({
@@ -12,7 +13,7 @@ export const ImageView = ({
   return (
     <Styled.ImageWrapper>
       <img className="image" alt={altText} src={img} />
-      <h5>{text}</h5>
+      <Typography variant="h5">{text}</Typography>
     </Styled.ImageWrapper>
   );
 };

src/features/AppBar/AppBar.styled.ts

@@ -5,4 +5,9 @@ import { spacings } from '../../tokens/spacings';
 const StyledTopBar = styled(TopBar)`
   column-gap: ${spacings.X_LARGE};
 `;
-export { StyledTopBar as TopBar };
+
+const StyledHeader = styled(TopBar.Header)`
+  cursor: pointer;
+`;
+
+export { StyledHeader as Header, StyledTopBar as TopBar };

src/features/AppBar/AppBar.tsx

@@ -1,12 +1,21 @@
 import { TopBar } from '@equinor/eds-core-react';
+import { useNavigate } from 'react-router-dom';
 import * as Styled from './AppBar.styled';
 import { Icons } from './Icons/Icons';
 import { Navigation } from './Navigation/Navigation';
 
 const AppBar = ({ title }: { title: string }) => {
+  const navigate = useNavigate();
+
   return (
     <Styled.TopBar>
-      <TopBar.Header>{title}</TopBar.Header>
+      <Styled.Header
+        onClick={() => {
+          navigate('');
+        }}
+      >
+        {title}
+      </Styled.Header>
       <Navigation />
       <TopBar.Actions>
         <Icons />

src/features/Compute/CaseGroup/CaseGroup.styled.tsx

@@ -1,23 +1,5 @@
 import styled from 'styled-components';
 import { spacings } from '../../../tokens/spacings';
-import { theme } from '../../../tokens/theme';
-
-export const Parameters = styled.div`
-  display: flex;
-  flex-direction: column;
-  row-gap: ${spacings.MEDIUM};
-
-  padding: ${spacings.LARGE};
-  background-color: ${theme.light.ui.background.light};
-  border-radius: 0 0 ${spacings.CARD_ROUNDED} 0;
-`;
-
-export const Wrapper = styled.div`
-  border-left: solid;
-  border-width: ${spacings.SMALL};
-  border-color: ${theme.light.primary.resting};
-  border-radius: ${spacings.BORDER_ROUNDED};
-`;
 
 export const CaseList = styled.div`
   display: flex;

src/features/ModelTable/ModelTable.tsx

@@ -29,7 +29,7 @@ export const ModelTable = ({
   if (token) OpenAPI.TOKEN = token;
   const navigate = useNavigate();
 
-  const [toggle, setToggle] = useState<boolean>(false);
+  const [open, setOpen] = useState<boolean>(false);
   const [activeModel, setActiveModel] = useState<string>();
   const { isLoading, data } = useQuery({
     queryKey: ['analogue-models'],
@@ -145,6 +145,7 @@ export const ModelTable = ({
             id: 'isProcessed',
             header: 'Status',
             enableColumnFilter: false,
+            size: 50,
             cell: ({ row }) => (
               <>
                 {isActiveModel(row.original.analogueModelId) ? (
@@ -173,8 +174,8 @@ export const ModelTable = ({
             id: 'navigate',
             enableColumnFilter: false,
             enableResizing: false,
+            maxSize: 220,
             size: 200,
-            minSize: 200,
             cell: ({ row }) => (
               <Styled.Buttons>
                 <Button
@@ -191,7 +192,7 @@ export const ModelTable = ({
                   disabled={isActiveModel(row.original.analogueModelId)}
                   onClick={() => {
                     setActiveModel(row.original.analogueModelId);
-                    setToggle(!toggle);
+                    setOpen(!open);
                   }}
                 >
                   Set Areas
@@ -201,13 +202,11 @@ export const ModelTable = ({
           },
         ]}
       />
-      {activeModel && (
-        <Scrim open={toggle}>
-          <SideSheet open={toggle} onClose={() => setToggle(!toggle)}>
-            <AreaCoordinates modelId={activeModel} />
-          </SideSheet>
-        </Scrim>
-      )}
+      <Scrim open={open} isDismissable>
+        <SideSheet onClose={() => setOpen(!open)}>
+          {activeModel && <AreaCoordinates modelId={activeModel} />}
+        </SideSheet>
+      </Scrim>
     </Styled.Table>
   );
 };

src/features/ModelView/ModelFilesView/ModelFilesView.styled.tsx

@@ -0,0 +1,21 @@
+import { Table } from '@equinor/eds-core-react';
+import styled from 'styled-components';
+import { spacings } from '../../../tokens/spacings';
+
+export const TableWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${spacings.LARGE};
+
+  width: 85%;
+`;
+
+export const FileTable = styled(Table)`
+  width: 100%;
+  min-width: 256px;
+`;
+
+export const TableCell = styled(Table.Cell)`
+  width: 80%;
+  padding-right: ${spacings.X_LARGE};
+`;

src/features/ModelView/ModelSourceView/ModelSourceView.tsx → src/features/ModelView/ModelFilesView/ModelFilesView.tsx

@@ -1,23 +1,20 @@
 import { Table, Typography } from '@equinor/eds-core-react';
 import { UploadList } from '../../../api/generated';
 import { useFetchModel } from '../../../hooks/useFetchModel';
-import * as Styled from './ModelSourceView.styled';
+import * as Styled from './ModelFilesView.styled';
 
-export const ModelSourceView = () => {
+export const ModelFilesView = () => {
   const { isLoading, data } = useFetchModel();
 
   if (isLoading || !data?.success) return <p>Loading ...</p>;
 
   return (
-    <Styled.FileTable>
-      <Typography variant="h3">Source</Typography>
-      <p>Uploaded by [email protected] on Sep 13, 2023</p>
-      <Table>
+    <Styled.TableWrapper>
+      <Typography variant="h3">Files</Typography>
+      <Styled.FileTable>
         <Table.Head>
           <Table.Row className="table-row">
-            <Table.Cell className="table-first-col">
-              Model input files
-            </Table.Cell>
+            <Styled.TableCell>Model input files</Styled.TableCell>
             <Table.Cell>Size</Table.Cell>
           </Table.Row>
         </Table.Head>
@@ -27,9 +24,7 @@ export const ModelSourceView = () => {
             data.data.fileUploads?.length > 0) ? (
             data.data.fileUploads?.map((file: UploadList) => (
               <Table.Row key={file.uploadId} className="table-row">
-                <Table.Cell className="table-first-col">
-                  {file.originalFileName}
-                </Table.Cell>
+                <Styled.TableCell>{file.originalFileName}</Styled.TableCell>
                 <Table.Cell>**Size**</Table.Cell>
               </Table.Row>
             ))
@@ -40,7 +35,7 @@ export const ModelSourceView = () => {
             </Table.Row>
           )}
         </Table.Body>
-      </Table>
-    </Styled.FileTable>
+      </Styled.FileTable>
+    </Styled.TableWrapper>
   );
 };

src/features/ModelView/ModelMetadataView/ModelMetadataView.styled.tsx

@@ -1,34 +1,35 @@
+import { Table } from '@equinor/eds-core-react';
 import styled from 'styled-components';
 import { spacings } from '../../../tokens/spacings';
 
 export const Metadata = styled.div`
-  width: 100%;
-  min-width: 256px;
+  display: flex;
+  flex-direction: column;
+  row-gap: ${spacings.LARGE};
+
+  > button {
+    width: fit-content;
+  }
 `;
-export const MetadataTable = styled.div`
-  width: 100%;
-  min-width: 256px;
 
-  > table {
-    width: 85%;
+const DataTable = styled(Table)`
+  min-width: 256px;
+  width: 85%;
+`;
 
-    > tbody {
-      > tr {
-        > .table-first-col {
-          width: 20%;
-          padding-right: ${spacings.X_LARGE};
-        }
+export const NameCell = styled(Table.Cell)`
+  width: 20%;
+  padding-right: ${spacings.X_LARGE};
+`;
 
-        > .table-second-col {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
+export const DataCell = styled(Table.Cell)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 
-          > p {
-            padding-right: 10px;
-          }
-        }
-      }
-    }
+  > p {
+    padding-right: 10px;
   }
 `;
+
+export { DataTable as Table };

src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx

@@ -149,28 +149,26 @@ export const ModelMetadataView = () => {
     <Styled.Metadata>
       <Typography variant="h3">Description and metadata</Typography>
       {data.data.description && <div>{data.data.description}</div>}
-      <Styled.MetadataTable>
-        <Table>
-          <Table.Body>
-            <Table.Row>
-              <Table.Cell className="table-first-col">Field</Table.Cell>
-              <TableDataCell data={data.data} type="Field" />
-            </Table.Row>
-            <Table.Row>
-              <Table.Cell className="table-first-col">Fomation</Table.Cell>
-              <TableDataCell data={data.data} type="Formation" />
-            </Table.Row>
-            <Table.Row>
-              <Table.Cell className="table-first-col">Analouge</Table.Cell>
-              <TableDataCell data={data.data} type="Analouge" />
-            </Table.Row>
-            <Table.Row>
-              <Table.Cell className="table-first-col">Zone</Table.Cell>
-              <TableDataCell data={data.data} type="Zone" />
-            </Table.Row>
-          </Table.Body>
-        </Table>
-      </Styled.MetadataTable>
+      <Styled.Table>
+        <Table.Body>
+          <Table.Row>
+            <Styled.NameCell>Field</Styled.NameCell>
+            <TableDataCell data={data.data} type="Field" />
+          </Table.Row>
+          <Table.Row>
+            <Styled.NameCell>Fomation</Styled.NameCell>
+            <TableDataCell data={data.data} type="Formation" />
+          </Table.Row>
+          <Table.Row>
+            <Styled.NameCell>Analouge</Styled.NameCell>
+            <TableDataCell data={data.data} type="Analouge" />
+          </Table.Row>
+          <Table.Row>
+            <Styled.NameCell>Zone</Styled.NameCell>
+            <TableDataCell data={data.data} type="Zone" />
+          </Table.Row>
+        </Table.Body>
+      </Styled.Table>
 
       <Button
         onClick={toggleDialog}

src/features/ModelView/ModelView.styled.tsx

@@ -19,32 +19,5 @@ export const InnerMetadataWrapper = styled.div`
   display: flex;
   flex-direction: column;
   row-gap: ${spacings.XXX_LARGE};
-  width: 80%;
-
-  .edit-metadata-button {
-    margin-top: ${spacings.MEDIUM_SMALL};
-  }
-
-  .source-view {
-    width: 100%;
-    min-width: 256px;
-    max-width: 100%;
-
-    > table {
-      width: 85%;
-
-      > thead,
-      tbody {
-        > tr {
-          > .table-row {
-          }
-
-          > .table-first-col {
-            width: 80%;
-            padding-right: ${spacings.X_LARGE};
-          }
-        }
-      }
-    }
-  }
+  width: 50vw;
 `;

src/features/ModelView/ModelView.tsx

@@ -1,6 +1,6 @@
 import { ImageView } from '../../components/ImageView/ImageView';
 import { ModelMetadataView } from '../../features/ModelView/ModelMetadataView/ModelMetadataView';
-import { ModelSourceView } from '../../features/ModelView/ModelSourceView/ModelSourceView';
+import { ModelFilesView } from './ModelFilesView/ModelFilesView';
 import * as Styled from './ModelView.styled';
 import Img from './image.png';
 
@@ -9,7 +9,7 @@ export const ModelView = () => {
     <Styled.MetadataWrapper>
       <Styled.InnerMetadataWrapper>
         <ModelMetadataView />
-        <ModelSourceView />
+        <ModelFilesView />
       </Styled.InnerMetadataWrapper>
       <ImageView
         text="Model placeholder image"