user page style tweak

pages/_app.tsx

@@ -30,6 +30,7 @@ const extendedTheme = extendTheme({
   // 5) form label bolded
   // 6) dropdown border + focus colors // especially in light blends in a lot
   // 7) disable dark mode <-> light mode transformation time
+  // 8) divider color (light)
   components: {
     Button: {
       defaultProps: {

scenes/Profile/components/AvatarWithInfo.tsx

@@ -1,7 +1,6 @@
 import { Avatar, Box, Flex, Heading, IconButton } from "@chakra-ui/core";
 import { getEmojiFlag } from "countries-list";
 import { GetUserByIdentifierQuery } from "generated/graphql";
-import Section from "lib/components/Section";
 import WeaponImage from "lib/components/WeaponImage";
 import { useTranslation } from "lib/useMockT";
 import { useMyTheme } from "lib/useMyTheme";
@@ -31,8 +30,7 @@ const AvatarWithInfo: React.FC<AvatarWithInfoProps> = ({ user }) => {
 
   return (
     <>
-      <Section
-        display="flex"
+      <Flex
         flexDir="column"
         flexWrap="wrap"
         alignItems="center"
@@ -129,7 +127,7 @@ const AvatarWithInfo: React.FC<AvatarWithInfoProps> = ({ user }) => {
             </Flex>
           </Flex>
         </Flex>
-      </Section>
+      </Flex>
     </>
   );
 };

scenes/Profile/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Button } from "@chakra-ui/core";
+import { Box, Button, Divider } from "@chakra-ui/core";
 import { t, Trans } from "@lingui/macro";
 import { GetUserByIdentifierQuery } from "generated/graphql";
 import Breadcrumbs from "lib/components/Breadcrumbs";
@@ -34,8 +34,9 @@ const Profile: React.FC<Props> = ({ user, identifier }) => {
           identifier={identifier}
         />
       )}
+      <Divider my="2em" />
       {user.profile?.bio && (
-        <Box my="2em">
+        <Box>
           <Markdown value={user.profile.bio} />
         </Box>
       )}