Skip to content
Permalink
Browse files

feat(ui): new activity action bar styles

fix #32345
  • Loading branch information...
mrfelton committed Jun 5, 2019
1 parent 728ff6e commit a3e7ef55683f8932c9ec4907001f4d7abd76dca0
@@ -102,8 +102,8 @@ class Activity extends Component {

return (
<Panel>
<Panel.Header my={3}>
<ActivityActions mx={5} />
<Panel.Header my={3} px={4}>
<ActivityActions />
</Panel.Header>
<Panel.Body>{this.renderActivityList()}</Panel.Body>
</Panel>
@@ -2,6 +2,7 @@ import React from 'react'
import PropTypes from 'prop-types'
import { injectIntl, intlShape } from 'react-intl'
import { Flex } from 'rebass'
import { Card } from 'components/UI'
import ActivityFilter from './ActivityFilter'
import ActivityRefresh from './ActivityRefresh'
import ActivitySearch from './ActivitySearch'
@@ -18,26 +19,21 @@ const ActivityActions = ({
intl,
...rest
}) => (
<Flex alignItems="center" as="nav" {...rest}>
<ActivitySearch
placeholder={intl.formatMessage({ ...messages.search_placeholder })}
searchQuery={searchQuery}
updateActivitySearchQuery={updateActivitySearchQuery}
width={13 / 16}
/>
<Card px={3} py={2} width={1} {...rest}>
<Flex alignItems="center" as="section" justifyContent="space-between">
<ActivitySearch
placeholder={intl.formatMessage({ ...messages.search_placeholder })}
searchQuery={searchQuery}
updateActivitySearchQuery={updateActivitySearchQuery}
width={2 / 3}
/>
<Flex alignItems="center" as="section" justifyContent="flex-end" width={1 / 3}>
<ActivityFilter changeFilter={changeFilter} filter={filter} filters={filters} mx={3} />

<ActivityFilter
changeFilter={changeFilter}
filter={filter}
filters={filters}
mr={1}
width={2.5 / 16}
/>

<Flex alignItems="center" as="section" ml={3}>
<ActivityRefresh onClick={fetchActivityHistory} />
<ActivityRefresh mx={3} onClick={fetchActivityHistory} />
</Flex>
</Flex>
</Flex>
</Card>
)

ActivityActions.propTypes = {
@@ -1,6 +1,8 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Form, Select } from 'components/UI'
import { FormattedMessage } from 'react-intl'
import { Flex } from 'rebass'
import { Dropdown, Label } from 'components/UI'
import messages from './messages'

const messageMapper = key => {
@@ -17,17 +19,19 @@ const messageMapper = key => {
}

const ActivityFilter = ({ changeFilter, filter, filters, ...rest }) => (
<Form {...rest}>
<Select
field="activity-filter"
<Flex alignItems="baseline" {...rest}>
<Label fontWeight="light" htmlFor="channel-filter" mr={2}>
<FormattedMessage {...messages.actiity_filter_label} />
</Label>
<Dropdown
activeKey={filter}
highlightOnValid={false}
id="activity-filter"
initialValue={filter}
items={filters}
messageMapper={messageMapper}
onValueSelected={changeFilter}
onChange={changeFilter}
/>
</Form>
</Flex>
)

ActivityFilter.propTypes = {
@@ -10,6 +10,7 @@ const ActivitySearch = ({ searchQuery, placeholder, updateActivitySearchQuery, .
return (
<Form {...rest}>
<Input
border={0}
field="activity-search"
highlightOnValid={false}
id="activity-search"
@@ -18,6 +19,7 @@ const ActivitySearch = ({ searchQuery, placeholder, updateActivitySearchQuery, .
onValueChange={setValue}
placeholder={placeholder}
type="search"
variant="thin"
/>
</Form>
)
@@ -4,6 +4,7 @@ import { defineMessages } from 'react-intl'
export default defineMessages({
search_placeholder: 'Search Activity',
refresh_button_hint: 'Refresh activity list',
actiity_filter_label: 'Show:',
actiity_filter_all: 'All',
actiity_filter_sent: 'Sent',
actiity_filter_received: 'Received',
@@ -1,13 +1,14 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Box, Flex } from 'rebass'
import { Flex } from 'rebass'
import { Card } from 'components/UI'
import WalletBalance from './WalletBalance'
import WalletButtons from './WalletButtons'
import WalletMenu from './WalletMenu'
import WalletLogo from './WalletLogo'

const Wallet = ({ totalBalance, networkInfo, openWalletModal, openModal }) => (
<Box bg="secondaryColor" pb={3} pt={4} px={4}>
<Card bg="secondaryColor" pb={3} pt={4} px={5}>
<Flex alignItems="flex-end" as="header" justifyContent="space-between" mt={2}>
<WalletLogo networkInfo={networkInfo} />
<WalletMenu openModal={openModal} />
@@ -17,7 +18,7 @@ const Wallet = ({ totalBalance, networkInfo, openWalletModal, openModal }) => (
<WalletBalance openWalletModal={openWalletModal} totalBalance={totalBalance} />
<WalletButtons openModal={openModal} />
</Flex>
</Box>
</Card>
)

Wallet.propTypes = {

0 comments on commit a3e7ef5

Please sign in to comment.
You can’t perform that action at this time.