Refactor of History module (#184)

Co-authored-by: widlam <mikolaj.widla@gmail.com>
Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: #184
Reviewed-by: Adam Bem <bema@noreply.example.com>
Co-authored-by: Mikolaj Widla <widlam@noreply.example.com>
Co-committed-by: Mikolaj Widla <widlam@noreply.example.com>

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

@@ -6,6 +6,8 @@
 @import url('r11tooltip.css');
 @import url('r11modal.css');
 @import url('r11flexbox.css');
+@import url('r11popup.css');
+@import url('../../highlight.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

@@ -0,0 +1,83 @@
+.popup-flex:not(.hiddable-container){
+    animation: blur 0.5s ease-in-out ;
+    animation-fill-mode: forwards;
+}
+.popup-flex{
+    display: flex; 
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    z-index: 50;
+    flex-direction: column;
+    gap: 2%;
+    position: fixed;
+    justify-content: center;
+}
+
+.popup-body{
+    min-width: 33%;
+    max-width: 60%;
+    max-height: 70%;
+    background-color: white;
+    box-shadow: 10px 10px 5px lightblue;
+    min-height: 45%;
+    border-radius: 1em;
+    text-align: center;
+    padding: 10px 15px 15px 15px;
+    color: black;
+    border: 1px #2A93B0 solid;
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+}
+
+.popup-button-close-container{
+    text-align: right;
+    margin-right: 2%;
+    margin-top: 1%;
+    font-size: xx-large;
+    font-weight: bold;
+    position: sticky;
+    top:0
+}
+
+.hiddable-popup-option{
+    flex-grow: 1;
+    overflow: auto;
+    padding: 1.5%;
+}
+
+.popup-button-close{
+    background: padding-box;
+    border: 0;
+}
+
+.popup-button-close:hover{
+    color: #2A93B0;
+}
+
+.hiddable-container{
+    display:none;
+}
+
+.hidden-popup-type{
+    display: none;
+}
+
+#history-request-body{
+    text-align: justify;
+}
+
+@keyframes blur {
+    0% {
+      backdrop-filter: blur(0px);
+    }
+
+    50% {
+      backdrop-filter: blur(5px);
+    }
+
+    100% {
+      backdrop-filter: blur(10px);
+    }
+  }

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

@@ -68,4 +68,29 @@
     background-color: #3bc4f1;
     text-align: left;
     color: white;
+}
+
+.table-default td{
+    text-align: center;
+}
+
+#header-table tr td {
+    border: 1px black solid;
+    padding: 1.5%;
+    
+}
+
+#header-table{
+    border-collapse: collapse;
+    width: 100%;
+    height: 100%;
+}
+
+.history-header-name{
+    min-width: 10vw;
+}
+
+#historyTable, td{
+    padding: 1%;
+    overflow-x: scroll;
 }