ui bug fixes

1 files changed, 72 insertions, 56 deletions

diff --git a/src/client/views/nodes/DiagramBox.scss b/src/client/views/nodes/DiagramBox.scss
index 64b0e6c0e..1b6efe01d 100644
--- a/src/client/views/nodes/DiagramBox.scss
+++ b/src/client/views/nodes/DiagramBox.scss
@@ -8,11 +8,12 @@
         justify-content: center;
         flex-direction: column;
         height:100%;
+        padding:20px;
+        padding-right:40px;
         button{
-            font-size:10px;
-            margin:5px;
+            font-size:15px;
             height:100%;
-            width:30%;
+            width:100%;
             border: none;
             border-radius: 5px;
             cursor: pointer;
@@ -23,6 +24,7 @@
         button:hover {
             background-color: #0056b3;
         }
+        
     }
     .DiagramBox-wrapper {
         width: 100%;
@@ -31,43 +33,58 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        .backButton{
-            position: absolute;
-            top:0;
-            left:0;
-        }
-        .search-bar {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            align-items: center;
-            width: 100%;
-            padding: 10px;
-
-            textarea {
-                flex: 1;
-                height: 5px;
-                margin-right: 10px;
-                min-height: 20px;
-                resize:none;
-                overflow: hidden;
-            }
-
-            button {
-                padding: 5px 10px;
-                width:80px;
-                height:30px;
-                border-radius: 10px;
-            }
-        }
-
         .content {
-            flex: 1;
             display: flex;
             justify-content: center;
             align-items: center;
+            flex-direction: column;
+            padding:10px;
             width:100%;
             height:100%;
+            .topbar{
+                .backButtonDrawing{
+                    padding: 5px 10px;
+                    height:23px;
+                    border-radius: 10px;
+                    text-align: center;
+                    padding:0;
+                    width:50px;
+                    font-size:10px;
+                    position:absolute;
+                    top:10px;
+                    left:10px;
+                }
+                p{
+                    margin-left:60px
+                }
+            }
+            .search-bar {
+                .backButton{
+                    text-align: center;
+                    padding:0;
+                    width:50px;
+                    font-size:10px;
+
+                }
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: center;
+                align-items: center;
+                width: 100%;
+                textarea {
+                    flex: 1;
+                    height: 5px;
+                    min-height: 20px;
+                    resize:none;
+                    overflow: hidden;
+                }
+                button {
+                    padding: 5px 10px;
+                    width:80px;
+                    height:23px;
+                    border-radius: 10px;
+                }
+            }
             .diagramBox{
                 flex: 1;
                 display: flex;
@@ -76,28 +93,27 @@
                 svg{
                     max-width: none !important;
                 }
-            }
-        }
-
-        .loading-circle {
-            position: absolute;
-            display:flex;
-            align-items: center;
-            justify-content: center;
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            border: 3px solid #ccc;
-            border-top-color: #333;
-            animation: spin 1s infinite linear;
-        }
-
-        @keyframes spin {
-            0% {
-                transform: rotate(0deg);
-            }
-            100% {
-                transform: rotate(360deg);
+                .loading-circle {
+                    position: absolute;
+                    display:flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 50px;
+                    height: 50px;
+                    border-radius: 50%;
+                    border: 3px solid #ccc;
+                    border-top-color: #333;
+                    animation: spin 1s infinite linear;
+                }
+        
+                @keyframes spin {
+                    0% {
+                        transform: rotate(0deg);
+                    }
+                    100% {
+                        transform: rotate(360deg);
+                    }
+                }
             }
         }
     }