['share' dialog, group 'manage members' dialog] fixup for the 'select (#7949)

users' icon & the input before it; improved the code

- highlight the 'select user' icon in the 'share' dialog when hover on
  it
- fixed the content width of the 'search users' inputs in the 'share'
  dialog & the group 'manage members' dialog
- improved code: added a common component for the 'select user' icon

frontend/src/css/manage-members-dialog.css

@@ -33,21 +33,6 @@
   margin-top: 10px;
 }
 
-.group-manage-members-dialog .add-members .toggle-detail-btn {
-  position: absolute;
-  top: 6px;
-  right: 90px;
-  border-left: 1px solid #ccc;
-  padding-left: 9px;
-  font-size: 18px;
-  cursor: pointer;
-  color: #999;
-}
-
-.group-manage-members-dialog .add-members .toggle-detail-btn:hover {
-  color: #666;
-}
-
 .group-manage-members-dialog .search-group-members {
   color: #666;
   font-size: 14px;

frontend/src/css/select-users-icon.css

@@ -0,0 +1,19 @@
+.add-members .toggle-detail-btn {
+  position: absolute;
+  top: 6px;
+  right: 12px;
+  border-left: 1px solid #ccc;
+  padding-left: 9px;
+  font-size: 18px;
+  cursor: pointer;
+  color: #999;
+}
+
+.add-members .toggle-detail-btn:hover {
+  color: #666;
+}
+
+/* for the input before .toggle-detail-btn */
+.selected-user-item-container:has(+ .toggle-detail-btn) {
+  padding-right: 40px;
+}

frontend/src/css/share-to-user.css

@@ -28,22 +28,3 @@
   justify-content: space-between;
   position: relative;
 }
-
-.share-link-container .add-members .share-to-user-select {
-  max-width: calc(100% - 10px);
-}
-
-.share-link-container .add-members .toggle-detail-btn {
-  position: absolute;
-  top: 6px;
-  right: 20px;
-  border-left: 1px solid #ccc;
-  padding-left: 9px;
-  font-size: 18px;
-  color: #999;
-  cursor: pointer;
-}
-
-.user-select.user-select-right-btn .true__value-container {
-  padding-right: 40px;
-}