style refine

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

@@ -38,10 +38,10 @@
   .editor-slider {
     grid-area: original-image-content;
     height: 100%;
-    width: 4px;
+    width: 6px;
     justify-self: end;
     background-color: var(--yellow-accent);
-    transition: all 350ms ease-in-out;
+    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
     z-index: 2;
   }
 }
@@ -52,17 +52,21 @@
 }
 
 .editor-toolkit-panel {
+  // width: 100%;
   position: fixed;
-  bottom: 0;
-  padding: 1rem 4rem;
+  bottom: 0.5rem;
+  // border: 1px solid rgb(100, 100, 120, 0.5);
+  border-radius: 3rem;
+  padding: 1rem 3rem;
   display: grid;
   grid-template-areas: 'toolkit-size-selector toolkit-brush-slider toolkit-btns';
   column-gap: 2rem;
   align-items: center;
+  justify-content: center;
   background-color: var(--editor-toolkit-bg);
-  backdrop-filter: blur(10px);
-  border-radius: 0.5rem 0.5rem 0 0;
+  backdrop-filter: blur(12px);
   animation: slideUp 0.2s ease-out;
+  border: 1px solid rgb(100, 100, 120, 0.4);
 
   @include mobile {
     padding: 1rem 2rem;
@@ -73,6 +77,11 @@
     row-gap: 2rem;
     justify-items: center;
   }
+
+  .eyeicon-active {
+    background-color: var(--yellow-accent);
+    color: var(--btn-text-hover-color);
+  }
 }
 
 .editor-brush-slider {
@@ -97,8 +106,8 @@
 .brush-shape {
   position: absolute;
   border-radius: 50%;
-  background: rgba(255, 190, 0, 0.75);
-  border: 1px dashed var(--border-color);
+  background-color: #ffcc00bb;
+  border: 1px solid var(--yellow-accent);
   pointer-events: none;
 }
 
@@ -112,17 +121,21 @@
   display: grid;
   grid-template-columns: repeat(2, max-content);
   align-items: center;
-  column-gap: 0.5rem;
 }
 
 .editor-size-selector-main {
-  @include accented-display(var(--yellow-accent));
-  display: grid;
-  grid-template-columns: repeat(2, max-content);
-  column-gap: 0.25rem;
+  @include accented-display(var(white));
+  user-select: none;
+  display: flex;
+  justify-content: space-between;
   align-items: center;
   cursor: pointer;
   outline: none;
+  gap: 8px;
+  width: 128px;
+
+  border: 1px solid var(--editor-size-border-color);
+  color: var(--options-text-color);
 
   svg {
     width: 1rem;
@@ -133,29 +146,45 @@
 
 .editor-size-options {
   @include accented-display(var(--btn-primary-bg));
+  width: 128px;
   padding: 0;
   display: grid;
   justify-self: center;
-  margin-left: 2.7rem;
   position: fixed;
   bottom: 4rem;
+  cursor: pointer;
+
+  color: var(--options-text-color);
+  background-color: var(--page-bg);
+  border: 1px solid var(--editor-size-border-color);
+
+  border-radius: 0.6rem;
 
   @include mobile {
     bottom: 11.5rem;
-    margin-left: 2.9rem;
   }
 
   .editor-size-option {
+    display: flex;
+    align-items: center;
+    height: 40px;
+    user-select: none;
     padding: 0.2rem 0.8rem;
-    border-bottom: 1px dashed var(--border-color);
-    border-radius: 0.5rem;
+
+
+    &:first-of-type {
+      border-top-right-radius: 0.5rem;
+      border-top-left-radius: 0.5rem;
+    }
 
     &:last-of-type {
-      border-bottom: none;
+      border-bottom-left-radius: 0.5rem;
+      border-bottom-right-radius: 0.5rem;
     }
 
     &:hover {
       background-color: var(--yellow-accent);
+      color: var(--btn-text-hover-color);
     }
   }
 }

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

@@ -23,8 +23,7 @@ import SizeSelector from './SizeSelector'
 import { downloadImage, loadImage, useImage } from '../../utils'
 
 const TOOLBAR_SIZE = 200
-const BRUSH_COLOR = 'rgba(255, 190, 0, 0.65)'
-// const NO_COLOR = 'rgba(255,255,255,0)'
+const BRUSH_COLOR = '#ffcc00bb'
 
 interface EditorProps {
   file: File
@@ -654,7 +653,7 @@ export default function Editor(props: EditorProps) {
           />
           <Button
             icon={<EyeIcon />}
-            style={showOriginal ? { backgroundColor: 'rgb(255, 190, 0)' } : {}}
+            className={showOriginal ? 'eyeicon-active' : ''}
             onDown={ev => {
               ev.preventDefault()
               setShowOriginal(() => {

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useRef, useState } from 'react'
-import ChevronDoubleDownIcon from '@heroicons/react/solid/ChevronDoubleDownIcon'
 import { useClickAway } from 'react-use'
+import { ChevronUpIcon } from '@heroicons/react/outline'
 
 const sizes = ['720', '1080', '2000', 'Original']
 
@@ -68,7 +68,6 @@ export default function SizeSelector(props: SizeSelectorProps) {
 
   return (
     <div className="editor-size-selector" ref={sizeSelectorRef}>
-      <p>Size:</p>
       <div
         className="editor-size-selector-main"
         role="button"
@@ -77,8 +76,8 @@ export default function SizeSelector(props: SizeSelectorProps) {
         aria-hidden="true"
       >
         <p>{getSizeShowName(activeSize.toString())}</p>
-        <div className="editor-size-selector-chevron">
-          <ChevronDoubleDownIcon />
+        <div className="editor-size-selector-icon">
+          <ChevronUpIcon />
         </div>
       </div>