Remove usage of tiley (#4406)

* First pass

* Mooarrr

* lint

* snapshots

app/scenes/Collection/MembershipPreview.tsx

@@ -104,18 +104,16 @@ const MembershipPreview = ({ collection, limit = 8 }: Props) => {
           users={sortBy(collectionUsers, "lastActiveAt")}
           overflow={overflow}
           limit={limit}
-          renderAvatar={(user) => (
-            <StyledAvatar user={user} src={user.avatarUrl} size={32} />
-          )}
+          renderAvatar={(user) => <StyledAvatar model={user} size={32} />}
         />
       </Fade>
     </NudeButton>
   );
 };
 
-const StyledAvatar = styled(Avatar)<{ user: User }>`
+const StyledAvatar = styled(Avatar)<{ model: User }>`
   transition: opacity 250ms ease-in-out;
-  opacity: ${(props) => (props.user.isRecentlyActive ? 1 : 0.5)};
+  opacity: ${(props) => (props.model.isRecentlyActive ? 1 : 0.5)};
 `;
 
 export default observer(MembershipPreview);

app/scenes/CollectionPermissions/components/MemberListItem.tsx

@@ -49,7 +49,7 @@ const MemberListItem = ({
           {user.isAdmin && <Badge primary={user.isAdmin}>{t("Admin")}</Badge>}
         </>
       }
-      image={<Avatar src={user.avatarUrl} size={32} />}
+      image={<Avatar model={user} size={32} />}
       actions={
         <Flex align="center" gap={8}>
           {onUpdate && (

app/scenes/CollectionPermissions/components/UserListItem.tsx

@@ -21,7 +21,7 @@ const UserListItem = ({ user, onAdd, canEdit }: Props) => {
   return (
     <ListItem
       title={user.name}
-      image={<Avatar src={user.avatarUrl} size={32} />}
+      image={<Avatar model={user} size={32} />}
       subtitle={
         <>
           {user.lastActiveAt ? (

app/scenes/GroupMembers/components/GroupMemberListItem.tsx

@@ -35,7 +35,7 @@ const GroupMemberListItem = ({ user, onRemove, onAdd }: Props) => {
           {user.isAdmin && <Badge primary={user.isAdmin}>{t("Admin")}</Badge>}
         </>
       }
-      image={<Avatar src={user.avatarUrl} size={32} />}
+      image={<Avatar model={user} size={32} />}
       actions={
         <Flex align="center">
           {onRemove && <GroupMemberMenu onRemove={onRemove} />}

app/scenes/GroupMembers/components/UserListItem.tsx

@@ -21,7 +21,7 @@ const UserListItem = ({ user, onAdd, canEdit }: Props) => {
   return (
     <ListItem
       title={user.name}
-      image={<Avatar src={user.avatarUrl} size={32} />}
+      image={<Avatar model={user} size={32} />}
       subtitle={
         <>
           {user.lastActiveAt ? (

app/scenes/Login/index.tsx

@@ -169,7 +169,7 @@ function Login({ children }: Props) {
         />
         <Logo>
           {config.logo ? (
-            <TeamLogo width={48} height={48} src={config.logo} />
+            <TeamLogo size={48} src={config.logo} />
           ) : (
             <OutlineLogo size={42} fill="currentColor" />
           )}

app/scenes/Settings/Details.tsx

@@ -26,7 +26,6 @@ function Details() {
   const form = useRef<HTMLFormElement>(null);
   const [name, setName] = useState(team.name);
   const [subdomain, setSubdomain] = useState(team.subdomain);
-  const [avatarUrl, setAvatarUrl] = useState<string>(team.avatarUrl);
   const [defaultCollectionId, setDefaultCollectionId] = useState<string | null>(
     team.defaultCollectionId
   );
@@ -40,7 +39,6 @@ function Details() {
       try {
         await auth.updateTeam({
           name,
-          avatarUrl,
           subdomain,
           defaultCollectionId,
         });
@@ -53,7 +51,7 @@ function Details() {
         });
       }
     },
-    [auth, name, avatarUrl, subdomain, defaultCollectionId, showToast, t]
+    [auth, name, subdomain, defaultCollectionId, showToast, t]
   );
 
   const handleNameChange = React.useCallback(
@@ -71,7 +69,6 @@ function Details() {
   );
 
   const handleAvatarUpload = async (avatarUrl: string) => {
-    setAvatarUrl(avatarUrl);
     await auth.updateTeam({
       avatarUrl,
     });
@@ -115,7 +112,7 @@ function Details() {
           <ImageInput
             onSuccess={handleAvatarUpload}
             onError={handleAvatarError}
-            src={avatarUrl}
+            model={team}
             borderRadius={0}
           />
         </SettingRow>

app/scenes/Settings/Profile.tsx

@@ -18,7 +18,6 @@ const Profile = () => {
   const user = useCurrentUser();
   const form = React.useRef<HTMLFormElement>(null);
   const [name, setName] = React.useState<string>(user.name || "");
-  const [avatarUrl, setAvatarUrl] = React.useState<string>(user.avatarUrl);
   const { showToast } = useToasts();
   const { t } = useTranslation();
 
@@ -28,7 +27,6 @@ const Profile = () => {
     try {
       await auth.updateUser({
         name,
-        avatarUrl,
       });
       showToast(t("Profile saved"), {
         type: "success",
@@ -45,7 +43,6 @@ const Profile = () => {
   };
 
   const handleAvatarUpload = async (avatarUrl: string) => {
-    setAvatarUrl(avatarUrl);
     await auth.updateUser({
       avatarUrl,
     });
@@ -79,7 +76,7 @@ const Profile = () => {
           <ImageInput
             onSuccess={handleAvatarUpload}
             onError={handleAvatarError}
-            src={avatarUrl}
+            model={user}
           />
         </SettingRow>
         <SettingRow

app/scenes/Settings/components/ImageInput.tsx

@@ -1,21 +1,22 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import Avatar, { IAvatar } from "~/components/Avatar/Avatar";
 import Flex from "~/components/Flex";
 import ImageUpload, { Props as ImageUploadProps } from "./ImageUpload";
 
 type Props = ImageUploadProps & {
-  src?: string;
+  model: IAvatar;
 };
 
-export default function ImageInput({ src, ...rest }: Props) {
+export default function ImageInput({ model, ...rest }: Props) {
   const { t } = useTranslation();
 
   return (
     <ImageBox>
       <ImageUpload {...rest}>
-        <Avatar src={src} />
-        <Flex auto align="center" justify="center">
+        <StyledAvatar model={model} size={64} />
+        <Flex auto align="center" justify="center" className="upload">
           {t("Upload")}
         </Flex>
       </ImageUpload>
@@ -28,8 +29,8 @@ const avatarStyles = `
   height: 64px;
 `;
 
-const Avatar = styled.img`
-  ${avatarStyles};
+const StyledAvatar = styled(Avatar)`
+  border-radius: 8px;
 `;
 
 const ImageBox = styled(Flex)`
@@ -41,7 +42,7 @@ const ImageBox = styled(Flex)`
   background: ${(props) => props.theme.background};
   overflow: hidden;
 
