Merge branch 'master' into sophie-ai-images

1 files changed, 33 insertions, 26 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index ca3610cc0..f41cf1385 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -14,18 +14,19 @@ $resizeHandler: 8px;
         border-radius: 100%;
         height: 30;
         width: 30;
-        right: -30;
-        top: calc(50% - 15px);
+        right: -40;
+        bottom: -40;
+        //top: calc(50% - 15px);
         position: absolute;
         pointer-events: all;
         cursor: pointer;
-        background: white;
+        background: transparent;
         display: flex;
         justify-content: center;
         align-items: center;
         text-align: center;
         font-size: 30px;
-        opacity: 0.1;
+        opacity: 0.6;
         &:hover {
             opacity: 1;
         }
@@ -227,20 +228,19 @@ $resizeHandler: 8px;
         &:hover {
             opacity: 1;
         }
-        
 
-        .checkbox{
+        .checkbox {
             display: inline;
 
-            .checkbox-box{
+            .checkbox-box {
                 display: inline;
                 position: relative;
                 top: -2.5;
                 left: 35;
-                zoom: .7;
+                zoom: 0.7;
             }
 
-            & .checkbox-text{
+            & .checkbox-text {
                 display: inline;
                 position: relative;
                 top: 1.5;
@@ -248,7 +248,7 @@ $resizeHandler: 8px;
             }
         }
 
-        .documentDecorations-shareNone{
+        .documentDecorations-shareNone {
             width: calc(100% + 10px);
             background: grey;
             color: rgb(71, 71, 71);
@@ -256,29 +256,28 @@ $resizeHandler: 8px;
             border: 2px solid rgb(71, 71, 71);
         }
         .documentDecorations-shareEdit,
-        .documentDecorations-shareAdmin{
+        .documentDecorations-shareAdmin {
             width: calc(100% + 10px);
             background: rgb(254, 254, 199);
             color: rgb(75, 75, 5);
             border-radius: 8px;
             border: 2px solid rgb(75, 75, 5);
         }
-        .documentDecorations-shareAugment{
+        .documentDecorations-shareAugment {
             width: calc(100% + 10px);
             background: rgb(208, 255, 208);
-            color:rgb(19, 80, 19);
+            color: rgb(19, 80, 19);
             border-radius: 8px;
             border: 2px solid rgb(19, 80, 19);
-
         }
-        .documentDecorations-shareView{
+        .documentDecorations-shareView {
             width: calc(100% + 10px);
             background: rgb(213, 213, 255);
             color: rgb(25, 25, 101);
             border-radius: 8px;
             border: 2px solid rgb(25, 25, 101);
         }
-        .documentDecorations-shareNot-Shared{
+        .documentDecorations-shareNot-Shared {
             width: calc(100% + 10px);
             background: rgb(255, 207, 207);
             color: rgb(146, 58, 58);
@@ -320,8 +319,8 @@ $resizeHandler: 8px;
     .documentDecorations-bottomResizer,
     .documentDecorations-rightResizer {
         pointer-events: auto;
-        background: $medium-gray;
-        opacity: 0.2;
+        background: $medium-gray-dim;
+        //opacity: 0.2;
         &:hover {
             opacity: 1;
         }
@@ -354,7 +353,7 @@ $resizeHandler: 8px;
         position: absolute;
         border-radius: 100%;
         left: 7px;
-        top: 27px;
+        top: 7px;
         background: $medium-gray;
         height: 10;
         width: 10;
@@ -366,15 +365,19 @@ $resizeHandler: 8px;
         position: relative;
         background: black;
         color: rgb(145, 144, 144);
-        height: 14;
-        width: 14;
+        height: 20;
+        width: 20;
         pointer-events: all;
         margin: auto;
         display: flex;
         align-items: center;
-        flex-direction: column;
-        border-radius: 15%;
+        border-radius: 100%;
         cursor: default;
+        svg {
+            width: 10;
+            height: 10;
+            margin: auto;
+        }
     }
 
     .documentDecorations-rotationPath {
@@ -447,9 +450,9 @@ $resizeHandler: 8px;
         opacity: 1;
     }
 
-    .documentDecorations-bottomRightResizer {
-        grid-row: 4;
-    }
+    // .documentDecorations-bottomRightResizer {
+    //     grid-row: 4;
+    // }
 
     .documentDecorations-topRightResizer,
     .documentDecorations-bottomLeftResizer {
@@ -488,6 +491,10 @@ $resizeHandler: 8px;
     }
 }
 
+.documentDecorations-container.showNothing {
+    margin-top: $headerHeight;
+    grid-template-rows: $resizeHandler 1fr $resizeHandler;
+}
 .documentDecorations-background {
     background: lightblue;
     position: absolute;