diff --git a/src/App.styled.tsx b/src/App.styled.tsx
new file mode 100644
index 00000000..f1a830e5
--- /dev/null
+++ b/src/App.styled.tsx
@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+const StyledOutletWrapper = styled.section`
+ height: calc(100% - 200px);
+ overflow: scroll;
+`
+export { StyledOutletWrapper as OutletWrapper }
diff --git a/src/App.tsx b/src/App.tsx
index 6a915217..9ebcfe35 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,7 +4,9 @@ import {
useMsal,
} from '@azure/msal-react'
import { Outlet } from 'react-router-dom'
+import * as Styled from './App.styled'
import AppBar from './features/AppBar/AppBar'
+import { Footer } from './features/Footer/Footer'
export function App() {
const { instance } = useMsal()
@@ -15,7 +17,10 @@ export function App() {
Authenticated
-
+
+
+
+
Not authenticated
diff --git a/src/components/Table.styled.ts b/src/components/Table.styled.ts
index 919467d1..3bf24e8b 100644
--- a/src/components/Table.styled.ts
+++ b/src/components/Table.styled.ts
@@ -8,7 +8,6 @@ export const StyledDiv = styled.div`
> .table-wrapper {
> table {
width: auto !important;
- margin: 0px !important;
}
> div {
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index 08df7d10..a40ba3f4 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -1,7 +1,7 @@
import { Chip } from '@equinor/eds-core-react'
import { EdsDataGrid } from '@equinor/eds-data-grid-react'
-import * as Styled from './Table.styled'
import { useAnalogueModels } from '../hooks/useAnalogueModels'
+import * as Styled from './Table.styled'
export const Table = () => {
const { models } = useAnalogueModels()
@@ -15,6 +15,7 @@ export const Table = () => {
enablePagination
emptyMessage="Empty :("
rows={models.data.data}
+ pageSize={15}
columns={[
{
accessorKey: 'analogueModelId',
diff --git a/src/features/Footer/Equinor_HORIZ_logo_RGB_RED.png b/src/features/Footer/Equinor_HORIZ_logo_RGB_RED.png
new file mode 100644
index 00000000..347bf3c8
Binary files /dev/null and b/src/features/Footer/Equinor_HORIZ_logo_RGB_RED.png differ
diff --git a/src/features/Footer/Footer.styled.tsx b/src/features/Footer/Footer.styled.tsx
new file mode 100644
index 00000000..0657090f
--- /dev/null
+++ b/src/features/Footer/Footer.styled.tsx
@@ -0,0 +1,25 @@
+import styled from 'styled-components'
+import { spacings } from '../../tokens/spacings'
+import { theme } from '../../tokens/theme'
+
+const StyledFooter = styled.footer`
+ height: ${spacings.XXXX_LARGE};
+
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ border-top: 1px solid ${theme.light.ui.background.medium};
+
+ padding: ${spacings.SMALL} ${spacings.LARGE};
+
+ position: fixed;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+
+ > .footer-img {
+ height: ${spacings.XXX_LARGE};
+ }
+`
+export { StyledFooter as Footer }
diff --git a/src/features/Footer/Footer.tsx b/src/features/Footer/Footer.tsx
new file mode 100644
index 00000000..927e0607
--- /dev/null
+++ b/src/features/Footer/Footer.tsx
@@ -0,0 +1,13 @@
+import { Typography } from '@equinor/eds-core-react'
+
+import logo from './Equinor_HORIZ_logo_RGB_RED.png'
+import * as Styled from './Footer.styled'
+
+export const Footer = ({ text }: { text: string }) => {
+ return (
+
+ {text}
+ 
+
+ )
+}
diff --git a/src/index.css b/src/index.css
index 01c63cb9..556f292f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,6 +13,11 @@ body {
box-sizing: inherit;
}
+#root {
+ height: 100vh;
+}
+
code {
- font-family: 'Equinor Mono', source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
-}
\ No newline at end of file
+ font-family: 'Equinor Mono', source-code-pro, Menlo, Monaco, Consolas,
+ 'Courier New', monospace;
+}
diff --git a/src/pages/Api/Api.tsx b/src/pages/Api/Api.tsx
new file mode 100644
index 00000000..d7ca9f34
--- /dev/null
+++ b/src/pages/Api/Api.tsx
@@ -0,0 +1,9 @@
+import { Typography } from '@equinor/eds-core-react'
+
+export const Api = () => {
+ return (
+ <>
+ Api to come her soon!
+
+ )
+}
diff --git a/src/router.tsx b/src/router.tsx
index b6681935..fd0da893 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -1,6 +1,7 @@
import { createBrowserRouter, NonIndexRouteObject } from 'react-router-dom'
import { App } from './App'
import { ModelView } from './features/ModelView/ModelView'
+import { Api } from './pages/Api/Api'
import { Browse } from './pages/Browse/Browse'
import { Compute } from './pages/ModelPages/Compute/Compute'
import { Model } from './pages/ModelPages/Model/Model'
@@ -18,7 +19,7 @@ const tabs: Tab[] = [
path: 'models',
element: ,
},
- { title: 'API', path: 'api', element: },
+ { title: 'API', path: 'api', element: },
{ title: 'About', path: 'about', element: },
]
const appRoutes = (tabs as NonIndexRouteObject[]).concat([
diff --git a/src/tokens/spacings.ts b/src/tokens/spacings.ts
index 69a51596..b72c5cf4 100644
--- a/src/tokens/spacings.ts
+++ b/src/tokens/spacings.ts
@@ -3,13 +3,24 @@ import { tokens } from '@equinor/eds-tokens'
const comfortable = tokens.spacings.comfortable
export const spacings = {
- XX_SMALL: comfortable.xx_small /* 2px */,
- X_SMALL: comfortable.x_small /* 4px */,
- SMALL: comfortable.small /* 8px */,
- MEDIUM_SMALL: comfortable.medium_small /* 12px */,
- MEDIUM: comfortable.medium /* 16px */,
- LARGE: comfortable.large /* 24px */,
- X_LARGE: comfortable.x_large /* 32px */,
- XX_LARGE: comfortable.xx_large /* 40px */,
- XXX_LARGE: comfortable.xxx_large /* 48px */,
+ /** 2px */
+ XX_SMALL: comfortable.xx_small,
+ /** 4px */
+ X_SMALL: comfortable.x_small,
+ /** 8px */
+ SMALL: comfortable.small,
+ /** 12px */
+ MEDIUM_SMALL: comfortable.medium_small,
+ /** 16px */
+ MEDIUM: comfortable.medium,
+ /** 24px */
+ LARGE: comfortable.large,
+ /** 32px */
+ X_LARGE: comfortable.x_large,
+ /** 40px */
+ XX_LARGE: comfortable.xx_large,
+ /** 48px */
+ XXX_LARGE: comfortable.xxx_large,
+ /** 64px */
+ XXXX_LARGE: '64px',
}