From 773147701d5cbed1a332a922ff1be9fc47772801 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Fri, 7 Mar 2025 17:19:14 +0530
Subject: [PATCH] (fix:ui) tool cards

---
 frontend/src/components/types/index.ts |   2 +-
 frontend/src/modals/AddToolModal.tsx   |  79 ++++++++--------
 frontend/src/settings/Tools.tsx        | 126 ++++++++++---------------
 3 files changed, 92 insertions(+), 115 deletions(-)

diff --git a/frontend/src/components/types/index.ts b/frontend/src/components/types/index.ts
index 1d4b3a61..47fcd86f 100644
--- a/frontend/src/components/types/index.ts
+++ b/frontend/src/components/types/index.ts
@@ -8,10 +8,10 @@ export type InputProps = {
   maxLength?: number;
   name?: string;
   placeholder?: string;
-  label?: string;
   required?: boolean;
   className?: string;
   children?: React.ReactElement;
+  labelBgClassName?: string;
   onChange: (
     e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
   ) => void;
diff --git a/frontend/src/modals/AddToolModal.tsx b/frontend/src/modals/AddToolModal.tsx
index 07360eb7..adaa82e3 100644
--- a/frontend/src/modals/AddToolModal.tsx
+++ b/frontend/src/modals/AddToolModal.tsx
@@ -94,57 +94,60 @@ export default function AddToolModal({
       {modalState === 'ACTIVE' && (
         <WrapperComponent
           close={() => setModalState('INACTIVE')}
-          className="h-[85vh] w-[90vw] md:w-[75vw]"
+          className="max-w-[950px] w-[90vw] md:w-[85vw] lg:w-[75vw] h-[85vh]"
         >
-          <div className="flex flex-col gap-4 h-full">
+          <div className="flex flex-col h-full">
             <div>
               <h2 className="font-semibold text-xl text-jet dark:text-bright-gray px-3">
                 {t('settings.tools.selectToolSetup')}
               </h2>
-              <div className="mt-5 flex flex-col sm:grid sm:grid-cols-3 gap-4 h-[73vh] overflow-auto px-3 py-px">
+              <div className="mt-5 h-[73vh] overflow-auto px-3 py-px">
                 {loading ? (
-                  <div className="h-full col-span-3 flex items-center justify-center">
+                  <div className="h-full flex items-center justify-center">
                     <Spinner />
                   </div>
                 ) : (
-                  availableTools.map((tool, index) => (
-                    <div
-                      role="button"
-                      tabIndex={0}
-                      key={index}
-                      className="h-52 w-full p-6 border rounded-2xl border-silver dark:border-[#4D4E58] flex flex-col justify-between dark:bg-[#32333B] cursor-pointer hover:border-[#9d9d9d] hover:dark:border-[#717179]"
-                      onClick={() => {
-                        setSelectedTool(tool);
-                        handleAddTool(tool);
-                      }}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter' || e.key === ' ') {
+                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 auto-rows-fr">
+                    {availableTools.map((tool, index) => (
+                      <div
+                        role="button"
+                        tabIndex={0}
+                        key={index}
+                        className="h-52 w-full p-6 border rounded-2xl border-light-gainsboro dark:border-arsenic bg-white-3000 dark:bg-gunmetal flex flex-col justify-between cursor-pointer hover:border-[#9d9d9d] hover:dark:border-[#717179]"
+                        onClick={() => {
                           setSelectedTool(tool);
                           handleAddTool(tool);
-                        }
-                      }}
-                    >
-                      <div className="w-full">
-                        <div className="px-1 w-full flex items-center justify-between">
-                          <img
-                            src={`/toolIcons/tool_${tool.name}.svg`}
-                            className="h-8 w-8"
-                          />
-                        </div>
-                        <div className="mt-[9px]">
-                          <p
-                            title={tool.displayName}
-                            className="px-1 text-sm font-semibold text-eerie-black dark:text-white leading-relaxed capitalize truncate"
-                          >
-                            {tool.displayName}
-                          </p>
-                          <p className="mt-1 px-1 h-24 overflow-auto text-sm text-gray-600 dark:text-[#8a8a8c] leading-relaxed">
-                            {tool.description}
-                          </p>
+                        }}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter' || e.key === ' ') {
+                            setSelectedTool(tool);
+                            handleAddTool(tool);
+                          }
+                        }}
+                      >
+                        <div className="w-full">
+                          <div className="px-1 w-full flex items-center justify-between">
+                            <img
+                              src={`/toolIcons/tool_${tool.name}.svg`}
+                              className="h-6 w-6"
+                              alt={`${tool.name} icon`}
+                            />
+                          </div>
+                          <div className="mt-[9px]">
+                            <p
+                              title={tool.displayName}
+                              className="px-1 text-[13px] font-semibold text-raisin-black-light dark:text-bright-gray leading-relaxed capitalize truncate"
+                            >
+                              {tool.displayName}
+                            </p>
+                            <p className="mt-1 px-1 h-24 overflow-auto text-[12px] text-old-silver dark:text-sonic-silver-light leading-relaxed">
+                              {tool.description}
+                            </p>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  ))
+                    ))}
+                  </div>
                 )}
               </div>
             </div>
