Fixed merge from presentation_updates

1 files changed, 195 insertions, 141 deletions

diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 08160a2f4..7bc6c1dfd 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -144,6 +144,21 @@ $light-background: #ececec;
         grid-template-columns: repeat(auto-fit, 70px);
     }
 
+    .ribbon-colorBox {
+        cursor: pointer;
+        border: solid 1px black;
+        display: flex;
+        margin-left: 5px;
+        margin-top: 5px;
+        margin-bottom: 5px;
+        justify-content: center;
+        align-items: center;
+        height: 15px;
+        width: 15px;
+        padding: 0px;
+        transform: translate(2px, 3px);
+    }
+
     .ribbon-property {
         font-size: 11;
         font-weight: 200;
@@ -415,10 +430,38 @@ $light-background: #ececec;
     .ribbon-button {
         cursor: pointer;
         font-size: 10.5;
+        font-weight: 300;
+        height: 20;
+        background-color: #979797;
+        color: white;
+        display: flex;
+        margin-top: 5px;
+        margin-bottom: 5px;
+        border-radius: 5px;
+        margin-right: 5px;
+        width: max-content;
+        justify-content: center;
+        align-items: center;
+        padding-right: 10px;
+        padding-left: 10px;
+    }
+
+    .ribbon-button:hover {
+        transform: scale(1.03);
+        transition: all 0.4s;
+        font-weight: 400;
+        opacity: 1;
+        color: white;
+        background-color: black;
+    }
+
+    .ribbon-toggle {
+        cursor: pointer;
+        font-size: 10.5;
         font-weight: 200;
         height: 20;
         background-color: $light-background;
-        border: solid 1px black;
+        border: solid 1px rgba(0, 0, 0, 0.5);
         display: flex;
         margin-top: 5px;
         margin-bottom: 5px;
@@ -431,12 +474,14 @@ $light-background: #ececec;
         padding-left: 10px;
     }
 
-    .ribbon-button.active {
+    .ribbon-toggle.active {
         background-color: #aedef8;
     }
 
-    .ribbon-button:hover {
-        background-color: lightgrey;
+    .ribbon-toggle:hover {
+        transform: scale(1.03);
+        transition: all 0.4s;
+        border: solid 1px rgba(0, 0, 0, 0.75);
     }
 
     svg.svg-inline--fa.fa-thumbtack.fa-w-12.toolbar-thumbtack {
@@ -801,82 +846,6 @@ $light-background: #ececec;
     }
 
 
-    .presPanelOverlay {
-        background-color: #323232;
-        color: white;
-        border-radius: 5px;
-        grid-template-rows: 100%;
-        height: 25;
-        width: max-content;
-        min-width: max-content;
-        justify-content: space-evenly;
-        align-items: center;
-        display: flex;
-        position: absolute;
-        right: 10px;
-        transition: all 0.2s;
-
-        .presPanel-button-text {
-            display: flex;
-            height: 20;
-            width: max-content;
-            font-family: Roboto;
-            font-weight: 400;
-            margin-left: 3px;
-            margin-right: 3px;
-            padding-right: 3px;
-            padding-left: 3px;
-            letter-spacing: normal;
-            border-radius: 5px;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.3s;
-        }
-
-        .presPanel-divider {
-            width: 0.5px;
-            height: 80%;
-            border-right: solid 1px #5a5a5a;
-        }
-
-        .presPanel-button-frame {
-            justify-self: center;
-            align-self: center;
-            align-items: center;
-            display: grid;
-            grid-template-columns: auto auto auto;
-            justify-content: space-around;
-            font-size: 11;
-            margin-left: 7;
-            width: 30;
-            height: 85%;
-            background-color: rgba(91, 157, 221, 0.4);
-            border-radius: 5px;
-        }
-
-        .presPanel-button {
-            cursor: pointer;
-            display: flex;
-            height: 20;
-            min-width: 20;
-            margin-left: 3px;
-            margin-right: 3px;
-            border-radius: 100%;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.3s;
-        }
-
-        .presPanel-button:hover {
-            background-color: #5a5a5a;
-        }
-
-        .presPanel-button-text:hover {
-            background-color: #5a5a5a;
-        }
-    }
-
-
 
     .collectionViewBaseChrome-viewPicker {
         min-width: 50;
@@ -952,80 +921,165 @@ $light-background: #ececec;
     }
 }
 
-.miniPres:hover {
-    opacity: 1;
-}
-
 .miniPres {
     cursor: grab;
     position: absolute;
-    overflow: hidden;
     right: 10;
     top: 10;
     opacity: 0.1;
     transition: all 0.4s;
-    /* border: solid 1px; */
     color: white;
-    /* box-shadow: black 0.4vw 0.4vw 0.8vw; */
+}
 
-    .miniPresOverlay {
-        display: grid;
-        grid-template-columns: auto auto auto auto auto auto auto auto auto auto;
-        grid-template-rows: 100%;
-        height: 100%;
-        justify-items: center;
-        align-items: center;
+.miniPres:hover {
+    opacity: 1;
+}
 
-        .miniPres-button-text {
-            cursor: pointer;
-            display: flex;
-            height: 20;
-            font-weight: 400;
-            min-width: 100%;
-            border-radius: 5px;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.3s;
-        }
+.presPanelOverlay {
+    background-color: #323232;
+    color: white;
+    border-radius: 5px;
+    grid-template-rows: 100%;
+    height: 25;
+    width: max-content;
+    min-width: max-content;
+    justify-content: space-evenly;
+    align-items: center;
+    display: flex;
+    position: absolute;
+    right: 10px;
+    transition: all 0.2s;
 
-        .miniPres-button-frame {
-            justify-self: center;
-            align-self: center;
-            align-items: center;
-            display: grid;
-            grid-template-columns: auto auto auto;
-            justify-content: space-around;
-            font-size: 11;
-            margin-left: 7;
-            width: 30;
-            height: 85%;
-            background-color: rgba(91, 157, 221, 0.4);
-            border-radius: 5px;
-        }
+    .presPanel-button-text {
+        display: flex;
+        height: 20;
+        width: max-content;
+        font-family: Roboto;
+        font-weight: 400;
+        margin-left: 3px;
+        margin-right: 3px;
+        padding-right: 3px;
+        padding-left: 3px;
+        letter-spacing: normal;
+        border-radius: 5px;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s;
+    }
 
-        .miniPres-divider {
-            width: 0.5px;
-            height: 80%;
-            border-right: solid 2px #5a5a5a;
-        }
+    .presPanel-divider {
+        width: 0.5px;
+        height: 80%;
+        border-right: solid 1px #5a5a5a;
+    }
 
-        .miniPres-button {
-            cursor: pointer;
-            display: flex;
-            height: 20;
-            min-width: 20;
-            border-radius: 100%;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.3s;
-        }
+    .presPanel-button-frame {
+        justify-self: center;
+        align-self: center;
+        align-items: center;
+        display: grid;
+        grid-template-columns: auto auto auto;
+        justify-content: space-around;
+        font-size: 11;
+        margin-left: 7;
+        width: 30;
+        height: 85%;
+        background-color: rgba(91, 157, 221, 0.4);
+        border-radius: 5px;
+    }
 
-        .miniPres-button:hover {
-            background-color: #5a5a5a;
-        }
+    .presPanel-button {
+        cursor: pointer;
+        display: flex;
+        height: 20;
+        min-width: 20;
+        margin-left: 3px;
+        margin-right: 3px;
+        border-radius: 100%;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s;
+    }
 
-        .miniPres-button-text:hover {
-            background-color: #5a5a5a;
-        }
+    .presPanel-button:hover {
+        background-color: #5a5a5a;
     }
-}
\ No newline at end of file
+
+    .presPanel-button-text:hover {
+        background-color: #5a5a5a;
+    }
+}
+
+// .miniPres {
+//     cursor: grab;
+//     position: absolute;
+//     overflow: hidden;
+//     right: 10;
+//     top: 10;
+//     opacity: 0.1;
+//     transition: all 0.4s;
+//     /* border: solid 1px; */
+//     color: white;
+//     /* box-shadow: black 0.4vw 0.4vw 0.8vw; */
+
+//     .miniPresOverlay {
+//         display: grid;
+//         grid-template-columns: auto auto auto auto auto auto auto auto auto auto;
+//         grid-template-rows: 100%;
+//         height: 100%;
+//         justify-items: center;
+//         align-items: center;
+
+//         .miniPres-button-text {
+//             cursor: pointer;
+//             display: flex;
+//             height: 20;
+//             font-weight: 400;
+//             min-width: 100%;
+//             border-radius: 5px;
+//             align-items: center;
+//             justify-content: center;
+//             transition: all 0.3s;
+//         }
+
+//         .miniPres-button-frame {
+//             justify-self: center;
+//             align-self: center;
+//             align-items: center;
+//             display: grid;
+//             grid-template-columns: auto auto auto;
+//             justify-content: space-around;
+//             font-size: 11;
+//             margin-left: 7;
+//             width: 30;
+//             height: 85%;
+//             background-color: rgba(91, 157, 221, 0.4);
+//             border-radius: 5px;
+//         }
+
+//         .miniPres-divider {
+//             width: 0.5px;
+//             height: 80%;
+//             border-right: solid 2px #5a5a5a;
+//         }
+
+//         .miniPres-button {
+//             cursor: pointer;
+//             display: flex;
+//             height: 20;
+//             min-width: 20;
+//             border-radius: 100%;
+//             align-items: center;
+//             justify-content: center;
+//             transition: all 0.3s;
+//         }
+
+//         .miniPres-button:hover {
+//             background-color: #5a5a5a;
+//         }
+
+//         .miniPres-button-text:hover {
+//             background-color: #5a5a5a;
+//         }
+//     }
+// }
\ No newline at end of file