Feat/footer (#100)

* chore: Max 15 rows each page

* chore: Add xxxx_l spacing

* feat: Add footer to app

* chore: Add api page component

* style: Add outlet wrapper

* style: fixed height for footer

* chore: fixed naming of prop

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 }

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() {
         <AppBar title="PEPM" />
         <p>Authenticated</p>
         <button onClick={() => instance.logoutRedirect()}>Log out</button>
-        <Outlet />
+        <Styled.OutletWrapper>
+          <Outlet />
+        </Styled.OutletWrapper>
+        <Footer text="All information is proprietary of Equinor © 2023 Equinor ASA" />
       </AuthenticatedTemplate>
       <UnauthenticatedTemplate>
         <p>Not authenticated</p>

src/components/Table.styled.ts

@@ -8,7 +8,6 @@ export const StyledDiv = styled.div`
   > .table-wrapper {
     > table {
       width: auto !important;
-      margin: 0px !important;
     }
 
     > div {

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',

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 }

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 (
+    <Styled.Footer>
+      <Typography>{text}</Typography>
+      <img className="footer-img" src={logo} alt="Equinor Logo" />
+    </Styled.Footer>
+  )
+}

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;
-}
+  font-family: 'Equinor Mono', source-code-pro, Menlo, Monaco, Consolas,
+    'Courier New', monospace;
+}

src/pages/Api/Api.tsx

@@ -0,0 +1,9 @@
+import { Typography } from '@equinor/eds-core-react'
+
+export const Api = () => {
+  return (
+    <>
+      <Typography> Api to come her soon! </Typography>
+    </>
+  )
+}

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: <Browse />,
   },
-  { title: 'API', path: 'api', element: <NotImplemented /> },
+  { title: 'API', path: 'api', element: <Api /> },
   { title: 'About', path: 'about', element: <NotImplemented /> },
 ]
 const appRoutes = (tabs as NonIndexRouteObject[]).concat([

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',
 }