merge

1 files changed, 114 insertions, 66 deletions

diff --git a/src/client/util/SharingManager.scss b/src/client/util/SharingManager.scss
index fcbc05f8a..130785672 100644
--- a/src/client/util/SharingManager.scss
+++ b/src/client/util/SharingManager.scss
@@ -1,29 +1,112 @@
-@import "../views/globalCssVariables";
-
 .sharing-interface {
-    display: flex;
-    flex-direction: column;
-    width: 730px;
-
-    .dialogue-box {
-        width: 450;
-        height: 300;
-    }
+    width: 600px;
+    height: 360px;
 
     .overlay {
         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%;
+
+                input {
+                    height: 30;
+                }
+            }
+
+            .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;
+            margin-top: -10px;
+
+            .individual-container,
+            .group-container {
+                width: 50%;
+                display: flex;
+                flex-direction: column;
+
+                .user-sort {
+                    text-align: left;
+                    margin-left: 10;
+                    cursor: pointer;
+                }
+
+                .share-title {
+                    margin-top: 20px;
+                    margin-bottom: 20px;
+                }
+
+                .groups-list,
+                .users-list {
+                    font-style: italic;
+                    background: #e8e8e8;
+                    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: black;
+                    height: 250px;
+                    margin: 0 2;
+
+
+                    .none {
+                        font-style: italic;
+
+                    }
+                }
+            }
+        }
 
         button {
-            background: $darker-alt-accent;
             outline: none;
             border-radius: 5px;
             border: 0px;
             color: #fcfbf7;
-            text-transform: uppercase;
+            text-transform: none;
             letter-spacing: 2px;
             font-size: 75%;
             padding: 0 10;
@@ -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,10 @@
     }
 
     p {
-        font-size: 15px;
+        font-size: 20px;
         text-align: left;
-        font-style: italic;
-        padding: 0;
         margin: 0 0 20px 0;
+        color: black;
     }
 
     .hr-substitute {
@@ -108,30 +159,41 @@
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
-        width: 700px;
-        min-width: 700px;
-        max-width: 700px;
+        width: 100%;
         text-align: left;
         font-style: normal;
         font-size: 14;
         font-weight: normal;
         padding: 0;
-        align-items: baseline;
+        align-items: center;
+
+        .group-info {
+            cursor: pointer;
+        }
+
+        &:hover .padding {
+            white-space: unset;
+        }
 
         .padding {
             padding: 0 10px 0 0;
             color: black;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            max-width: 40%;
         }
 
         .permissions-dropdown {
-            outline: none;
+            border: none;
             height: 25;
+            background-color: #e8e8e8;
         }
 
         .edit-actions {
             display: flex;
             position: absolute;
-            right: 51.5%;
+            right: -10;
         }
 
     }
@@ -171,18 +233,4 @@
             padding-top: 12px;
         }
     }
-
-    .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