Merge branch 'master' into UI_Update_Eric_Ma

1 files changed, 102 insertions, 1 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index ccac5ffe4..ca3610cc0 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;
@@ -152,6 +179,7 @@ $resizeHandler: 8px;
             display: flex;
             height: 20px;
             border-radius: 8px;
+            gap: 2px;
             outline: none;
             border: none;
             opacity: 0.3;
@@ -186,6 +214,79 @@ $resizeHandler: 8px;
         }
     }
 
+    .documentDecorations-share {
+        background: none;
+        opacity: 1;
+        grid-column: 3;
+        pointer-events: auto;
+        min-width: fit-content;
+        text-align: center;
+        display: flex;
+        height: 21px;
+        opacity: 0.3;
+        &:hover {
+            opacity: 1;
+        }
+        
+
+        .checkbox{
+            display: inline;
+
+            .checkbox-box{
+                display: inline;
+                position: relative;
+                top: -2.5;
+                left: 35;
+                zoom: .7;
+            }
+
+            & .checkbox-text{
+                display: inline;
+                position: relative;
+                top: 1.5;
+                font-size: 8px;
+            }
+        }
+
+        .documentDecorations-shareNone{
+            width: calc(100% + 10px);
+            background: grey;
+            color: rgb(71, 71, 71);
+            border-radius: 8px;
+            border: 2px solid rgb(71, 71, 71);
+        }
+        .documentDecorations-shareEdit,
+        .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{
+            width: calc(100% + 10px);
+            background: rgb(208, 255, 208);
+            color:rgb(19, 80, 19);
+            border-radius: 8px;
+            border: 2px solid rgb(19, 80, 19);
+
+        }
+        .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{
+            width: calc(100% + 10px);
+            background: rgb(255, 207, 207);
+            color: rgb(146, 58, 58);
+            border-radius: 8px;
+            border: 2px solid rgb(146, 58, 58);
+        }
+    }
+
     .documentDecorations-centerCont {
         grid-column: 2;
         background: none;
@@ -264,7 +365,7 @@ $resizeHandler: 8px;
     .documentDecorations-lock {
         position: relative;
         background: black;
-        color: gray;
+        color: rgb(145, 144, 144);
         height: 14;
         width: 14;
         pointer-events: all;