fix: UI issue on marketplace filters (#30660)

Co-authored-by: Júlia Jaeger Foresti <[email protected]>
RocketChat · Oct 19, 2023 · b85df55 · b85df55
1 parent 93a0859
commit b85df55
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 24 deletions.
diff --git a/.changeset/cyan-mangos-do.md 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
@@ -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
@@ -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}