Improvements nd fixes

BrunoQuaresma · BrunoQuaresma · commit 61b5f9509307 · 2023-01-26T00:41:54.000Z
diff --git a/site/src/components/Avatar/Avatar.stories.tsx b/site/src/components/Avatar/Avatar.stories.tsx
@@ -1,5 +1,5 @@
 import { Story } from "@storybook/react"
-import { Avatar, AvatarProps } from "./Avatar"
+import { Avatar, AvatarIcon, AvatarProps } from "./Avatar"
 import PauseIcon from "@material-ui/icons/PauseOutlined"
 
 export default {
@@ -53,3 +53,9 @@ MuiIconXL.args = {
   children: <PauseIcon />,
   size: "xl",
 }
+
+export const AvatarIconDarken = Template.bind({})
+AvatarIconDarken.args = {
+  children: <AvatarIcon src="/icon/database.svg" />,
+  colorScheme: "darken",
+}
diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
@@ -4,7 +4,7 @@ import MuiAvatar, {
   AvatarProps as MuiAvatarProps,
 } from "@material-ui/core/Avatar"
 import { makeStyles } from "@material-ui/core/styles"
-import { cloneElement, FC } from "react"
+import { FC } from "react"
 import { combineClasses } from "util/combineClasses"
 import { firstLetter } from "./firstLetter"
 
@@ -40,9 +40,12 @@ export const Avatar: FC<AvatarProps> = ({
   )
 }
 
-export const AvatarIcon: FC<{ children: JSX.Element }> = ({ children }) => {
+/**
+ * Use it to make an img element behaves like a MaterialUI Icon component
+ */
+export const AvatarIcon: FC<{ src: string }> = ({ src }) => {
   const styles = useStyles()
-  return cloneElement(children, { className: styles.avatarIcon })
+  return <img src={src} alt="" className={styles.avatarIcon} />
 }
 
 const useStyles = makeStyles((theme) => ({
diff --git a/site/src/components/Resources/ResourceAvatar.tsx b/site/src/components/Resources/ResourceAvatar.tsx
@@ -38,9 +38,7 @@ export const ResourceAvatar: FC<ResourceAvatarProps> = ({ resource }) => {
 
   return (
     <Avatar colorScheme="darken">
-      <AvatarIcon>
-        <img src={avatarSrc} alt="" />
-      </AvatarIcon>
+      <AvatarIcon src={avatarSrc} />
     </Avatar>
   )
 }
diff --git a/site/src/components/UserAvatar/UserAvatar.tsx b/site/src/components/UserAvatar/UserAvatar.tsx
@@ -4,11 +4,18 @@ import { FC } from "react"
 export interface UserAvatarProps {
   username: string
   avatarURL?: string
+  // It is needed to work with the AvatarGroup so it can pass the
+  // MuiAvatarGroup-avatar className
+  className?: string
 }
 
-export const UserAvatar: FC<UserAvatarProps> = ({ username, avatarURL }) => {
+export const UserAvatar: FC<UserAvatarProps> = ({
+  username,
+  avatarURL,
+  className,
+}) => {
   return (
-    <Avatar title={username} src={avatarURL}>
+    <Avatar title={username} src={avatarURL} className={className}>
       {username}
     </Avatar>
   )

Original file line number	Diff line number	Diff line change
`@@ -38,9 +38,7 @@ export const ResourceAvatar: FC<ResourceAvatarProps> = ({ resource }) => {`
`38`	`38`
`39`	`39`	`return (`
`40`	`40`	`<Avatar colorScheme="darken">`
`41`		`- <AvatarIcon>`
`42`		`- <img src={avatarSrc} alt="" />`
`43`		`- </AvatarIcon>`
	`41`	`+ <AvatarIcon src={avatarSrc} />`
`44`	`42`	`</Avatar>`
`45`	`43`	`)`
`46`	`44`	`}`