new UI for collapsing

1 files changed, 47 insertions, 19 deletions

diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index 1fda8e5a2..cb4b7375b 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -48,20 +48,26 @@
 
     .propertiesView-settings {
         border-bottom: 1px solid black;
-        padding: 8.5px;
+        //padding: 8.5px;
         font-size: 12.5px;
         font-weight: bold;
 
         .propertiesView-settings-title {
             font-weight: bold;
             font-size: 12.5px;
-            padding-bottom: 7px;
+            padding: 4px;
             display: flex;
             width: 200px;
+            color: white;
+            padding-left: 8px;
+            background-color: rgb(51, 51, 51);
 
             .propertiesView-settings-title-icon {
+                float: right;
+                right: 0;
+                position: absolute;
                 margin-left: 2px;
-                margin-right: 7px;
+                margin-right: 9px;
 
                 &:hover {
                     cursor: pointer;
@@ -70,25 +76,33 @@
         }
 
         .propertiesView-settings-content {
-            margin-left: 5px;
+            margin-left: 12px;
             padding-bottom: 10px;
+            padding-top: 8px;
         }
 
     }
 
     .propertiesView-sharing {
         border-bottom: 1px solid black;
-        padding: 8.5px;
+        //padding: 8.5px;
 
         .propertiesView-sharing-title {
-            font-size: 12.5px;
             font-weight: bold;
-            padding-bottom: 7px;
+            font-size: 12.5px;
+            padding: 4px;
             display: flex;
+            width: 200px;
+            color: white;
+            padding-left: 8px;
+            background-color: rgb(51, 51, 51);
 
             .propertiesView-sharing-title-icon {
+                float: right;
+                right: 0;
+                position: absolute;
                 margin-left: 2px;
-                margin-right: 7px;
+                margin-right: 9px;
 
                 &:hover {
                     cursor: pointer;
@@ -98,6 +112,7 @@
 
         .propertiesView-sharing-content {
             font-size: 10px;
+            padding: 10px;
             margin-left: 5px;
         }
     }
@@ -165,9 +180,6 @@
 
                 .permissions-select {
                     z-index: 1;
-                    //border: 0.5px solid grey;
-                    //border-radius: 4px;
-                    //outline: none;
                     border: none;
                     background-color: inherit;
                     width: 75px;
@@ -186,11 +198,17 @@
 
     .propertiesView-fields {
         border-bottom: 1px solid black;
-        padding: 8.5px;
+        //padding: 8.5px;
 
         .propertiesView-fields-title {
-            padding-bottom: 7px;
+            font-weight: bold;
+            font-size: 12.5px;
+            padding: 4px;
             display: flex;
+            width: 200px;
+            color: white;
+            padding-left: 8px;
+            background-color: rgb(51, 51, 51);
 
             .propertiesView-fields-title-name {
                 font-size: 12.5px;
@@ -201,8 +219,11 @@
             }
 
             .propertiesView-fields-title-icon {
+                float: right;
+                right: 0;
+                position: absolute;
                 margin-left: 2px;
-                margin-right: 7px;
+                margin-right: 9px;
 
                 &:hover {
                     cursor: pointer;
@@ -225,7 +246,8 @@
 
         .propertiesView-fields-content {
             font-size: 10px;
-            margin-left: 5px;
+            margin-left: 2px;
+            padding: 10px;
 
             &:hover {
                 cursor: pointer;
@@ -254,17 +276,23 @@
     }
 
     .propertiesView-layout {
-        padding: 8.5px;
 
         .propertiesView-layout-title {
             font-weight: bold;
             font-size: 12.5px;
-            padding-bottom: 7px;
+            padding: 4px;
             display: flex;
+            width: 200px;
+            color: white;
+            padding-left: 8px;
+            background-color: rgb(51, 51, 51);
 
             .propertiesView-layout-title-icon {
+                float: right;
+                right: 0;
+                position: absolute;
                 margin-left: 2px;
-                margin-right: 7px;
+                margin-right: 9px;
 
                 &:hover {
                     cursor: pointer;
@@ -273,8 +301,8 @@
         }
 
         .propertiesView-layout-content {
-            margin-left: 5px;
             overflow: hidden;
+            padding: 10px;
         }
 
     }