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};