Merge branch 'master' into superadmin-provider-filter

AbdulWahab3181 · Mar 5, 2024 · 4d0e0b9 · 4d0e0b9
2 parents 64b6185 + 0e3105e
commit 4d0e0b9
Show file tree

Hide file tree

Showing 43 changed files with 1,220 additions and 238 deletions.
diff --git a/cypress/e2e/create_bounty.cy.ts → cypress/e2e/0_create_bounty.cy.ts b/cypress/e2e/create_bounty.cy.ts → cypress/e2e/0_create_bounty.cy.ts
diff --git a/cypress/e2e/1_create_20_bounties.cy.ts b/cypress/e2e/1_create_20_bounties.cy.ts
@@ -0,0 +1,26 @@
+describe('Alice tries to create 20 bounties', () => {
+  it('Create 20 bounties', () => {
+    let activeUser = 'alice';
+    cy.login(activeUser);
+    cy.wait(1000);
+
+    for (let i = 1; i <= 20; i++) {
+      cy.create_bounty({
+        title: `Title ${i}`,
+        category: 'Web development',
+        coding_language: ['Typescript'],
+        description: 'Lorem Ipsum Dolor',
+        amount: '10000',
+        assign: 'carol',
+        deliverables: 'We are good to go man',
+        tribe: '',
+        estimate_session_length: 'Less than 3 hour',
+        estimate_completion_date: '09/09/2024'
+      });
+    }
+
+    cy.wait(1000);
+
+    cy.logout(activeUser);
+  });
+});
diff --git a/cypress/e2e/create_org.cy.ts → cypress/e2e/2_create_org.cy.ts b/cypress/e2e/create_org.cy.ts → cypress/e2e/2_create_org.cy.ts
diff --git a/cypress/e2e/lnurl_login.cy.ts → cypress/e2e/3_lnurl_login.cy.ts b/cypress/e2e/lnurl_login.cy.ts → cypress/e2e/3_lnurl_login.cy.ts
diff --git a/src/__test__/__mockData__/user.ts b/src/__test__/__mockData__/user.ts
@@ -15,12 +15,14 @@ export const user: MeInfo = {
   jwt: 'test_jwt',
   tribe_jwt: 'test_jwt',
   url: 'http://localhost:5002',
-  description: 'description',
+  description: 'description for user',
   verification_signature: 'test_verification_signature',
   extras: {
     email: [{ value: '[email protected]' }],
     liquid: [{ value: 'none' }],
-    wanted: []
+    wanted: [],
+    coding_languages: [{ label: 'Typescript', value: 'Typescript' }],
+    github: [{ label: 'https://github.com/Vladimir', value: 'https://github.com/Vladimir' }]
   },
   owner_alias: 'Vladimir',
   owner_pubkey: 'test_pub_key',

diff --git a/src/components/common/CreatableMultiSelect.tsx b/src/components/common/CreatableMultiSelect.tsx
@@ -9,7 +9,6 @@ interface styledProps {
   color?: any;
 }
 
-// @ts-ignore
 const S = styled(CreatableSelect)<styledProps>`
   background: #ffffff00;
   border: 1px solid ${(p: any) => p.color && p.color.grayish.G750};
@@ -21,37 +20,6 @@ const S = styled(CreatableSelect)<styledProps>`
   font-size: 12px;
   border-width: 0px !important;
 
-  #react-select-10-listbox {
-    z-index: 1000;
-  }
-  #react-select-9-listbox {
-    z-index: 1000;
-  }
-  #react-select-8-listbox {
-    z-index: 1000;
-  }
-  #react-select-7-listbox {
-    z-index: 1000;
-  }
-  #react-select-6-listbox {
-    z-index: 1000;
-  }
-  #react-select-5-listbox {
-    z-index: 1000;
-  }
-  #react-select-4-listbox {
-    z-index: 1000;
-  }
-  #react-select-3-listbox {
-    z-index: 1000;
-  }
-  #react-select-2-listbox {
-    z-index: 1000;
-  }
-  #react-select-1-listbox {
-    z-index: 1000;
-  }
-
   div {
     border-width: 0px !important;
     border: none !important;
@@ -62,6 +30,7 @@ const S = styled(CreatableSelect)<styledProps>`
     background-color: ${(p: any) => p.color && p.color.pureWhite} !important;
   }
 `;
+
 export default function Sel(props: SelProps) {
   const { onChange, value, style, setIsTop } = props;
   const color = colors['light'];
@@ -76,7 +45,7 @@ export default function Sel(props: SelProps) {
     })) || [];
 
   return (
-    <div style={{ position: 'relative', ...style }}>
+    <div id="dropdown-wrapper" style={{ position: 'relative', ...style }}>
       <S
         placeholder={''}
         color={color}
@@ -92,6 +61,8 @@ export default function Sel(props: SelProps) {
           if (setIsTop) setIsTop(true);
         }}
         className={'multi-select-input'}
