From 1cd215895c36ca8fb59009ac40a00f7cf11df3b1 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Thu, 5 Nov 2020 15:05:38 +0200
Subject: [PATCH] user page style tweak

---
 pages/_app.tsx                               | 1 +
 scenes/Profile/components/AvatarWithInfo.tsx | 6 ++----
 scenes/Profile/index.tsx                     | 5 +++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 129ef5b49..d18510c4f 100644
--- a/pages/_app.tsx
+++ b/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: {
diff --git a/scenes/Profile/components/AvatarWithInfo.tsx b/scenes/Profile/components/AvatarWithInfo.tsx
index f3e726dbc..cdc577250 100644
--- a/scenes/Profile/components/AvatarWithInfo.tsx
+++ b/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>
     </>
   );
 };
diff --git a/scenes/Profile/index.tsx b/scenes/Profile/index.tsx
index 538605496..6dfb97cb8 100644
--- a/scenes/Profile/index.tsx
+++ b/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>
       )}