1 files changed, 118 insertions, 56 deletions

diff --git a/src/client/util/SharingManager.scss b/src/client/util/SharingManager.scss
index fcbc05f8a..2708876a3 100644
--- a/src/client/util/SharingManager.scss
+++ b/src/client/util/SharingManager.scss
@@ -1,9 +1,10 @@
 @import "../views/globalCssVariables";
 
 .sharing-interface {
-    display: flex;
-    flex-direction: column;
-    width: 730px;
+    // display: flex;
+    // flex-direction: column;
+    width: 600px;
+    height: 360px;
 
     .dialogue-box {
         width: 450;
@@ -14,8 +15,90 @@
         transform: translate(-20px, -20px);
     }
 
+    select {
+        text-align: justify;
+        text-align-last: end
+    }
+
     .sharing-contents {
         display: flex;
+        flex-direction: column;
+
+        .close-button {
+            position: absolute;
+            right: 1em;
+            top: 1em;
+            cursor: pointer;
+            z-index: 999;
+        }
+
+        .share-setup {
+            display: flex;
+            margin-bottom: 20px;
+            align-items: center;
+            height: 36;
+
+            .user-search {
+                width: 90%;
+            }
+
+            .permissions-select {
+                z-index: 1;
+                margin-left: -100;
+                border: none;
+                outline: none;
+                text-align: justify; // for Edge
+                text-align-last: end;
+            }
+
+            .share-button {
+                height: 105%;
+                margin-left: 2%;
+                background-color: #979797;
+            }
+        }
+
+        .main-container {
+            display: flex;
+
+
+            .individual-container,
+            .group-container {
+                width: 50%;
+
+                .share-title {
+                    margin-top: 20px;
+                    margin-bottom: 20px;
+                }
+
+                .groups-list,
+                .users-list {
+                    font-style: italic;
+                    background: gainsboro;
+                    // border: 1px solid black;
+                    padding-left: 10px;
+                    padding-right: 10px;
+                    overflow-y: scroll;
+                    overflow-x: hidden;
+                    text-align: left;
+                    display: flex;
+                    align-content: center;
+                    align-items: center;
+                    text-align: center;
+                    justify-content: center;
+                    // color: red;
+                    color: black;
+                    height: 255px;
+                    margin: 0 2;
+
+
+                    .none {
+                        font-style: italic;
+
+                    }
+                }
+            }
+        }
 
         button {
             background: $darker-alt-accent;
@@ -31,37 +114,6 @@
             transition: transform 0.2s;
             height: 25;
         }
-
-        .individual-container,
-        .group-container {
-            width: 50%;
-
-            .share-groups,
-            .share-individual {
-                margin-top: 20px;
-                margin-bottom: 20px;
-            }
-
-            .groups-list,
-            .users-list {
-                font-style: italic;
-                background: white;
-                border: 1px solid black;
-                padding-left: 10px;
-                padding-right: 10px;
-                overflow-y: scroll;
-                overflow-x: hidden;
-                text-align: left;
-                display: flex;
-                align-content: center;
-                align-items: center;
-                text-align: center;
-                justify-content: center;
-                color: red;
-                height: 150px;
-                margin: 0 2;
-            }
-        }
     }
 
     .focus-span {
@@ -69,11 +121,12 @@
     }
 
     p {
-        font-size: 15px;
+        font-size: 20px;
         text-align: left;
-        font-style: italic;
-        padding: 0;
+        // font-style: italic;
+        // padding: 0;
         margin: 0 0 20px 0;
+        color: black;
     }
 
     .hr-substitute {
@@ -108,30 +161,39 @@
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
-        width: 700px;
-        min-width: 700px;
-        max-width: 700px;
+        width: 100%;
+        // min-width: 700px;
+        // max-width: 700px;
         text-align: left;
         font-style: normal;
         font-size: 14;
         font-weight: normal;
         padding: 0;
-        align-items: baseline;
+        align-items: center;
+
+        &:hover .padding {
+            white-space: unset;
+        }
 
         .padding {
             padding: 0 10px 0 0;
             color: black;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            max-width: 48%;
         }
 
         .permissions-dropdown {
-            outline: none;
+            border: none;
             height: 25;
+            background: gainsboro;
         }
 
         .edit-actions {
             display: flex;
             position: absolute;
-            right: 51.5%;
+            right: -10;
         }
 
     }
@@ -172,17 +234,17 @@
         }
     }
 
-    .close-button {
-        border-radius: 5px;
-        margin-top: 20px;
-        padding: 10px 0;
-        background: aliceblue;
-        transition: 0.5s ease all;
-        border: 1px solid;
-        border-color: aliceblue;
-    }
-
-    .close-button:hover {
-        border-color: black;
-    }
+    // .close-button {
+    //     border-radius: 5px;
+    //     margin-top: 20px;
+    //     padding: 10px 0;
+    //     background: aliceblue;
+    //     transition: 0.5s ease all;
+    //     border: 1px solid;
+    //     border-color: aliceblue;
+    // }
+
+    // .close-button:hover {
+    //     border-color: black;
+    // }
 }
\ No newline at end of file