T141 stylesheet added. Fields needs resize

src/main/resources/static/css/common.css

@@ -0,0 +1,94 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap');
+
+body {
+    font-family: 'Nunito', sans-serif;
+    color: #2e3133;
+    font-weight: normal;
+    margin: 0px;
+}
+
+textarea:focus {
+    box-shadow: 0 0 5px rgba(81, 203, 238);
+    outline: none;
+}
+
+.tooltip{
+    border: 2px solid rgba(155, 165, 160, 0.507);
+    border-radius: 15px;
+    padding: 20px;
+}
+
+a, a:visited,  a:active {
+    color: rgb(47, 125, 146);
+}
+
+a:hover{
+    filter: brightness(120%);
+}
+
+.field {
+    border: 2px solid rgba(56, 59, 58, 0.507);
+    border-radius: 5px;
+}
+
+button {
+    font-size: 20px;
+    text-align: center;
+    cursor: pointer;
+    border: none;
+    text-decoration: none;
+}
+
+input {
+    border-radius: 5px;
+    border: 1px solid rgba(155, 165, 160, 0.507);
+}
+
+button:hover{
+    filter: brightness(110%);
+    /* TODO Insert animation here! */
+}
+
+.tooltip h1{
+    margin: 0px;
+    font-size: 24px;
+    font-weight: bold;
+}
+
+.tooltip button{
+    background-color: rgba(155, 165, 160, 0.507);
+    color: rgb(44, 44, 44);
+    border-bottom: 2px solid rgba(99, 99, 99, 0.507);
+    padding: 14px;
+}
+
+.btn-action {
+    background-color: #3bc4f1;
+    color: white;
+    padding: 15px 32px;
+    display: inline-block;
+}
+
+.resizeVertical {
+    resize: vertical;
+}
+
+.resizeNone {
+    resize: none;
+}
+
+table{
+    border: none;
+}
+
+.collapsibleData {
+    padding: 0 18px;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.2s ease-out;
+    background-color: #f1f1f1;
+}
+
+textField-key{
+    background-color: #f0f0f0;
+}

src/main/resources/static/css/main.css

@@ -2,14 +2,8 @@
     width: 1400px;
     margin-left: auto;
     margin-right: auto;
-    min-height: 1900px;
+    min-height: 700px;
     background: white;
-    font-family: 'Josefin Slab', serif;
-}
-
-.borderStyle {
-    border: 3px solid lightgray;
-    border-radius: 5px;
 }
 
 #toolName {
@@ -18,7 +12,6 @@
     font-size: 72px;
     text-align: center;
     padding: 50px;
-    font-family: 'Acme', sans-serif;
 }
 
 .articleHead {
@@ -54,8 +47,6 @@
     margin-top: 30px;
     width: 720px;
     height: 50px;
-    border-bottom: 1px solid lightgray;
-
 }
 
 .advancedMenuTab {
@@ -94,26 +85,11 @@
     float: left;
     margin-left: 10px;
     margin-right: 10px;
-    background: gray;
-    color: white;
     font-size: 24px;
     padding: 12px;
-    cursor: pointer;
-    border-radius: 15px;
     text-align: center;
 }
 
-.functionBarButton:hover {
-    float: left;
-    margin-left: 10px;
-    margin-right: 10px;
-    background: lightgray;
-    color: white;
-    font-size: 24px;
-    padding: 12px;
-    cursor: pointer;
-}
-
 #link {
     width: 750px;
     margin-bottom: 40px;
@@ -122,7 +98,6 @@
 #messageLink {
     width: 630px;
     padding: 10px;
-    background: #f0f0f0;
     font-size: 18px;
 }
 
@@ -149,13 +124,6 @@
     margin-right: 30px;
 }
 
-.label {
-    margin-top: 15px;
-    margin-bottom: 0px;
-    font-size: 12px;
-    color: lightgray;
-}
-
 .menuItem {
     float: left;
     width: 150px;
@@ -194,16 +162,17 @@
     font-weight: 400;
 }
 
+/*TODO add style to general stylesheet. Gray if inactive red if hover*/
 .btn-del-MenuItem {
     float: left;
     font-size: 24px;
-    color: red;
+    color: lightgray;
     text-align: center;
     cursor: pointer;
 }
 
 .btn-del-MenuItem:hover {
-    color: indianred;
+    color: red;
 }
 
 #headerTable {
@@ -212,7 +181,6 @@
 }
 
 .tableHead {
-    font-size: 24px;
     width: 240px;
     padding: 5px;
 }
@@ -221,18 +189,6 @@
     height: 20px;
     padding: 5px;
     width: 240px;
-    font-size: 18px;
-    background: white;
-    border: 1px solid lightgray;
-    border-radius: 5px;
-}
-
-.headerName {
-    background: #f0f0f0;
-}
-
-.httpStatusValue {
-
 }
 
 #mockIntroTip {
@@ -247,23 +203,24 @@
     font-weight: 700;
 }
 
