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 ( <> -
- -
- - + + Browse all models +
+ + +
+
+