feat: update styles for Overlay

Author: DaffPunks

src/editor-v2/containers/Overlay/Overlay.scss

@@ -5,67 +5,87 @@
 $block: '.#{$ns}overlay';
 
 #{$block} {
+    $border-width: 3px;
+    $border-select: 5px var(--g-color-line-brand) solid;
+    $border: $border-width var(--g-color-line-brand) solid;
+    $border-radius: 24px;
+
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
 
-    $border: 5px var(--g-color-line-brand) solid;
-    $border-2: 3px var(--g-color-base-selection) solid;
-
     &__border {
         position: absolute;
-        border: 3px var(--g-color-line-brand) solid;
-        border-radius: 24px;
+        border: $border;
+        border-radius: $border-radius;
         box-sizing: border-box;
         box-shadow: 4px 4px 8px 0 var(--g-color-sfx-shadow);
+        z-index: 100;
 
         &_hover {
             opacity: 0.5;
+            z-index: 99;
         }
     }
 
     &__line {
         position: absolute;
         //border: $border-2;
         box-sizing: border-box;
+        border-radius: $border-radius;
+        z-index: 10;
 
         &_position {
             &_top {
-                border-top: $border;
+                border-top: $border-select;
+                border-left: $border-select;
             }
 
             &_bottom {
-                border-bottom: $border;
+                border-right: $border-select;
+                border-bottom: $border-select;
             }
 
             &_left {
-                border-left: $border;
+                border-top: $border-select;
+                border-left: $border-select;
             }
 
             &_right {
-                border-right: $border;
+                border-right: $border-select;
+                border-bottom: $border-select;
             }
         }
     }
 
     &__actions {
         pointer-events: auto;
         position: absolute;
-        bottom: 0;
+        bottom: -$border-width;
         left: 50%;
         transform: translate(-50%, 100%);
+        z-index: 1000;
 
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         background: transparent;
     }
 
-    &__action-button {
-        &_grip {
-            cursor: grab;
+    &__actions-box {
+        &_main {
+            display: flex;
+            gap: 2px;
+            align-items: center;
+            padding: 1px 8px 4px;
+            background-color: var(--g-color-base-brand);
+            border-radius: 0px 0px 8px 8px;
+        }
+
+        &_reorder {
+            padding: 3px 4px;
         }
     }
 }

src/editor-v2/containers/Overlay/Overlay.tsx

@@ -111,30 +111,34 @@ const Overlay = ({className, canvasElement}: OverlayProps) => {
                     }}
                 >
                     <div className={b('actions')}>
-                        <Button view="flat" size={'m'} onClick={handleMoveUp}>
-                            <Icon data={ChevronUp} size={18} />
-                        </Button>
-                        <Button
-                            pin={'round-clear'}
-                            className={b('action-button')}
-                            size={'m'}
-                            view={'action'}
-                            onClick={() => selectedBlock && duplicateBlock(selectedBlock)}
-                        >
-                            <Icon data={Copy} size={18} />
-                        </Button>
-                        <Button
-                            pin={'clear-round'}
-                            className={b('action-button')}
-                            size={'m'}
-                            view={'action'}
-                            onClick={() => selectedBlock && deleteBlock(selectedBlock)}
-                        >
-                            <Icon data={TrashBin} size={18} />
-                        </Button>
-                        <Button view="flat" size={'m'} onClick={handleMoveDown}>
-                            <Icon data={ChevronDown} size={18} />
-                        </Button>
+                        <div className={b('actions-box', {reorder: true})}>
+                            <Button view="flat" size={'m'} onClick={handleMoveUp}>
+                                <Icon data={ChevronUp} size={18} />
+                            </Button>
+                        </div>
+                        <div className={b('actions-box', {main: true})}>
+                            <Button
+                                className={b('action-button')}
+                                size={'m'}
+                                view={'action'}
+                                onClick={() => selectedBlock && duplicateBlock(selectedBlock)}
+                            >
+                                <Icon data={Copy} size={18} />
+                            </Button>
+                            <Button
+                                className={b('action-button')}
+                                size={'m'}
+                                view={'action'}
+                                onClick={() => selectedBlock && deleteBlock(selectedBlock)}
+                            >
+                                <Icon data={TrashBin} size={18} />
+                            </Button>
+                        </div>
+                        <div className={b('actions-box', {reorder: true})}>
+                            <Button view="flat" size={'m'} onClick={handleMoveDown}>
+                                <Icon data={ChevronDown} size={18} />
+                            </Button>
+                        </div>
                     </div>
                 </div>
             ) : null}

src/editor-v2/styles/root.scss

@@ -3,8 +3,8 @@
     --g-color-base-brand-hover: var(--g-color-private-black-600-solid);
     --g-color-base-selection: var(--g-color-private-black-200);
     --g-color-base-selection-hover: var(--g-color-private-black-300);
-    --g-color-base-brand: var(--g-color-text-primary);
-    --g-color-base-brand-hover: var(--g-color-text-complementary);
+    --g-color-base-brand: var(--g-color-private-black-850-solid);
+    --g-color-base-brand-hover: var(--g-color-private-black-700-solid);
     --g-color-text-brand-contrast: var(--g-color-text-light-primary);
     --g-color-line-brand: var(--g-color-text-primary);
     --g-color-text-brand: var(--g-color-private-brand-700-solid);