Reorganize history page (#434)

* displayed content using tabs

* fixed transparent background on table and tabs

* tabs design update

* overflow tabs

* pagination and no results message spacing

src/components/pages/History/index.module.css

@@ -18,17 +18,29 @@
 
 .content {
   margin-top: var(--spacer);
+  background-color: var(--background-content) !important;
 }
 
-.section {
-  margin-top: calc(var(--spacer) * 1.5);
+.tabs div[class*='tabs'] {
+  background-color: var(--background-content);
 }
 
-.section:last-child {
-  margin-bottom: 0;
+.tabs ul[class*='tabList'] {
+  background-color: var(--background-content);
+  border: 1px solid var(--border-color);
+  border-bottom: 0;
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+  white-space: nowrap;
+  overflow-y: hidden;
+  overflow-x: auto;
 }
 
-.sectionTitle {
-  font-size: var(--font-size-h3);
-  margin-bottom: calc(var(--spacer) / 2);
+.tabs div[class*='tabContent'] {
+  border: 1px solid var(--border-color);
+  padding-bottom: 0;
+}
+
+.tabs div[class*='tab-panel--selected'] {
+  margin-bottom: var(--spacer);
 }

src/components/pages/History/index.tsx

@@ -1,56 +1,39 @@
-import React, { ReactElement, ReactNode } from 'react'
+import React, { ReactElement } from 'react'
 import ComputeJobs from './ComputeJobs'
 import styles from './index.module.css'
 import PoolShares from './PoolShares'
 import PoolTransactions from '../../molecules/PoolTransactions'
 import PublishedList from './PublishedList'
 import Downloads from './Downloads'
+import Tabs from '../../atoms/Tabs'
 
-const sections = [
+const tabs = [
   {
     title: 'Published',
-    component: <PublishedList />
+    content: <PublishedList />
   },
   {
     title: 'Pool Shares',
-    component: <PoolShares />
+    content: <PoolShares />
   },
   {
     title: 'Pool Transactions',
-    component: <PoolTransactions />
+    content: <PoolTransactions />
   },
   {
     title: 'Downloads',
-    component: <Downloads />
+    content: <Downloads />
   },
   {
     title: 'Compute Jobs',
-    component: <ComputeJobs />
+    content: <ComputeJobs />
   }
 ]
 
-const Section = ({
-  title,
-  component
-}: {
-  title: string
-  component: ReactNode
-}) => {
-  return (
-    <div className={styles.section}>
-      <h2 className={styles.sectionTitle}>{title}</h2>
-      {component}
-    </div>
-  )
-}
-
 export default function HistoryPage(): ReactElement {
   return (
     <article className={styles.content}>
-      {sections.map((section) => {
-        const { title, component } = section
-        return <Section key={title} title={title} component={component} />
-      })}
+      <Tabs items={tabs} className={styles.tabs} />
     </article>
   )
 }

src/global/_variables.css

@@ -26,6 +26,7 @@
   --font-color-text: #41474e;
   --font-color-heading: #141414;
   --background-body: #fff;
+  --background-content: #fff;
   --background-body-transparent: rgba(255, 255, 255, 0.8);
   --background-highlight: #f7f7f7;
   --border-color: #e2e2e2;
@@ -70,6 +71,7 @@
 .dark {
   --font-color-text: #e2e2e2;
   --font-color-heading: #f7f7f7;
+  --background-content: #141414;
   --background-body: #141414;
   --background-body-transparent: rgba(20, 20, 20, 0.9);
   --background-highlight: #201f1f;