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

@@ -562,78 +562,92 @@ export default function Editor(props: EditorProps) {
       )}
 
       <div
-        className={[
+        className="fixed w-full bottom-0 flex items-center justify-center"
-          'flex items-center w-full max-w-5xl',
+        style={{ height: '90px' }}
-          'space-x-3 sm:space-x-5',
-          'pb-6',
-          minScale !== 1
-            ? 'absolute bottom-0 justify-evenly'
-            : 'relative justify-evenly sm:justify-between',
-        ].join(' ')}
       >
-        <SizeSelector
+        <div
-          value={sizeLimit || '1080'}
+          className={[
-          onChange={onSizeLimitChange}
+            'flex items-center justify-center space-x-6',
-          originalWidth={original.naturalWidth}
+            '',
-          originalHeight={original.naturalHeight}
+            // 'bg-black backdrop-blur backdrop-filter bg-opacity-10',
-        />
+          ].join(' ')}
-        <Slider
+        >
-          label={
+          <SizeSelector
-            <span>
+            value={sizeLimit || '1080'}
-              <span className="hidden md:inline">Brush</span>
+            onChange={onSizeLimitChange}
-            </span>
+            originalWidth={original.naturalWidth}
-          }
+            originalHeight={original.naturalHeight}
-          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
+          <Slider
-            className="mr-2"
+            label={
-            icon={<EyeIcon className="w-6 h-6" />}
+              <span>
-            onDown={ev => {
+                <span className="hidden md:inline">Brush</span>
-              ev.preventDefault()
+              </span>
-              setShowSeparator(true)
+            }
-              setShowOriginal(true)
+            min={10}
-            }}
+            max={150}
-            onUp={() => {
+            value={brushSize}
-              setShowOriginal(false)
+            onChange={setBrushSize}
-              setTimeout(() => setShowSeparator(false), 300)
+          />
-            }}
+          <div>
-            disabled={renders.length === 0}
+            <Button
-          >
+              className="mr-2"
-            {undefined}
+              icon={
-          </Button>
+                <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
+            <Button
-            primary
+              primary
-            icon={<DownloadIcon className="w-6 h-6" />}
+              icon={<DownloadIcon className="w-6 h-6" />}
-            disabled={!renders.length}
+              disabled={!renders.length}
-            onClick={download}
+              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>

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>