Page layout

ui/.stylelintignore

@@ -0,0 +1 @@
+dist/**

ui/license-checker-config.json

@@ -1,5 +1,5 @@
 {
-  "ignore": [".idea", ".husky", "README.md", ".gitignore", "**/*.svg", "FILE_LICENSE"],
+  "ignore": [".idea", ".husky", "README.md", ".gitignore", ".stylelintignore", "**/*.svg", "FILE_LICENSE"],
   "license": "FILE_LICENSE",
   "licenseFormats": {
     "js|ts|tsx|scss|cjs|mjs": {

ui/package.json

@@ -6,8 +6,8 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "lint": "eslint src/** *.ts *.cjs *.mjs --no-warn-ignored",
-    "lint:css": "stylelint 'src/*.css' 'src/*.scss'",
+    "lint": "eslint src *.ts *.cjs *.mjs",
+    "lint:css": "stylelint '**/*.[s]css'",
     "lint:check": "prettier --check . && npm run lint && npm run lint:css",
     "preview": "vite preview",
     "prepare": "cd .. && husky ./ui/.husky",
@@ -19,6 +19,9 @@
       "prettier --write",
       "eslint --fix"
     ],
+    "*.[s]css": [
+      "stylelint --fix"
+    ],
     "*": [
       "license-check-and-add add"
     ]

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,45 @@
+/*
+ * 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 {
+  pointer-events: none;
+  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: var(--mantine-color-primary-0);
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.separator {
+  color: var(--color-text-secondary-1);
+}

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

@@ -0,0 +1,61 @@
+/*
+ * 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 { 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="/"
+        separatorMargin={6}
+        classNames={{
+          separator: classes.separator,
+        }}
+      >
+        {items.map((item, index) => {
+          const isActive = index === items.length - 1;
+          return (
+            <Anchor
+              className={isActive ? classes.active : classes.link}
+              href={item.path}
+              id={item.path}
+              key={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,46 @@
+/*
+ * 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 {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  border-color: var(--color-background-gray);
+}
+
+.main {
+  padding-top: 40px;
+  padding-bottom: 48px;
+  min-width: 1280px;
+}
+
+.footer {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-secondary-2);
+}
+
+.logo {
+  width: 54px;
+  height: 24px;
+}
+
+.userDetails {
+  color: var(--color-text-primary);
+}

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

@@ -0,0 +1,64 @@
+/*
+ * 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
+      classNames={{
+        header: classes.header,
+        main: classes.main,
+        footer: classes.footer,
+      }}
+    >
+      <AppShell.Header>
+        <img
+          src={ORDLogo}
+          className={classes.logo}
+          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

@@ -17,51 +17,37 @@ import { colorsTuple, createTheme } from '@mantine/core';
 
 export const theme = createTheme({
   fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+  fontSizes: {
+    sm: '0.875rem',
+    md: '0.875rem',
+  },
+  lineHeights: {
+    md: '1.5',
+  },
+  headings: {
+    sizes: {
+      h1: {
+        fontSize: '2rem',
+        lineHeight: '1.25',
+      },
+      h2: {
+        fontSize: '1.5rem',
+        lineHeight: '1.34',
+      },
+      h3: {
+        fontSize: '0.875rem',
+        lineHeight: '1.5',
+      },
+      h4: {
+        fontSize: '0.75rem',
+        lineHeight: '1.34',
+      },
+    },
+  },
   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',