Merge branch 'actions-modal-styles' into 'develop'

Restyle actions modal

See merge request soapbox-pub/soapbox-fe!852

app/soapbox/features/ui/components/actions_modal.js

@@ -2,19 +2,25 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import spring from 'react-motion/lib/spring';
 import StatusContent from '../../../components/status_content';
 import Avatar from '../../../components/avatar';
 import RelativeTimestamp from '../../../components/relative_timestamp';
 import DisplayName from '../../../components/display_name';
-import IconButton from '../../../components/icon_button';
+import Icon from '../../../components/icon';
+import Button from '../../../components/button';
+import Motion from '../util/optional_motion';
 import classNames from 'classnames';
 
-export default class ActionsModal extends ImmutablePureComponent {
+export default @injectIntl
+class ActionsModal extends ImmutablePureComponent {
 
   static propTypes = {
     status: ImmutablePropTypes.map,
     actions: PropTypes.array,
     onClick: PropTypes.func,
+    onClose: PropTypes.func.isRequired,
   };
 
   renderAction = (action, i) => {
@@ -34,7 +40,7 @@ export default class ActionsModal extends ImmutablePureComponent {
           className={classNames({ active })}
           data-method={isLogout ? 'delete' : null}
         >
-          {icon && <IconButton title={text} icon={icon} role='presentation' tabIndex='-1' inverted />}
+          {icon && <Icon title={text} src={icon} role='presentation' tabIndex='-1' inverted />}
           <div>
             <div className={classNames({ 'actions-modal__item-label': !!meta })}>{text}</div>
             <div>{meta}</div>
@@ -45,6 +51,8 @@ export default class ActionsModal extends ImmutablePureComponent {
   }
 
   render() {
+    const { onClose } = this.props;
+
     const status = this.props.status && (
       <div className='status light'>
         <div className='boost-modal__status-header'>
@@ -68,13 +76,20 @@ export default class ActionsModal extends ImmutablePureComponent {
     );
 
     return (
-      <div className='modal-root__modal actions-modal'>
+      <Motion defaultStyle={{ top: 100 }} style={{ top: spring(0) }}>
-        {status}
+        {({ top }) => (
+          <div className='modal-root__modal actions-modal' style={{ top: `${top}%` }}>
+            {status}
 
-        <ul className={classNames({ 'with-status': !!status })}>
+            <ul className={classNames({ 'with-status': !!status })}>
-          {this.props.actions.map(this.renderAction)}
+              {this.props.actions.map(this.renderAction)}
-        </ul>
+              <Button className='actions-modal__close-button' onClick={onClose}>
-      </div>
+                <FormattedMessage id='lightbox.close' defaultMessage='Close' />
+              </Button>
+            </ul>
+          </div>
+        )}
+      </Motion>
     );
   }
 

app/styles/components/modal.scss

@@ -339,7 +339,7 @@
   width: 480px;
   max-width: 90vw;
   border-radius: 10px;
-  border: 1px solid var(--primary-text-color--faint);
+  border: 1px solid var(--background-color);
   color: var(--primary-text-color--faint);
   background: var(--foreground-color);
 
@@ -543,8 +543,10 @@
 }
 
 .actions-modal {
-  width: calc(100% - 72px);
+  max-height: calc(100% - 16px);
-  margin: 35px;
+  width: calc(100% - 16px);
+  max-width: 500px;
+  margin: auto 0 8px;
 
   .status {
     overflow-y: auto;
@@ -565,7 +567,6 @@
 
     li:not(:empty) {
       &:first-of-type { margin: 10px 0 0; }
-      &:last-of-type { margin: 0 0 10px; }
 
       a {
         display: flex;
@@ -590,10 +591,25 @@
             box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
           }
         }
-        button:first-child { margin-right: 10px; }
+
+        .svg-icon:first-child { margin-right: 10px; }
       }
     }
   }
+
+  &__close-button {
+    width: calc(100% - 16px);
+    margin: 8px;
+    background: var(--accent-color);
+    font-size: 15px;
+    font-weight: 600;
+
+    &:active,
+    &:focus,
+    &:hover {
+      background: var(--accent-color--bright);
+    }
+  }
 }
 
 .confirmation-modal__action-bar,