Merge e41e11b into 3dbc1f7

client/public/index.html

@@ -26,6 +26,7 @@
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
     crossorigin="anonymous">
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css"></link>
   <link rel="stylesheet" href="/css/materialize.min.css" media="screen,projection">
   <link rel="stylesheet" href="/css/utils.css">
 </head>

client/src/modules/CreateTeam/components/Form.jsx

@@ -1,5 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Dropdown } from 'semantic-ui-react'
+import slack from '../../../../public/resources/images/slack.png';
+import pt from '../../../../public/resources/images/pt.jpg'
 
 const Form = ({
   handleChange,
@@ -10,16 +13,40 @@ const Form = ({
   submitting
 }) => {
   let showSubmitButton = false;
+  let teamName = 'example';
+
   if (name.trim() && desc.trim()) {
     showSubmitButton = true;
   }
+
+  if (name.trim()) {
+    teamName = name
+  }
+
+  const githubOptions = [
+    {key: `ah-${teamName}-frontend`, text: `ah-${teamName}-frontend`, value: `ah-${teamName}-frontend`},
+    {key: `ah-${teamName}`, text: `ah-${teamName}`, value: `ah-${teamName}`},
+    {key: `${teamName}-ah`, text: `${teamName}-ah`, value: `${teamName}-ah`}
+  ]
+
+  const ptOptions = [
+    {key: `ah-${teamName}`, text: `ah-${teamName}`, value: `ah-${teamName}`},
+    {key: `${teamName}-ah`, text: `${teamName}-ah`, value: `${teamName}-ah`}
+  ]
+
+  const slackOptions = [
+    {key: `ah-${teamName}`, text: `ah-${teamName}`, value: `ah-${teamName}`},
+    {key: `${teamName}-general`, text: `${teamName}-general`, value: `${teamName}-general`},
+    {key: `${teamName}-standup`, text: `${teamName}-standup`, value: `${teamName}-standup`}
+  ]
+
   return (
     <form
       className="col s12 m8 l6 form-wrapper z-depth-5  center-block custom-form"
       onSubmit={handleSubmit}
     >
-      <div className="row form-header nav-blue ">
-        <h6 className="center white-text">Create a team</h6>
+      <div className="row form-header team-form-header white border-bottom">
+        <h6 className="center text-header">Create a team</h6>
       </div>
       <div className="form-wrapper-inner">
         <div className="row">
@@ -53,28 +80,40 @@ const Form = ({
         <div className="row">
           <div className="input-field col m6 s12">
             <select onChange={handleChange} name="visibility">
-              <option value>Private</option>
-              <option value={false}>Public</option>
+              <option value>Public</option>
+              <option value={false}>Private</option>
             </select>
             <label>Team visibility</label>
           </div>
         </div>
+        <div className="team-accounts top-margin">
+          <i className="fab fa-github integration-icon"></i>
+          <Dropdown placeholder='Repo name' fluid multiple selection search options={githubOptions} />
+        </div>
+        <div className="team-accounts top-margin">
+          <img src={pt} className="integration-icon small-icon" alt="pt-image"/>
+          <Dropdown placeholder='PT name' fluid multiple selection search options={ptOptions} />
+        </div>
+        <div className="team-accounts top-margin">
+          <img src={slack} className="integration-icon small-icon" alt="slack-image"/>
+          <Dropdown placeholder='channel name' fluid multiple selection search options={slackOptions} />
+        </div>
         {!showSubmitButton && (
-          <div className="row">
-            <button className="waves-effect waves-light btn col s12 disabled">
+          <div className="submit-btn">
+            <button className="btn right disabled top-margin bottom-margin">
               Submit
             </button>
           </div>
         )}
         {showSubmitButton && (
-          <div className="row">
+          <div className="submit-btn">
             {!submitting && (
-              <button className="waves-effect waves-light btn col s12 nav-blue">
+              <button className="top-margin bottom-margin btn right nav-blue">
                 Submit
               </button>
             )}
             {submitting && (
-              <button className="waves-effect waves-light btn col s12 disabled">
+              <button className="waves-effect waves-light btn col disabled">
                 Submitting...
               </button>
             )}

client/styles/components/_create_team.scss

@@ -0,0 +1,68 @@
+.border-bottom {
+    border-bottom: 1px solid #385CD7
+}
+
+.text-header {
+    font-size: 21px;
+    color: #385CD7;
+}
+
+.team-form-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 5rem;
+}
+
+.team-accounts {
+   display: flex;
+   border: 1px solid rgba(34,36,38,.15);
+   border-radius: .28571429rem;
+    .ui.multiple.dropdown {
+        padding: .22619048em 2.1em .22619048em 0;
+        flex: 12;
+    }
+
+    .ui.selection.active.dropdown {
+        box-shadow: none;
+    }
+
+    .ui.selection.active.dropdown .menu {
+        border-color: #dededf;
+    }
+
+    .ui.selection.dropdown {
+        border: none;
+    }
+
+    input[type=text]:not(.browser-default) {
+        height: 0;
+    }
+
+    .small-icon {
+        height: 2rem;
+    }
+
+    .integration-icon {
+        flex: 1;
+        font-size: 2rem;
+        padding: 0 .4rem;
+        align-self: center;
+    }
+}
+
+.bottom-margin {
+    margin-bottom: 2rem;
+}
+
+.top-margin {
+    margin-top: 2rem;
+}
+
+.submit-btn {
+    .btn {
+        text-transform: lowercase;
+        width: 9rem;
+        border-radius: 5px;
+    }
+}

client/styles/styles.scss

@@ -9,3 +9,4 @@
 @import './components/signin';
 @import './components/form';
 @import './components/teams';
+@import './components//create_team';