chore: improve copy modal styles (#551)

Author: PolinaGurinovich97

src/components/FileManager/FileManager.tsx

@@ -262,6 +262,7 @@ export interface DialFileManagerProps {
   defaultPath?: string;
   className?: string;
   managerLabel?: ReactNode;
+  gridClassName?: string;
 
   allowedFileTypes?: DialFileAcceptType[];
   items?: DialFile[];
@@ -416,6 +417,7 @@ export interface DialFileManagerProps {
  * @param [path] - Absolute path of the current location (e.g. "/All files/Design/Icons")
  * @param [defaultPath] - Initial path used in uncontrolled mode (applied only on first render)
  * @param [className] - Additional classes for the root container
+ * @param [gridClassName] - Additional classes for the grid container
  * @param [items] - Full hierarchical list of files and folders used by both tree and grid
  * @param [rootItem] - Optional root folder item to represent the top-level container in the tree
  * @param [filesLoading=false] - When true, shows skeleton loading state in the grid
@@ -607,6 +609,7 @@ export const DialFileManagerView: FC = () => {
     onPreview,
     previewExtensions,
     isRenameFileAvailable,
+    gridClassName,
   } = useFileManagerContext();
   const {
     width = sidebarWidth,
@@ -998,8 +1001,8 @@ export const DialFileManagerView: FC = () => {
         </div>
       );
     }
-    // If no toolbar options are provided, render empty div to maintain layout consistency
-    return <div></div>;
+
+    return null;
   }, [
     bulkActionsToolbarOptions,
     selectedPaths,
@@ -1208,7 +1211,7 @@ export const DialFileManagerView: FC = () => {
       )}
     >
       {renderToolbar()}
-      <div className={mainGridClassName}>
+      <div className={mergeClasses(mainGridClassName, gridClassName)}>
         {renderFoldersTree()}
         <div
           className={mergeClasses(contentGridClassName, {

src/components/FileManager/FileManagerContext.tsx

@@ -47,6 +47,7 @@ export interface FileManagerGridRow {
 export interface FileManagerContextValue {
   managerLabel?: ReactNode;
   className?: string;
+  gridClassName?: string;
   items: DialFile[];
   rootItem?: DialRootFolder;
   allowedFileTypes?: DialFileAcceptType[];

src/components/FileManager/FileManagerProvider.tsx

@@ -126,6 +126,7 @@ export const FileManagerProvider: FC<FileManagerProviderProps> = ({
   isRenameFileAvailable,
   customUploadFileAction,
   customBreakpointRef,
+  gridClassName,
 }) => {
   const {
     selectedPaths: effectiveSelectedPaths,
@@ -692,6 +693,7 @@ export const FileManagerProvider: FC<FileManagerProviderProps> = ({
     emptyStateIcon,
     emptyStateTitle,
     emptyStateDescription,
+    gridClassName,
 
     sharedWithMeIds,
 

src/components/FileManager/components/DestinationFolderPopup/DestinationFolderPopup.tsx

@@ -173,6 +173,8 @@ export const DialDestinationFolderPopup: FC<DestinationFolderPopupProps> = ({
         onClose();
       }}
       size={PopupSize.Lg}
+      dividerFooter
+      dividers={false}
       className="md:!h-[800px] !bg-layer-2"
       footer={
         <div className="flex justify-between items-center gap-2 py-4 px-4 md:px-6">
@@ -247,7 +249,11 @@ export const DialDestinationFolderPopup: FC<DestinationFolderPopupProps> = ({
         <div className="flex-1 min-h-0">
           <DialFileManager
             {...restProps}
-            className={mergeClasses(restProps.className, 'bg-layer-2 h-full')}
+            gridClassName="size-full"
+            className={mergeClasses(
+              restProps.className,
+              'bg-layer-2 h-full flex pt-0',
+            )}
             actionsRef={fileManagerActionRef}
             path={path}
             showHiddenFiles={showHiddenFiles}

src/components/Popup/Popup.tsx

@@ -29,14 +29,15 @@ export interface DialPopupProps {
   overlayClassName?: string;
   titleClassName?: string;
   headerClassName?: string;
+  // TODO: review after implementing common design system
   dividers?: boolean;
+  dividerFooter?: boolean;
   children?: ReactNode;
   footer?: ReactNode;
   onClose?: (e?: MouseEvent<HTMLButtonElement> | null) => void;
   size?: PopupSize;
   hideClose?: boolean;
   closeOnOutsideClick?: boolean;
-  /** When true, focus is set to a non-input guard so the virtual keyboard does not open on mobile */
   preventKeyboardOnOpen?: boolean;
 }
 
@@ -72,6 +73,7 @@ export interface DialPopupProps {
  * @param [titleClassName] - Additional CSS classes applied to the title element
  * @param [headerClassName] - Additional CSS classes applied to the popup header container
  * @param [dividers=true] - Whether to render separators between sections
+ * @param [dividerFooter=true] - Whether to render a divider above the footer when `dividers` is true
  * @param [children] - Body content
  * @param [footer] - Footer area for actions
  * @param [onClose] - Callback fired when the popup requests to close
@@ -89,6 +91,7 @@ export const DialPopup: FC<DialPopupProps> = ({
   titleClassName,
   headerClassName,
   dividers = true,
+  dividerFooter = true,
   children,
   footer,
   onClose,
@@ -180,6 +183,7 @@ export const DialPopup: FC<DialPopupProps> = ({
               {/* Body area */}
               {children}
             </div>
+            {dividerFooter && <div className={popupDividerClassName} />}
             {footer}
           </div>
         </FloatingFocusManager>

src/components/Tooltip/TooltipContent.tsx

@@ -46,7 +46,7 @@ export const DialTooltipContent: FC<Props> = ({ style, ...props }) => {
           context={context.context}
           fill="currentColor"
           strokeWidth={1}
-          className="border-primary w-2 text-[var(--bg-layer-0,_#000000)]"
+          className="stroke-primary text-[var(--bg-layer-0,_#000000)]"
         />
       </div>
     </FloatingPortal>