PLT-2519 - Fixing users page

webapp/components/admin_console/team_users.jsx

@@ -165,11 +165,9 @@ export default class UserList extends React.Component {
                     className='form-horizontal'
                     role='form'
                 >
-                    <table className='more-modal__list member-list-holder'>
+                    <div className='more-modal__list member-list-holder'>
-                        <tbody>
+                        {memberList}
-                            {memberList}
+                    </div>
-                        </tbody>
-                    </table>
                 </form>
                 <ResetPasswordModal
                     user={this.state.user}

webapp/components/admin_console/user_item.jsx

@@ -365,16 +365,18 @@ export default class UserItem extends React.Component {
         }
 
         return (
-            <tr>
+            <div className='more-modal__row'>
-                <td className='more-modal__row'>
+                <img
-                    <img
+                    className='more-modal__image pull-left'
-                        className='more-modal__image pull-left'
+                    src={`/api/v1/users/${user.id}/image?time=${user.update_at}`}
-                        src={`/api/v1/users/${user.id}/image?time=${user.update_at}`}
+                    height='36'
-                        height='36'
+                    width='36'
-                        width='36'
+                />
-                    />
+                <div className='more-modal__details'>
-                    <span className='more-modal__name'>{Utils.getDisplayName(user)}</span>
+                    <div className='more-modal__name'>{Utils.getDisplayName(user)}</div>
-                    <span className='more-modal__description'>{email}</span>
+                    <div className='more-modal__description'>{email}</div>
+                </div>
+                <div className='more-modal__actions'>
                     <div className='dropdown member-drop'>
                         <a
                             href='#'
@@ -409,10 +411,10 @@ export default class UserItem extends React.Component {
                             </li>
                         </ul>
                     </div>
-                    {makeDemoteModal}
+                </div>
-                    {serverError}
+                {makeDemoteModal}
-                </td>
+                {serverError}
-            </tr>
+            </div>
         );
     }
 }

webapp/sass/responsive/_mobile.scss

@@ -726,7 +726,7 @@
             top: 0;
             z-index: 0;
         }
-        
+
         &.move--right {
             @include translate3d(290px, 0, 0);
 
@@ -883,8 +883,9 @@
     .backstage-list__item {
         display: block;
 
+        .item-actions,
         .actions {
-            margin-top: 10px;
+            margin-top: 15px;
             padding: 0;
         }
     }

webapp/sass/routes/_admin-console.scss

@@ -357,11 +357,15 @@
     }
 
     .member-list-holder {
-        .member-role,
+        background: $white;
-        .member-drop {
+        margin-bottom: 4em;
-            position: absolute;
+        overflow: visible;
-            right: 15px;
+        padding: 5px 0;
-            top: 8px;
+
+        .more-modal__row {
+            &:last-child {
+                border: none;
+            }
         }
     }
 }

webapp/sass/routes/_backstage.scss

@@ -199,27 +199,27 @@ body {
 
     .item-details__row + .item-details__row {
         @include clearfix;
-        margin-top: 10px;
         text-overflow: ellipsis;
     }
 
     .item-details__name {
         font-weight: 600;
-        margin-bottom: 1em;
     }
 
     .item-details__type {
         margin-left: 6px;
     }
 
-    .item-details__description {
+    .item-details__description,
-        color: $dark-gray;
-        margin-bottom: 1em;
-    }
-
     .item-details__creation {
         color: $dark-gray;
-        margin-bottom: 1em;
+        display: inline-block;
+        margin-top: 10px;
+        vertical-align: top;
+
+        &:empty {
+            display: none;
+        }
     }
 
     .item-actions {