diff --git a/app/components/dropdown.js b/app/components/dropdown.js index 59c9101..9d2f776 100644 --- a/app/components/dropdown.js +++ b/app/components/dropdown.js @@ -16,7 +16,7 @@ const MenuWrapper = styled.div` props.theme.colors.activeItem, )}, ${props.theme.colors.activeItem})`}; padding: 10px 20px; - border-radius: 10px; + border-radius: ${props => props.theme.boxBorderRadius}; margin-left: -10px; `; diff --git a/app/components/input.js b/app/components/input.js index 3992bc1..9edd8bf 100644 --- a/app/components/input.js +++ b/app/components/input.js @@ -4,7 +4,8 @@ import React from 'react'; import styled from 'styled-components'; const getDefaultStyles = t => styled[t]` - border-radius: 6px; + border-radius: ${// $FlowFixMe + props => props.theme.boxBorderRadius}; border: none; background-color: ${// $FlowFixMe props => props.theme.colors.inputBackground}; diff --git a/app/components/select.js b/app/components/select.js index 3d6b64e..743af78 100644 --- a/app/components/select.js +++ b/app/components/select.js @@ -9,7 +9,7 @@ import ChevronDown from '../assets/images/chevron-down.svg'; const SelectWrapper = styled.div` display: flex; flex-direction: row; - border-radius: 6px; + border-radius: ${props => props.theme.boxBorderRadius}; border: none; background-color: ${// $FlowFixMe props => props.theme.colors.inputBackground}; diff --git a/app/components/transaction-daily.js b/app/components/transaction-daily.js index 68a3cd7..c015860 100644 --- a/app/components/transaction-daily.js +++ b/app/components/transaction-daily.js @@ -1,15 +1,19 @@ // @flow import React from 'react'; import styled from 'styled-components'; + import { TransactionItemComponent, type Transaction } from './transaction-item'; import { TextComponent } from './text'; +import { Divider } from './divider'; + +import theme from '../theme'; const Wrapper = styled.div` margin-top: 20px; `; const TransactionsWrapper = styled.div` - border-radius: 7.5px; + border-radius: ${props => props.theme.boxBorderRadius}; overflow: hidden; background-color: ${props => props.theme.colors.cardBackgroundColor}; padding: 0; @@ -26,12 +30,6 @@ const Day = styled(TextComponent)` margin-bottom: 5px; `; -const Divider = styled.div` - width: 100%; - height: 1px; - background-color: ${props => props.theme.colors.inactiveItem}; -`; - type Props = { transactionsDate: string, transactions: Transaction[], @@ -57,7 +55,9 @@ export const TransactionDailyComponent = ({ amount={amount} zecPrice={zecPrice} /> - {idx < transactions.length - 1 && } + {idx < transactions.length - 1 && ( + + )} ))} diff --git a/app/components/wallet-summary.js b/app/components/wallet-summary.js index cccb535..cac061f 100644 --- a/app/components/wallet-summary.js +++ b/app/components/wallet-summary.js @@ -15,7 +15,7 @@ const Wrapper = styled.div` display: flex; flex-direction: column; background-color: ${props => props.theme.colors.cardBackgroundColor}; - border-radius: 5px; + border-radius: ${props => props.theme.boxBorderRadius}; padding: 37px 45px; position: relative; margin-top: ${props => props.theme.layoutContentPaddingTop}; diff --git a/app/theme.js b/app/theme.js index 8d98df9..c59bc51 100644 --- a/app/theme.js +++ b/app/theme.js @@ -70,6 +70,7 @@ const appTheme = { layoutPaddingLeft: '50px', layoutPaddingRight: '45px', layoutContentPaddingTop: '20px', + boxBorderRadius: '6px', }; export const GlobalStyle = createGlobalStyle`