1 files changed, 57 insertions, 3 deletions

diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 7bc6c1dfd..de2aee8fa 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -22,7 +22,6 @@ $light-background: #ececec;
         position: relative;
         height: calc(100% - 67px);
         width: 100%;
-        margin-top: 3px;
     }
 
     .presBox-toolbar-dropdown {
@@ -57,11 +56,14 @@ $light-background: #ececec;
             letter-spacing: 0;
             display: flex;
             align-items: center;
+            justify-content: center;
             transition: 0.5s;
         }
 
         .toolbar-button.active {
             color: $light-blue;
+            background-color: white;
+            border-radius: 100%;
         }
 
         .toolbar-transitionButtons {
@@ -129,7 +131,6 @@ $light-background: #ececec;
     position: relative;
     display: inline;
     font-family: Roboto;
-    color: black;
     z-index: 100;
     transition: 0.7s;
 
@@ -412,6 +413,53 @@ $light-background: #ececec;
             transform: scale(1.05);
             transition: all 0.4s;
         }
+
+        .ribbon-frameList {
+            width: calc(100% - 5px);
+            height: 50px;
+            background-color: #ececec;
+            border: 1px solid #9f9f9f;
+            grid-template-rows: max-content;
+    
+            .frameList-header {
+                display: grid;
+                width: 100%;
+                height: 20px;
+                background-color: #9f9f9f;
+    
+                .frameList-headerButtons {
+                    display: flex;
+                    grid-column: 7;
+                    width: 60px;
+                    justify-self: right;
+                    justify-content: flex-end;
+            
+                    .headerButton {
+                        cursor: pointer;
+                        position: relative;
+                        border-radius: 100%;
+                        z-index: 300;
+                        width: 15px;
+                        height: 15px;
+                        display: flex;
+                        font-size: 10px;
+                        justify-self: center;
+                        align-self: center;
+                        background-color: rgba(0, 0, 0, 0.5);
+                        color: white;
+                        justify-content: center;
+                        align-items: center;
+                        transition: 0.2s;
+                        margin-right: 3px;
+                    }
+            
+                    .headerButton:hover {
+                        background-color: rgba(0, 0, 0, 1);
+                        transform: scale(1.15);
+                    }
+                }
+            }
+        }
     }
 
     .selectedList {
@@ -463,6 +511,7 @@ $light-background: #ececec;
         background-color: $light-background;
         border: solid 1px rgba(0, 0, 0, 0.5);
         display: flex;
+        color: black;
         margin-top: 5px;
         margin-bottom: 5px;
         border-radius: 5px;
@@ -523,6 +572,7 @@ $light-background: #ececec;
             border-radius: 5px;
             font-size: 10;
             height: 25;
+            color: black;
             padding-left: 5px;
             align-items: center;
             margin-top: 5px;
@@ -620,7 +670,7 @@ $light-background: #ececec;
     position: relative;
     align-self: flex-start;
     justify-self: flex-start;
-    width: 80%;
+    width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
@@ -951,6 +1001,7 @@ $light-background: #ececec;
     transition: all 0.2s;
 
     .presPanel-button-text {
+        cursor: pointer;
         display: flex;
         height: 20;
         width: max-content;
@@ -1003,11 +1054,14 @@ $light-background: #ececec;
 
     .presPanel-button:hover {
         background-color: #5a5a5a;
+        transform: scale(1.2);
     }
 
     .presPanel-button-text:hover {
         background-color: #5a5a5a;
     }
+
+    
 }
 
 // .miniPres {