From df53f810322ede7a5771f8499827b952072b1efe Mon Sep 17 00:00:00 2001
From: Sanster <cwq1913@gmail.com>
Date: Sun, 6 Feb 2022 20:56:40 +0800
Subject: [PATCH] change style

---
 lama_cleaner/app/src/App.tsx                  |   2 +-
 lama_cleaner/app/src/Editor.tsx               | 148 ++++++++++--------
 .../app/src/components/SizeSelector.tsx       |  10 +-
 3 files changed, 87 insertions(+), 73 deletions(-)

diff --git a/lama_cleaner/app/src/App.tsx b/lama_cleaner/app/src/App.tsx
index 493ce84..1baddb9 100644
--- a/lama_cleaner/app/src/App.tsx
+++ b/lama_cleaner/app/src/App.tsx
@@ -11,7 +11,7 @@ function App() {
 
   return (
     <div className="h-full full-visible-h-safari flex flex-col">
-      <header className="absolute z-10 flex px-5 pt-3 justify-center sm:justify-between items-center sm:items-start">
+      <header className="absolute z-10 flex w-full p-2 justify-center sm:justify-between items-center sm:items-start  bg-white backdrop-blur backdrop-filter bg-opacity-30">
         {file ? (
           <Button
             icon={<ArrowLeftIcon className="w-6 h-6" />}
diff --git a/lama_cleaner/app/src/Editor.tsx b/lama_cleaner/app/src/Editor.tsx
index 2036a64..31bd55d 100644
--- a/lama_cleaner/app/src/Editor.tsx
+++ b/lama_cleaner/app/src/Editor.tsx
@@ -562,78 +562,92 @@ export default function Editor(props: EditorProps) {
       )}
 
       <div
-        className={[
-          'flex items-center w-full max-w-5xl',
-          'space-x-3 sm:space-x-5',
-          'pb-6',
-          minScale !== 1
-            ? 'absolute bottom-0 justify-evenly'
-            : 'relative justify-evenly sm:justify-between',
-        ].join(' ')}
+        className="fixed w-full bottom-0 flex items-center justify-center"
+        style={{ height: '90px' }}
       >
-        <SizeSelector
-          value={sizeLimit || '1080'}
-          onChange={onSizeLimitChange}
-          originalWidth={original.naturalWidth}
-          originalHeight={original.naturalHeight}
-        />
-        <Slider
-          label={
-            <span>
-              <span className="hidden md:inline">Brush</span>
-            </span>
-          }
-          min={10}
-          max={150}
-          value={brushSize}
-          onChange={setBrushSize}
-        />
-        <div>
-          <Button
-            className="mr-2"
-            icon={
-              <svg
-                width="19"
-                height="9"
-                viewBox="0 0 19 9"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                className="w-6 h-6"
-              >
-                <path
-                  d="M2 1C2 0.447715 1.55228 0 1 0C0.447715 0 0 0.447715 0 1H2ZM1 8H0V9H1V8ZM8 9C8.55228 9 9 8.55229 9 8C9 7.44771 8.55228 7 8 7V9ZM16.5963 7.42809C16.8327 7.92721 17.429 8.14016 17.9281 7.90374C18.4272 7.66731 18.6402 7.07103 18.4037 6.57191L16.5963 7.42809ZM16.9468 5.83205L17.8505 5.40396L16.9468 5.83205ZM0 1V8H2V1H0ZM1 9H8V7H1V9ZM1.66896 8.74329L6.66896 4.24329L5.33104 2.75671L0.331035 7.25671L1.66896 8.74329ZM16.043 6.26014L16.5963 7.42809L18.4037 6.57191L17.8505 5.40396L16.043 6.26014ZM6.65079 4.25926C9.67554 1.66661 14.3376 2.65979 16.043 6.26014L17.8505 5.40396C15.5805 0.61182 9.37523 -0.710131 5.34921 2.74074L6.65079 4.25926Z"
-                  fill="currentColor"
-                />
-              </svg>
-            }
-            onClick={undo}
-            disabled={renders.length === 0}
+        <div
+          className={[
+            'flex items-center justify-center space-x-6',
+            '',
+            // 'bg-black backdrop-blur backdrop-filter bg-opacity-10',
+          ].join(' ')}
+        >
+          <SizeSelector
+            value={sizeLimit || '1080'}
+            onChange={onSizeLimitChange}
+            originalWidth={original.naturalWidth}
+            originalHeight={original.naturalHeight}
           />
-          <Button
-            className="mr-2"
-            icon={<EyeIcon className="w-6 h-6" />}
-            onDown={ev => {
-              ev.preventDefault()
-              setShowSeparator(true)
-              setShowOriginal(true)
-            }}
-            onUp={() => {
-              setShowOriginal(false)
-              setTimeout(() => setShowSeparator(false), 300)
-            }}
-            disabled={renders.length === 0}
-          >
-            {undefined}
-          </Button>
+          <Slider
+            label={
+              <span>
+                <span className="hidden md:inline">Brush</span>
+              </span>
+            }
+            min={10}
+            max={150}
+            value={brushSize}
+            onChange={setBrushSize}
+          />
+          <div>
+            <Button
+              className="mr-2"
+              icon={
+                <svg
+                  width="19"
+                  height="9"
+                  viewBox="0 0 19 9"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="w-6 h-6"
+                >
+                  <path
+                    d="M2 1C2 0.447715 1.55228 0 1 0C0.447715 0 0 0.447715 0 1H2ZM1 8H0V9H1V8ZM8 9C8.55228 9 9 8.55229 9 8C9 7.44771 8.55228 7 8 7V9ZM16.5963 7.42809C16.8327 7.92721 17.429 8.14016 17.9281 7.90374C18.4272 7.66731 18.6402 7.07103 18.4037 6.57191L16.5963 7.42809ZM16.9468 5.83205L17.8505 5.40396L16.9468 5.83205ZM0 1V8H2V1H0ZM1 9H8V7H1V9ZM1.66896 8.74329L6.66896 4.24329L5.33104 2.75671L0.331035 7.25671L1.66896 8.74329ZM16.043 6.26014L16.5963 7.42809L18.4037 6.57191L17.8505 5.40396L16.043 6.26014ZM6.65079 4.25926C9.67554 1.66661 14.3376 2.65979 16.043 6.26014L17.8505 5.40396C15.5805 0.61182 9.37523 -0.710131 5.34921 2.74074L6.65079 4.25926Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              }
+              onClick={undo}
+              disabled={renders.length === 0}
+            />
+            <Button
+              className="mr-2"
+              icon={<EyeIcon className="w-6 h-6" />}
+              onDown={ev => {
+                ev.preventDefault()
+                setShowSeparator(true)
+                setShowOriginal(true)
+              }}
+              onUp={() => {
+                setShowOriginal(false)
+                setTimeout(() => setShowSeparator(false), 300)
+              }}
+              disabled={renders.length === 0}
+            >
+              {undefined}
+            </Button>
 
-          <Button
-            primary
-            icon={<DownloadIcon className="w-6 h-6" />}
-            disabled={!renders.length}
-            onClick={download}
+            <Button
+              primary
+              icon={<DownloadIcon className="w-6 h-6" />}
+              disabled={!renders.length}
+              onClick={download}
+            >
+              {undefined}
+            </Button>
+          </div>
+
+          <div
+            className="absolute bg-black backdrop-blur backdrop-filter bg-opacity-10 rounded-xl"
+            style={{
+              height: '58px',
+              width: '680px',
+              zIndex: -1,
+              marginLeft: '-1px',
+            }}
           >
             {undefined}
-          </Button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/lama_cleaner/app/src/components/SizeSelector.tsx b/lama_cleaner/app/src/components/SizeSelector.tsx
index b0ba24d..a5caebc 100644
--- a/lama_cleaner/app/src/components/SizeSelector.tsx
+++ b/lama_cleaner/app/src/components/SizeSelector.tsx
@@ -36,15 +36,15 @@ export default function SizeSelector(props: SizeSelectorProps) {
       <Listbox value={value} onChange={onChange}>
         <div className="relative">
           <Listbox.Options
-            style={{ top: '-112px' }}
-            className="absolute mb-1 w-full overflow-auto text-base bg-black backdrop-blur backdrop-filter bg-opacity-10 rounded-md max-h-60 ring-opacity-50 focus:outline-none sm:text-sm"
+            style={{ top: '-122px' }}
+            className="absolute mb-1 w-full overflow-auto text-base bg-opacity-10 bg-black backdrop-blur rounded-md max-h-60 outline-none sm:text-sm"
           >
             {sizes.map(size => (
               <Listbox.Option
                 key={size}
                 className={({ active }) =>
                   `${active ? 'bg-black bg-opacity-10' : 'text-gray-900'}
-                          cursor-default select-none relative py-2 pl-10 pr-4`
+                   cursor-default select-none relative py-2 pl-4 pr-4`
                 }
                 value={size}
               >
@@ -57,7 +57,7 @@ export default function SizeSelector(props: SizeSelectorProps) {
                     >
                       {getSizeShowName(size)}
                     </span>
-                    {selected ? (
+                    {/* {selected ? (
                       <span
                         className={`${
                           active ? 'text-amber-600' : 'text-amber-600'
@@ -66,7 +66,7 @@ export default function SizeSelector(props: SizeSelectorProps) {
                       >
                         <CheckIcon className="w-5 h-5" aria-hidden="true" />
                       </span>
-                    ) : null}
+                    ) : null} */}
                   </>
                 )}
               </Listbox.Option>