From aa6cceaf0ec034ad01e66801e259e26ecb0ac750 Mon Sep 17 00:00:00 2001
From: Norbi <37236152+KatunaNorbert@users.noreply.github.com>
Date: Thu, 11 Mar 2021 19:05:49 +0200
Subject: [PATCH] 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 | 26 ++++++++++----
src/components/pages/History/index.tsx | 35 +++++--------------
src/global/_variables.css | 2 ++
3 files changed, 30 insertions(+), 33 deletions(-)
diff --git a/src/components/pages/History/index.module.css b/src/components/pages/History/index.module.css
index 31ae95eeb..9e9e9c824 100644
--- a/src/components/pages/History/index.module.css
+++ b/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);
}
diff --git a/src/components/pages/History/index.tsx b/src/components/pages/History/index.tsx
index 334e1090e..7596375d8 100644
--- a/src/components/pages/History/index.tsx
+++ b/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: