Merge pull request #37 from Anomaly42/master

Adding a User Profile panel

src/components/settings/Profile.jsx

@@ -0,0 +1,57 @@
+import { UserOutlined } from '@ant-design/icons'
+import { Descriptions } from 'antd'
+import { useSelector } from 'react-redux'
+import styled from 'styled-components/macro'
+
+import { UserAvatar } from 'components/shared'
+import { selectUserProfile } from 'store/userSlice'
+
+const Profile = () => {
+
+    const profile = useSelector(selectUserProfile)
+
+    return (
+        <>
+            <AvatarContainer>
+                <UserAvatar size={72} src={profile?.profilePicture}/>
+            </AvatarContainer>
+
+            <StyledDescriptions 
+            // title="User Info"
+            column={1}
+            >
+                <Descriptions.Item label="Name">{profile.name}</Descriptions.Item>
+                <Descriptions.Item label="Department">{profile.department}</Descriptions.Item>
+                <Descriptions.Item label="LDAP ID">{profile.ldapId}</Descriptions.Item>
+                <Descriptions.Item label="Email">{profile.email}</Descriptions.Item>
+            </StyledDescriptions>
+        </>
+    )
+}
+
+export default Profile
+
+
+const StyledDescriptions = styled(Descriptions)`
+    padding-left: 0.5rem;
+
+    .ant-descriptions-title{
+        color: ${({ theme }) => theme.textColor};
+    }  
+    .ant-descriptions-item{
+        padding-bottom:0.75rem;
+    }
+    .ant-descriptions-item-label{
+        color: ${({ theme }) => theme.primary};
+    }
+    .ant-descriptions-item-content{
+        color: ${({ theme }) => theme.textColor};
+    }
+`
+
+const AvatarContainer = styled.div`
+    display: flex;
+    justify-content: center;
+    padding-bottom: 1rem;
+`
+

src/components/settings/SettingsContainer.jsx

@@ -14,6 +14,8 @@ import { PageHeading, PageTitle } from 'components/shared/Layout'
 import { useTheme } from 'hooks'
 import { logoutAction } from 'store/authSlice'
 
+import Profile from './Profile'
+
 const SettingsContainer = () => {
   const dispatch = useDispatch()
   const { theme, switchTheme } = useTheme()
@@ -78,7 +80,8 @@ const SettingsContainer = () => {
           </Typography.Link>
         }
       >
-        <Empty description={<PageSubtitle>Coming soon!</PageSubtitle>} />
+        {/* <Empty description={<PageSubtitle>Coming soon!</PageSubtitle>} /> */}
+        <Profile/>
       </Aside>
     </>
   )