From 64e21b8c5f839ca2fb46cd51b8d513a130929bc7 Mon Sep 17 00:00:00 2001
From: Sendou <38327916+Sendouc@users.noreply.github.com>
Date: Wed, 6 May 2020 02:46:20 +0300
Subject: [PATCH] animated avas

---
 .../src/components/common/UserAvatar.tsx        | 17 +++++++++++++++--
 .../src/components/home/WeeksTournaments.tsx    |  6 +++++-
 graphql-schemas/user.js                         |  2 +-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/frontend-react/src/components/common/UserAvatar.tsx b/frontend-react/src/components/common/UserAvatar.tsx
index 9629fd71a..bdc5acce4 100644
--- a/frontend-react/src/components/common/UserAvatar.tsx
+++ b/frontend-react/src/components/common/UserAvatar.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import { Avatar, BoxProps } from "@chakra-ui/core"
 
 interface UserAvatarProps {
@@ -13,7 +13,20 @@ const UserAvatar: React.FC<UserAvatarProps & BoxProps> = ({
   size,
   ...props
 }) => {
-  return <Avatar name={name} src={src} size={size} {...props} />
+  const [isBeingHovered, setIsBeingHovered] = useState(false)
+  if (src?.includes("a_")) {
+    return (
+      <Avatar
+        name={name}
+        src={`${src}${isBeingHovered ? "gif" : "jpg"}`}
+        size={size}
+        {...props}
+        onMouseEnter={() => setIsBeingHovered(true)}
+        onMouseLeave={() => setIsBeingHovered(false)}
+      />
+    )
+  }
+  return <Avatar name={name} src={`${src}jpg`} size={size} {...props} />
 }
 
 export default UserAvatar
diff --git a/frontend-react/src/components/home/WeeksTournaments.tsx b/frontend-react/src/components/home/WeeksTournaments.tsx
index 261f8127b..791c2803a 100644
--- a/frontend-react/src/components/home/WeeksTournaments.tsx
+++ b/frontend-react/src/components/home/WeeksTournaments.tsx
@@ -42,7 +42,11 @@ const WeeksTournaments: React.FC = () => {
             <Heading fontFamily="'Rubik', sans-serif" size="md">
               {tournament.name}
             </Heading>
-            <Flex alignItems="center" color={grayWithShade}>
+            <Flex
+              alignItems="center"
+              justifyContent="center"
+              color={grayWithShade}
+            >
               <Box as={FiClock} mr="0.5em" color={themeColorWithShade} />
               {new Date(parseInt(tournament.date)).toLocaleString()}
             </Flex>
diff --git a/graphql-schemas/user.js b/graphql-schemas/user.js
index b36aa358d..f7617f028 100644
--- a/graphql-schemas/user.js
+++ b/graphql-schemas/user.js
@@ -82,7 +82,7 @@ const resolvers = {
     avatar: (root) => {
       if (!root.avatar) return null
 
-      return `https://cdn.discordapp.com/avatars/${root.discord_id}/${root.avatar}.jpg`
+      return `https://cdn.discordapp.com/avatars/${root.discord_id}/${root.avatar}.`
     },
   },
   Query: {