From 5a343565f47ddf82a6ef45c1ea78a2f3acaf535c Mon Sep 17 00:00:00 2001
From: Alexey Kostenko <kostenko.20101994@mail.ru>
Date: Wed, 3 Feb 2021 16:03:23 +0300
Subject: [PATCH] Web: Files: SharingPanel: ComboBox button style fix

---
 .../components/panels/AddGroupsPanel/index.js |  2 ++
 .../components/panels/AddUsersPanel/index.js  |  2 ++
 .../panels/SharingPanel/AccessComboBox.js     |  6 ++++-
 .../src/components/panels/StyledPanels.js     | 22 ++++++++++++-------
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js b/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js
index c7f6b82ae2..86bf047d82 100644
--- a/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js
+++ b/products/ASC.Files/Client/src/components/panels/AddGroupsPanel/index.js
@@ -148,6 +148,7 @@ class AddGroupsPanelComponent extends React.Component {
 
             <StyledBody ref={this.scrollRef}>
               <GroupSelector
+                className="groupSelector"
                 isOpen={visible}
                 isMultiSelect
                 displayType="aside"
@@ -160,6 +161,7 @@ class AddGroupsPanelComponent extends React.Component {
                     directionX="right"
                     onAccessChange={this.onAccessChange}
                     accessOptions={accessOptions}
+                    arrowIconColor="#000000"
                   />
                 }
                 showCounter
diff --git a/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js b/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js
index c2d2251b95..330b200b6f 100644
--- a/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js
+++ b/products/ASC.Files/Client/src/components/panels/AddUsersPanel/index.js
@@ -140,6 +140,7 @@ class AddUsersPanelComponent extends React.Component {
               directionX="right"
               onAccessChange={this.onAccessChange}
               accessOptions={accessOptions}
+              arrowIconColor="#000000"
             />
           ),
         }
@@ -180,6 +181,7 @@ class AddUsersPanelComponent extends React.Component {
 
             <StyledBody ref={this.scrollRef}>
               <PeopleSelector
+                className="peopleSelector"
                 role={isMultiSelect ? null : "user"}
                 employeeStatus={1}
                 displayType="aside"
diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js
index 5915b1780c..b1b8051740 100644
--- a/products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js
+++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/AccessComboBox.js
@@ -14,6 +14,7 @@ const AccessComboBox = (props) => {
     itemId,
     onAccessChange,
     t,
+    arrowIconColor,
   } = props;
   const {
     FullAccess,
@@ -100,12 +101,15 @@ const AccessComboBox = (props) => {
   );
 
   const accessIcon = getAccessIcon(access);
+  const selectedOption = arrowIconColor
+    ? { key: 0, arrowIconColor }
+    : { key: 0 };
 
   return (
     <ComboBox
       advancedOptions={advancedOptions}
       options={[]}
-      selectedOption={{ key: 0 }}
+      selectedOption={selectedOption}
       size="content"
       className="panel_combo-box"
       scaled={false}
diff --git a/products/ASC.Files/Client/src/components/panels/StyledPanels.js b/products/ASC.Files/Client/src/components/panels/StyledPanels.js
index 48ff1f092e..9fbcfe8575 100644
--- a/products/ASC.Files/Client/src/components/panels/StyledPanels.js
+++ b/products/ASC.Files/Client/src/components/panels/StyledPanels.js
@@ -7,14 +7,7 @@ const PanelStyles = css`
 
     .optionalBlock {
       margin-right: 4px;
-    }
-
-    &.add-groups {
-      .combo-buttons_arrow-icon {
-        flex: 0 0 5px;
-        width: 5px;
-        margin-top: 16px;
-      }
+      display: flex;
     }
 
     .combo-button {
@@ -26,6 +19,19 @@ const PanelStyles = css`
     }
   }
 
+  .groupSelector,
+  .peopleSelector {
+    .combo-buttons_arrow-icon {
+      flex: 0 0 6px;
+      width: 6px;
+      margin-top: auto;
+      margin-bottom: auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
   .footer {
     padding: 16px 0;
     width: calc(100% - 32px);