+/*TODO add to general styles. Gray if inactive green if hover*/
 .btn-table-add {
-    color: green;
+    color: lightgray;
     cursor: pointer;
 }
 
 .btn-table-add:hover {
-    color:lightgreen;
+    color: green;
 }
 
 
 .btn-table-remove {
-    color: red;
+    color: lightgray;
     cursor: pointer;
 }
 
 .btn-table-remove:hover {
-    color:indianred;
+    color: red;
 }
 
 

src/main/resources/static/js/datatransfer.js

@@ -127,7 +127,7 @@ function fillHeaderTable(headers){
     innerHTML += generateHeaderTable(headers);
     $('#httpStatusValues').html(innerHTML);
 }
-
+//TODO: Add addRow() to generate new rows and populate them with data
 function generateHeaderTable(headers){
     let count = 0;
     let innerHTML = '';
@@ -149,7 +149,7 @@ function generateHeaderTable(headers){
         innerHTML+=
             '<tr id="hrow' + htable_row + '" class="httpStatusValue">' +
                 '<td>' +
-                    '<input " type="text" name="headerKey" placeholder="key" class="tableField headerName" value="' + keys[i] + '"/></td>' +
+                    '<input " type="text" name="headerKey" placeholder="key" class="tableField textField-key" value="' + keys[i] + '"/></td>' +
                 '<td>' +
                     '<input " type="text" name="headerKey" placeholder="key" class="tableField" value="' + values[i] + '"/></td>' +
             '<td class="btn-function-table btn-table-remove" onclick="removeRow(' + htable_row + ')">X</td>' +
@@ -171,7 +171,7 @@ function addRow(){
     var innerHtml =
         '<tr id="hrow' + htable_row + '" class="httpStatusValue">' +
         '<td>' +
-        '<input " type="text" name="headerKey" placeholder="key" class="tableField headerName" value="' + hkey.val() +
+        '<input " type="text" name="headerKey" placeholder="key" class="tableField textField-key" value="' + hkey.val() +
         '"/></td>' +
         '<td>' +
         '<input " type="text" name="headerKey" placeholder="key" class="tableField" value="' + hval.val() + '"/></td>' +

src/main/resources/templates/mock.html

@@ -5,6 +5,7 @@
     <meta charset="utf-8">
     <link rel="stylesheet" href="/css/main.css" type="text/css">
     <link rel="stylesheet" href="/css/tooltip.css" type="text/css">
+    <link rel="stylesheet" href="/css/common.css" type="text/css">
     <link rel="stylesheet" href="/Dependency/fontello-plus/css/fontello.css" type="text/css"/>
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Acme&family=Josefin+Slab:wght@500&display=swap" rel="stylesheet">
@@ -28,15 +29,15 @@
                 <div id="advancedItemData" class="articleHead" style="display: none;">Message id: <span id="mockedMessageId"></span></div>
                 <div id="link">
                     <label for="messageLink">Your link</label>
-                    <div id="messageLink" class="borderStyle">http://<span id="pubhost">localhost</span>:8097/klaus/v1/get/<span id="clientUuid">acc39106-f351-46bb-b81b-31b860af3e56</span>/<span id="mockedMessageResponse2">1</span></div>
+                    <div id="messageLink" class="field">http://<span id="pubhost">localhost</span>:8097/klaus/v1/get/<span id="clientUuid">acc39106-f351-46bb-b81b-31b860af3e56</span>/<span id="mockedMessageResponse2">1</span></div>
                 </div>
                 <div id="msgBody">
                     <div id="typeSelection">
                         <label for="httpStatus">Http Status</label>
-                        <textarea type="text" id="httpStatus" class="fieldDefault borderStyle"></textarea>
+                        <textarea type="text" id="httpStatus" class="field"></textarea>
 
                         <label for="typeSelector">Content Type</label>
-                        <select id="typeSelector" class="fieldDefault borderStyle">
+                        <select id="typeSelector" class="field">
                             <option value="application/xml">application/xml</option>
                             <option value="application/json">application/json</option>
                             <option value="text/xml">text/xml</option>
@@ -44,7 +45,7 @@
                     </div>
                     <div id="bodyEdition">
                         <label for="bodyEditor">Body:</label>
-                        <textarea type="text" id="bodyEditor" class="fieldText borderStyle"></textarea>
+                        <textarea type="text" id="bodyEditor" class="field resizeNone"></textarea>
                     </div>
 
                 </div>
@@ -58,8 +59,8 @@
                         <table id="headerTable">
                             <thead>
                                 <tr>
-                                    <td class="tableHead">Header</td>
+                                    <td>Header</td>
-                                    <td class="tableHead">Value</td>
+                                    <td>Value</td>
                                     <td></td>
                                 </tr>
                             </thead>
@@ -101,7 +102,7 @@
                     <div style="clear: both;"></div>
                 </div>
         </div>
-        <div id="tooltip" class="fixed">
+        <div id="tooltip" class="fixed tooltip">
             <div id="mockIntroTip">
                 <h2>What's mock service?</h2>
                 <p>It's super simple! Need data as response from the server? Mock your api in just a few clicks.</p>