diff --git a/src/components/App.js b/src/components/App.js
index 71f8e661..7db05827 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { BrowserRouter, Route } from 'react-router-dom'
+import { BrowserRouter, Route, Switch } from 'react-router-dom'
// CSS
import '../main.scss'
@@ -12,6 +12,7 @@ import Causes from '../containers/Causes/Causes'
import Cause from '../containers/Cause/Cause'
import Artists from '../containers/Artists/Artists'
import Artist from '../containers/Artist/Artist'
+import ArtistCreate from '../containers/Artist/Create/ArtistCreate'
import Performances from '../containers/Performances/Performances'
import Performance from '../containers/Performance/Performance'
import Contact from '../containers/Contact/Contact'
@@ -23,17 +24,20 @@ const App = () => {
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/containers/Artist/Create/ArtistCreate.js b/src/containers/Artist/Create/ArtistCreate.js
new file mode 100644
index 00000000..71d0ab54
--- /dev/null
+++ b/src/containers/Artist/Create/ArtistCreate.js
@@ -0,0 +1,36 @@
+import React from 'react'
+
+class ArtistCreate extends React.Component {
+ render() {
+ return (
+
+
Register as an artist
+
+
+ )
+ }
+}
+
+export default ArtistCreate
diff --git a/src/containers/Artist/Create/ArtistCreate.test.js b/src/containers/Artist/Create/ArtistCreate.test.js
new file mode 100644
index 00000000..9c9332dc
--- /dev/null
+++ b/src/containers/Artist/Create/ArtistCreate.test.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import ArtistCreate from './ArtistCreate'
+
+describe('', () => {
+ let artistCreateWrapper
+ beforeEach(() => {
+ artistCreateWrapper = shallow()
+ })
+ it('has a form component', () => {
+ expect(artistCreateWrapper.find('form')).toHaveLength(1)
+ })
+
+ it('has a textbox for name', () => {
+ expect(artistCreateWrapper.find("input[type='text']")).toHaveLength(1)
+ })
+
+ it('has a text-area for capturing the bio', () => {
+ expect(artistCreateWrapper.find('textarea')).toHaveLength(1)
+ })
+
+ it('has a submit button', () => {
+ expect(artistCreateWrapper.find("input[type='submit']")).toHaveLength(1)
+ })
+})
diff --git a/src/containers/Artist/Create/artistCreate.scss b/src/containers/Artist/Create/artistCreate.scss
new file mode 100644
index 00000000..5ec059c3
--- /dev/null
+++ b/src/containers/Artist/Create/artistCreate.scss
@@ -0,0 +1,111 @@
+.artist-registration-container {
+ grid-column: 1/-1;
+ min-height: 0;
+ padding-top: $padding-l;
+ margin-bottom: $margin-r;
+
+ h1 {
+ color: $primary-color-white;
+ }
+
+ form {
+ display: flex;
+ flex-direction: column;
+ margin-top: $margin-r;
+
+ label,
+ .label {
+ color: $primary-color-white;
+ margin-bottom: $margin-xs;
+
+ span {
+ color: $primary-color-white-darkest;
+ }
+ }
+
+ .field {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: $margin-r;
+
+ .sign-up-error {
+ margin-top: $margin-xs;
+ color: $validation-color-red;
+ }
+ }
+
+ input[type="text"],
+ input[type="password"],
+ input[type="email"] {
+ border: none;
+ background-image: none;
+ background-color: $primary-color-white;
+ padding: $padding-xs;
+ border-radius: 24px;
+ outline: rgba($primary-color-white, 0);
+ }
+
+ input[type="submit"] {
+ width: fit-content;
+ font-size: 18px;
+ }
+
+ label[for="avatar"] {
+ cursor: pointer;
+ width: 72px;
+ height: 72px;
+ border: 2px dashed $primary-color-white;
+ border-radius: 50%;
+ background-color: $primary-color-darkblue-lightest;
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .camera-icon {
+ width: 24px;
+ height: 24px;
+ }
+
+ .image-container {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ z-index: 2;
+
+ img {
+ border-radius: 50%;
+ }
+ }
+ }
+
+ #avatar-label:hover {
+ cursor: pointer;
+ }
+
+ #upload-avatar {
+ opacity: 0;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ }
+
+ .actions {
+ margin-top: $margin-s;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ a {
+ text-decoration: underline;
+ font-weight: bold;
+ }
+ }
+ }
+}
+
+@media only screen and (min-width: 768px) {
+ .artist-registration-container {
+ grid-column: 4/10;
+ }
+}
diff --git a/src/containers/Users/Create/UserCreate.test.js b/src/containers/Users/Create/UserCreate.test.js
index e113c6a4..7edaafca 100644
--- a/src/containers/Users/Create/UserCreate.test.js
+++ b/src/containers/Users/Create/UserCreate.test.js
@@ -19,22 +19,22 @@ describe('', () => {
})
it('has form component to submit the form', () => {
- expect(userCreateWrapper.find('form').length).toEqual(1)
+ expect(userCreateWrapper.find('form')).toHaveLength(1)
})
it('has an input to upload the avatar for the profile', () => {
- expect(userCreateWrapper.find('#upload-avatar').length).toEqual(1)
+ expect(userCreateWrapper.find('#upload-avatar')).toHaveLength(1)
})
it('has an input field to fill in the username', () => {
- expect(userCreateWrapper.find("input[name='username']").length).toEqual(1)
+ expect(userCreateWrapper.find("input[name='username']")).toHaveLength(1)
})
it('has an input field to fill in the email', () => {
- expect(userCreateWrapper.find("input[type='email']").length).toEqual(1)
+ expect(userCreateWrapper.find("input[type='email']")).toHaveLength(1)
})
it('has an input field to fill in the password and password confirmation', () => {
- expect(userCreateWrapper.find("input[type='password']").length).toEqual(2)
+ expect(userCreateWrapper.find("input[type='password']")).toHaveLength(2)
})
})
diff --git a/src/main.scss b/src/main.scss
index 83b5cc4b..cd8ffa9c 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -24,6 +24,7 @@
@import "containers/Causes/ExploreCauses/ExploreCauses.scss";
@import "containers/Artist/ArtistPerformances/artistperformances.scss";
@import "containers/Performances/TrendingPerformances/TrendingPerformances.scss";
+@import "containers/Artist/Create/artistCreate.scss";
@import "components/Artist/ArtistPerformance/artistperformance.scss";
@import "components/Artist/MoneyRaised/MoneyRaised.scss";
@import "components/Artist/MoneyRaised/Charts.scss";