Changed locked state badge into lock icon and clarified its meaning with tooltip on hover. This commit builds on top of PR #1668

ghost/admin/app/components/gh-user-list-item.hbs

@@ -1,4 +1,4 @@
-<div class="apps-grid-cell">
+<div class="apps-grid-cell tooltip-centered" data-tooltip="{{ if user.isLocked 'Requires password reset to log in'}}">
     <LinkTo @route="staff.user" @model={{user.slug}} data-test-user-id={{user.id}}>
     <article class="apps-card-app">
         <div class="apps-card-left">
@@ -16,7 +16,7 @@
                     <span class="gh-badge suspended">Suspended</span>
                 {{else}}
                     {{#if user.isLocked}}
-                        <span class="gh-badge locked">Locked</span>
+                        <span class="gh-badge locked">{{svg-jar "lock"}}</span>
                     {{/if}}
                     {{#unless this.session.user.isAuthorOrContributor}}
                         {{#each user.roles as |role|}}

ghost/admin/app/styles/layouts/users.css

@@ -143,10 +143,7 @@
 }
 
 .gh-badge.locked {
-    border: color-mod(var(--lightgrey) blackness(+8%)) 1px solid;
-    color: color-mod(var(--midgrey) l(+5%));
-    background: #fff;
-    text-transform: uppercase;
+    background: none;
 }
 
 /* User invitation modal

ghost/admin/app/styles/spirit/_custom-styles.css

@@ -225,6 +225,19 @@ button, .btn-base {
     transform: translate(-50%, 0);
 }
 
+.tooltip-centered:before {
+    position: absolute;
+    left: initial;
+    bottom: initial;
+    top: 50%;
+    right: 208px;
+    transform: translateY(-50%);
+}
+
+.tooltip-centered:hover:before {
+    transform: translate(0, -50%);
+}
+
 
 /* Errors
 ---------------------------------------------------------- */

ghost/admin/public/assets/icons/lock.svg

@@ -1 +1 @@
-<svg version="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g><path d="M12 14c-.552 0-1 .449-1 1 0 .365.207.672.5.846v2.654c0 .276.224.5.5.5s.5-.224.5-.5v-2.654c.293-.174.5-.481.5-.846 0-.551-.448-1-1-1zM20.5 9h-2.5v-3c0-3.309-2.691-6-6-6s-6 2.691-6 6v3h-2.5c-.276 0-.5.224-.5.5v14c0 .276.224.5.5.5h17c.276 0 .5-.224.5-.5v-14c0-.276-.224-.5-.5-.5zm-13.5-3c0-2.757 2.243-5 5-5s5 2.243 5 5v3h-10v-3zm13 17h-16v-13h16v13z"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.25 24A2.252 2.252 0 013 21.75v-10.5A2.252 2.252 0 015.25 9H6V6c0-3.308 2.692-6 6-6s6 2.692 6 6v3h.75A2.252 2.252 0 0121 11.25v10.5A2.252 2.252 0 0118.75 24H5.25zm0-13.5a.75.75 0 00-.75.75v10.5c0 .414.336.75.75.75h13.5a.75.75 0 00.75-.75v-10.5a.75.75 0 00-.75-.75H5.25zM16.5 9V6c0-2.481-2.019-4.5-4.5-4.5A4.505 4.505 0 007.5 6v3h9z"/><path d="M12 18.75a.75.75 0 01-.75-.75v-3a.75.75 0 011.5 0v3a.75.75 0 01-.75.75z"/></svg>