From e526bc34fcd6b545ba489629f9f3c0b7d9e9697c Mon Sep 17 00:00:00 2001
From: modzeleg <g.modzelewski@protonmail.com>
Date: Tue, 6 Apr 2021 11:53:38 +0200
Subject: [PATCH] Third and final part of style draft implemented

---
 .../resources/static/css/commons/r11form.css  |  6 ++
 src/main/resources/static/html/mock.html      | 61 +++++++++++++++++--
 2 files changed, 62 insertions(+), 5 deletions(-)

diff --git a/src/main/resources/static/css/commons/r11form.css b/src/main/resources/static/css/commons/r11form.css
index 91f13cb..8e9dad0 100644
--- a/src/main/resources/static/css/commons/r11form.css
+++ b/src/main/resources/static/css/commons/r11form.css
@@ -28,6 +28,12 @@
     width: 30%;
 }
 
+.tooltip-window .tip {
+    width: 80%;
+    background: gray;
+    
+}
+
 .bordered-field {
     border: 2px solid rgba(93, 99, 96, 0.705);
     border-radius: 5px;
diff --git a/src/main/resources/static/html/mock.html b/src/main/resources/static/html/mock.html
index 2fb583c..81a78b3 100644
--- a/src/main/resources/static/html/mock.html
+++ b/src/main/resources/static/html/mock.html
@@ -15,7 +15,7 @@
         <div class="tool extended">
             <div class="tool-context">
                 <div>
-                    <h1>MockedServices <span class="version-span">v0.0.1</span></h1>
+                    <h1>MockedServices <span class="version-span">v1.0.0</span></h1>
                 </div>
                 <div>
                     <!-- h2 -->
@@ -56,7 +56,7 @@
                                 </datalist>
                             </div>
                         </div>
-                        <button class="small-margins half-width  action-button active">Save</button>
+                        <button class="small-margins half-width with-padding action-button active">Save</button>
                     </div>
                     <!-- body -->
                     <div class="small-vertical-margin">
@@ -114,15 +114,66 @@
             </div>
             <div class="tool-extention">
                 <!-- header -->
-                <div></div>
+                <div>
+                    <h2>Message List</h2>
+                </div>
                 <!-- tile list -->
                 <div>
-
+                    <div class="tile active">
+                        <div class="content">
+                            <div class="display-space-between">
+                                <div class="centered-vertically">
+                                    <p>Id: 1</p>
+                                    <p>Status: 200</p>
+                                </div>
+                                <div>
+                                    <button class="deletion-button btn-tile"><i class="icon-cancel"></i></button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="tile">
+                        <div class="content">
+                            <div class="display-space-between">
+                                <div class="centered-vertically">
+                                    <p>Id: 2</p>
+                                    <p>Status: 200</p>
+                                </div>
+                                <div>
+                                    <button class="deletion-button btn-tile"><i class="icon-cancel"></i></button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="tile">
+                        <div class="content">
+                            <div class="display-space-between">
+                                <div class="centered-vertically">
+                                    <p>Id: 3</p>
+                                    <p>Status: 200</p>
+                                </div>
+                                <div>
+                                    <button class="deletion-button btn-tile"><i class="icon-cancel"></i></button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
         <div class="tooltip-window lite">
-
+            <div>
+                <h2>What's this?</h2>
+                <p>MockedServices is a tool that allows developer to create, in easy and simple way, http server mocked endpoints for integration tests.</p>
+                <h2>Help</h2>
+                <p>When cursor hovers over an item. It's description is displayed below.</p>
+                <div class="large-vertical-margin">
+                    <div>
+                        <h3>Example</h3>
+                        <p>Here should be instruction for given field.</p>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
     <script type="text/javascript" src="/js/modal.js"></script>