frontend: improve "New issue" form

twenty-frontend/src/css/main.scss

@@ -7,12 +7,11 @@ html, html body, .form {
 }
 
 body {
-  font-family: "Dhurjati Regular";
   margin: 0;
   padding: 0;
 }
 
-header, .body {
+header, #reactapp {
   margin: 0 auto;
   color: $black;
   width: 75%;
@@ -26,26 +25,22 @@ header {
     line-height: 1;
     font-weight: normal;
   }
+  min-height: 64px;
 }
 
-.body {
+form.new-issue {
-  height: 100%;
+  .pure-u-1-1 {
-  font-size: larger;
-  ul.connections {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-  }
-  .form {
-    .row {
     display: flex;
-      width: 100%;
+    margin: 0 0 15px 0;
-      textarea, input {
+
-        width: 100%;
+    .left {
+      width: 20%;
+      select { width: 100%; }
+      margin: 0 1% 0 0;
     }
-    }
+    .right {
-    .row.content {
+      width: 75%;
-      height: 55%;
+      input, textarea { width: 100%; }
     }
   }
 }

twenty-frontend/src/html/issues/new/index.html.erb

@@ -1,2 +1,4 @@
-<section class='body' id='reactapp'></section>
+<div class="pure-g">
+  <form class="new-issue pure-form" id="reactapp"></form>
   <script src="/js/entry-point/new-issue.js"></script>
+</div>

twenty-frontend/src/js/components/forms/NewIssueForm.tsx

@@ -3,17 +3,27 @@ import { ConnectionSelect } from "/components/forms/ConnectionSelect";
 
 export function NewIssueForm() {
   return (
-    <form className="form">
+    <>
-      <div className="row">
+      <div className="pure-u-1-1">
+        <div className="left">
           <ConnectionSelect/>
-        <input name="title" type="text" placeholder="The title of the issue" />
         </div>
-      <div className="row content">
+        <div className="right">
-        <textarea name="content"/>
+          <input name="title" type="text" placeholder="Title" />
         </div>
-      <div className="row">
-        <button type="submit">Save</button>
       </div>
-    </form>
+      <div className="pure-u-1-1">
+        <div className="left"></div>
+        <div className="right">
+          <textarea name="content" placeholder="Add your description here"/>
+        </div>
+      </div>
+      <div className="pure-u-1-1">
+        <div className="left"></div>
+        <div className="right">
+          <button className="pure-button pure-button-primary" type="submit">Save</button>
+        </div>
+      </div>
+    </>
   );
 }