Page layout

ui/src/App.tsx

@@ -14,13 +14,16 @@
  * limitations under the License.
  */
 import { MantineProvider } from '@mantine/core';
-import { DatasetTable } from './components/DatasetTable/DatasetTable';
 import { theme } from './common/styling/theme';
+import { DatasetTable } from './components/DatasetTable/DatasetTable';
+import { PageContainer } from './common/components/PageContainer/PageContainer';
 
 export function App() {
   return (
     <MantineProvider theme={theme}>
-      <DatasetTable />
+      <PageContainer>
+        <DatasetTable />
+      </PageContainer>
     </MantineProvider>
   );
 }

ui/src/common/components/Breadcrumbs/Breadcrumbs.module.scss

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2024 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.container {
+  height: 40px;
+  padding: 8px 12px;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.active {
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 24px;
+  color: var(--color-text-primary);
+}
+
+.link {
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 24px;
+  color: #64707d;
+
+  &:hover {
+    text-decoration: none;
+  }
+}

ui/src/common/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,63 @@
+/*
+ * Copyright 2024 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Anchor, Breadcrumbs as MantineBreadcrumbs, ThemeIcon } from '@mantine/core';
+import { IconChevronRight, IconHome } from '@tabler/icons-react';
+import classes from './Breadcrumbs.module.scss';
+
+interface Breadcrumb {
+  title: string;
+  path: string;
+}
+
+interface BreadcrumbsProps {
+  items: Breadcrumb[];
+}
+
+export function Breadcrumbs({ items }: BreadcrumbsProps) {
+  return (
+    <div className={classes.container}>
+      <ThemeIcon
+        variant="white"
+        color="primary"
+      >
+        <IconHome />
+      </ThemeIcon>
+      <MantineBreadcrumbs
+        separator={<IconChevronRight size={18} />}
+        separatorMargin={4}
+      >
+        {items.map((item, index) => {
+          return index === items.length - 1 ? (
+            <div
+              className={classes.active}
+              id={item.path}
+            >
+              {item.title}
+            </div>
+          ) : (
+            <Anchor
+              className={classes.link}
+              href={item.path}
+              id={item.path}
+            >
+              {item.title}
+            </Anchor>
+          );
+        })}
+      </MantineBreadcrumbs>
+    </div>
+  );
+}

ui/src/common/components/DataTable/DataTable.module.scss

@@ -25,17 +25,17 @@
 }
 
 .table {
-  --mrt-row-hover-background-color: #f8f8f8;
+  --mrt-row-hover-background-color: var(--color-background-main);
 }
 
 .headerCell {
   padding: 16px 6px;
   font-weight: 600;
   line-height: 16.8px;
-  color: #40474f;
+  color: var(--color-text-secondary-2);
 }
 
 .bodyCell {
   padding: 16px 6px;
-  color: #637d92;
+  color: var(--color-text-secondary-2);
 }

ui/src/common/components/PageContainer/PageContainer.module.scss

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2024 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 20px;
+  border-color: var(--color-background-gray);
+}
+
+.main {
+  min-width: 1280px;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--color-text-secondary-2);
+}
+
+.userDetails {
+  color: var(--color-text-primary);
+  font-size: 14px;
+  line-height: 20px;
+}

ui/src/common/components/PageContainer/PageContainer.tsx

@@ -0,0 +1,67 @@
+/*
+ * Copyright 2024 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { PropsWithChildren } from 'react';
+import { AppShell, Avatar, Group } from '@mantine/core';
+import classes from './PageContainer.module.scss';
+import ORDLogo from '../../../assets/ORD_logo.png';
+import { Breadcrumbs } from '../Breadcrumbs/Breadcrumbs';
+
+export function PageContainer({ children }: PropsWithChildren) {
+  return (
+    <AppShell
+      header={{ height: 40 }}
+      footer={{ height: 48 }}
+      classNames={{
+        header: classes.header,
+        main: classes.main,
+        footer: classes.footer,
+      }}
+    >
+      <AppShell.Header>
+        <img
+          src={ORDLogo}
+          width="54"
+          height="24"
+          alt="Open Reaction Database logo"
+        />
+
+        {/* TODO: Replace with user details component */}
+        <Group
+          gap="4px"
+          className={classes.userDetails}
+        >
+          <Avatar
+            src={null}
+            size="sm"
+          />
+          John Doe
+        </Group>
+      </AppShell.Header>
+
+      <AppShell.Main>
+        <Breadcrumbs
+          items={[
+            { title: 'Contribute', path: '/contribute' },
+            { title: 'Enumerate', path: '/contribure/enumerate' },
+          ]}
+        />
+        {children}
+      </AppShell.Main>
+
+      <AppShell.Footer withBorder={false}>© Copyright 2024 Open Reaction Database</AppShell.Footer>
+    </AppShell>
+  );
+}

