fix(chat): fix style of suggestion card (Issue #3771) (#3842)

Author: IlyaBondar

apps/chat/src/components/Chat/TalkTo/TalkToModal.tsx

@@ -40,6 +40,7 @@ import {
 
 import { Modal } from '@/src/components/Common/Modal';
 
+import { TabButton } from '../../Buttons/TabButton';
 import { AgentDialogs } from '../../Common/AgentDialogs';
 import { CardType, SuggestedCard, TalkToSlider } from './TalkToSlider';
 
@@ -52,20 +53,12 @@ interface TabButtonProps {
   currentTab: MarketplaceTabs;
 }
 
-function TabButton({ tab, setTab, currentTab }: TabButtonProps) {
+function AgentsTabButton({ tab, setTab, currentTab }: TabButtonProps) {
   const { t } = useTranslation(Translation.Marketplace);
   return (
-    <button
-      className={classNames(
-        'button flex items-center justify-center text-nowrap rounded border-b-2 border-primary  hover:bg-accent-primary-alpha',
-        currentTab === tab
-          ? 'border-b-accent-primary bg-accent-primary-alpha'
-          : 'bg-layer-4',
-      )}
-      onClick={() => setTab(tab)}
-    >
+    <TabButton selected={currentTab === tab} onClick={() => setTab(tab)}>
       {t(ChangeAgentTabs[tab])}
-    </button>
+    </TabButton>
   );
 }
 
@@ -276,12 +269,12 @@ const TalkToModalView = ({
           />
         </div>
         <div className="flex gap-2">
-          <TabButton
+          <AgentsTabButton
             tab={MarketplaceTabs.MY_WORKSPACE}
             setTab={setTab}
             currentTab={tab}
           />
-          <TabButton
+          <AgentsTabButton
             tab={MarketplaceTabs.HOME}
             setTab={setTab}
             currentTab={tab}

apps/chat/src/components/Chat/TalkTo/TalkToSlider.tsx

@@ -170,11 +170,13 @@ const SliderModelsGroup = ({
           if (model === SuggestedCard) {
             return (
               <div
-                className="flex size-full cursor-pointer flex-col items-center justify-center gap-2 rounded-md border border-primary hover:bg-layer-3"
+                className="flex size-full cursor-pointer flex-col items-center justify-center gap-3 rounded-md border border-primary hover:bg-layer-3"
                 onClick={onOpenMarketplaceTab}
                 key={SuggestedCard.id}
               >
-                <h3>{t("Couldn't find what you need?")}</h3>
+                <h3 className="text-base">
+                  {t("Couldn't find what you need?")}
+                </h3>
                 <SuggestionButton />
               </div>
             );