Tidy up profile page

src/components/profile/profile.styles.ts

@@ -0,0 +1,25 @@
+import styled, { css } from 'styled-components'
+
+export const UpperSection = styled.div(({ theme }) => {
+  return css`
+    padding: ${theme.space[3]} ${theme.space[4]};
+    display: grid;
+    gap: ${theme.space[3]};
+    background: ${theme.colors.background.default};
+  `
+})
+
+export const Details = styled.p(({ theme }) => {
+  return css`
+    text-align: center;
+    font-size: ${theme.fontSizes[1]};
+  `
+})
+
+export const Meta = styled.p(({ theme }) => {
+  return css`
+    text-align: center;
+    font-size: ${theme.fontSizes[1]};
+    color: ${theme.colors.text.muted};
+  `
+})

src/components/profile/profile.tsx

@@ -1,13 +1,16 @@
 import React from 'react'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 import Layout from 'components/layout'
 import Header from 'components/header'
 import { logout } from 'store/auth/actions'
+import { getUser } from 'store/auth/selectors'
 import * as sc from 'styles/common'
+import * as s from './profile.styles'
 
 const Profile: React.FC = () => {
   const dispatch = useDispatch()
+  const user = useSelector(getUser)
 
   const handleLogout = () => {
     dispatch(logout())
@@ -19,8 +22,18 @@ const Profile: React.FC = () => {
         <Header title='Profile' />
       </sc.HeaderWrapper>
 
+      <sc.UpperSection>
+        <s.Details>{user?.name}</s.Details>
+        <s.Details>{user?.email}</s.Details>
+
+        <hr />
+        <s.Meta>Budgie v0.0.0</s.Meta>
+      </sc.UpperSection>
+
       <Layout>
-        <button onClick={handleLogout}>Log out</button>
+        <hr />
+
+        <sc.TextButton onClick={handleLogout}>Log out</sc.TextButton>
       </Layout>
     </sc.Wrapper>
   )

src/store/auth/actions.ts

@@ -11,9 +11,9 @@ const userLoading = () => ({
   type: USER_LOADING,
 })
 
-const userLoaded = (user: User) => ({
+const userLoaded = (payload: User) => ({
   type: USER_LOADED,
-  user,
+  payload,
 })
 
 const authError = () => ({

src/store/auth/selectors.ts

@@ -1,3 +1,5 @@
 import { State } from 'store'
 
 export const getIsAuthenticated = (state: State) => state.auth.isAuthenticated
+
+export const getUser = (state: State) => state.auth.user

src/styles/common.ts

@@ -20,7 +20,7 @@ export const HeaderWrapper = styled.div(({ theme }) => {
 
 export const UpperSection = styled.div(({ theme }) => {
   return css`
-    padding: ${theme.space[3]} ${theme.space[4]};
+    padding: ${theme.space[3]} ${theme.space[2]};
     display: grid;
     gap: ${theme.space[3]};
     background: ${theme.colors.background.default};

src/styles/global.ts

@@ -21,6 +21,7 @@ const GlobalStyles = createGlobalStyle(({ theme }) => {
     }
 
     hr {
+      width: 100%;
       border: none;
       border-top: ${theme.borders.default};
     }