+        menuPortalTarget={document.getElementById('dropdown-wrapper')}
+        menuPosition={'fixed'}
         styles={{
           control: (styles: any) => ({ ...styles, backgroundColor: 'white' }),
           option: (styles: any) => ({
@@ -128,7 +99,8 @@ export default function Sel(props: SelProps) {
               backgroundColor: data.background,
               color: data.color
             }
-          })
+          }),
+          menuPortal: (styles: any) => ({ ...styles, zIndex: '100' })
         }}
       />
     </div>

diff --git a/src/components/common/MultiSelect.tsx b/src/components/common/MultiSelect.tsx
@@ -9,58 +9,27 @@ interface styledProps {
 }
 
 const S = styled(Select)<styledProps>`
-background:#ffffff00;
-border: 1px solid ${(p: any) => p.color && p.color.grayish.G750};
-color: ${(p: any) => p.color && p.color.pureBlack};
-box-sizing: border-box;
-box-shadow:none;
-border: none !important;
-user-select:none;
-font-size:12px;
-border-width:0px !important;
+  background: #ffffff00;
+  border: 1px solid ${(p: any) => p.color && p.color.grayish.G750};
+  color: ${(p: any) => p.color && p.color.pureBlack};
+  box-sizing: border-box;
+  box-shadow: none;
+  border: none !important;
+  user-select: none;
+  font-size: 12px;
+  border-width: 0px !important;
 
-#react-select-10-listbox{
-    z-index:1000;
-}
-#react-select-9-listbox{
-    z-index:1000;
-}
-#react-select-8-listbox{
-    z-index:1000;
-}
-#react-select-7-listbox{
-    z-index:1000;
-}
-#react-select-6-listbox{
-    z-index:1000;
-}
-#react-select-5-listbox{
-    z-index:1000;
-}
-#react-select-4-listbox{
-    z-index:1000;
-}
-#react-select-3-listbox{
-    z-index:1000;
-}
-#react-select-2-listbox{
-    z-index:1000;
-}
-#react-select-1-listbox{
-    z-index:1000;
-}
-
-div {
-    border-width:0px !important;
+  div {
+    border-width: 0px !important;
     border: none !important;
-}
+  }
 
-button {
+  button {
     background: ${(p: any) => p.color && p.color.pureWhite} !important;
     background-color: ${(p: any) => p.color && p.color.pureWhite} !important;
-}
-}
+  }
 `;
