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

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"> <div className="actionable-message__message">
{message} {message}
</div> </div>
<div className="actionable-message__actions"> {(primaryAction || secondaryAction) && (
{primaryAction && ( <div className="actionable-message__actions">
<div {primaryAction && (
className={classnames('actionable-message__action', 'actionable-message__action--primary')} <div
onClick={primaryAction.onClick} className={classnames('actionable-message__action', 'actionable-message__action--primary')}
> onClick={primaryAction.onClick}
{primaryAction.label} >
</div> {primaryAction.label}
)} </div>
{secondaryAction && ( )}
<div {secondaryAction && (
className={classnames('actionable-message__action', 'actionable-message__action--secondary')} <div
onClick={secondaryAction.onClick} className={classnames('actionable-message__action', 'actionable-message__action--secondary')}
> onClick={secondaryAction.onClick}
{secondaryAction.label} >
</div> {secondaryAction.label}
)} </div>
</div> )}
</div>
)}
</div> </div>
) )
} }

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

@ -43,3 +43,16 @@ export const TwoActions = () => (
/> />
</div> </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; background: $Blue-000;
border: 1px solid $Blue-200; border: 1px solid $Blue-200;
border-radius: 8px; border-radius: 8px;
padding: 8px 28px 8px 28px; padding: 16px;
margin-top: 18px; margin-top: 18px;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
@ -12,6 +12,7 @@
&__message { &__message {
color: $Blue-600; color: $Blue-600;
text-align: center;
} }
&__actions { &__actions {
@ -42,4 +43,13 @@
text-decoration: underline; text-decoration: underline;
} }
} }
&--left-aligned {
.actionable-message__message,
.actionable-message__actions {
justify-content: flex-start;
text-align: left;
width: 100%;
}
}
} }