Complete GUI Refactor # Patch 1

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

@@ -22,12 +22,28 @@
 
 .editor-canvas {
   grid-area: editor-content;
+  z-index: 2;
 }
 
 .original-image-container {
   grid-area: editor-content;
   pointer-events: none;
-  animation: opacityReveal 350ms ease-in-out;
+  display: grid;
+  grid-template-areas: 'original-image-content';
+
+  img {
+    grid-area: original-image-content;
+  }
+
+  .editor-slider {
+    grid-area: original-image-content;
+    height: 100%;
+    width: 4px;
+    justify-self: end;
+    background-color: var(--yellow-accent);
+    transition: all 350ms ease-in-out;
+    z-index: 2;
+  }
 }
 
 .editor-canvas-loading {
@@ -40,13 +56,13 @@
   bottom: 0;
   padding: 1rem 4rem;
   display: grid;
-  // grid-template-columns: repeat(4, max-content);
   grid-template-areas: 'toolkit-image-type toolkit-size-selector toolkit-brush-slider toolkit-btns';
   column-gap: 2rem;
   align-items: center;
   background-color: var(--editor-toolkit-bg);
   backdrop-filter: blur(10px);
   border-radius: 0.5rem 0.5rem 0 0;
+  animation: slideUp 0.2s ease-out;
 
   @include mobile {
     padding: 1rem 2rem;
@@ -68,9 +84,7 @@
   column-gap: 1rem;
   align-items: center;
 
-  input[type='range'] {
-    outline: none;
-  }
+  @include slider-bar;
 }
 
 .editor-toolkit-btns {
@@ -83,15 +97,11 @@
 .brush-shape {
   position: absolute;
   border-radius: 50%;
-  background: rgb(255, 255, 255, 0.25);
+  background: rgba(255, 190, 0, 0.75);
   border: 1px dashed var(--border-color);
   pointer-events: none;
 }
 
-.editor-size-selector {
-  display: grid;
-}
-
 .editor-size-selector-options {
   position: fixed;
   display: grid;
@@ -103,31 +113,57 @@
   grid-template-columns: repeat(2, max-content);
   align-items: center;
   column-gap: 0.5rem;
+}
 
-  select {
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    background: var(--yellow-accent);
-    outline: none;
-    border: 1px dashed var(--border-color);
+.editor-size-selector-main {
+  @include accented-display(var(--yellow-accent));
+  display: grid;
+  grid-template-columns: repeat(2, max-content);
+  column-gap: 0.25rem;
+  align-items: center;
+  cursor: pointer;
+  outline: none;
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+    margin-top: 0.25rem;
+  }
+}
+
+.editor-size-options {
+  @include accented-display(var(--btn-primary-bg));
+  padding: 0;
+  display: grid;
+  justify-self: center;
+  margin-left: 2.7rem;
+  position: fixed;
+  bottom: 4rem;
+
+  @include mobile {
+    bottom: 11.5rem;
+    margin-left: 2.9rem;
+  }
+
+  .editor-size-option {
+    padding: 0.2rem 0.8rem;
+    border-bottom: 1px dashed var(--border-color);
     border-radius: 0.5rem;
-    font-family: 'WorkSans-Bold';
-    font-size: 1rem;
-    padding: 0.5rem;
-    text-align: center;
-    color: rgb(0, 0, 0);
+
+    &:last-of-type {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background-color: var(--yellow-accent);
+    }
   }
 }
 
 .image-type-tag {
+  @include accented-display(var(--yellow-accent));
   grid-area: toolkit-image-type;
   z-index: 2;
-  background-color: var(--yellow-accent);
-  padding: 0.5rem;
-  border-radius: 0.5rem;
   width: 100px;
   text-align: center;
-  font-family: 'WorkSans-Bold';
-  color: rgb(0, 0, 0);
 }