+
 export default function Sel(props: SelProps) {
   const { options, onChange, value, style } = props;
   const color = colors['light'];
@@ -73,7 +42,7 @@ export default function Sel(props: SelProps) {
     : [];
 
   return (
-    <div style={{ position: 'relative', ...style }}>
+    <div id="dropdown-wrapper" style={{ position: 'relative', ...style }}>
       <S
         color={color}
         closeMenuOnSelect={false}
@@ -82,6 +51,11 @@ export default function Sel(props: SelProps) {
         value={value}
         onChange={(value: any) => onChange(value)}
         className={'multi-select-input'}
+        menuPortalTarget={document.getElementById('dropdown-wrapper')}
+        menuPosition={'fixed'}
+        styles={{
+          menuPortal: (styles: any) => ({ ...styles, zIndex: '100' })
+        }}
       />
     </div>
   );

diff --git a/src/components/common/SearchableSelect.tsx b/src/components/common/SearchableSelect.tsx
@@ -4,57 +4,25 @@ import Select from 'react-select';
 import { SelProps } from 'components/interfaces';
 
 const S = styled(Select)`
-background:#ffffff00;
-border: 1px solid #E0E0E0;
-color:#000;
-box-sizing: border-box;
-box-shadow:none;
-border: none !important;
-user-select:none;
-font-size:12px;
-border-width:0px !important;
+  background: #ffffff00;
+  border: 1px solid #e0e0e0;
+  color: #000;
+  box-sizing: border-box;
+  box-shadow: none;
+  border: none !important;
+  user-select: none;
+  font-size: 12px;
+  border-width: 0px !important;
 
-#react-select-10-listbox{
-    z-index:1000;
-}
-#react-select-9-listbox{
-    z-index:1000;
-}
-#react-select-8-listbox{
-    z-index:1000;
-}
-#react-select-7-listbox{
-    z-index:1000;
-}
-#react-select-6-listbox{
-    z-index:1000;
-}
-#react-select-5-listbox{
-    z-index:1000;
-}
-#react-select-4-listbox{
-    z-index:1000;
-}
-#react-select-3-listbox{
-    z-index:1000;
-}
-#react-select-2-listbox{
-    z-index:1000;
-}
-#react-select-1-listbox{
-    z-index:1000;
-}
-
-div {
-    border-width:0px !important;
+  div {
+    border-width: 0px !important;
     border: none !important;
-}
+  }
 
-button {
-    background:#ffffff !important;
-    background-color:#ffffff !important;
-}
-}
+  button {
+    background: #ffffff !important;
+    background-color: #ffffff !important;
+  }
 `;
 export default function SearchableSelect(props: SelProps) {
   const { options, onChange, onInputChange, value, style, loading } = props;
@@ -68,7 +36,7 @@ export default function SearchableSelect(props: SelProps) {
     : [];
 
   return (
-    <div style={{ position: 'relative', ...style }}>
+    <div id="dropdown-wrapper" style={{ position: 'relative', ...style }}>
       <S
         options={opts}
         isLoading={loading}
@@ -79,6 +47,11 @@ export default function SearchableSelect(props: SelProps) {
         onChange={onChange}
         onInputChange={onInputChange}
         className={'searchable-select-input'}
+        menuPortalTarget={document.getElementById('dropdown-wrapper')}
+        menuPosition={'fixed'}
+        styles={{
+          menuPortal: (styles: any) => ({ ...styles, zIndex: '100' })
+        }}
       />
     </div>
   );

diff --git a/src/components/common/Select.tsx b/src/components/common/Select.tsx
@@ -39,16 +39,22 @@ const DropdownContainer = styled.div`
 `;
 
 const DropdownTrigger = styled.button<styleProps>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   background: ${colors.light.pureWhite};
-  border: 1.5px solid ${colors.light.grayish.G750};
+  border: 1.5px solid
+    ${(props: styleProps) => (props.isOpen ? colors.light.blue2 : colors.light.grayish.G750)};
   color: ${colors.light.pureBlack};
   padding: 8px 16px;
   width: 100%;
-  text-align: left;
   cursor: pointer;
   &:focus {
     outline: none;
   }
+  &:hover svg {
+    stroke: ${colors.light.pureBlack}; // Change icon color on hover
+  }
   height: 40px;
   border-radius: 3px;
   font-size: 14px;
@@ -85,6 +91,18 @@ const Option = styled.div`
   }
 `;
 
+const DropdownIcon = ({ color = '#b0b7bb' }: any) => (
+  <svg width="12" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M1 1L7 7L13 1"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
 export default function CustomSelect(props: SelProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedValue, setSelectedValue] = useState(props.value);
@@ -129,9 +147,12 @@ export default function CustomSelect(props: SelProps) {
       <StyledLabel isFocused={isFocused} hasContent={props.value}>
         {props.placeholder}
       </StyledLabel>
-      <DropdownTrigger onClick={toggleDropdown}>
-        {props.options.find((o: dropDownOption) => o.value === selectedValue)?.label}
+
+      <DropdownTrigger isOpen={isOpen} onClick={toggleDropdown}>
+        <span>{props.options.find((o: dropDownOption) => o.value === selectedValue)?.label}</span>
+        {!selectedValue && <DropdownIcon color={isFocused ? colors.light.pureBlack : '#b0b7bb'} />}
       </DropdownTrigger>
+
       <DropdownOptions isOpen={isOpen}>
         {props.options.map((option: dropDownOption) => (
           <Option key={option.value} onClick={() => handleSelect(option.value)}>