[default-layout] Prettier styling of broken avatar image (#1419)

* [default-layout] Prettier styling of broken avatar image Co-Authored-By: Bjørge Næss <[email protected]>
sanity-io · Aug 2, 2019 · ef9443c · ef9443c
1 parent 921e954
commit ef9443c
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 0 deletions.
diff --git a/packages/@sanity/default-layout/src/components/LoginStatus.js b/packages/@sanity/default-layout/src/components/LoginStatus.js
@@ -64,6 +64,7 @@ class LoginStatus extends React.PureComponent {
                 src={user.profileImage}
                 className={styles.userImage}
                 alt={`${user.name}'s profile image`}
+                data-initials={(user.name || user.email || '?').charAt(0)}
               />
             ) : (
               <div className={styles.userImageMissing}>

diff --git a/packages/@sanity/default-layout/src/components/SideMenu.js b/packages/@sanity/default-layout/src/components/SideMenu.js
@@ -33,6 +33,7 @@ function SideMenu(props) {
               className={styles.userProfileImage}
               src={user.profileImage}
               alt={`${user.name}'s profile image`}
+              data-initials={user.name ? user.name.charAt(0) : user.email.charAt(0)}
             />
           ) : (
             <div className={styles.userProfileImageMissing}>

diff --git a/packages/@sanity/default-layout/src/components/styles/LoginStatus.css b/packages/@sanity/default-layout/src/components/styles/LoginStatus.css
@@ -49,6 +49,18 @@
   height: 2.0625em;
   width: 2.0625em;
   border-radius: 50%;
+  overflow: hidden;
+  background-color: var(--preview-placeholder-color);
+
+  @nest &:before {
+    content: attr(data-initials);
+    text-align: center;
+    display: block;
+    line-height: 2em;
+    margin-bottom: 10px;
+    text-transform: uppercase;
+    background-color: var(--preview-placeholder-color);
+  }
 }
 
 .userImageMissing {

diff --git a/packages/@sanity/default-layout/src/components/styles/SideMenu.css b/packages/@sanity/default-layout/src/components/styles/SideMenu.css
@@ -68,6 +68,17 @@
   width: 2.0625em;
   height: 2.0625em;
   border-radius: 50%;
+  overflow: hidden;
+  background-color: var(--preview-placeholder-color);
+
+  @nest &:before {
+    content: attr(data-initials);
+    text-align: center;
+    display: block;
+    line-height: 2em;
+    margin-bottom: 10px;
+    text-transform: uppercase;
+  }
 }
 
 .userProfileImageMissing {