From d5121e3c90e7abe22b4788052649625612e6d498 Mon Sep 17 00:00:00 2001
From: csuadev <72958726+csuadev@users.noreply.github.com>
Date: Thu, 19 Oct 2023 16:46:06 -0500
Subject: [PATCH] fix: UI issue on marketplace filters (#30660)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Júlia Jaeger Foresti <60678893+juliajforesti@users.noreply.github.com>
---
 .changeset/cyan-mangos-do.md                  |  5 +++
 .../CategoryFilter/CategoryDropDownAnchor.tsx | 41 ++++++++++++-------
 .../RadioDropDown/RadioDownAnchor.tsx         | 22 ++++++----
 3 files changed, 44 insertions(+), 24 deletions(-)
 create mode 100644 .changeset/cyan-mangos-do.md

diff --git a/.changeset/cyan-mangos-do.md b/.changeset/cyan-mangos-do.md
new file mode 100644
index 0000000000000..e188686c82d5a
--- /dev/null
+++ b/.changeset/cyan-mangos-do.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+fix: UI issue on marketplace filters
diff --git a/apps/meteor/client/views/marketplace/components/CategoryFilter/CategoryDropDownAnchor.tsx b/apps/meteor/client/views/marketplace/components/CategoryFilter/CategoryDropDownAnchor.tsx
index 91e66683e66f7..b3e43fda942f7 100644
--- a/apps/meteor/client/views/marketplace/components/CategoryFilter/CategoryDropDownAnchor.tsx
+++ b/apps/meteor/client/views/marketplace/components/CategoryFilter/CategoryDropDownAnchor.tsx
@@ -1,4 +1,6 @@
-import { Box, Button, Icon } from '@rocket.chat/fuselage';
+import type { Button } from '@rocket.chat/fuselage';
+import { Box, Icon } from '@rocket.chat/fuselage';
+import colorTokens from '@rocket.chat/fuselage-tokens/colors.json';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ComponentProps, MouseEventHandler } from 'react';
 import React, { forwardRef } from 'react';
@@ -15,33 +17,42 @@ const CategoryDropDownAnchor = forwardRef<HTMLElement, CategoryDropDownAnchorPro
 
 	return (
 		<Box
-			is={Button}
+			is='button'
 			ref={ref}
 			onClick={onClick}
-			display='flex'
 			alignItems='center'
-			justifyContent='space-between'
-			minWidth='x144'
-			flexGrow={1}
-			flexShrink={1}
+			bg={selectedCategoriesCount ? colorTokens.b500 : 'light'}
 			borderColor={selectedCategoriesCount ? 'none' : 'light'}
+			borderRadius='x4'
 			borderWidth={selectedCategoriesCount ? 'none' : 'x1'}
-			{...(selectedCategoriesCount ? { primary: true } : { bg: 'surface-light' })}
+			display='flex'
+			flexGrow={1}
+			flexShrink={1}
+			justifyContent='space-between'
+			minWidth='x144'
+			height='x40'
+			pie={7}
+			pis={14}
+			lineHeight='unset'
+			rcx-input-box
 			{...props}
 		>
 			{selectedCategoriesCount > 0 && (
 				<Box
-					mie={6}
-					borderRadius='x32'
+					is='span'
+					alignItems='center'
 					bg='light'
-					fontWeight={700}
-					fontSize='micro'
+					borderRadius='x32'
 					color='info'
-					pi={6}
-					h='x40'
 					display='flex'
-					alignItems='center'
+					fontSize='micro'
+					fontWeight={700}
+					h='fit-content'
 					justifyContent='center'
+					mie={6}
+					minWidth={22}
+					pb={4}
+					pi={0}
 				>
 					{selectedCategoriesCount}
 				</Box>
diff --git a/apps/meteor/client/views/marketplace/components/RadioDropDown/RadioDownAnchor.tsx b/apps/meteor/client/views/marketplace/components/RadioDropDown/RadioDownAnchor.tsx
index 36e4ff55657fd..f480b2a60280d 100644
--- a/apps/meteor/client/views/marketplace/components/RadioDropDown/RadioDownAnchor.tsx
+++ b/apps/meteor/client/views/marketplace/components/RadioDropDown/RadioDownAnchor.tsx
@@ -1,4 +1,5 @@
-import { Box, Button, Icon } from '@rocket.chat/fuselage';
+import type { Button } from '@rocket.chat/fuselage';
+import { Box, Icon } from '@rocket.chat/fuselage';
 import type { ComponentProps } from 'react';
 import React, { forwardRef } from 'react';
 
@@ -14,22 +15,25 @@ const RadioDownAnchor = forwardRef<HTMLElement, RadioDropdownAnchorProps>(functi
 
 	return (
 		<Box
-			is={Button}
+			is='button'
 			ref={ref}
 			onClick={onClick as any}
-			display='flex'
 			alignItems='center'
-			justifyContent='space-between'
+			bg='light'
 			borderColor='light'
-			borderWidth='x1'
 			borderRadius='x4'
-			bg='light'
+			borderWidth='x1'
 			color='secondary-info'
-			fontScale='p2'
-			minWidth='x144'
-			h='x40'
+			display='flex'
 			flexGrow={1}
 			flexShrink={1}
+			fontScale='p2'
+			h='x40'
+			justifyContent='space-between'
+			minWidth='x144'
+			pie={10}
+			pis={14}
+			rcx-input-box
 			{...props}
 		>
 			{selected}