[ML4SE-185] UI fixes.

ijPlugin/src/main/resources/org/jetbrains/research/tasktracker/config/agreement_default.yaml

@@ -3,4 +3,5 @@ agreements:
       Multiline
       example
     required: false
-  - text: "Example <a href=\"https://github.com/JetBrains-Research/tasktracker-3\">link</a>"
+  - text: "Example <a href=\"https://github.com/JetBrains-Research/tasktracker-3\">link</a>"
+  - text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,"

ijPlugin/src/main/resources/org/jetbrains/research/tasktracker/ui/main/panel/template/agreement.html

@@ -1,24 +1,25 @@
 <div class="container">
-    <div class="form-group">
-        <label for="name">Please put your name: </label>
-        <input type="text" name="name" id="name" placeholder="Name" required>
-    </div>
-    <br>
-    <div class="form-group">
-        <label for="email">Please put your email: </label>
-        <input type="email" name="email" id="email" placeholder="[email protected]" required>
-    </div>
-    <div class="agreement-container">
-        <p>I agree to the terms and conditions:</p>
-        %s
-        <p><span style="color: red">*</span> - Required field</p>
+    <div class="box">
+        <p class="big-font">Register in study</p>
+        <div class="form-group">
+            <input class="input" type="text" name="name" id="name" placeholder="Name" required>
+        </div>
+        <br>
+        <div class="form-group">
+            <input class="input" type="email" name="email" id="email" placeholder="Email" required>
+        </div>
+        <div class="agreement-container">
+            <p>I agree to the terms and conditions:</p>
+            %s
+            <p><span style="color: red">*</span> - Required field</p>
+        </div>
     </div>
 </div>
 <script>
     let requiredFields = document.querySelectorAll('input[required]')
 
     // Loop through each required input element and add the 'required' class to its parent label
-    requiredFields.forEach(function(inputElement) {
+    requiredFields.forEach(function (inputElement) {
         const parentLabel = inputElement.parentElement.querySelector('label');
         if (parentLabel) {
             parentLabel.classList.add('required');

ijPlugin/src/main/resources/org/jetbrains/research/tasktracker/ui/main/panel/template/css/agreement.css

@@ -2,33 +2,40 @@
     display: flex;
     flex-direction: column;
     margin-bottom: 3vmin;
+    align-items: center;
 }
 
-.form-group label{
-    margin-bottom: 2vmin;
+.form-group input {
+    padding: 12px;
+    border-radius: 3px;
+    font-size: 20px;
 }
 
 .agreement-container {
-    margin-top: 25vmin;
     align-items: flex-start;
     text-align: left;
     justify-content: left;
-    width: 70vw;
 }
 
-.agreement-container div{
-    display:flex;
-    align-items:center;
+.agreement-container div {
+    display: flex;
+    align-items: center;
 }
 
-.agreement-container div label{
+.agreement-container div label {
     font-size: 15px;
     margin-left: 3px;
     font-weight: normal !important;
+    word-wrap: break-word;
+}
+
+.required:after {
+    content: " *";
+    font-weight: bold;
+    color: red;
 }
 
-.required:after{
-    content:" *";
-    font-weight:bold;
-    color:red;
+.box {
+    width: 60vmin;
+    height: 70vmin;
 }

ijPlugin/src/main/resources/org/jetbrains/research/tasktracker/ui/main/panel/template/css/base.css

@@ -1,3 +1,7 @@
+* {
+    box-sizing: border-box;
+}
+
 body {
     margin: 0;
     -webkit-font-smoothing: antialiased;