From 44d280175e9e4f917c029d11b7606aa694001e4e Mon Sep 17 00:00:00 2001
From: Jure Triglav <juretriglav@gmail.com>
Date: Wed, 8 Jul 2020 00:27:01 +0200
Subject: [PATCH] feat: styling improvements for shared components and
dashboard
---
.../src/components/Dashboard.js | 45 ++++++++++------
app/components/shared/General.js | 53 ++++++++++++++++++-
app/components/shared/Table.jsx | 12 -----
3 files changed, 80 insertions(+), 30 deletions(-)
diff --git a/app/components/component-dashboard/src/components/Dashboard.js b/app/components/component-dashboard/src/components/Dashboard.js
index f997ea1e81..883e7824ed 100644
--- a/app/components/component-dashboard/src/components/Dashboard.js
+++ b/app/components/component-dashboard/src/components/Dashboard.js
@@ -9,7 +9,13 @@ import { Container, Section, Heading, Content } from '../style'
import EditorItem from './sections/EditorItem'
import OwnerItem from './sections/OwnerItem'
import ReviewerItem from './sections/ReviewerItem'
-import { Spinner } from '../../../shared'
+import {
+ Spinner,
+ SectionHeader,
+ Title,
+ SectionRow,
+ SectionContent,
+} from '../../../shared'
const updateReviewer = (proxy, { data: { reviewerResponse } }) => {
const id = reviewerResponse.object.objectId
@@ -66,10 +72,11 @@ const Dashboard = ({ history, ...props }) => {
{!dashboard.length && <Section>Nothing to do at the moment.</Section>}
{/* <Authorize object={dashboard} operation="can view my submission section"> */}
{dashboard.length > 0 ? (
- <Content>
- <Section>
- <Heading>My Submissions</Heading>
-
+ <SectionContent>
+ <SectionHeader>
+ <Title>My Submissions</Title>
+ </SectionHeader>
+ <SectionRow>
{dashboard.map(submission => (
<OwnerItem
deleteManuscript={() =>
@@ -82,15 +89,17 @@ const Dashboard = ({ history, ...props }) => {
version={submission}
/>
))}
- </Section>
- </Content>
+ </SectionRow>
+ </SectionContent>
) : null}
{/* </Authorize>
<Authorize object={dashboard} operation="can view review section"> */}
{dashboard.length > 0 ? (
- <Content>
- <Section>
- <Heading>To review</Heading>
+ <SectionContent>
+ <SectionHeader>
+ <Title>To Review</Title>
+ </SectionHeader>
+ <SectionRow>
{dashboard.map(review => (
<ReviewerItem
currentUser={currentUser}
@@ -99,24 +108,26 @@ const Dashboard = ({ history, ...props }) => {
version={review}
/>
))}
- </Section>
- </Content>
+ </SectionRow>
+ </SectionContent>
) : null}
{/* </Authorize> */}
{/* <Authorize object={dashboard} operation="can view my manuscripts section"> */}
{dashboard.length > 0 ? (
- <Content>
- <Section>
- <Heading>My Manuscripts</Heading>
+ <SectionContent>
+ <SectionHeader>
+ <Title>My Manuscripts</Title>
+ </SectionHeader>
+ <SectionRow>
{dashboard.map(manuscript => (
<EditorItem
key={`manuscript-${manuscript.id}`}
version={manuscript}
/>
))}
- </Section>
- </Content>
+ </SectionRow>
+ </SectionContent>
) : null}
{/* </Authorize> */}
</Container>
diff --git a/app/components/shared/General.js b/app/components/shared/General.js
index b7526acb10..f0e4551f70 100644
--- a/app/components/shared/General.js
+++ b/app/components/shared/General.js
@@ -1,5 +1,5 @@
import styled from 'styled-components'
-import { grid } from '@pubsweet/ui-toolkit'
+import { grid, th } from '@pubsweet/ui-toolkit'
export const Section = styled.div`
padding: ${grid(2)} ${grid(3)};
@@ -8,3 +8,54 @@ export const Section = styled.div`
margin-bottom: ${grid(6)};
}
`
+
+export const Content = styled.div`
+ box-shadow: ${th('boxShadow')};
+ background-color: ${th('colorBackground')};
+ border-radius: ${th('borderRadius')};
+`
+
+export const SectionContent = styled(Section)`
+ padding: 0;
+ box-shadow: ${th('boxShadow')};
+ background-color: ${th('colorBackground')};
+ border-radius: ${th('borderRadius')};
+`
+
+export const PaddedContent = styled(Content)`
+ padding: ${grid(2)} ${grid(3)};
+ margin-top: ${grid(3)};
+ margin-bottom: ${grid(3)};
+`
+
+export const Container = styled.div`
+ background: ${th('colorBackgroundHue')};
+ padding: ${grid(2)};
+ overflow-y: scroll;
+`
+
+export const Title = styled.h2`
+ font-size: ${th('fontSizeHeading5')};
+ font-weight: 500;
+`
+
+export const SectionHeader = styled.div`
+ padding: ${grid(2)} ${grid(3)};
+ border-bottom: 1px solid ${th('colorFurniture')};
+`
+
+export const SectionRow = styled.div`
+ border-bottom: 1px solid ${th('colorFurniture')};
+ padding: ${grid(2)} ${grid(3)};
+`
+
+export const SectionRowGrid = styled(SectionRow)`
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ grid-gap: ${grid(2)};
+`
+
+export const SectionAction = styled.div`
+ grid-column: 3;
+ justify-self: end;
+`
diff --git a/app/components/shared/Table.jsx b/app/components/shared/Table.jsx
index eaf0c01242..76e5b9e7a1 100644
--- a/app/components/shared/Table.jsx
+++ b/app/components/shared/Table.jsx
@@ -18,12 +18,6 @@ export const PageHeading = styled(Heading)`
margin-bottom: 1rem;
`
-export const Content = styled.div`
- box-shadow: ${th('boxShadow')};
- background-color: ${th('colorBackground')};
- border-radius: ${th('borderRadius')};
-`
-
export const Header = styled.thead`
text-align: left;
font-variant: all-small-caps;
@@ -36,12 +30,6 @@ export const Header = styled.thead`
}
`
-export const Container = styled.div`
- background: ${th('colorBackgroundHue')};
- padding: ${grid(2)};
- overflow-y: scroll;
-`
-
export const Row = styled.tr`
max-height: ${grid(8)};
border-bottom: 1px solid ${th('colorFurniture')};
--
GitLab