Refine client delete animation and local rule button styling

src/shared/versions.js

@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.6.10',
-  gatewayClient: '0.6.9',
+  macClient: '0.6.11',
+  gatewayClient: '0.6.10',
   gatewayBackend: '0.6.0',
 });
 

src/web/components/ClientOverviewPage.jsx

@@ -426,6 +426,7 @@ function LocalRulesPanel({
                   />
                   <span className="client-local-rule-status" role="status">{statusLabel}</span>
                   <button
+                    className="client-local-rule-delete"
                     type="button"
                     aria-label={`Удалить правило ${index + 1}`}
                     onClick={() => onRemove(index)}

src/web/styles.css

@@ -967,7 +967,7 @@ p {
   bottom: 0;
   left: 12px;
   z-index: 100;
-  background: linear-gradient(90deg, oklch(0.68 0.15 28 / 0.3), oklch(0.68 0.15 28 / 0.12) 48%, transparent);
+  background: transparent;
   opacity: 0;
   pointer-events: none;
   transform: scaleX(0);
@@ -979,11 +979,11 @@ p {
   position: absolute;
   left: 0;
   right: 0;
-  top: calc(var(--client-delete-strike-y) - 2px);
-  height: 4px;
+  top: calc(var(--client-delete-strike-y) - 1px);
+  height: 2px;
   background: oklch(0.68 0.15 28);
-  clip-path: polygon(0 8%, 100% 50%, 0 92%);
-  filter: drop-shadow(0 0 2px oklch(0.68 0.15 28 / 0.5));
+  clip-path: polygon(0 24%, 100% 50%, 0 76%);
+  filter: drop-shadow(0 0 3px oklch(0.68 0.15 28 / 0.38));
 }
 
 .client-deletable-row.is-removing > .client-delete-strike {
@@ -1205,7 +1205,7 @@ p {
   text-shadow: 0 0 9px color-mix(in oklch, var(--client-accent) 22%, transparent);
 }
 
-.client-local-rule > button:last-child {
+.client-local-rule-delete {
   width: 28px;
   height: 32px;
   padding: 0;
@@ -1217,7 +1217,7 @@ p {
   transition: color 180ms ease, filter 260ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.client-local-rule > button:last-child:hover {
+.client-local-rule-delete:hover {
   color: oklch(0.68 0.15 28);
   filter: drop-shadow(0 0 7px oklch(0.68 0.15 28 / 0.42));
   transform: rotate(8deg) scale(1.1);
@@ -1225,7 +1225,7 @@ p {
 
 .client-local-rule-enabled:focus-visible,
 .client-rule-type-trigger:focus-visible,
-.client-local-rule > button:last-child:focus-visible,
+.client-local-rule-delete:focus-visible,
 .client-local-rule-add:focus-visible,
 .client-local-rules-save:focus-visible,
 .client-local-rules-actions button:focus-visible {
@@ -2996,7 +2996,7 @@ p {
     grid-row: 1;
   }
 
-  .client-local-rule > button:last-child {
+  .client-local-rule-delete {
     grid-column: 3;
     grid-row: 1;
   }
@@ -3080,7 +3080,7 @@ p {
   .client-rule-type-list,
   .client-rule-type-list button,
   .client-local-rule input,
-  .client-local-rule > button:last-child,
+  .client-local-rule-delete,
   .client-local-rule-add,
   .client-local-rule-add-slot > span,
   .client-local-rules-save,

test/web/rule-editor-contract.test.js

@@ -22,11 +22,13 @@ test('rule editor add latency stays constant and dirty exits are guarded', () =>
   assert.match(component, /client-deletable-row/);
   assert.match(component, /className="client-delete-strike"[\s\S]*onAnimationEnd/);
   assert.match(component, /client-rule-delete-cross/);
+  assert.match(component, /className="client-local-rule-delete"/);
   assert.match(styles, /\.client-deletable-row\.is-removing > \.client-delete-strike[\s\S]*client-delete-strike/);
-  assert.match(styles, /\.client-delete-strike \{[\s\S]*z-index: 100[\s\S]*linear-gradient/);
+  assert.match(styles, /\.client-delete-strike \{[\s\S]*z-index: 100[\s\S]*background: transparent/);
   assert.match(styles, /\.client-deletable-row\.is-removing > :not\(\.client-delete-strike\)[\s\S]*z-index: 0/);
   assert.match(styles, /\.client-deletable-row\.is-removing > \.client-local-rule-enabled[\s\S]*z-index: 101/);
-  assert.match(styles, /clip-path: polygon\(0 8%, 100% 50%, 0 92%\)/);
+  assert.match(styles, /clip-path: polygon\(0 24%, 100% 50%, 0 76%\)/);
+  assert.doesNotMatch(styles, /client-local-rule > button:last-child/);
   assert.match(styles, /@keyframes client-delete-strike[\s\S]*scaleX\(0\)[\s\S]*scaleX\(1\)/);
   assert.match(styles, /\.client-local-rule:has\(\.client-rule-type\.is-open\)[\s\S]*z-index: 5/);
 });