From 56fd96521688f12f5eb7cf95f5a44ead2b2e83b2 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munteanu@thinslices.com>
Date: Fri, 23 Feb 2018 11:47:02 +0200
Subject: [PATCH] style(anstract modal): add overflow and themes
---
.../component-modal/src/components/Modal.js | 7 ++--
.../src/components/Dashboard/AbstractModal.js | 32 ++++++++++---------
packages/xpub-faraday/app/theme.js | 3 ++
3 files changed, 24 insertions(+), 18 deletions(-)
diff --git a/packages/component-modal/src/components/Modal.js b/packages/component-modal/src/components/Modal.js
index 09987d71b..b16774202 100644
--- a/packages/component-modal/src/components/Modal.js
+++ b/packages/component-modal/src/components/Modal.js
@@ -30,14 +30,15 @@ class Modal extends React.Component {
export default Modal
const ModalRoot = styled.div`
- position: fixed;
+ align-items: center;
+ display: flex;
top: 0;
left: 0;
bottom: 0;
right: 0;
- display: flex;
+ position: fixed;
justify-content: center;
- align-items: center;
background-color: ${({ overlayColor }) =>
overlayColor || 'rgba(0, 0, 0, 0.8)'};
+ z-index: ${({ theme }) => theme.modalIndex};
`
diff --git a/packages/components-faraday/src/components/Dashboard/AbstractModal.js b/packages/components-faraday/src/components/Dashboard/AbstractModal.js
index 108c02b4e..4ae9f2774 100644
--- a/packages/components-faraday/src/components/Dashboard/AbstractModal.js
+++ b/packages/components-faraday/src/components/Dashboard/AbstractModal.js
@@ -1,12 +1,12 @@
import React from 'react'
import { get } from 'lodash'
import { Icon } from '@pubsweet/ui'
-import styled from 'styled-components'
+import styled, { css, withTheme } from 'styled-components'
-const AbstractModal = ({ metadata, hideModal }) => (
+const AbstractModal = ({ metadata, hideModal, theme }) => (
<Root>
<CloseIcon onClick={hideModal}>
- <Icon color="#667080">x</Icon>
+ <Icon color={theme.colorPrimary}>x</Icon>
</CloseIcon>
<Title dangerouslySetInnerHTML={{ __html: get(metadata, 'title') }} />
<Subtitle>Abstract</Subtitle>
@@ -14,29 +14,33 @@ const AbstractModal = ({ metadata, hideModal }) => (
</Root>
)
-export default AbstractModal
+export default withTheme(AbstractModal)
// #region styled-components
+const defaultText = css`
+ color: ${({ theme }) => theme.colorText};
+ font-family: ${({ theme }) => theme.fontReading};
+ font-size: ${({ theme }) => theme.fontSizeBaseSmall};
+`
+
const Root = styled.div`
- background-color: #fff;
+ background-color: ${({ theme }) => theme.backgroundColor};
padding: 50px 32px 32px 32px;
- border: 1px solid #667080;
+ border: ${({ theme }) => theme.borderDefault};
position: relative;
width: 600px;
max-height: 500px;
+ overflow-y: scroll;
`
const Title = styled.div`
- font-family: Helvetica;
- font-size: 18px;
+ ${defaultText};
+ font-size: ${({ theme }) => theme.fontSizeBase};
text-align: left;
- color: #667080;
`
const Subtitle = styled.div`
- color: #667080;
- font-family: Helvetica;
- font-size: 14px;
+ ${defaultText};
font-weight: bold;
line-height: 1.57;
margin-bottom: 8px;
@@ -44,9 +48,7 @@ const Subtitle = styled.div`
`
const Content = styled.div`
- color: #667080;
- font-family: Helvetica;
- font-size: 14px;
+ ${defaultText};
line-height: 1.57;
margin-top: 10px;
text-align: left;
diff --git a/packages/xpub-faraday/app/theme.js b/packages/xpub-faraday/app/theme.js
index 0da49adad..720fbe162 100644
--- a/packages/xpub-faraday/app/theme.js
+++ b/packages/xpub-faraday/app/theme.js
@@ -39,6 +39,9 @@ const theme = {
transitionDuration: '1.5s', // How long transitions should last
transitionTimingFunction: 'linear', // Which function should be applied to transitions (eg. easein)
transitionDelay: '0s', // How long transitions should be delayed before they begin
+
+ // z indexes
+ modalIndex: 10000,
}
export default theme
--
GitLab