Inpainted State Fix

lama_cleaner/app/src/components/Editor/Editor.scss

@@ -56,7 +56,7 @@
   bottom: 0;
   padding: 1rem 4rem;
   display: grid;
-  grid-template-areas: 'toolkit-image-type toolkit-size-selector toolkit-brush-slider toolkit-btns';
+  grid-template-areas: 'toolkit-size-selector toolkit-brush-slider toolkit-btns';
   column-gap: 2rem;
   align-items: center;
   background-color: var(--editor-toolkit-bg);
@@ -67,7 +67,7 @@
   @include mobile {
     padding: 1rem 2rem;
     grid-template-areas:
-      'toolkit-image-type toolkit-size-selector'
+      'toolkit-size-selector toolkit-size-selector'
       'toolkit-brush-slider toolkit-brush-slider'
       'toolkit-btns toolkit-btns';
     row-gap: 2rem;
@@ -159,11 +159,3 @@
     }
   }
 }
-
-.image-type-tag {
-  @include accented-display(var(--yellow-accent));
-  grid-area: toolkit-image-type;
-  z-index: 2;
-  width: 100px;
-  text-align: center;
-}

lama_cleaner/app/src/components/Editor/Editor.tsx

@@ -616,9 +616,6 @@ export default function Editor(props: EditorProps) {
       )}
 
       <div className="editor-toolkit-panel">
-        <p className="image-type-tag">
-          {showOriginal ? 'Original' : 'Inpainted'}
-        </p>
         <SizeSelector
           onChange={onSizeLimitChange}
           originalWidth={original.naturalWidth}
@@ -657,6 +654,7 @@ export default function Editor(props: EditorProps) {
           />
           <Button
             icon={<EyeIcon />}
+            style={showOriginal ? { backgroundColor: 'rgb(255, 190, 0)' } : {}}
             onDown={ev => {
               ev.preventDefault()
               setShowOriginal(() => {

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

@@ -9,6 +9,7 @@ interface ButtonProps {
   onClick?: () => void
   onDown?: (ev: PointerEvent) => void
   onUp?: (ev: PointerEvent) => void
+  style?: React.CSSProperties
 }
 
 export default function Button(props: ButtonProps) {
@@ -21,6 +22,7 @@ export default function Button(props: ButtonProps) {
     onClick,
     onDown,
     onUp,
+    style,
   } = props
 
   const blurOnClick = (e: React.MouseEvent<HTMLDivElement>) => {
@@ -31,6 +33,7 @@ export default function Button(props: ButtonProps) {
   return (
     <div
       role="button"
+      style={style}
       onKeyDown={onKeyDown}
       onClick={blurOnClick}
       onPointerDown={(ev: React.PointerEvent<HTMLDivElement>) => {