feat: styling improvements for shared components and dashboard

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>

app/components/shared/General.js

 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;
+`

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')};