[default-layout] Use UserAvatar for current user avatar

sanity-io · Oct 6, 2020 · 76d7674 · 76d7674
1 parent 072099d
commit 76d7674
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 54 deletions.
diff --git a/packages/@sanity/default-layout/src/@types/parts.d.ts b/packages/@sanity/default-layout/src/@types/parts.d.ts
@@ -213,6 +213,10 @@ declare module 'part:@sanity/base/chevron-down-icon' {
   export default Icon
 }
 
+declare module 'part:@sanity/components/avatar' {
+  export const Avatar: any
+}
+
 declare module 'part:@sanity/components/menus/default' {
   const DefaultMenu: React.ComponentType<{
     items: {action: string; icon: React.ComponentType<{}>; title: string}[]

diff --git a/packages/@sanity/default-layout/src/DefaultLayout.tsx b/packages/@sanity/default-layout/src/DefaultLayout.tsx
@@ -161,7 +161,6 @@ class DefaultLayout extends React.PureComponent<Props, State> {
             onToggleMenu={this.handleToggleMenu}
             onSwitchTool={this.handleSwitchTool}
             router={router}
-            user={this.state.user}
             searchIsOpen={searchIsOpen}
             /* eslint-disable-next-line react/jsx-handler-names */
             onUserLogout={userStore.actions.logout}

diff --git a/packages/@sanity/default-layout/src/navbar/Navbar.tsx b/packages/@sanity/default-layout/src/navbar/Navbar.tsx
@@ -8,7 +8,7 @@ import {StateLink} from 'part:@sanity/base/router'
 import {Tooltip} from 'part:@sanity/components/tooltip'
 import * as sidecar from 'part:@sanity/default-layout/sidecar?'
 import {HAS_SPACES} from '../util/spaces'
-import {Router, Tool, User} from '../types'
+import {Router, Tool} from '../types'
 import Branding from './branding/Branding'
 import LoginStatus from './loginStatus/LoginStatus'
 import SanityStatusContainer from './studioStatus/SanityStatusContainer'
@@ -32,7 +32,6 @@ interface Props {
   showLabel: boolean
   showToolSwitcher: boolean
   tools: Tool[]
-  user?: User
 }
 
 const TOUCH_DEVICE = 'ontouchstart' in document.documentElement
@@ -57,7 +56,6 @@ function Navbar(props: Props) {
     onSetSearchElement,
     router,
     tools,
-    user,
     showLabel,
     showToolSwitcher
   } = props
@@ -138,7 +136,7 @@ function Navbar(props: Props) {
         </div>
       )}
       <div className={styles.loginStatus} ref={onSetLoginStatusElement}>
-        <LoginStatus onLogout={onUserLogout} user={user} />
+        <LoginStatus onLogout={onUserLogout} />
       </div>
       <button className={styles.searchButton} onClick={onSearchOpen} type="button">
         <div className={styles.searchButtonInner} tabIndex={-1}>
@@ -152,11 +150,4 @@ function Navbar(props: Props) {
   )
 }
 
-Navbar.defaultProps = {
-  showLabel: true,
-  showToolSwitcher: true,
-  onSetLoginStatusElement: undefined,
-  onSetSearchElement: undefined
-}
-
 export default Navbar
diff --git a/packages/@sanity/default-layout/src/navbar/NavbarContainer.tsx b/packages/@sanity/default-layout/src/navbar/NavbarContainer.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
+import {Router, Tool} from '../types'
 import Navbar from './Navbar'
-import {Router, Tool, User} from '../types'
 
 interface Props {
   onCreateButtonClick: () => void
@@ -12,7 +12,6 @@ interface Props {
   router: Router
   searchIsOpen: boolean
   tools: Tool[]
-  user?: User
 }
 
 interface NextState {
@@ -171,8 +170,7 @@ class NavbarContainer extends React.PureComponent<Props, State> {
       onUserLogout,
       router,
       searchIsOpen,
-      tools,
-      user
+      tools
     } = this.props
     const {showLabel, showToolSwitcher} = this.state
 
@@ -191,7 +189,6 @@ class NavbarContainer extends React.PureComponent<Props, State> {
         showLabel={showLabel}
         showToolSwitcher={showToolSwitcher}
         tools={tools}
-        user={user}
       />
     )
   }

diff --git a/packages/@sanity/default-layout/src/navbar/loginStatus/LoginStatus.css b/packages/@sanity/default-layout/src/navbar/loginStatus/LoginStatus.css
@@ -26,22 +26,9 @@
 }
 
 .inner {
-  padding: 0.5em;
+  padding: var(--small-padding) var(--medium-padding) var(--small-padding) var(--small-padding);
   position: relative;
   outline: none;
-
-  @nest &::after {
-    content: '';
-    position: absolute;
-    display: block;
-    box-sizing: border-box;
-    top: 0.5em;
-    left: 1em;
-    right: 1em;
-    bottom: 0.5em;
-    border: 1px solid color(var(--white) alpha(15%));
-    border-radius: 50%;
-  }
 }
 
 .userImage {

diff --git a/packages/@sanity/default-layout/src/navbar/loginStatus/LoginStatus.tsx b/packages/@sanity/default-layout/src/navbar/loginStatus/LoginStatus.tsx
@@ -1,6 +1,7 @@
 import classNames from 'classnames'
 import React from 'react'
 import enhanceClickOutside from 'react-click-outside'
+import {UserAvatar} from '@sanity/base/components'
 import Menu from 'part:@sanity/components/menus/default'
 import {Popover} from 'part:@sanity/components/popover'
 import IconSignOut from 'part:@sanity/base/sign-out-icon'
@@ -9,11 +10,6 @@ import styles from './LoginStatus.css'
 interface Props {
   className: string
   onLogout: () => void
-  user: {
-    email: string
-    name?: string
-    profileImage?: string
-  }
 }
 
 interface State {
@@ -23,8 +19,7 @@ interface State {
 class LoginStatus extends React.PureComponent<Props, State> {
   static defaultProps = {
     className: undefined,
-    onLogout: undefined,
-    user: undefined
+    onLogout: undefined
   }
 
   state = {isOpen: false}
@@ -48,10 +43,6 @@ class LoginStatus extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const {user} = this.props
-
-    if (!user) return null
-
     return (
       <div className={classNames(styles.root, this.props.className)}>
         <Popover
@@ -81,18 +72,7 @@ class LoginStatus extends React.PureComponent<Props, State> {
             type="button"
           >
             <div className={styles.inner} tabIndex={-1}>
-              {user.profileImage ? (
-                <img
-                  src={user.profileImage}
-                  className={styles.userImage}
-                  alt={`${user.name}'s profile image`}
-                  data-initials={(user.name || user.email || '?').charAt(0)}
-                />
-              ) : (
-                <div className={styles.userImageMissing}>
-                  {user.name ? user.name.charAt(0) : user.email.charAt(0)}
-                </div>
-              )}
+              <UserAvatar size="medium" tone="navbar" userId="me" />
             </div>
           </button>
         </Popover>