Improved frontend

Frontend/assets/css/tools/mock/common.css

@@ -6,6 +6,7 @@
 @import url('r11tooltip.css');
 @import url('r11modal.css');
 @import url('r11flexbox.css');
+@import url('r11popup.css');
 
 @font-face {
     font-family: 'Material Icons';

Frontend/assets/css/tools/mock/r11addons.css

@@ -69,4 +69,27 @@
 .content p {
     margin: 0;
     padding: 0;
-}
+}
+
+.refresh-button{
+    float: right; 
+    border: none; 
+    background-color: unset; 
+    font-size: xx-large; 
+}
+
+.refresh-button:hover{
+  animation-name: rotation;
+  animation-duration: 0.8s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@keyframes rotation{
+    from{
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }

Frontend/assets/css/tools/mock/r11popup.css

@@ -47,16 +47,6 @@
     display:none;
 }
 
-
-#header-table tr td {
-    border: 1px black solid;
-    padding: 1%;
-}
-
-#header-table{
-    border-collapse: collapse;
-}
-
 @keyframes blur {
     0% {
       backdrop-filter: blur(0px);

Frontend/assets/css/tools/mock/r11tables.css

@@ -68,4 +68,17 @@
     background-color: #3bc4f1;
     text-align: left;
     color: white;
+}
+
+#header-table tr td {
+    border: 1px black solid;
+    padding: 1%;
+}
+
+#header-table{
+    border-collapse: collapse;
+}
+
+#historyTable, td{
+    padding: 1%;
 }

Frontend/assets/scripts/tools/mock/uianimation.js

@@ -90,8 +90,6 @@ function showHeadersHistory(element){
             }
         }
     );
-
-
 function focusInTip(element){
     showTip(element);
     focusedField = true;
@@ -102,6 +100,10 @@ function focusOutTip(element){
     hidTip(element);
 }
 
+function refreshHistoryRecords(){
+    getLast24hHistoryData();
+}
+
 function hidTip(element){
     if(focusedField) return;
     $('#'+element).removeClass('active');