ui/src/common/components/Pagination/Pagination.module.scss

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 .controlButton {
-  color: #090a0b;
+  color: var(--color-text-primary);
 
   &:disabled {
     background-color: transparent;
@@ -23,13 +23,13 @@
 }
 
 .paginationRoot {
-  --pagination-active-bg: #e8ebed;
+  --pagination-active-bg: var(--color-background-gray);
   --pagination-control-radius: 4px;
 
   button {
     font-size: 14px;
     border: none;
-    color: #090a0b;
+    color: var(--color-text-primary);
   }
 }
 

ui/src/common/styling/theme.ts

@@ -18,50 +18,9 @@ import { colorsTuple, createTheme } from '@mantine/core';
 export const theme = createTheme({
   fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
   colors: {
-    primary: [
-      '#D9F1FD',
-      '#A9DCF7',
-      '#7ECEF8',
-      '#53BDF5',
-      '#1AA6F1',
-      '#0083C9',
-      '#006296',
-      '#013958',
-      '#012436',
-      '#001926',
-    ],
-    secondary: [
-      '#E7EBEF',
-      '#DAE1E7',
-      '#CED7DE',
-      '#C2CDD6',
-      '#B6C3CD',
-      '#92A5B5',
-      '#7991A4',
-      '#637D92',
-      '#4A5E6D',
-      '#323F49',
-    ],
-    neutral: [
-      '#E8EBED',
-      '#D2D6DB',
-      '#BBC2C9',
-      '#A4ADB6',
-      '#828F9B',
-      '#64707D',
-      '#40474F',
-      '#2D3339',
-      '#2B2829',
-      '#121417',
-    ],
-    success: colorsTuple('#A4F4E7'),
-    warning: colorsTuple('#F4C790'),
-    error: colorsTuple('#E4626F'),
-    white: colorsTuple('#FCFCFC'),
-    black: colorsTuple('#090A0B'),
+    primary: colorsTuple('#3C78D8'),
   },
   primaryColor: 'primary',
-  primaryShade: 5,
   radius: {
     xs: '2px',
     sm: '6px',

ui/src/components/DatasetTable/DatasetTable.module.scss

@@ -27,7 +27,7 @@
     }
 
     td {
-      color: #090a0b;
+      color: var(--color-text-primary);
     }
 
     td:first-child {

ui/src/index.scss

@@ -16,6 +16,20 @@
 @import '@mantine/core/styles.css';
 @import 'mantine-react-table/styles.css';
 
+:root {
+  --color-primary: #3c78d8;
+  --color-background-main: #f8f8f8;
+  --color-background-gray: #e8ebed;
+  --color-background-white: #ffffff;
+  --color-text-primary: #090a0b;
+  --color-text-hover: #ff0000;
+  --color-text-secondary-1: #aab9c5;
+  --color-text-secondary-2: #637d92;
+  --color-text-secondary-3: #4a5e6d;
+  --color-border-1: #e8ebed;
+  --color-border-2: #d2d6db;
+}
+
 .textInputOverride {
   background-color: #f8f8f8;
   border: 1px solid #ededed;