From f8a2ca18846e66d28cb98888dbc191d3bb296637 Mon Sep 17 00:00:00 2001
From: Ilya Oleshko <oleshko.ilya@gmail.com>
Date: Wed, 18 Dec 2019 15:13:21 +0300
Subject: [PATCH] Web: People: Fixed header actions buttons for Home page

---
 .../components/pages/Home/Section/Header/index.js | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js b/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js
index a1a9be2fc6..a3a2bfadde 100644
--- a/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js
+++ b/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js
@@ -42,8 +42,12 @@ const StyledContainer = styled.div`
     align-items: center;
     max-width: calc(100vw - 32px);
 
-    .add-group-button {
-      margin-left: 8px;
+    .action-button {
+      margin-left: 16px;
+
+      @media (max-width: 1024px) {
+        margin-left: auto;
+      }
     }
   }
 `;
@@ -213,6 +217,7 @@ const SectionHeaderContent = props => {
               <Headline type="content" truncate={true}>{group.name}</Headline>
               {isAdmin && (
                 <ContextMenuButton
+                  className="action-button"
                   directionX="right"
                   title={t("Actions")}
                   iconName="VerticalDotsIcon"
@@ -228,10 +233,12 @@ const SectionHeaderContent = props => {
               <Headline type="content">Departments</Headline>
               {isAdmin && (
                 <IconButton
-                  className="add-group-button"
+                  className="action-button"
                   size={16}
                   iconName="PlusIcon"
-                  isFill={false}
+                  color="#A3A9AE"
+                  hoverColor="#657077"
+                  isFill={true}
                   onClick={onAddDepartmentsClick}
                 />
               )}