chore: sort and filter for PR and issue tab working (#1931)

* chore: sort and filter for PR and issue tab working

* chore: lint fix

* chore: build fix

* chore: sonar code smell fix

* chore: sonar code smell fix

* chore: sonar code duplication

* chore: sonar duplication

* chore: sonar duplication

Author: hdJerry

cra-rxjs-styled-components/src/components/filter-dropdown/FilterDropdown.styles.ts

@@ -1,5 +1,5 @@
 import colors from '../../constants/colors';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export const DropdownContainer = styled.div`
 	display: flex;
@@ -22,7 +22,7 @@ export const DropdownOptionsHeadingText = styled.span`
 	font-weight: 700;
 `;
 
-export const DropdownBtn = styled.button`
+export const DropdownBtn = styled.button<{ flat?: boolean }>`
 	display: flex;
 	flex-grow: 1;
 	border-radius: 8px;
@@ -35,9 +35,19 @@ export const DropdownBtn = styled.button`
 	min-width: 70px;
 	outline: none;
 	@media (min-width: 768px) {
-		gap: 8px;
+		${(props) =>
+			!props.flat &&
+			css`
+				gap: 8px;
+			`}
 		min-width: 80px;
 	}
+	${(props) =>
+		props.flat &&
+		css`
+			border: none;
+			gap: 2px;
+		`}
 `;
 
 export const DropdownOption = styled.li`

cra-rxjs-styled-components/src/components/filter-dropdown/FilterDropdown.tsx

@@ -20,13 +20,15 @@ interface FilterDropdownProps {
 	items?: string[];
 	selected?: string;
 	itemsColors?: string[];
+	flat?: boolean;
 	selectOption?: (value: string) => void;
 }
 export default function FilterDropdown({
 	name,
 	items,
 	selected,
 	itemsColors,
+	flat,
 	selectOption,
 }: FilterDropdownProps) {
 	const [showOptions, setShowOptions] = useState(false);
@@ -62,7 +64,7 @@ export default function FilterDropdown({
 	});
 	return (
 		<DropdownContainer ref={ref}>
-			<DropdownBtn onClick={toggleOption}>
+			<DropdownBtn flat={flat} onClick={toggleOption}>
 				<DropdownBtnText>{name}</DropdownBtnText>
 				<CaretIcon active={false} />
 			</DropdownBtn>