new profile look

frontend-react/src/components/common/Flag.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import { CountryCode } from "../../types"
+import { countries } from "../../utils/lists"
 
 interface FlagProps {
   code: CountryCode
@@ -9,8 +10,14 @@ const Flag: React.FC<FlagProps> = ({ code }) => {
   return (
     <img
       src={`https://www.countryflags.io/${code}/flat/16.png`}
-      style={{ display: "inline", marginRight: "8px" }}
+      style={{
+        display: "inline",
+        margin: "0 8px",
+        width: "16px",
+        height: "16px",
+      }}
       alt={`Flag of ${code}`}
+      title={countries.find((obj) => obj.code === code)?.name}
     />
   )
 }

frontend-react/src/components/elements/Button.tsx

@@ -1,5 +1,8 @@
 import React from "react"
-import { Button as ChakraButton } from "@chakra-ui/core"
+import {
+  Button as ChakraButton,
+  ButtonProps as ChakraButtonProps,
+} from "@chakra-ui/core"
 import { useContext } from "react"
 import MyThemeContext from "../../themeContext"
 import { IconType } from "react-icons/lib/cjs"
@@ -15,7 +18,7 @@ interface ButtonProps {
   loading?: boolean
 }
 
-const Button: React.FC<ButtonProps> = ({
+const Button: React.FC<ButtonProps & ChakraButtonProps> = ({
   children,
   onClick,
   icon,
@@ -24,6 +27,7 @@ const Button: React.FC<ButtonProps> = ({
   loading,
   width,
   outlined = false,
+  ...props
 }) => {
   const { themeColor } = useContext(MyThemeContext)
   return (
@@ -36,6 +40,7 @@ const Button: React.FC<ButtonProps> = ({
       isDisabled={disabled}
       isLoading={loading}
       width={width ?? undefined}
+      {...props}
     >
       {children}
     </ChakraButton>

frontend-react/src/components/elements/Markdown.tsx

@@ -80,7 +80,7 @@ const Markdown: React.FC<MarkdownProps> = ({ value }) => {
       text: (props: any) => {
         const { children } = props
         return (
-          <Text as="span">
+          <Text as="span" fontFamily="'Rubik', sans-serif">
             {reactStringReplace(children, /(:\S+:)/g, (match, i) => (
               <Emoji key={i} value={match} />
             ))}

frontend-react/src/components/user/AvatarWithInfo.tsx

@@ -1,18 +1,12 @@
-import React, { useState } from "react"
-import { Flex, List, ListItem, ListIcon } from "@chakra-ui/core"
-import {
-  FaUserAlt,
-  FaTwitter,
-  FaTwitch,
-  FaGamepad,
-  FaEdit,
-} from "react-icons/fa"
-
-import UserAvatar from "../common/UserAvatar"
+import { Box, Flex, Heading } from "@chakra-ui/core"
+import React, { useContext, useState } from "react"
+import { FaEdit, FaGamepad, FaTwitch, FaTwitter } from "react-icons/fa"
+import MyThemeContext from "../../themeContext"
 import { User } from "../../types"
 import Flag from "../common/Flag"
-import { countries } from "../../utils/lists"
-import IconButton from "../elements/IconButton"
+import UserAvatar from "../common/UserAvatar"
+import WeaponImage from "../common/WeaponImage"
+import Button from "../elements/Button"
 import ProfileModal from "./ProfileModal"
 
 function getSensString(motion: number | undefined, stick: number): string {
@@ -29,6 +23,7 @@ interface AvatarWithInfoProps {
 }
 
 const AvatarWithInfo: React.FC<AvatarWithInfoProps> = ({ user, canEdit }) => {
+  const { grayWithShade } = useContext(MyThemeContext)
   const [showModal, setShowModal] = useState(false)
   return (
     <>
@@ -42,62 +37,78 @@ const AvatarWithInfo: React.FC<AvatarWithInfoProps> = ({ user, canEdit }) => {
           }}
         />
       )}
-      <Flex
-        justifyContent="center"
-        flexWrap="wrap"
-        alignItems="center"
-        flexDirection="column"
-      >
-        <UserAvatar name={user.username} src={user.avatar} size="2xl" />
-        <List
-          spacing={2}
-          mt="1em"
-          mx="0.5em"
-          fontWeight="light"
-          textAlign="center"
-        >
-          {canEdit && (
-            <ListItem>
-              <IconButton
-                colored
-                icon={FaEdit}
-                onClick={() => setShowModal(true)}
-              />
-            </ListItem>
-          )}
-          <ListItem>
-            <ListIcon icon={FaUserAlt} />
-            {user.username}#{user.discriminator}
-          </ListItem>
-          {user.country && (
-            <ListItem>
-              <Flag code={user.country} />
-              {countries.find((obj) => obj.code === user.country)?.name}
-            </ListItem>
-          )}
-          {user.twitter_name && (
-            <ListItem>
-              <ListIcon icon={FaTwitter} />
-              <a href={`https://twitter.com/${user.twitter_name}`}>
-                {user.twitter_name}
-              </a>
-            </ListItem>
-          )}
-          {user.twitch_name && (
-            <ListItem>
-              <ListIcon icon={FaTwitch} />
-              <a href={`https://www.twitch.tv/${user.twitch_name}`}>
-                {user.twitch_name}
-              </a>
-            </ListItem>
-          )}
-          {user.sens && (!!user.sens.stick || user.sens.stick === 0) && (
-            <ListItem>
-              <ListIcon icon={FaGamepad} />
-              {getSensString(user.sens.motion, user.sens.stick)}
-            </ListItem>
-          )}
-        </List>
+      <Flex flexWrap="wrap">
+        <UserAvatar
+          name={user.username}
+          src={user.avatar}
+          size="2xl"
+          mr="0.3em"
+          mb="0.5rem"
+        />
+        <Flex flexDirection="column" justifyContent="center" mb="0.5rem">
+          <Flex alignItems="center" my="0.2rem">
+            <Heading fontFamily="'Rubik', sans-serif" size="lg" ml="0.5rem">
+              {user.username}#{user.discriminator}
+            </Heading>
+            {user.country && <Flag code={user.country} />}
+          </Flex>
+          <Flex>
+            <Flex maxW="300px" flexWrap="wrap">
+              {user.twitter_name && (
+                <Flex
+                  alignItems="center"
+                  mx="0.5em"
+                  my="0.1em"
+                  color={grayWithShade}
+                >
+                  <Box as={FaTwitter} mr="0.2em" />
+                  <a href={`https://twitter.com/${user.twitter_name}`}>
+                    {user.twitter_name}
+                  </a>
+                </Flex>
+              )}
+              {user.twitch_name && (
+                <Flex
+                  alignItems="center"
+                  mx="0.5em"
+                  my="0.1em"
+                  color={grayWithShade}
+                >
+                  <Box as={FaTwitch} mr="0.2em" />
+                  <a href={`https://www.twitch.tv/${user.twitch_name}`}>
+                    {user.twitch_name}
+                  </a>
+                </Flex>
+              )}
+              {user.sens && (!!user.sens.stick || user.sens.stick === 0) && (
+                <Flex
+                  alignItems="center"
+                  mx="0.5em"
+                  my="0.1em"
+                  color={grayWithShade}
+                  w="100%"
+                >
+                  <Box as={FaGamepad} mr="0.2em" />
+                  {getSensString(user.sens.motion, user.sens.stick)}
+                </Flex>
+              )}
+              {user.weapons && user.weapons.length > 0 && (
+                <Flex mt="0.2rem" w="100%">
+                  {user.weapons.map((wpn) => (
+                    <Box mx="0.2em" key={wpn}>
+                      <WeaponImage englishName={wpn} size="SMALL" />
+                    </Box>
+                  ))}
+                </Flex>
+              )}
+            </Flex>
+          </Flex>
+        </Flex>
+        {canEdit && (
+          <Button icon={FaEdit} onClick={() => setShowModal(true)}>
+            Edit profile
+          </Button>
+        )}
       </Flex>
     </>
   )

frontend-react/src/components/user/UserPage.tsx

@@ -1,45 +1,42 @@
-import React, { useContext } from "react"
-import { RouteComponentProps, Redirect } from "@reach/router"
 import { useQuery } from "@apollo/react-hooks"
-
 import {
-  SEARCH_FOR_USER,
+  Badge,
+  Box,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+} from "@chakra-ui/core"
+import { Redirect, RouteComponentProps } from "@reach/router"
+import React, { useContext } from "react"
+import { Helmet } from "react-helmet-async"
+import { FaTrophy, FaTshirt } from "react-icons/fa"
+import { IconType } from "react-icons/lib/cjs"
+import { PLAYER_INFO } from "../../graphql/queries/playerInfo"
+import { SEARCH_FOR_BUILDS } from "../../graphql/queries/searchForBuilds"
+import {
   SearchForUserData,
   SearchForUserVars,
+  SEARCH_FOR_USER,
 } from "../../graphql/queries/searchForUser"
 import { USER } from "../../graphql/queries/user"
-import Loading from "../common/Loading"
-import Error from "../common/Error"
+import MyThemeContext from "../../themeContext"
 import {
-  UserData,
-  SearchForBuildsData,
-  SearchForBuildsVars,
   PlayerInfoData,
   PlayerInfoVars,
+  SearchForBuildsData,
+  SearchForBuildsVars,
+  UserData,
 } from "../../types"
-import { FaTshirt, FaTrophy } from "react-icons/fa"
-import { IconType } from "react-icons/lib/cjs"
-import AvatarWithInfo from "./AvatarWithInfo"
-import WeaponPool from "./WeaponPool"
-import {
-  Box,
-  Tabs,
-  TabList,
-  Tab,
-  TabPanels,
-  TabPanel,
-  Badge,
-} from "@chakra-ui/core"
-import { Helmet } from "react-helmet-async"
-import { SEARCH_FOR_BUILDS } from "../../graphql/queries/searchForBuilds"
-import BuildTab from "./BuildTab"
-import MyThemeContext from "../../themeContext"
-import { PLAYER_INFO } from "../../graphql/queries/playerInfo"
-import XRankTab from "./XRankTab"
 import { weapons } from "../../utils/lists"
+import Error from "../common/Error"
+import Loading from "../common/Loading"
 import Alert from "../elements/Alert"
 import Markdown from "../elements/Markdown"
-import SubHeader from "../common/SubHeader"
+import AvatarWithInfo from "./AvatarWithInfo"
+import BuildTab from "./BuildTab"
+import XRankTab from "./XRankTab"
 
 interface Tab {
   id: number
@@ -172,14 +169,8 @@ const UserPage: React.FC<RouteComponentProps & UserPageProps> = ({ id }) => {
         user={user}
         canEdit={userLean?.discord_id === user.discord_id}
       />
-      {user.weapons && user.weapons.length > 0 && (
-        <Box textAlign="center" mt="1em">
-          <WeaponPool weapons={user.weapons} />
-        </Box>
-      )}
       {user.bio && (
-        <Box my="1em">
-          <SubHeader>Bio</SubHeader>
+        <Box my="2em">
           <Markdown value={user.bio} />
         </Box>
       )}

frontend-react/src/components/user/WeaponPool.tsx

@@ -1,25 +0,0 @@
-import React from "react"
-import { Weapon } from "../../types"
-import { Box, Flex } from "@chakra-ui/core"
-import WeaponImage from "../common/WeaponImage"
-import FieldsetWithLegend from "../common/FieldsetWithLegend"
-
-interface WeaponPoolProps {
-  weapons: Weapon[]
-}
-
-const WeaponPool: React.FC<WeaponPoolProps> = ({ weapons }) => {
-  return (
-    <FieldsetWithLegend title="WEAPON POOL" titleFontSize="xs">
-      <Flex justifyContent="center">
-        {weapons.map(wpn => (
-          <Box mx="0.3em" key={wpn}>
-            <WeaponImage englishName={wpn} size="SMALL" />
-          </Box>
-        ))}
-      </Flex>
-    </FieldsetWithLegend>
-  )
-}
-
-export default WeaponPool