css optimize

lama_cleaner/app/src/components/FileManager/FileManager.tsx

@@ -158,7 +158,7 @@ export default function FileManager(props: Props) {
   return (
     <Modal
       onClose={onClose}
-      title={`Files(${photos.length})`}
+      title={`Images (${photos.length})`}
       className="file-manager-modal"
       show={show}
     >

lama_cleaner/app/src/components/SidePanel/ImageResizeScale.tsx

@@ -36,9 +36,7 @@ const ImageResizeScale = () => {
       className="sub-setting-block"
       title="Resize"
       titleSuffix={
-        <div
+        <div className="resize-title-tile">{` ${scaledWidth()}x${scaledHeight()}`}</div>
-          style={{ width: 86 }}
-        >{`(${scaledWidth()}x${scaledHeight()})`}</div>
       }
       desc="Resize the image before inpainting, the area outside the mask will not lose quality."
       input={

lama_cleaner/app/src/components/SidePanel/SidePanel.scss

@@ -83,3 +83,9 @@
     padding-top: 10px;
   }
 }
+
+.resize-title-tile {
+  width: 86px;
+  font-size: 0.5rem;
+  color: var(--text-color-gray);
+}

lama_cleaner/app/src/components/SidePanel/SidePanel.tsx

@@ -19,7 +19,6 @@ import ImageResizeScale from './ImageResizeScale'
 
 const INPUT_WIDTH = 30
 
-// TODO: 添加收起来的按钮
 const SidePanel = () => {
   const [open, toggleOpen] = useToggle(true)
   const [setting, setSettingState] = useRecoilState(settingState)

lama_cleaner/app/src/components/shared/Button.tsx

@@ -35,8 +35,8 @@ const Button: React.FC<ButtonProps> = props => {
     onClick?.()
   }
 
+  const renderButton = () => {
     return (
-    <Tooltip content={toolTip}>
       <div
         role="button"
         style={style}
@@ -60,8 +60,13 @@ const Button: React.FC<ButtonProps> = props => {
         {icon}
         {children ? <span>{children}</span> : null}
       </div>
-    </Tooltip>
     )
+  }
+
+  if (toolTip) {
+    return <Tooltip content={toolTip}>{renderButton()}</Tooltip>
+  }
+  return renderButton()
 }
 
 Button.defaultProps = {