visual changes to collaboration on doc and in PropertiesView

1 files changed, 80 insertions, 1 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index ccac5ffe4..ce5378e69 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -112,6 +112,33 @@ $resizeHandler: 8px;
             }
         }
 
+        .documentDecorations-lockButton {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: grey;
+            border: solid 1.5px rgb(72, 71, 71);
+            color: grey;
+            transition: 0.1s ease;
+            opacity: 1;
+            pointer-events: all;
+            width: 20px;
+            height: 20px;
+            min-width: 20px;
+            border-radius: 100%;
+            opacity: 0.5;
+            cursor: pointer;
+
+            &:hover {
+                color: rgb(72, 71, 71);
+                opacity: 1;
+            }
+
+            > svg {
+                margin: 0;
+            }
+        }
+
         .documentDecorations-minimizeButton {
             display: flex;
             align-items: center;
@@ -186,6 +213,58 @@ $resizeHandler: 8px;
         }
     }
 
+    .documentDecorations-share {
+        background: none;
+        opacity: 1;
+        grid-column: 3;
+        pointer-events: auto;
+        overflow: hidden;
+        text-align: center;
+        width: 100%;
+        max-width: 120px;
+        display: flex;
+        height: 20px;
+        border-radius: 8px;
+        border-width: 10px;
+        opacity: 0.3;
+        &:hover {
+            opacity: 1;
+        }
+        .documentDecorations-shareNone,
+        .documentDecorations-shareAdmin{
+            width: calc(100% + 10px);
+            background: grey;
+            color: rgb(71, 71, 71);
+            border-color: rgb(71, 71, 71);
+        }
+        .documentDecorations-shareEdit,
+        .documentDecorations-shareSelf-Edit{
+            width: calc(100% + 10px);
+            background: rgb(235, 235, 145);
+            color: rgb(75, 75, 5);
+            border-color: rgb(75, 75, 5);
+        }
+        .documentDecorations-shareAugment{
+            width: calc(100% + 10px);
+            background: rgb(160, 230, 160);
+            color:rgb(19, 80, 19);
+            border-color:rgb(19, 80, 19);
+
+        }
+        .documentDecorations-shareView{
+            width: calc(100% + 10px);
+            background: rgb(161, 161, 238);
+            color: rgb(25, 25, 101);
+            border-color: rgb(25, 25, 101);;
+        }
+        .documentDecorations-shareNot-Shared{
+            width: calc(100% + 10px);
+            background: rgb(210, 143, 143);
+            color: rgb(146, 58, 58);
+            border-color: rgb(146, 58, 58);;
+        }
+    }
+
     .documentDecorations-centerCont {
         grid-column: 2;
         background: none;
@@ -264,7 +343,7 @@ $resizeHandler: 8px;
     .documentDecorations-lock {
         position: relative;
         background: black;
-        color: gray;
+        color: rgb(145, 144, 144);
         height: 14;
         width: 14;
         pointer-events: all;