m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Update Home tab styles to match new designs (#8590)

Browse Source 
The tabs on the Home page have been updated to match the new home
screen designs.

A new `activeClassName` prop was added to the `Tab` component to allow
applying different styles to the active tab state.

I ran into specificity problems when overriding the default `Tab` styles
because the import order of our CSS is bizarre and wrong. For now I've
used a crude workaround, but we can fix this properly later by changing
the import order to place styles likely to be overridden first.
This commit is contained in:
Mark Stacey 2020-05-14 00:16:47 -03:00 committed by GitHub
parent 204d197996
commit 095eeab881
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/app/components/ui/tabs/tab/tab.component.js
View File

@ -4,6 +4,7 @@ import classnames from 'classnames'
const Tab = (props) => {
const {
activeClassName,
className,
'data-testid': dataTestId,
isActive,
@ -17,7 +18,10 @@ const Tab = (props) => {
className={classnames(
'tab',
className,
{ 'tab--active': isActive },
{
'tab--active': isActive,
[activeClassName]: isActive,
},
)}
data-testid={dataTestId}
onClick={(event) => {
@ -31,6 +35,7 @@ const Tab = (props) => {
}
Tab.propTypes = {
activeClassName: PropTypes.string,
className: PropTypes.string,
'data-testid': PropTypes.string,
isActive: PropTypes.bool, // required, but added using React.cloneElement
@ -40,6 +45,7 @@ Tab.propTypes = {
}
Tab.defaultProps = {
activeClassName: undefined,
className: undefined,
onClick: undefined,
}

14
ui/app/pages/home/home.component.js
View File

@ -245,10 +245,20 @@ export default class Home extends PureComponent {
<TransactionViewBalance />
</div>
<Tabs>
<Tab className="home__tab" data-testid="home__asset-tab" name="Assets">
<Tab
activeClassName="home__tab--active"
className="home__tab"
data-testid="home__asset-tab"
name="Assets"
>
<AssetList />
</Tab>
<Tab className="home__tab" data-testid="home__history-tab" name="History">
<Tab
activeClassName="home__tab--active"
className="home__tab"
data-testid="home__history-tab"
name="History"
>
<TransactionList />
</Tab>
</Tabs>

12
ui/app/pages/home/index.scss
View File

@ -32,8 +32,18 @@
}
}
&__tab {
// TODO: fix style import order so this isn't required to override specificity of `tab` class
&__main-view &__tab {
flex-grow: 1;
color: $Grey-500;
padding: 16px 8px;
font-size: 14px;
font-weight: 500;
line-height: 130%;
}
&__main-view &__tab--active {
color: $Blue-500;
}
&__connect-status-text {