From 2945794859f47afdbf507bdc92f2a05b3104d71d Mon Sep 17 00:00:00 2001
From: mikolaj widla <mikolaj.widla@gmail.com>
Date: Mon, 27 Feb 2023 11:31:29 +0100
Subject: [PATCH] Stylized button, and UUID input field

---
 .../src/main/resources/static/css/common.css    |  3 ++-
 .../src/main/resources/static/css/r11addons.css |  2 +-
 .../main/resources/static/css/r11flexbox.css    | 17 +++++++++++++++++
 .../src/main/resources/static/html/mock.html    |  7 ++-----
 4 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/Backend/mocked-services/src/main/resources/static/css/common.css b/Backend/mocked-services/src/main/resources/static/css/common.css
index b8eb791..04e0b19 100644
--- a/Backend/mocked-services/src/main/resources/static/css/common.css
+++ b/Backend/mocked-services/src/main/resources/static/css/common.css
@@ -1,7 +1,8 @@
 @import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css');
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 @import url('r11addons.css');
 @import url('r11tables.css');
 @import url('r11tool.css');
 @import url('r11tooltip.css');
 @import url('r11modal.css');
-@import url('r11flexbox.css')
+@import url('r11flexbox.css')
\ No newline at end of file
diff --git a/Backend/mocked-services/src/main/resources/static/css/r11addons.css b/Backend/mocked-services/src/main/resources/static/css/r11addons.css
index ffd638d..94db8ae 100644
--- a/Backend/mocked-services/src/main/resources/static/css/r11addons.css
+++ b/Backend/mocked-services/src/main/resources/static/css/r11addons.css
@@ -69,4 +69,4 @@
 .content p {
     margin: 0;
     padding: 0;
-}
+}
\ No newline at end of file
diff --git a/Backend/mocked-services/src/main/resources/static/css/r11flexbox.css b/Backend/mocked-services/src/main/resources/static/css/r11flexbox.css
index 4cfe4e1..ad8eada 100644
--- a/Backend/mocked-services/src/main/resources/static/css/r11flexbox.css
+++ b/Backend/mocked-services/src/main/resources/static/css/r11flexbox.css
@@ -2,4 +2,21 @@
     display: flex;
     flex-direction: row;
     align-items: stretch;
+    position: relative;
+}
+
+#uuid-flex-container .uuid-inputField-icon{
+    font-size: medium;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin-right: 41%;
+    margin-top: 1%;
+    background: none;
+    color: black;
+    border: 0;
+}
+
+.uuid-inputField-icon-span {
+    font-size: x-large;
 }
\ No newline at end of file
diff --git a/Backend/mocked-services/src/main/resources/static/html/mock.html b/Backend/mocked-services/src/main/resources/static/html/mock.html
index 459abdc..59267fa 100644
--- a/Backend/mocked-services/src/main/resources/static/html/mock.html
+++ b/Backend/mocked-services/src/main/resources/static/html/mock.html
@@ -7,7 +7,6 @@
     <link rel="stylesheet" href="../css/main.css" type="text/css">
     <!-- <link rel="stylesheet" href="css/common.css" type="text/css"> -->
     <link rel="stylesheet" href="../css/common.css" type="text/css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0" />
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <!-- <script src="../js/dyn_host.js"></script> -->
 </head>
@@ -22,12 +21,10 @@
                     <label for="uuid-input" class="block-display">UUID</label>
                     <div id="uuid-flex-container">
                         <input id="uuid-input" disabled class="bordered-field flex-item with-padding diabled-background" value="UUID" style="margin-bottom:2%; width: 60%;"/>
-                        <button class="modification-button flex-item btn-copy action-button"> 
-                            <span class="material-symbols-outlined">content_copy</span> 
+                        <button class="uuid-inputField-icon modification-button flex-item btn-copy action-button"> 
+                            <span class="material-icons uuid-inputField-icon-span ">content_copy</span> 
                         </button>
                     </div>
-                    
-                </br>
                     <label for="editable">Editable</label>
                     <input type="checkbox" name="editable" id="editable" value="false"/>
                 </div>