change style

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" />}

lama_cleaner/app/src/Editor.tsx

@@ -561,14 +561,15 @@ export default function Editor(props: EditorProps) {
         />
       )}
 
+      <div
+        className="fixed w-full bottom-0 flex items-center justify-center"
+        style={{ height: '90px' }}
+      >
         <div
           className={[
-          'flex items-center w-full max-w-5xl',
+            'flex items-center justify-center space-x-6',
-          'space-x-3 sm:space-x-5',
+            '',
-          'pb-6',
+            // 'bg-black backdrop-blur backdrop-filter bg-opacity-10',
-          minScale !== 1
-            ? 'absolute bottom-0 justify-evenly'
-            : 'relative justify-evenly sm:justify-between',
           ].join(' ')}
         >
           <SizeSelector
@@ -635,6 +636,19 @@ export default function Editor(props: EditorProps) {
               {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}
+          </div>
+        </div>
       </div>
     </div>
   )

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' }}
+            style={{ top: '-122px' }}
-            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"
+            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>