Merge pull request 'bema/ref/visual_tools_revamp' (#31) from bema/ref/visual_tools_revamp into dev

Reviewed-on: R11/release11-tools-web#31

Backend/mocked-services/src/main/resources/static/css/r11addons.css

@@ -21,12 +21,12 @@
 .tile {
     width: 100%;
     padding-top: 40%;
-    border: 1px solid gray;
-    border-radius: 3px;
+    border-radius: 5px;
     position: relative;
-    background: #f0f0f095;
+    background: #D5D7E6;
     margin-bottom: 10px;
     cursor: default;
+    border-bottom: 1px solid darkgray;
 }
 
 .tile:hover {
@@ -34,7 +34,7 @@
 }
 
 .tile.active {
-    background: #00000070;
+    background: #2A93B0;
     color: white;
     filter: none;
 }

Backend/mocked-services/src/main/resources/static/css/r11tool.css

@@ -1,4 +1,9 @@
 @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap');
+
+input {
+    box-sizing: border-box;
+}
+
 .hyperlink, .hyperlink:visited, .hyperlink:active {
     color: rgb(47, 125, 146);
     cursor: pointer;
@@ -9,6 +14,7 @@
 }
 
 .bordered-field {
+    background-color: #FFFFFF;
     border: 2px solid rgba(93, 99, 96, 0.705);
     border-radius: 5px;
     padding: 8px;
@@ -182,9 +188,10 @@ body {
 }
 
 .action-button.active {
-    background: #3bc4f1;
+    background: #2A93B0;
     border: 1px solid #7ed0eb;
     cursor: pointer;
+    
 }
 
 .action-button.active:hover {
@@ -194,6 +201,7 @@ body {
 .action-button {
     background: rgba(155, 165, 160, 0.507);
     border:1px solid rgba(186, 197, 191, 0.507);
+    border-radius: 5px;
     color: white;
     padding: 10px 20px;
     font-weight: 700;

Backend/mocked-services/src/main/resources/static/css/r11tooltip.css

@@ -1,8 +1,7 @@
 .tooltip-window {
     position: fixed;
     right: 0;
-    filter: drop-shadow(-2px 0px 2px darkgray);
-    background: #e8f3f7;
+    background: #FFFFFF;
     padding: 15px 30px;
     font-family: 'Nunito', sans-serif;
     width: 40%;

Frontend/assets/css/tools/r11form.css

@@ -19,7 +19,7 @@
     background: #FFFFFF;
     padding: 15px 30px;
     font-family: 'Nunito', sans-serif;
-    width: 40%;
+    width: 30%;
     height: 100%;
     overflow: scroll;
 }
@@ -60,7 +60,7 @@
 }
 
 .tool {
-    width: 55%;
+    width: 65%;
     display: flex;
     justify-content: space-evenly;
 }
@@ -252,7 +252,7 @@
 }
 
 .action-button.active {
-    background: #3bc4f1;
+    background: #2A93B0;
     border: 1px solid #7ed0eb;
     cursor: pointer;
     border-radius: 5px;
@@ -390,7 +390,7 @@
     padding: 15px 0;
     margin: 5px 0px;
     font-size: 18px;
-    background: #ADAEBA;
+    background: #D5D7E6;
     cursor: pointer;
     border-bottom: darkgray 2px solid !important;
     border-radius: 5px;