Remove usage of tiley (#4406)

* First pass

* Mooarrr

* lint

* snapshots

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}