From cf63f8d6a1d19d3f6dc3d83278dd6731e68691f1 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 30 Oct 2021 22:02:24 +0300
Subject: [PATCH] Use Stitches on Avatar

---
 frontend/components/common/Avatar.tsx | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/frontend/components/common/Avatar.tsx b/frontend/components/common/Avatar.tsx
index d25b47f8b..c3cf598ee 100644
--- a/frontend/components/common/Avatar.tsx
+++ b/frontend/components/common/Avatar.tsx
@@ -1,5 +1,27 @@
-import { Avatar as MantineAvatar } from "@mantine/core";
+import { stitchesStyled } from "stitches.config";
 
 export function Avatar({ src }: { src: string }) {
-  return <MantineAvatar radius="lg" src={src} />;
+  return (
+    <S_Container>
+      <S_Avatar src={src} />
+    </S_Container>
+  );
 }
+
+const S_Container = stitchesStyled("div", {
+  "-webkit-tap-highlight-color": "transparent",
+  position: "relative",
+  userSelect: "none",
+  overflow: "hidden",
+  width: "38px",
+  minWidth: "38px",
+  height: "38px",
+  borderRadius: "16px",
+});
+
+const S_Avatar = stitchesStyled("img", {
+  objectFit: "cover",
+  width: "100%",
+  height: "100%",
+  display: "block",
+});