Use nicer avatars when showing activity log

Author: DaneEveritt

package.json

@@ -11,6 +11,7 @@
         "@tailwindcss/forms": "^0.5.2",
         "@tailwindcss/line-clamp": "^0.4.0",
         "axios": "^0.21.1",
+        "boring-avatars": "^1.7.0",
         "chart.js": "^2.8.0",
         "classnames": "^2.3.1",
         "codemirror": "^5.57.0",

resources/scripts/components/Avatar.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import BoringAvatar, { AvatarProps } from 'boring-avatars';
+import { useStoreState } from '@/state/hooks';
+
+const palette = [ '#FFAD08', '#EDD75A', '#73B06F', '#0C8F8F', '#587291' ];
+
+type Props = Omit<AvatarProps, 'colors'>;
+
+const _Avatar = ({ variant = 'beam', ...props }: AvatarProps) => (
+    <BoringAvatar colors={palette} variant={variant} {...props}/>
+);
+
+const _UserAvatar = ({ variant = 'beam', ...props }: Omit<Props, 'name'>) => {
+    const uuid = useStoreState(state => state.user.data?.uuid);
+
+    return (
+        <BoringAvatar colors={palette} name={uuid || 'system'} variant={variant} {...props} />
+    );
+};
+
+_Avatar.displayName = 'Avatar';
+_UserAvatar.displayName = 'Avatar.User';
+
+const Avatar = Object.assign(_Avatar, {
+    User: _UserAvatar,
+});
+
+export default Avatar;

resources/scripts/components/NavigationBar.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useState } from 'react';
 import { Link, NavLink } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCogs, faLayerGroup, faSignOutAlt, faUserCircle } from '@fortawesome/free-solid-svg-icons';
+import { faCogs, faLayerGroup, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
 import { useStoreState } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import SearchContainer from '@/components/dashboard/search/SearchContainer';
@@ -11,6 +11,7 @@ import styled from 'styled-components/macro';
 import http from '@/api/http';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import Tooltip from '@/components/elements/tooltip/Tooltip';
+import Avatar from '@/components/Avatar';
 
 const RightNavigation = styled.div`
     & > a, & > button, & > .navigation-link {
@@ -58,18 +59,20 @@ export default () => {
                             <FontAwesomeIcon icon={faLayerGroup}/>
                         </NavLink>
                     </Tooltip>
-                    <Tooltip placement={'bottom'} content={'Account Settings'}>
-                        <NavLink to={'/account'}>
-                            <FontAwesomeIcon icon={faUserCircle}/>
-                        </NavLink>
-                    </Tooltip>
                     {rootAdmin &&
                         <Tooltip placement={'bottom'} content={'Admin'}>
                             <a href={'/admin'} rel={'noreferrer'}>
                                 <FontAwesomeIcon icon={faCogs}/>
                             </a>
                         </Tooltip>
                     }
+                    <Tooltip placement={'bottom'} content={'Account Settings'}>
+                        <NavLink to={'/account'}>
+                            <span className={'flex items-center w-5 h-5'}>
+                                <Avatar.User />
+                            </span>
+                        </NavLink>
+                    </Tooltip>
                     <Tooltip placement={'bottom'} content={'Sign Out'}>
                         <button onClick={onTriggerLogout}>
                             <FontAwesomeIcon icon={faSignOutAlt}/>

resources/scripts/components/elements/activity/ActivityLogEntry.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { UserIcon } from '@heroicons/react/outline';
 import { Link } from 'react-router-dom';
 import Tooltip from '@/components/elements/tooltip/Tooltip';
 import Translate from '@/components/elements/Translate';
@@ -11,6 +10,7 @@ import { TerminalIcon } from '@heroicons/react/solid';
 import classNames from 'classnames';
 import style from './style.module.css';
 import { isObject } from '@/helpers';
+import Avatar from '@/components/Avatar';
 
 interface Props {
     activity: ActivityLog;
@@ -48,12 +48,8 @@ export default ({ activity, children }: Props) => {
     return (
         <div className={'grid grid-cols-10 py-4 border-b-2 border-gray-800 last:rounded-b last:border-0 group'}>
             <div className={'hidden sm:flex sm:col-span-1 items-center justify-center select-none'}>
-                <div className={'flex items-center w-8 h-8 rounded-full bg-gray-600 overflow-hidden'}>
-                    {actor ?
-                        <img src={actor.image} alt={'User avatar'}/>
-                        :
-                        <UserIcon className={'w-5 h-5 mx-auto'}/>
-                    }
+                <div className={'flex items-center w-10 h-10 rounded-full bg-gray-600 overflow-hidden'}>
+                    <Avatar name={actor?.uuid || 'system'} />
                 </div>
             </div>
             <div className={'col-span-10 sm:col-span-9 flex'}>

yarn.lock

@@ -2348,6 +2348,11 @@ bonjour@^3.5.0:
     multicast-dns "^6.0.1"
     multicast-dns-service-types "^1.1.0"
 
+boring-avatars@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/boring-avatars/-/boring-avatars-1.7.0.tgz#70ac7146bbf37d8e69a35544b24f1d75558f868a"
+  integrity sha512-ZNHd8J7C/V0IjQMGQowLJ5rScEFU23WxePigH6rqKcT2Esf0qhYvYxw8s9i3srmlfCnCV00ddBjaoGey1eNOfA==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"