From 8ede3edabc46ccbd57614e0efc4e8bc3f9f0c4dc Mon Sep 17 00:00:00 2001
From: mheggelund <maohe@equinor.com>
Date: Fri, 22 Sep 2023 12:43:46 +0200
Subject: [PATCH] style: Updated styling of Browse models

---
 src/App.styled.tsx                 |  2 +-
 src/components/Table.styled.ts     |  4 ----
 src/components/Table.tsx           |  2 +-
 src/pages/Browse/Browse.styled.tsx | 18 ++++++++++++++++++
 src/pages/Browse/Browse.tsx        | 20 ++++++++++++--------
 5 files changed, 32 insertions(+), 14 deletions(-)
 create mode 100644 src/pages/Browse/Browse.styled.tsx

diff --git a/src/App.styled.tsx b/src/App.styled.tsx
index f1a830e5..fc9d37ba 100644
--- a/src/App.styled.tsx
+++ b/src/App.styled.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 const StyledOutletWrapper = styled.section`
-  height: calc(100% - 200px);
+  height: calc(100% - 128px);
   overflow: scroll;
 `
 export { StyledOutletWrapper as OutletWrapper }
diff --git a/src/components/Table.styled.ts b/src/components/Table.styled.ts
index 3bf24e8b..6ed1d229 100644
--- a/src/components/Table.styled.ts
+++ b/src/components/Table.styled.ts
@@ -9,9 +9,5 @@ export const StyledDiv = styled.div`
     > table {
       width: auto !important;
     }
-
-    > div {
-      max-width: none !important;
-    }
   }
 `
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index a40ba3f4..ed8382d9 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -15,7 +15,7 @@ export const Table = () => {
         enablePagination
         emptyMessage="Empty :("
         rows={models.data.data}
-        pageSize={15}
+        pageSize={5}
         columns={[
           {
             accessorKey: 'analogueModelId',
diff --git a/src/pages/Browse/Browse.styled.tsx b/src/pages/Browse/Browse.styled.tsx
new file mode 100644
index 00000000..e689a410
--- /dev/null
+++ b/src/pages/Browse/Browse.styled.tsx
@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+import { spacings } from '../../tokens/spacings'
+
+export const BrowseWrapper = styled.div`
+  column-gap: ${spacings.X_LARGE};
+  padding: ${spacings.XXX_LARGE} ${spacings.X_LARGE};
+
+  display: flex;
+  flex-direction: column;
+  row-gap: ${spacings.X_LARGE};
+
+  > .btn-div {
+    > button {
+      width: 136px;
+      margin-right: 50px;
+    }
+  }
+`
diff --git a/src/pages/Browse/Browse.tsx b/src/pages/Browse/Browse.tsx
index 1d734aa7..15bd5faa 100644
--- a/src/pages/Browse/Browse.tsx
+++ b/src/pages/Browse/Browse.tsx
@@ -1,8 +1,9 @@
-import { Button, Snackbar } from '@equinor/eds-core-react'
+import { Button, Snackbar, Typography } from '@equinor/eds-core-react'
 import { useState } from 'react'
 import { Table } from '../../components/Table'
 import { AddModelDialog } from '../../features/AddModelDialog/AddModelDialog'
 import { useAnalogueModels } from '../../hooks/useAnalogueModels'
+import * as Styled from './Browse.styled'
 
 enum UploadProcess {
   STARTED = 'We are uploading your new model. Please keep this browser tab open.',
@@ -51,13 +52,16 @@ export const Browse = () => {
 
   return (
     <>
-      <div>
-        <Button href="/model/bf2171bc-2f5e-44a1-f6e0-08dbb5ed15e2/details">
-          model
-        </Button>
-      </div>
-      <Button onClick={toggleDialog}>Add new model</Button>
-      <Table />
+      <Styled.BrowseWrapper>
+        <Typography variant="h1">Browse all models</Typography>
+        <div className="btn-div">
+          <Button onClick={toggleDialog}>Add new model</Button>
+          <Button href="/model/bf2171bc-2f5e-44a1-f6e0-08dbb5ed15e2/details">
+            Model view - Hardkodet
+          </Button>
+        </div>
+        <Table />
+      </Styled.BrowseWrapper>
       <AddModelDialog
         isOpen={isAddModelDialog}
         confirm={uploadModel}