From ecfb5ebf51d556d8f886b56fbc2985dcdaccd9f8 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 18 Oct 2020 02:53:17 +0300
Subject: [PATCH] use icons on avatar info

---
 pages/_app.tsx                               |  7 ---
 scenes/Profile/components/AvatarWithInfo.tsx | 55 ++++++++++++--------
 2 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 50aee94e1..6929efdce 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -17,13 +17,6 @@ const extendedTheme = extendTheme({
       },
     }),
   },
-  /*components: {
-    Button: {
-      defaultProps: {
-        colorScheme: theme,
-      },
-    },
-  },*/
 });
 
 const MyApp = (props: AppProps) => {
diff --git a/scenes/Profile/components/AvatarWithInfo.tsx b/scenes/Profile/components/AvatarWithInfo.tsx
index 86ec5ac8d..8de48de11 100644
--- a/scenes/Profile/components/AvatarWithInfo.tsx
+++ b/scenes/Profile/components/AvatarWithInfo.tsx
@@ -1,4 +1,4 @@
-import { Avatar, Box, Flex, Heading } from "@chakra-ui/core";
+import { Avatar, Box, Flex, Heading, IconButton } from "@chakra-ui/core";
 import Flag from "components/Flag";
 import WeaponImage from "components/WeaponImage";
 import { GetUserByIdentifierQuery } from "generated/graphql";
@@ -49,37 +49,46 @@ const AvatarWithInfo: React.FC<AvatarWithInfoProps> = ({ user }) => {
           <Flex>
             <Flex maxW="300px" flexWrap="wrap">
               {user.profile?.twitterName && (
-                <Flex alignItems="center" mx="0.5em" my="0.1em" color={gray}>
-                  <Box as={FaTwitter} mr="0.2em" />
-                  <a href={`https://twitter.com/${user.profile.twitterName}`}>
-                    {user.profile.twitterName}
-                  </a>
-                </Flex>
+                <a href={`https://twitter.com/${user.profile.twitterName}`}>
+                  <IconButton
+                    aria-label="Link to Twitter"
+                    icon={<FaTwitter />}
+                    color="#1DA1F2"
+                    borderRadius="50%"
+                    variant="ghost"
+                  />
+                </a>
               )}
               {user.profile?.twitchName && (
-                <Flex alignItems="center" mx="0.5em" my="0.1em" color={gray}>
-                  <Box as={FaTwitch} mr="0.2em" />
-                  <a href={`https://www.twitch.tv/${user.profile.twitchName}`}>
-                    {user.profile.twitchName}
-                  </a>
-                </Flex>
+                <a href={`https://www.twitch.tv/${user.profile.twitchName}`}>
+                  <IconButton
+                    aria-label="Link to Twitch"
+                    icon={<FaTwitch />}
+                    color="#6441A4"
+                    borderRadius="50%"
+                    variant="ghost"
+                  />
+                </a>
               )}
               {user.profile?.youtubeId && (
-                <Flex alignItems="center" mx="0.5em" my="0.1em" color={gray}>
-                  <Box as={FaYoutube} mr="0.2em" />
-                  <a
-                    href={`https://youtube.com/channel/${user.profile.youtubeId}`}
-                  >
-                    YouTube
-                  </a>
-                </Flex>
+                <a
+                  href={`https://youtube.com/channel/${user.profile.youtubeId}`}
+                >
+                  <IconButton
+                    aria-label="Link to Twitch"
+                    icon={<FaYoutube />}
+                    color="#FF0000"
+                    borderRadius="50%"
+                    variant="ghost"
+                  />
+                </a>
               )}
               {user.profile?.sensStick &&
                 (!!user.profile.sensStick || user.profile.sensStick === 0) && (
                   <Flex
                     alignItems="center"
-                    mx="0.5em"
-                    my="0.1em"
+                    ml="0.7rem"
+                    mb="0.5rem"
                     color={gray}
                     w="100%"
                   >