-  div div {
+  .upload {
     ${avatarStyles};
     position: absolute;
     top: 0;
@@ -53,7 +54,7 @@ const ImageBox = styled(Flex)`
     transition: all 250ms;
   }
 
-  &:hover div {
+  &:hover .upload {
     opacity: 1;
     background: rgba(0, 0, 0, 0.75);
     color: ${(props) => props.theme.white};

app/scenes/Settings/components/PeopleTable.tsx

@@ -29,7 +29,7 @@ function PeopleTable({ canManage, ...rest }: Props) {
           Cell: observer(
             ({ value, row }: { value: string; row: { original: User } }) => (
               <Flex align="center" gap={8}>
-                <Avatar src={row.original.avatarUrl} size={32} /> {value}{" "}
+                <Avatar model={row.original} size={32} /> {value}{" "}
                 {currentUser.id === row.original.id && `(${t("You")})`}
               </Flex>
             )

app/scenes/Settings/components/SharesTable.tsx

@@ -39,7 +39,7 @@ function SharesTable({ canManage, ...rest }: Props) {
                 <Flex align="center" gap={4}>
                   {row.original.createdBy && (
                     <Avatar
-                      src={row.original.createdBy.avatarUrl}
+                      model={row.original.createdBy}
                       alt={row.original.createdBy.name}
                     />
                   )}

app/scenes/Settings/components/UserListItem.tsx

@@ -20,7 +20,7 @@ const UserListItem = ({ user, showMenu }: Props) => {
   return (
     <ListItem
       title={<Title>{user.name}</Title>}
-      image={<Avatar src={user.avatarUrl} size={32} />}
+      image={<Avatar model={user} size={32} />}
       subtitle={
         <>
           {user.email ? `${user.email} · ` : undefined}

app/scenes/UserProfile.tsx

@@ -39,7 +39,7 @@ function UserProfile(props: Props) {
     <Modal
       title={
         <Flex align="center">
-          <Avatar src={user.avatarUrl} size={38} alt={t("Profile picture")} />
+          <Avatar model={user} size={38} alt={t("Profile picture")} />
           <span>&nbsp;{user.name}</span>
         </Flex>
       }