fix enable hover button on skill button and arrow on org (stakwork#332)

MahtabBukhari · Feb 29, 2024 · cc34097 · cc34097
1 parent fac41ba
commit cc34097
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 14 deletions.
diff --git a/src/pages/tickets/org/orgHeader/OrgHeaderStyles.tsx b/src/pages/tickets/org/orgHeader/OrgHeaderStyles.tsx
@@ -53,7 +53,6 @@ export const FiltersRight = styled.span`
 `;
 
 export const SkillContainer = styled.span`
-  padding: 6px 0px;
   align-items: center;
   display: flex;
   position: relative;
@@ -70,8 +69,15 @@ export const InnerContainer = styled.span`
   gap: 2px;
 `;
 
+export const SkillInnerContainer = styled.span`
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  width: 75px;
+  gap: 2px;
+`;
 export const Formatter = styled.span`
-  padding-top: 10px;
+  padding-top: 8px;
 `;
 
 export const Button = styled.button`
@@ -455,6 +461,19 @@ export const SkillTextContainer = styled.div<styledProps>`
   align-items: center;
   cursor: pointer;
   user-select: none;
+  .filterStatusIconContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 48px;
+    width: 34px;
+    .materialStatusIcon {
+      color: ${(p: any) => p.color && p.color.grayish.G200};
+      cursor: pointer;
+      font-size: 18px;
+      margin-top: 3px;
+    }
+  }
   .skillText {
     font-family: 'Barlow';
     font-style: normal;
@@ -467,11 +486,27 @@ export const SkillTextContainer = styled.div<styledProps>`
     color: ${(p: any) => p.color && p.color.grayish.G200};
   }
   &:hover {
+    .filterStatusIconContainer {
+      .materialStatusIcon {
+        color: ${(p: any) => p.color && p.color.grayish.G50} !important;
+        cursor: pointer;
+        font-size: 18px;
+        margin-top: 3px;
+      }
+    }
     .skillText {
       color: ${(p: any) => p.color && p.color.grayish.G50};
     }
   }
   &:active {
+    .filterStatusIconContainer {
+      .materialStatusIcon {
+        color: ${(p: any) => p.color && p.color.grayish.G10} !important;
+        cursor: pointer;
+        font-size: 18px;
+        margin-top: 3px;
+      }
+    }
     .skillText {
       color: ${(p: any) => p.color && p.color.grayish.G10};
     }

diff --git a/src/pages/tickets/org/orgHeader/index.tsx b/src/pages/tickets/org/orgHeader/index.tsx
@@ -9,7 +9,6 @@ import { SearchBar } from '../../../../components/common/index.tsx';
 import { useStores } from '../../../../store';
 import { userCanManageBounty, filterCount } from '../../../../helpers';
 import addBounty from './Icons/addBounty.svg';
-import dropdown from './Icons/dropDownIcon.svg';
 import file from './Icons/file.svg';
 import githubIcon from './Icons/githubIcon.svg';
 
@@ -21,7 +20,6 @@ import {
   CompanyDescription,
   CompanyLabel,
   CompanyNameAndLink,
-  DropDownButton,
   EuiPopOverCheckbox,
   EuiPopOverCheckboxRight,
   FillContainer,
@@ -45,7 +43,8 @@ import {
   FilterCount,
   InnerContainer,
   Formatter,
-  SkillTextContainer
+  SkillTextContainer,
+  SkillInnerContainer
 } from './OrgHeaderStyles';
 
 const color = colors['light'];
@@ -313,18 +312,30 @@ export const OrgHeader = ({
               <EuiPopover
                 button={
                   <SkillTextContainer color={color}>
-                    <EuiText className="skillText">Skill</EuiText>
+                    <SkillInnerContainer>
+                      <EuiText className="skillText">Skill</EuiText>
+                      <Formatter>
+                        {skillCountNumber > 0 && (
+                          <FilterCount color={color}>
+                            <EuiText className="filterCountText">{skillCountNumber}</EuiText>
+                          </FilterCount>
+                        )}
+                      </Formatter>
+                      <div className="filterStatusIconContainer">
+                        <MaterialIcon
+                          data-testid="skillDropdown"
+                          onClick={handleClick}
+                          className="materialStatusIcon"
+                          icon={'keyboard_arrow_down'}
+                          style={{
+                            color: isStatusPopoverOpen ? color.grayish.G10 : ''
+                          }}
+                        />
+                      </div>
+                    </SkillInnerContainer>
                   </SkillTextContainer>
                 }
               />
-              {skillCountNumber > 0 && (
-                <FilterCount color={color}>
-                  <EuiText className="filterCountText">{skillCountNumber}</EuiText>
-                </FilterCount>
-              )}
-              <DropDownButton onClick={handleClick} data-testid="skillDropdown">
-                <Img src={dropdown} alt="" />
-              </DropDownButton>
               {filterClick ? (
                 <SkillFilter ref={filterRef} data-testid="skill-filter">
                   <InternalContainer>