Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-06-02 22:26:57 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

use icons on avatar info

Browse Source
This commit is contained in:
Kalle (Sendou) 2020-10-18 02:53:17 +03:00
parent 4a523f7fff
commit ecfb5ebf51
2 changed files with 32 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
pages/_app.tsx
View File

@ -17,13 +17,6 @@ const extendedTheme = extendTheme({
}, },
}), }),
}, },
/*components: {
Button: {
defaultProps: {
colorScheme: theme,
},
},
},*/
}); });
const MyApp = (props: AppProps) => { const MyApp = (props: AppProps) => {

55
scenes/Profile/components/AvatarWithInfo.tsx
View File

@ -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 Flag from "components/Flag";
import WeaponImage from "components/WeaponImage"; import WeaponImage from "components/WeaponImage";
import { GetUserByIdentifierQuery } from "generated/graphql"; import { GetUserByIdentifierQuery } from "generated/graphql";
@ -49,37 +49,46 @@ const AvatarWithInfo: React.FC<AvatarWithInfoProps> = ({ user }) => {
<Flex> <Flex>
<Flex maxW="300px" flexWrap="wrap"> <Flex maxW="300px" flexWrap="wrap">
{user.profile?.twitterName && ( {user.profile?.twitterName && (
<Flex alignItems="center" mx="0.5em" my="0.1em" color={gray}> <a href={`https://twitter.com/${user.profile.twitterName}`}>
<Box as={FaTwitter} mr="0.2em" /> <IconButton
<a href={`https://twitter.com/${user.profile.twitterName}`}> aria-label="Link to Twitter"
{user.profile.twitterName} icon={<FaTwitter />}
</a> color="#1DA1F2"
</Flex> borderRadius="50%"
variant="ghost"
/>
</a>
)} )}
{user.profile?.twitchName && ( {user.profile?.twitchName && (
<Flex alignItems="center" mx="0.5em" my="0.1em" color={gray}> <a href={`https://www.twitch.tv/${user.profile.twitchName}`}>
<Box as={FaTwitch} mr="0.2em" /> <IconButton
<a href={`https://www.twitch.tv/${user.profile.twitchName}`}> aria-label="Link to Twitch"
{user.profile.twitchName} icon={<FaTwitch />}
</a> color="#6441A4"
</Flex> borderRadius="50%"
variant="ghost"
/>
</a>
)} )}
{user.profile?.youtubeId && ( {user.profile?.youtubeId && (
<Flex alignItems="center" mx="0.5em" my="0.1em" color={gray}> <a
<Box as={FaYoutube} mr="0.2em" /> href={`https://youtube.com/channel/${user.profile.youtubeId}`}
<a >
href={`https://youtube.com/channel/${user.profile.youtubeId}`} <IconButton
> aria-label="Link to Twitch"
YouTube icon={<FaYoutube />}
</a> color="#FF0000"
</Flex> borderRadius="50%"
variant="ghost"
/>
</a>
)} )}
{user.profile?.sensStick && {user.profile?.sensStick &&
(!!user.profile.sensStick || user.profile.sensStick === 0) && ( (!!user.profile.sensStick || user.profile.sensStick === 0) && (
<Flex <Flex
alignItems="center" alignItems="center"
mx="0.5em" ml="0.7rem"
my="0.1em" mb="0.5rem"
color={gray} color={gray}
w="100%" w="100%"
> >