fix(chat): fix marketplace cards UI (issue #2426)

epam · Oct 23, 2024 · 8e007ea · 8e007ea
1 parent 9f7ccb4
commit 8e007ea
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 31 deletions.
diff --git a/apps/chat/src/components/Marketplace/ApplicationCard.tsx b/apps/chat/src/components/Marketplace/ApplicationCard.tsx
@@ -9,8 +9,6 @@ import React, { useMemo } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
-import classNames from 'classnames';
-
 import { getModelShortDescription } from '@/src/utils/app/application';
 import { getRootId } from '@/src/utils/app/id';
 import { isSmallScreen } from '@/src/utils/app/mobile';
@@ -37,33 +35,16 @@ import { PublishActions } from '@epam/ai-dial-shared';
 const DESKTOP_ICON_SIZE = 80;
 const SMALL_ICON_SIZE = 48;
 
-interface CardDescriptionProps {
-  entity: DialAIEntityModel;
-  isMobile: boolean;
-}
-
-const CardDescription = ({ entity, isMobile }: CardDescriptionProps) => {
-  return (
-    <EntityMarkdownDescription
-      className={classNames(
-        'line-clamp-2 text-ellipsis text-sm leading-[18px] text-secondary',
-        isMobile && 'mt-3',
-      )}
-    >
-      {getModelShortDescription(entity)}
-    </EntityMarkdownDescription>
-  );
-};
-
 interface CardFooterProps {
   entity: DialAIEntityModel;
-  isMobile: boolean;
 }
 
-const CardFooter = ({ entity, isMobile }: CardFooterProps) => {
+const CardFooter = ({ entity }: CardFooterProps) => {
   return (
     <>
-      {isMobile && <CardDescription isMobile={isMobile} entity={entity} />}
+      <EntityMarkdownDescription className="mt-3 line-clamp-2 text-ellipsis text-sm leading-[18px] text-secondary xl:hidden">
+        {getModelShortDescription(entity)}
+      </EntityMarkdownDescription>
       <div className="flex flex-col gap-2 pt-3 md:pt-4">
         {/* <span className="text-sm leading-[21px] text-secondary">
         Capabilities: Conversation
@@ -175,14 +156,15 @@ export const ApplicationCard = ({
   return (
     <div
       onClick={() => onClick(entity)}
-      className="relative h-[164px] cursor-pointer rounded-md bg-layer-2 p-5 shadow-sm hover:bg-layer-3"
+      className="relative h-[162px] cursor-pointer rounded-md bg-layer-2 p-4 shadow-card hover:bg-layer-3 xl:h-[164px] xl:p-5"
       data-qa="application"
     >
       <div>
-        <div className="group absolute right-4 top-4 rounded py-px hover:bg-accent-primary-alpha">
+        <div className="absolute right-4 top-4 flex gap-1 xl:right-5 xl:top-5">
           <ContextMenu
             menuItems={menuItems}
             featureType={FeatureType.Application}
+            triggerIconClassName="group rounded"
             TriggerCustomRenderer={
               <IconDotsVertical
                 onClick={(e) => e.stopPropagation()}
@@ -194,7 +176,7 @@ export const ApplicationCard = ({
           />
         </div>
         <div className="flex items-center gap-4 overflow-hidden">
-          <div className="flex shrink-0 items-center justify-center">
+          <div className="flex shrink-0 items-center justify-center xl:my-[3px]">
             <ModelIcon entityId={entity.id} entity={entity} size={iconSize} />
           </div>
           <div className="flex grow flex-col justify-center gap-2 overflow-hidden">
@@ -209,14 +191,14 @@ export const ApplicationCard = ({
             >
               {entity.name}
             </h2>
-            {!isMobile && (
-              <CardDescription entity={entity} isMobile={!!isMobile} />
-            )}
+            <EntityMarkdownDescription className="text-ellipsis text-sm leading-[18px] text-secondary xl:!line-clamp-2">
+              {getModelShortDescription(entity)}
+            </EntityMarkdownDescription>
           </div>
         </div>
       </div>
 
-      <CardFooter isMobile={!!isMobile} entity={entity} />
+      <CardFooter entity={entity} />
     </div>
   );
 };
diff --git a/apps/chat/src/components/Marketplace/CardsList.tsx b/apps/chat/src/components/Marketplace/CardsList.tsx
@@ -37,7 +37,7 @@ export const CardsList = ({
       {!!title && <h2 className="text-xl font-semibold">{t(title)}</h2>}
 
       <div
-        className="mt-5 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-6 xl:mt-6 2xl:grid-cols-4"
+        className="mt-5 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:mt-6 xl:grid-cols-3 xl:gap-5 2xl:grid-cols-4"
         data-qa="applications"
       >
         {entities.map((entity) => (

diff --git a/apps/chat/tailwind.config.js b/apps/chat/tailwind.config.js
@@ -85,6 +85,7 @@ module.exports = {
       },
       boxShadow: {
         DEFAULT: '0 0 4px 0 var(--bg-blackout, #090D13B3)',
+        card: '0px 0.41px 2.94px 0px #090D1304, 0px 1.13px 8.14px 0px #090D1305, 0px 2.71px 19.6px 0px #090D1307, 0px 9px 65px 0px #090D130A',
       },
       fontFamily: {
         DEFAULT: ['var(--theme-font, var(--font-inter))'],