Merge 4dc5871 into b7fe284

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 = () => {
     <BrowserRouter>
       <Layout>
         <main className="main-container grid">
-          <Route path="/" exact component={Home} />
-          <Route path="/about" component={About} />
-          <Route path="/causes" exact component={Causes} />
-          <Route path="/causes/:id" component={Cause} />
-          <Route path="/artists" exact component={Artists} />
-          <Route path="/users/signin" exact component={UserSignIn} />
-          <Route path="/users/signup" exact component={UserCreate} />
-          <Route path="/artists/:id" component={Artist} />
-          <Route path="/performances" exact component={Performances} />
-          <Route path="/performances/:id" component={Performance} />
-          <Route path="/contact" component={Contact} />
+          <Switch>
+            <Route path="/" exact component={Home} />
+            <Route path="/about" component={About} />
+            <Route path="/causes" exact component={Causes} />
+            <Route path="/causes/:id" component={Cause} />
+            <Route path="/artists/signup" exact component={ArtistCreate} />
+            <Route path="/artists" exact component={Artists} />
+            <Route path="/users/signin" exact component={UserSignIn} />
+            <Route path="/users/signup" exact component={UserCreate} />
+            <Route path="/artists/:id" component={Artist} />
+            <Route path="/performances" exact component={Performances} />
+            <Route path="/performances/:id" component={Performance} />
+            <Route path="/contact" component={Contact} />
+          </Switch>
         </main>
       </Layout>
     </BrowserRouter>

src/containers/Artist/Create/ArtistCreate.js

@@ -0,0 +1,36 @@
+import React from 'react'
+
+class ArtistCreate extends React.Component {
+  render() {
+    return (
+      <div className="artist-registration-container">
+        <h1>Register as an artist</h1>
+        <div className="artist-registration-form-wrapper">
+          <form className="artist-registration-form">
+            <div className="field">
+              <label htmlFor="name">Name</label>
+              <input
+                name="name"
+                type="text"
+              />
+            </div>
+            <div className="field">
+              <label htmlFor="bio">Bio</label>
+              <textarea
+                name="bio"
+              />
+            </div>
+
+            <input
+              className="button body-large"
+              type="submit"
+              value="Register"
+            />
+          </form>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default ArtistCreate

src/containers/Artist/Create/ArtistCreate.test.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import ArtistCreate from './ArtistCreate'
+
+describe('<ArtistCreate />', () => {
+  let artistCreateWrapper
+  beforeEach(() => {
+    artistCreateWrapper = shallow(<ArtistCreate />)
+  })
+  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)
+  })
+})

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;
+  }
+}

src/containers/Users/Create/UserCreate.test.js

@@ -19,22 +19,22 @@ describe('<UserCreate />', () => {
   })
 
   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)
   })
 })

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";