more fixes for modal launches and styling, plus make our PasswordReveal...

more fixes for modal launches and styling, plus make our PasswordReveal component start to look appropriate.

resources/frontend_client/app/admin/people/actions.js

@@ -114,7 +114,7 @@ export const resendInvite = createThunkAction(RESEND_INVITE, function(user) {
         // make api call
         await UserApi.send_invite({id: user.id});
 
-        this.props.dispatch(showModal({type: MODAL_INVITE_RESENT, details: {user: this.props.user}}));
+        dispatch(showModal({type: MODAL_INVITE_RESENT, details: {user: user}}));
 
         return user;
     };

resources/frontend_client/app/admin/people/components/AdminPeople.react.js

@@ -190,11 +190,12 @@ export default class AdminPeople extends Component {
             let { user } = modalDetails;
 
             return (
-                <Modal>
+                <Modal className="Modal Modal--small">
                     <ModalContent title={"We've Re-sent "+user.first_name+"'s Invite"}
-                                  closeFn={() => this.props.dispatch(showModal(null))}>
+                                  closeFn={() => this.props.dispatch(showModal(null))}
+                                  className="Modal-content Modal-content--small NewForm">
                         <div>
-                            <p>Any previous email invites they have will no longer work.</p>
+                            <div className="px4 pb4">Any previous email invites they have will no longer work.</div>
 
                             <div className="Form-actions">
                                 <button className="Button Button--primary mr2" onClick={() => this.props.dispatch(showModal(null))}>Okay</button>
@@ -230,13 +231,16 @@ export default class AdminPeople extends Component {
             let { user, password } = modalDetails;
 
             return (
-                <Modal>
+                <Modal className="Modal Modal--small">
                     <ModalContent title={user.first_name+"'s Password Has Been Reset"}
-                                  closeFn={() => this.props.dispatch(showModal(null))}>
+                                  closeFn={() => this.props.dispatch(showModal(null))}
+                                  className="Modal-content Modal-content--small NewForm">
                         <div>
-                            <p>Here’s a temporary password they can use it log in and then change their password.</p>
+                            <div className="px4 pb4">
+                                <span className="pb3 block">Here’s a temporary password they can use to log in and then change their password.</span>
 
-                            <PasswordReveal password={password}></PasswordReveal>
+                                <PasswordReveal password={password}></PasswordReveal>
+                            </div>
 
                             <div className="Form-actions">
                                 <button className="Button Button--primary mr2" onClick={() => this.props.dispatch(showModal(null))}>Done</button>
@@ -250,11 +254,12 @@ export default class AdminPeople extends Component {
             let { user } = modalDetails;
 
             return (
-                <Modal>
+                <Modal className="Modal Modal--small">
                     <ModalContent title={user.first_name+"'s Password Has Been Reset"}
-                                  closeFn={() => this.props.dispatch(showModal(null))}>
+                                  closeFn={() => this.props.dispatch(showModal(null))}
+                                  className="Modal-content Modal-content--small NewForm">
                         <div>
-                            <p>We've sent them an email with instructions for creating a new password.</p>
+                            <div className="px4 pb4">We've sent them an email with instructions for creating a new password.</div>
 
                             <div className="Form-actions">
                                 <button className="Button Button--primary mr2" onClick={() => this.props.dispatch(showModal(null))}>Done</button>

resources/frontend_client/app/admin/people/components/PasswordReveal.react.js

@@ -7,7 +7,23 @@ export default class PasswordReveal extends Component {
 
     constructor(props) {
         super(props);
+
         this.state = { visible: false };
+
+        this.styles = {
+            container: {
+                borderWidth: "2px"
+            },
+
+            input: {
+                border: "none",
+                padding: "0.5em"
+            },
+
+            label: {
+                top: "-12px"
+            }
+        }
     }
 
     onToggleVisibility() {
@@ -21,11 +37,15 @@ export default class PasswordReveal extends Component {
         const { visible } = this.state;
 
         return (
-            <div>
+            <div style={this.styles.container} className="bordered rounded p2 relative">
+                <div style={this.styles.label} className="absolute text-centered left right">
+                    <span className="px1 bg-white h6 text-bold text-grey-3 text-uppercase">Temporary Password</span>
+                </div>
+
                 { visible ?
-                    <input type="text" value={password} />
+                    <input style={this.styles.input} className="text-grey-2 text-normal" type="text" value={password} />
                 :
-                    <input type="password" value={password} />
+                    <input style={this.styles.input} type="password" value={password} />
                 }
 
                 { visible ?

resources/frontend_client/app/admin/people/components/UserActionsSelect.react.js

@@ -12,16 +12,6 @@ import { deleteUser, resendInvite, showModal } from "../actions";
 
 export default class UserActionsSelect extends Component {
 
-    constructor(props) {
-        super(props);
-
-        this.styles = {
-            menuList: {
-                minWidth: "90px"
-            }
-        };
-    }
-
     onEditDetails() {
         this.props.dispatch(showModal({type: MODAL_EDIT_DETAILS, details: {user: this.props.user}}));
         this.refs.popover.toggle();
@@ -63,11 +53,13 @@ export default class UserActionsSelect extends Component {
                                 triggerElement={triggerElement}>
                 <ul className="UserActionsSelect">
                     <li onClick={this.onEditDetails.bind(this)}>Edit Details</li>
+
                     { (user.last_login === null && MetabaseSettings.isEmailConfigured()) ?
                         <li onClick={this.onResendInvite.bind(this)}>Re-send Invite</li>
                     :
                         <li onClick={this.onResetPassword.bind(this)}>Reset Password</li>
                     }
+
                     <li className="Remove" onClick={this.onRemoveUser.bind(this)}>Remove</li>
                 </ul>
             </PopoverWithTrigger>