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

Fix padding, alignment of actionable-message; add left aligned story

Browse Source
This commit is contained in:
Dan Miller 2020-08-18 17:21:00 -02:30
parent f106128c41
commit 6302154c40
3 changed files with 44 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
ui/app/pages/token/actionable-message/actionable-message.js
View File

@ -13,24 +13,26 @@ export default function ActionableMessage ({
<div className="actionable-message__message">
{message}
</div>
<div className="actionable-message__actions">
{primaryAction && (
<div
className={classnames('actionable-message__action', 'actionable-message__action--primary')}
onClick={primaryAction.onClick}
>
{primaryAction.label}
</div>
)}
{secondaryAction && (
<div
className={classnames('actionable-message__action', 'actionable-message__action--secondary')}
onClick={secondaryAction.onClick}
>
{secondaryAction.label}
</div>
)}
</div>
{(primaryAction || secondaryAction) && (
<div className="actionable-message__actions">
{primaryAction && (
<div
className={classnames('actionable-message__action', 'actionable-message__action--primary')}
onClick={primaryAction.onClick}
>
{primaryAction.label}
</div>
)}
{secondaryAction && (
<div
className={classnames('actionable-message__action', 'actionable-message__action--secondary')}
onClick={secondaryAction.onClick}
>
{secondaryAction.label}
</div>
)}
</div>
)}
</div>
)
}

13
ui/app/pages/token/actionable-message/actionable-message.stories.js
View File

@ -43,3 +43,16 @@ export const TwoActions = () => (
/>
</div>
)
export const LeftAligned = () => (
<div style={{ height: '200px', width: '300px' }}>
<ActionableMessage
message={text('Message', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.')}
primaryAction={{
label: text('LeftAligned Label', 'Dismiss'),
onClick: action('LeftAligned Click 1'),
}}
className="actionable-message--left-aligned"
/>
</div>
)

12
ui/app/pages/token/actionable-message/index.scss
View File

@ -2,7 +2,7 @@
background: $Blue-000;
border: 1px solid $Blue-200;
border-radius: 8px;
padding: 8px 28px 8px 28px;
padding: 16px;
margin-top: 18px;
display: flex;
flex-flow: column;
@ -12,6 +12,7 @@
&__message {
color: $Blue-600;
text-align: center;
}
&__actions {
@ -42,4 +43,13 @@
text-decoration: underline;
}
}
&--left-aligned {
.actionable-message__message,
.actionable-message__actions {
justify-content: flex-start;
text-align: left;
width: 100%;
}
}
}