Make user grid layout reusable

customize.dist/src/less2/include/alertify.less

@@ -29,6 +29,7 @@
     // Logs to show that something has happened
     // These show only once
 
+
     .alertify-logs {
         z-index: 100001; // alertify logs should be in front of alertify modals
         @media print {
@@ -466,75 +467,10 @@
         }
     }
     .cp-share-column {
-        .cp-share-grid, .cp-share-list {
-            .avatar_main(40px);
-            display: flex;
-            justify-content: space-between;
-            flex-wrap: wrap;
-        }
-        .cp-share-list {
-            margin-bottom: 15px;
-        }
-        .cp-share-grid {
+        .cp-usergrid-grid {
             max-height: 225px;
             overflow-x: auto;
         }
-        .cp-recent-only {
-            .cp-share-grid, .cp-share-grid-filter {
-                display: none;
-            }
-        }
-        .cp-share-grid-filter {
-            display: flex;
-            input {
-                flex: 1;
-                min-width: 0;
-                margin-bottom: 0 !important;
-                &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-                    color: @colortheme_alertify-primary-text;
-                    opacity: 1; /* Firefox */
-                }
-            }
-            margin-bottom: 15px;
-            &:empty {
-                margin: 0;
-                display: none;
-            }
-        }
-        .cp-share-friend {
-            width: 70px;
-            height: 70px;
-            display: flex;
-            flex-flow: column;
-            justify-content: center;
-            align-items: center;
-            padding: 5px;
-            margin-bottom: 6px;
-            cursor: default;
-            transition: order 0.5s, background-color 0.5s;
-            margin-top: 1px;
-            .tools_unselectable();
-
-            &.cp-selected {
-                background-color: @colortheme_alertify-primary;
-                color: @colortheme_alertify-primary-text;
-                order: -1 !important;
-            }
-            .cp-share-friend-avatar {
-                min-height: 40px;
-            }
-            .cp-share-friend-name {
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                width: 100%;
-                text-align: center;
-            }
-            border: 1px solid @colortheme_alertify-primary;
-            &.cp-fake-friend {
-                visibility: hidden;
-            }
-        }
     }
 }
 

customize.dist/src/less2/include/framework.less

@@ -14,6 +14,7 @@
 @import (reference) "./app-noscroll.less";
 @import (reference) "./messenger.less";
 @import (reference) "./cursor.less";
+@import (reference) "./usergrid.less";
 
 .framework_main(@bg-color, @warn-color, @color) {
     --LessLoader_require: LessLoader_currentFile();
@@ -40,6 +41,7 @@
     .password_main();
     .messenger_main();
     .cursor_main();
+    .usergrid_main();
     .creation_main(
         @bg-color: @bg-color,
         @color: @color
@@ -73,6 +75,7 @@
     .tippy_main();
     .checkmark_main(20px);
     .password_main();
+    .usergrid_main();
     font: @colortheme_app-font;
 }