diff --git a/frontend/src/settings/Tools.tsx b/frontend/src/settings/Tools.tsx
index e697bb96..539fcd25 100644
--- a/frontend/src/settings/Tools.tsx
+++ b/frontend/src/settings/Tools.tsx
@@ -3,19 +3,16 @@ import { useTranslation } from 'react-i18next';
 
 import userService from '../api/services/userService';
 import CogwheelIcon from '../assets/cogwheel.svg';
-import NoFilesDarkIcon from '../assets/no-files-dark.svg';
-import NoFilesIcon from '../assets/no-files.svg';
 import Input from '../components/Input';
 import Spinner from '../components/Spinner';
-import { useDarkTheme } from '../hooks';
 import AddToolModal from '../modals/AddToolModal';
 import { ActiveState } from '../models/misc';
 import ToolConfig from './ToolConfig';
 import { APIToolType, UserToolType } from './types';
+import ToggleSwitch from '../components/ToggleSwitch';
 
 export default function Tools() {
   const { t } = useTranslation();
-  const [isDarkTheme] = useDarkTheme();
   const [searchTerm, setSearchTerm] = React.useState('');
   const [addToolModalState, setAddToolModalState] =
     React.useState<ActiveState>('INACTIVE');
@@ -114,7 +111,7 @@ export default function Tools() {
                 />
               </div>
               <button
-                className="rounded-full min-w-[160px] bg-purple-30 px-6 py-3 text-white hover:bg-[#6F3FD1] text-nowrap"
+                className="rounded-full w-[108px] h-[30px] text-sm bg-purple-30 text-white hover:bg-[#6F3FD1] flex items-center justify-center"
                 onClick={() => {
                   setAddToolModalState('ACTIVE');
                 }}
@@ -122,6 +119,7 @@ export default function Tools() {
                 {t('settings.tools.addTool')}
               </button>
             </div>
+            <div className="border-b border-light-silver dark:border-dim-gray mb-8 mt-5" />
             {loading ? (
               <div className="grid grid-cols-2 lg:grid-cols-3 gap-6">
                 <div className="mt-24 h-32 col-span-2 lg:col-span-3 flex items-center justify-center">
@@ -129,90 +127,66 @@ export default function Tools() {
                 </div>
               </div>
             ) : (
-              <div className="grid grid-cols-2 lg:grid-cols-3 gap-6">
-                {userTools.filter((tool) =>
-                  tool.displayName
-                    .toLowerCase()
-                    .includes(searchTerm.toLowerCase()),
-                ).length === 0 ? (
-                  <div className="mt-24 col-span-2 lg:col-span-3 text-center text-gray-500 dark:text-gray-400">
-                    <img
-                      src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
-                      alt="No tools found"
-                      className="h-24 w-24 mx-auto mb-2"
-                    />
-                    {t('settings.tools.noToolsFound')}
-                  </div>
-                ) : (
-                  userTools
-                    .filter((tool) =>
-                      tool.displayName
-                        .toLowerCase()
-                        .includes(searchTerm.toLowerCase()),
-                    )
-                    .map((tool, index) => (
-                      <div
-                        key={index}
-                        className="relative h-56 w-full p-6 border rounded-2xl border-silver dark:border-silver/40 flex flex-col justify-between"
-                      >
-                        <div className="w-full">
-                          <div className="w-full flex items-center justify-between">
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
+                {userTools
+                  .filter((tool) =>
+                    tool.displayName
+                      .toLowerCase()
+                      .includes(searchTerm.toLowerCase()),
+                  )
+                  .map((tool, index) => (
+                    <div
+                      key={index}
+                      className="relative h-52 border rounded-2xl border-light-gainsboro dark:border-arsenic"
+                    >
+                      <div className="h-full flex flex-col p-6">
+                        <button
+                          onClick={() => handleSettingsClick(tool)}
+                          aria-label={t('settings.tools.configureToolAria', {
+                            toolName: tool.displayName,
+                          })}
+                          className="absolute top-4 right-4"
+                        >
+                          <img
+                            src={CogwheelIcon}
+                            alt={t('settings.tools.settingsIconAlt')}
+                            className="h-[19px] w-[19px]"
+                          />
+                        </button>
+                        <div className="flex-1">
+                          <div className="flex flex-col items-start space-y-3">
                             <img
                               src={`/toolIcons/tool_${tool.name}.svg`}
                               alt={`${tool.displayName} icon`}
-                              className="h-8 w-8"
+                              className="h-6 w-6"
                             />
-                            <button
-                              className="absolute top-3 right-3 cursor-pointer"
-                              onClick={() => handleSettingsClick(tool)}
-                              aria-label={t(
-                                'settings.tools.configureToolAria',
-                                {
-                                  toolName: tool.displayName,
-                                },
-                              )}
+                            <p
+                              title={tool.displayName}
+                              className="w-[calc(100%-24px)] text-[13px] font-semibold text-raisin-black-light dark:text-bright-gray capitalize truncate"
                             >
-                              <img
-                                src={CogwheelIcon}
-                                alt={t('settings.tools.settingsIconAlt')}
-                                className="h-[19px] w-[19px]"
-                              />
-                            </button>
-                          </div>
-                          <div className="mt-[9px]">
-                            <p className="text-sm font-semibold text-eerie-black dark:text-[#EEEEEE] leading-relaxed">
                               {tool.displayName}
                             </p>
-                            <p className="mt-1 h-16 overflow-auto text-[13px] text-gray-600 dark:text-gray-400 leading-relaxed pr-1">
+                            <p className="h-20 overflow-auto text-[12px] text-old-silver dark:text-sonic-silver-light">
                               {tool.description}
                             </p>
                           </div>
                         </div>
-                        <div className="absolute bottom-3 right-3">
-                          <label
-                            htmlFor={`toolToggle-${index}`}
-                            className="relative inline-block h-6 w-10 cursor-pointer rounded-full bg-gray-300 dark:bg-[#D2D5DA33]/20 transition [-webkit-tap-highlight-color:_transparent] has-[:checked]:bg-[#0C9D35CC] has-[:checked]:dark:bg-[#0C9D35CC]"
-                          >
-                            <span className="sr-only">
-                              {t('settings.tools.toggleToolAria', {
-                                toolName: tool.displayName,
-                              })}
-                            </span>
-                            <input
-                              type="checkbox"
-                              id={`toolToggle-${index}`}
-                              className="peer sr-only"
-                              checked={tool.status}
-                              onChange={() =>
-                                updateToolStatus(tool.id, !tool.status)
-                              }
-                            />
-                            <span className="absolute inset-y-0 start-0 m-[3px] size-[18px] rounded-full bg-white transition-all peer-checked:start-4"></span>
-                          </label>
+                        <div className="flex justify-end pt-2">
+                          <ToggleSwitch
+                            checked={tool.status}
+                            onChange={(checked) =>
+                              updateToolStatus(tool.id, checked)
+                            }
+                            size="small"
+                            id={`toolToggle-${index}`}
+                            ariaLabel={t('settings.tools.toggleToolAria', {
+                              toolName: tool.displayName,
+                            })}
+                          />
                         </div>
                       </div>
-                    ))
-                )}
+                    </div>
+                  ))}
               </div>
             )}
           </div>