animated avas

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

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>

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: {