Add Profile Page

src/Profile/Profile.tsx

@@ -1,5 +1,19 @@
 import * as React from 'react';
+import { Div } from 'glamorous';
 
-const Profile = () => <h1>Profile Page</h1>;
+import ProfileForm from './ProfileForm';
+
+const Profile = () => (
+  <Div
+    className="profile-form"
+    display="flex"
+    alignItems="center"
+    justifyContent="center"
+  >
+    <Div className="profile">
+      <ProfileForm />
+    </Div>
+  </Div>
+);
 
 export default Profile;

src/Profile/ProfileForm.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { Form } from 'glamorous';
+
+import ProfileLabel from './ProfileLabel';
+import ProfileSubmitButton from './ProfileSubmitButton';
+import ProfileFormTextInput from './ProfileFormTextInput';
+import ProfilePicture from './ProfilePicture';
+
+const ProfileForm = () => (
+  <Form
+    backgroundColor="rgba(255, 255, 255, 0.6)"
+    padding="2rem 2rem"
+    margin="2rem"
+    display="flex"
+    flexDirection="column"
+    alignItems="center"
+    spaceBetween="2rem"
+  >
+    <ProfilePicture />
+    <ProfileLabel>
+      Full Name
+      <ProfileFormTextInput type="text" name="name" />
+    </ProfileLabel>
+    <ProfileLabel>
+      DJ Name
+      <ProfileFormTextInput type="text" name="djname" />
+    </ProfileLabel>
+    <ProfileLabel>
+      Email Address
+      <ProfileFormTextInput type="text" name="email" />
+    </ProfileLabel>
+    <ProfileLabel>
+      Password
+      <ProfileFormTextInput type="text" name="password" />
+    </ProfileLabel>
+
+    <ProfileSubmitButton>Update</ProfileSubmitButton>
+  </Form>
+);
+
+export default ProfileForm;

src/Profile/ProfileFormTextInput.tsx

@@ -0,0 +1,24 @@
+import glamorous from 'glamorous';
+
+const ProfileFormTextInput = glamorous.input({
+  backgroundColor: 'transparent',
+  font: 'sans-serif',
+  textAlign: 'left',
+  fontSize: '20px',
+  height: '2.5rem',
+  width: '20rem',
+  border: '0.2px solid black',
+  borderRadius: '0.25rem',
+  display: 'block',
+  marginBottom: '0.5rem',
+  transition: 'all .3s',
+  textIndent: '5px',
+
+  ':focus': {
+    backgroundColor: 'rgba(245, 245, 245, 1)',
+    outline: 'none',
+    boxShadow: 'rgba(245, 245, 245, 1)',
+  },
+});
+
+export default ProfileFormTextInput;

src/Profile/ProfileLabel.tsx

@@ -0,0 +1,8 @@
+import glamorous from 'glamorous';
+
+const ProfileLabel = glamorous.label({
+  fontFamily: 'sans-serif',
+  fontSize: '15px',
+});
+
+export default ProfileLabel;

src/Profile/ProfilePicture.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Img } from 'glamorous';
+
+const shrek = require('./classy-shrek.png');
+
+const ProfilePicture = () => (
+  <Img src={shrek} height="260" width="260" borderRadius="50%" />
+);
+
+export default ProfilePicture;

src/Profile/ProfileSubmitButton.tsx

@@ -0,0 +1,17 @@
+import glamorous from 'glamorous';
+
+const SubmitButton = glamorous.button({
+  backgroundColor: '#BD10E0',
+  border: 'none',
+  color: 'white',
+  font: 'sans-serif',
+  textAlign: 'center',
+  display: 'inline-block',
+  fontSize: '15px',
+  height: '2.5rem',
+  width: '20rem',
+  marginTop: '1rem',
+  borderRadius: '0.25rem',
+});
+
+export default SubmitButton;