From a7382807be4f115239c2ba577923114e61ec5580 Mon Sep 17 00:00:00 2001
From: Qing <cwq1913@gmail.com>
Date: Sat, 7 Jan 2023 09:52:11 +0800
Subject: [PATCH] css optimize

---
 .../app/src/components/FileManager/FileManager.tsx  |  2 +-
 .../src/components/SidePanel/ImageResizeScale.tsx   |  4 +---
 .../app/src/components/SidePanel/SidePanel.scss     |  6 ++++++
 .../app/src/components/SidePanel/SidePanel.tsx      |  1 -
 lama_cleaner/app/src/components/shared/Button.tsx   | 13 +++++++++----
 5 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/lama_cleaner/app/src/components/FileManager/FileManager.tsx b/lama_cleaner/app/src/components/FileManager/FileManager.tsx
index 46d4ea3..75f556f 100644
--- a/lama_cleaner/app/src/components/FileManager/FileManager.tsx
+++ b/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}
     >
diff --git a/lama_cleaner/app/src/components/SidePanel/ImageResizeScale.tsx b/lama_cleaner/app/src/components/SidePanel/ImageResizeScale.tsx
index 1cafc7d..4ffb447 100644
--- a/lama_cleaner/app/src/components/SidePanel/ImageResizeScale.tsx
+++ b/lama_cleaner/app/src/components/SidePanel/ImageResizeScale.tsx
@@ -36,9 +36,7 @@ const ImageResizeScale = () => {
       className="sub-setting-block"
       title="Resize"
       titleSuffix={
-        <div
-          style={{ width: 86 }}
-        >{`(${scaledWidth()}x${scaledHeight()})`}</div>
+        <div className="resize-title-tile">{` ${scaledWidth()}x${scaledHeight()}`}</div>
       }
       desc="Resize the image before inpainting, the area outside the mask will not lose quality."
       input={
diff --git a/lama_cleaner/app/src/components/SidePanel/SidePanel.scss b/lama_cleaner/app/src/components/SidePanel/SidePanel.scss
index 0b87408..ad3e140 100644
--- a/lama_cleaner/app/src/components/SidePanel/SidePanel.scss
+++ b/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);
+}
diff --git a/lama_cleaner/app/src/components/SidePanel/SidePanel.tsx b/lama_cleaner/app/src/components/SidePanel/SidePanel.tsx
index 6a22a01..b9fc8d7 100644
--- a/lama_cleaner/app/src/components/SidePanel/SidePanel.tsx
+++ b/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)
diff --git a/lama_cleaner/app/src/components/shared/Button.tsx b/lama_cleaner/app/src/components/shared/Button.tsx
index ea36a46..5d3b5b1 100644
--- a/lama_cleaner/app/src/components/shared/Button.tsx
+++ b/lama_cleaner/app/src/components/shared/Button.tsx
@@ -35,8 +35,8 @@ const Button: React.FC<ButtonProps> = props => {
     onClick?.()
   }
 
-  return (
-    <Tooltip content={toolTip}>
+  const renderButton = () => {
+    return (
       <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 = {