feat(chat): update icon sizes (Issue #2098) (#2152)

epam · Sep 20, 2024 · 23e72d2 · 23e72d2
1 parent a3e5bf3
commit 23e72d2
Show file tree

Hide file tree

Showing 18 changed files with 183 additions and 108 deletions.
diff --git a/apps/chat/src/components/Chat/ChangePathDialog.tsx b/apps/chat/src/components/Chat/ChangePathDialog.tsx
@@ -228,7 +228,6 @@ export const ChangePathDialog = ({
       isInitialRenameEnabled: true,
       openedFoldersIds,
       newAddedFolderId: newFolderId,
-      isSidePanelFolder: false,
       loadingFolderIds,
       additionalItemData: {
         isChangePathFolder: true,

diff --git a/apps/chat/src/components/Chat/Playback/PlaybackIcon.tsx b/apps/chat/src/components/Chat/Playback/PlaybackIcon.tsx
@@ -9,14 +9,15 @@ import { IconNonModelWithTooltip } from '../IconNonModelWithTooltip';
 interface Props {
   isCustomTooltip?: boolean;
   size?: number;
+  strokeWidth?: number;
 }
 
-export const PlaybackIcon = ({ isCustomTooltip, size }: Props) => {
+export const PlaybackIcon = ({ isCustomTooltip, ...props }: Props) => {
   const { t } = useTranslation(Translation.Chat);
 
   return (
     <IconNonModelWithTooltip
-      icon={<IconPlayerPlay size={size} />}
+      icon={<IconPlayerPlay {...props} />}
       tooltipContent={t('Playback')}
       isCustomTooltip={isCustomTooltip}
     />

diff --git a/apps/chat/src/components/Chat/Publish/ApproveRequiredSection.tsx b/apps/chat/src/components/Chat/Publish/ApproveRequiredSection.tsx
@@ -81,7 +81,7 @@ const PublicationItem = ({ publication, featureTypes }: PublicationProps) => {
   );
 
   const additionalItemData = useMemo(
-    () => ({ publicationUrl: publication.url }),
+    () => ({ publicationUrl: publication.url, isSidePanelItem: true }),
     [publication.url],
   );
 
@@ -96,7 +96,7 @@ const PublicationItem = ({ publication, featureTypes }: PublicationProps) => {
       <div
         onClick={handlePublicationSelect}
         className={classNames(
-          'group relative flex h-[30px] items-center rounded border-l-2 hover:bg-accent-primary-alpha',
+          'group relative flex h-[34px] items-center rounded border-l-2 hover:bg-accent-primary-alpha',
           selectedPublicationUrl === publication.url &&
             !selectedConversationIds.length
             ? 'border-l-accent-primary bg-accent-primary-alpha'
@@ -107,7 +107,12 @@ const PublicationItem = ({ publication, featureTypes }: PublicationProps) => {
         <div className="group/button flex size-full cursor-pointer items-center gap-1 py-2 pr-3">
           <CaretIconComponent hidden={!showCaretIcon} isOpen={isOpen} />
           <div className="relative">
-            <IconClipboard className="text-secondary" width={18} height={18} />
+            <IconClipboard
+              className="text-secondary"
+              strokeWidth={1.5}
+              width={24}
+              height={24}
+            />
             {(!itemsToReview
               .filter((item) => !isFileId(item.reviewUrl))
               .every((item) => item.reviewed) ||

diff --git a/apps/chat/src/components/Chat/Publish/PublicationResources.tsx b/apps/chat/src/components/Chat/Publish/PublicationResources.tsx
@@ -190,7 +190,6 @@ export const PromptPublicationResources = ({
           }
           folderClassName={classNames(readonly && 'h-[38px]')}
           showTooltip={showTooltip}
-          isSidePanelFolder={!readonly}
           additionalItemData={additionalItemData}
         />
       ))}
@@ -366,7 +365,6 @@ export const ConversationPublicationResources = ({
           folderClassName={classNames(readonly && 'h-[38px]')}
           additionalItemData={additionalItemData}
           showTooltip={showTooltip}
-          isSidePanelFolder={!readonly}
         />
       ))}
       {itemsToDisplay.map((conversation) =>

diff --git a/apps/chat/src/components/Chat/ReplayAsIsIcon.tsx b/apps/chat/src/components/Chat/ReplayAsIsIcon.tsx
@@ -9,14 +9,15 @@ import { IconNonModelWithTooltip } from './IconNonModelWithTooltip';
 interface Props {
   isCustomTooltip?: boolean;
   size?: number;
+  strokeWidth?: number;
 }
 
-export const ReplayAsIsIcon = ({ isCustomTooltip, size }: Props) => {
+export const ReplayAsIsIcon = ({ isCustomTooltip, ...props }: Props) => {
   const { t } = useTranslation(Translation.Chat);
 
   return (
     <IconNonModelWithTooltip
-      icon={<IconRefreshDot size={size} />}
+      icon={<IconRefreshDot {...props} />}
       tooltipContent={t('Replay as is')}
       isCustomTooltip={isCustomTooltip}
     />

diff --git a/apps/chat/src/components/Chatbar/ChatFolders.tsx b/apps/chat/src/components/Chatbar/ChatFolders.tsx
@@ -109,15 +109,22 @@ const ChatFolderTemplate = ({
   const selectedConversations = useAppSelector(
     ConversationsSelectors.selectSelectedItems,
   );
-
   const emptyFoldersIds = useAppSelector(
     ConversationsSelectors.selectEmptyFolderIds,
   );
-
   const isFolderEmpty = useAppSelector((state) =>
     ConversationsSelectors.selectIsFolderEmpty(state, folder.id),
   );
 
+  const additionalFolderData = useMemo(
+    () => ({
+      selectedFolderIds: fullyChosenFolderIds,
+      partialSelectedFolderIds: partialChosenFolderIds,
+      isSidePanelItem: true,
+    }),
+    [fullyChosenFolderIds, partialChosenFolderIds],
+  );
+
   const handleDrop = useCallback(
     (e: DragEvent, folder: FolderInterface) => {
       if (e.dataTransfer) {
@@ -289,10 +296,7 @@ const ChatFolderTemplate = ({
         loadingFolderIds={loadingFolderIds}
         onSelectFolder={handleFolderSelect}
         canSelectFolders={isSelectMode}
-        additionalItemData={{
-          selectedFolderIds: fullyChosenFolderIds,
-          partialSelectedFolderIds: partialChosenFolderIds,
-        }}
+        additionalItemData={additionalFolderData}
       />
       {isLast && (
         <BetweenFoldersLine
@@ -342,6 +346,13 @@ export const ChatSection = ({
 
   const { handleToggle, isExpanded } = useSectionToggle(name, FeatureType.Chat);
 
+  const additionalConvData = useMemo(
+    () => ({
+      isSidePanelItem: true,
+    }),
+    [],
+  );
+
   const sortedRootConversations = useMemo(
     () => sortByName(rootConversations),
     [rootConversations],
@@ -407,7 +418,11 @@ export const ChatSection = ({
       {displayRootFiles && (
         <div className="flex flex-col gap-1">
           {sortedRootConversations.map((item) => (
-            <ConversationComponent key={item.id} item={item} />
+            <ConversationComponent
+              additionalItemData={additionalConvData}
+              key={item.id}
+              item={item}
+            />
           ))}
         </div>
       )}

diff --git a/apps/chat/src/components/Chatbar/Chatbar.tsx b/apps/chat/src/components/Chatbar/Chatbar.tsx
@@ -51,7 +51,7 @@ const ChatActionsBlock = () => {
   return (
     <div className="flex px-2 py-1">
       <button
-        className="flex shrink-0 grow cursor-pointer select-none items-center gap-3 rounded px-3 py-2 transition-colors duration-200 hover:bg-accent-primary-alpha disabled:cursor-not-allowed hover:disabled:bg-transparent"
+        className="flex shrink-0 grow cursor-pointer select-none items-center gap-3 rounded px-3 py-[5px] transition-colors duration-200 hover:bg-accent-primary-alpha disabled:cursor-not-allowed hover:disabled:bg-transparent"
         onClick={() => {
           dispatch(
             ConversationsActions.createNewConversations({
@@ -64,9 +64,9 @@ const ChatActionsBlock = () => {
         data-qa="new-entity"
       >
         {isActiveNewConversationRequest ? (
-          <Spinner size={18} className="text-secondary" />
+          <Spinner size={24} className="text-secondary" />
         ) : (
-          <PlusIcon className="text-secondary" width={18} height={18} />
+          <PlusIcon className="text-secondary" width={24} height={24} />
         )}
         {t('New conversation')}
       </button>

diff --git a/apps/chat/src/components/Chatbar/Conversation.tsx b/apps/chat/src/components/Chatbar/Conversation.tsx
@@ -134,19 +134,26 @@ export function ConversationView({
     !additionalItemData?.publicationUrl ||
     selectedPublicationUrl === additionalItemData?.publicationUrl;
 
+  const iconSize = additionalItemData?.isSidePanelItem ? 24 : 18;
+  const strokeWidth = additionalItemData?.isSidePanelItem ? 1.5 : 2;
+
   return (
     <>
       <div
         className={classNames(
-          'relative size-[18px]',
-          isSelectMode &&
-            !isExternal &&
-            'shrink-0 group-hover/conversation-item:flex',
+          'relative',
+          additionalItemData?.isSidePanelItem
+            ? 'size-[24px] items-center justify-center'
+            : 'size-[18px]',
+          isSelectMode && !isExternal && 'shrink-0 group-hover:flex',
           isSelectMode && isChosen && !isExternal ? 'flex' : 'hidden',
         )}
       >
         <input
-          className="checkbox peer size-[18px] bg-layer-3"
+          className={classNames(
+            'checkbox peer size-[18px] bg-layer-3',
+            additionalItemData?.isSidePanelItem && 'mr-0',
+          )}
           type="checkbox"
           checked={isChosen}
           onChange={handleToggle}
@@ -163,14 +170,14 @@ export function ConversationView({
         featureType={FeatureType.Chat}
         isInvalid={isInvalid}
         containerClassName={classNames(
-          isSelectMode && !isExternal && 'group-hover/conversation-item:hidden',
+          isSelectMode && !isExternal && 'group-hover:hidden',
           isChosen && !isExternal && 'hidden',
         )}
       >
         {resourceToReview && !resourceToReview.reviewed && (
           <ReviewDot
             className={classNames(
-              'group-hover/conversation-item:bg-accent-secondary-alpha',
+              'group-hover:bg-accent-secondary-alpha',
               (selectedConversationIds.includes(conversation.id) ||
                 isContextMenu) &&
                 isPartOfSelectedPublication &&
@@ -180,19 +187,19 @@ export function ConversationView({
         )}
         {conversation.isReplay && (
           <span className="flex shrink-0">
-            <ReplayAsIsIcon size={18} />
+            <ReplayAsIsIcon size={iconSize} />
           </span>
         )}
 
         {conversation.isPlayback && (
           <span className="flex shrink-0">
-            <PlaybackIcon size={18} />
+            <PlaybackIcon strokeWidth={strokeWidth} size={iconSize} />
           </span>
         )}
 
         {!conversation.isReplay && !conversation.isPlayback && (
           <ModelIcon
-            size={18}
+            size={iconSize}
             entityId={conversation.model.id}
             entity={modelsMap[conversation.model.id]}
             isInvalid={isInvalid}
@@ -656,15 +663,19 @@ export const ConversationComponent = ({
     }
   }, [isSelectMode]);
 
+  const iconSize = additionalItemData?.isSidePanelItem ? 24 : 18;
+  const strokeWidth = additionalItemData?.isSidePanelItem ? 1.5 : 2;
+
   return (
     <div
       className={classNames(
-        'group/conversation-item relative flex h-[30px] items-center rounded border-l-2 pr-3 hover:bg-accent-primary-alpha',
+        'group relative flex items-center rounded border-l-2 pr-3 hover:bg-accent-primary-alpha',
         !isSelectMode && isHighlighted
           ? 'border-l-accent-primary'
           : 'border-l-transparent',
         (isHighlighted || isContextMenu) && 'bg-accent-primary-alpha',
         isNameOrPathInvalid && !isRenaming && 'text-secondary',
+        additionalItemData?.isSidePanelItem ? 'h-[34px]' : 'h-[30px]',
       )}
       style={{
         paddingLeft: (level && `${0.875 + level * 1.5}rem`) || '0.875rem',
@@ -684,19 +695,20 @@ export const ConversationComponent = ({
           >
             {conversation.isReplay && (
               <span className="flex shrink-0">
-                <ReplayAsIsIcon size={18} />
+                <ReplayAsIsIcon strokeWidth={strokeWidth} size={iconSize} />
+                strokeWidth={strokeWidth}
               </span>
             )}
 
             {conversation.isPlayback && (
               <span className="flex shrink-0">
-                <PlaybackIcon size={18} />
+                <PlaybackIcon strokeWidth={strokeWidth} size={iconSize} />
               </span>
             )}
 
             {!conversation.isReplay && !conversation.isPlayback && (
               <ModelIcon
-                size={18}
+                size={iconSize}
                 entityId={conversation.model.id}
                 entity={modelsMap[conversation.model.id]}
               />
@@ -720,10 +732,8 @@ export const ConversationComponent = ({
       ) : (
         <button
           className={classNames(
-            'group/conversation-item flex size-full cursor-pointer items-center gap-2 disabled:cursor-not-allowed',
-            isSelectMode
-              ? 'pr-0'
-              : '[&:not(:disabled)]:group-hover/conversation-item:pr-6',
+            'group flex size-full cursor-pointer items-center gap-2 disabled:cursor-not-allowed',
+            isSelectMode ? 'pr-0' : '[&:not(:disabled)]:group-hover:pr-6',
           )}
           onClick={() => {
             setIsDeleting(false);
@@ -775,7 +785,7 @@ export const ConversationComponent = ({
           ref={refs.setFloating}
           {...getFloatingProps()}
           className={classNames(
-            'absolute right-3 z-50 flex cursor-pointer justify-end group-hover/conversation-item:visible',
+            'absolute right-3 z-50 flex cursor-pointer justify-end group-hover:visible',
             (conversation.status === UploadStatus.LOADED || !isContextMenu) &&
               'invisible',
           )}

diff --git a/apps/chat/src/components/Chatbar/ConversationsRenderer.tsx b/apps/chat/src/components/Chatbar/ConversationsRenderer.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { useSectionToggle } from '@/src/hooks/useSectionToggle';
 
@@ -31,6 +31,13 @@ export const ConversationsRenderer = ({
     FeatureType.Chat,
   );
 
+  const additionalConvData = useMemo(
+    () => ({
+      isSidePanelItem: true,
+    }),
+    [],
+  );
+
   useEffect(() => {
     setIsSectionHighlighted(
       conversations.some((conv) => selectedConversationsIds.includes(conv.id)),
@@ -52,6 +59,7 @@ export const ConversationsRenderer = ({
               <ConversationComponent
                 key={conversation.id}
                 item={conversation}
+                additionalItemData={additionalConvData}
               />
             ))}
           </div>

diff --git a/apps/chat/src/components/Common/FolderContextMenu.tsx b/apps/chat/src/components/Common/FolderContextMenu.tsx
@@ -39,7 +39,6 @@ interface FolderContextMenuProps {
   featureType: FeatureType;
   isOpen?: boolean;
   isEmpty?: boolean;
-  isSidePanelFolder?: boolean;
   additionalItemData?: AdditionalItemData;
   onDelete?: MouseEventHandler<unknown>;
   onRename?: MouseEventHandler<unknown>;
@@ -69,7 +68,6 @@ export const FolderContextMenu = ({
   onUpload,
   isOpen,
   isEmpty,
-  isSidePanelFolder,
   additionalItemData,
   onSelect,
 }: FolderContextMenuProps) => {
@@ -163,7 +161,7 @@ export const FolderContextMenu = ({
           isPublishingEnabled &&
           isItemPublic(folder.id) &&
           !!onUnpublish &&
-          isSidePanelFolder,
+          !!additionalItemData?.isSidePanelItem,
         Icon: UnpublishIcon,
         onClick: onUnpublish,
         disabled: disableAll,
@@ -224,10 +222,10 @@ export const FolderContextMenu = ({
       onPublish,
       onPublishUpdate,
       onUnpublish,
-      isSidePanelFolder,
+      additionalItemData?.isSidePanelItem,
+      additionalItemData?.isChangePathFolder,
       onDelete,
       onAddFolder,
-      additionalItemData?.isChangePathFolder,
     ],
   );
 

diff --git a/apps/chat/src/components/Files/SelectFolderModal.tsx b/apps/chat/src/components/Files/SelectFolderModal.tsx
@@ -124,7 +124,6 @@ export const SelectFolderModal = ({
             onAddFolder: handleAddFolder,
             newAddedFolderId: newFolderId,
             loadingFolderIds: loadingFolderIds,
-            isSidePanelFolder: false,
           }}
           handleFolderSelect={handleFolderSelect}
           isAllEntitiesOpened={isAllFilesOpened}