refactor: user molecule layout to allow other content (#63)

This is to prepare for the GitHub event cards.

Author: byCedric

src/molecules/user/elements.js

@@ -1,34 +1,48 @@
 import styled from 'styled-components/macro';
 
 /**
- * The user container creates a vertical-directed flexbox.
- * It also centers the content to connect the otherwise unrelated content visually.
+ * The user container creates a block that should fully contain the necessary user information.
+ * It will push other content, like event cards, below this content.
  */
 export const UserContainer = styled.div`
+	/*width: 100%;*/
+`;
+
+/**
+ * The user container meta element splits the screen in half and put the avatar and user in this half.
+ * It creates some emphasis on the user's name and also allows extra information without affecting this positioning.
+ */
+export const UserContainerMeta = styled.div`
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	color: #6a737d;
+	justify-content: flex-end;
+	height: 50vh;
 `;
 
 /**
- * The user avatar aligns the user's avatar with the name, using flexbox.
- * This technique is also applied for the description to center the user's name correctly.
+ * The user container info element centers the user's description horizontally.
+ * The length of this content does not affect the avatar and name positioning.
  */
-export const UserAvatar = styled.div`
+export const UserContainerInfo = styled.div`
 	display: flex;
-	flex: 1;
-	align-items: flex-end;
+	justify-content: center;
+`;
+
+/**
+ * The user avatar creates a slightly bigger avatar for the user.
+ * It's because this is the primary visual symbol of the user itself.
+ */
+export const UserAvatar = styled.div`
 	padding: 0.5rem;
 	font-size: 1.5em;
 `;
 
 /**
- * The user's name is also the title of the app and is therefore vertically centered.
- * It's positioned with flexbox to achieve this without knowing the sizes of both the avatar and description.
+ * The user's name is increased in size and styled to style the title of the page.
+ * It's because this is the actual human-identifiable information about the user.
  */
 export const UserName = styled.h1`
-	flex: 0;
 	margin: 0;
 	padding: 0.5rem;
 	text-align: center;
@@ -38,25 +52,20 @@ export const UserName = styled.h1`
 `;
 
 /**
- * The user description aligns the user's description with the name, using flexbox.
- * Because of this flexbox positioning, the size of the text has no impact on the alignment.
- * This technique is also applied for the avatar to center the name correctly.
+ * The user's description is styled to make it a bit more readable and to have a max width.
+ * This styling will create more visual coherence between the name and description.
  */
 export const UserDescription = styled.div`
-	display: flex;
-	flex: 1;
-	align-items: flex-start;
-	justify-content: center;
 	margin: 0;
 	padding: 0.5rem;
-	width: 100%;
 	max-width: 24em;
 	text-align: center;
 	line-height: 1.5;
+	color: #6a737d;
 `;
 
 /**
- * The user description highlight styles a single word within this description.
+ * The user's description highlights styles keywords within this description.
  */
 export const UserDescriptionHighlight = styled.strong`
 	color: #24292e;

src/molecules/user/user.js

@@ -5,6 +5,8 @@ import { propTypes, defaultProps } from './prop-type';
 import UserMeta from './user-meta';
 import {
 	UserContainer,
+	UserContainerMeta,
+	UserContainerInfo,
 	UserAvatar,
 	UserName,
 	UserDescription,
@@ -21,22 +23,26 @@ export default function UserMolecule(props) {
 
 	return (
 		<UserContainer>
-			<UserMeta {...props} />
-			<UserAvatar>
-				<Avatar
-					url={props.avatarUrl}
-					name={identifier}
-					title={identifier}
-				/>
-			</UserAvatar>
-			<UserName title={identifier}>
-				{props.name}
-			</UserName>
-			<UserDescription>
-				<Highlight decorators={decorators}>
-					{props.description}
-				</Highlight>
-			</UserDescription>
+			<UserContainerMeta>
+				<UserMeta {...props} />
+				<UserAvatar>
+					<Avatar
+						url={props.avatarUrl}
+						name={identifier}
+						title={identifier}
+					/>
+				</UserAvatar>
+				<UserName title={identifier}>
+					{props.name}
+				</UserName>
+			</UserContainerMeta>
+			<UserContainerInfo>
+				<UserDescription>
+					<Highlight decorators={decorators}>
+						{props.description}
+					</Highlight>
+				</UserDescription>
+			</UserContainerInfo>
 		</UserContainer>
 	);
 }

src/pages/app/app.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import GithubUser from 'src/organisms/github-user';
-import { AppContainer } from './elements';
 
 export default function AppPage() {
 	return (
-		<AppContainer>
+		<main role="main">
 			<GithubUser />
-		</AppContainer>
+		</main>
 	);
 }