Refine local rule delete animation and bump Harbor versions

src/shared/versions.js

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

src/web/components/ClientOverviewPage.jsx

@@ -403,7 +403,6 @@ function LocalRulesPanel({
                     <svg viewBox="0 0 20 20" aria-hidden="true">
                       <circle cx="10" cy="10" r="6" />
                       <path className="client-rule-check" d="m6.8 10.1 2.1 2.2 4.5-5" />
-                      <path className="client-rule-delete-cross" d="m6 6 8 8M14 6l-8 8" />
                     </svg>
                   </button>
                   <RuleTypePicker

src/web/styles.css

@@ -983,16 +983,6 @@ p {
   height: 2px;
   background: oklch(0.68 0.15 28);
   clip-path: polygon(0 24%, 100% 50%, 0 76%);
-  filter: drop-shadow(0 0 3px oklch(0.68 0.15 28 / 0.38));
-}
-
-.client-delete-strike::before {
-  content: '';
-  position: absolute;
-  inset: 32% 0;
-  background: oklch(0.68 0.15 28 / 0.32);
-  clip-path: polygon(0 46%, 20% 8%, 100% 50%, 20% 92%, 0 54%);
-  filter: blur(3px);
 }
 
 .client-deletable-row.is-removing > .client-delete-strike {
@@ -1008,11 +998,6 @@ p {
   animation: client-delete-content-dim 820ms ease-out both;
 }
 
-.client-deletable-row.is-removing > .client-local-rule-enabled {
-  z-index: 101;
-  color: oklch(0.68 0.15 28);
-}
-
 .client-local-rule-enabled {
   width: 24px;
   height: 32px;
@@ -1048,14 +1033,6 @@ p {
   transition: opacity 160ms ease, stroke-dashoffset 360ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.client-rule-delete-cross {
-  stroke-width: 1.6;
-  opacity: 0;
-  transform: rotate(-35deg) scale(0.55);
-  transform-origin: center;
-  transition: opacity 160ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
 .client-local-rule-enabled[aria-checked='true'] {
   color: var(--client-accent);
 }
@@ -1078,11 +1055,6 @@ p {
   opacity: 0;
 }
 
-.client-deletable-row.is-removing .client-rule-delete-cross {
-  opacity: 1;
-  transform: rotate(0) scale(1);
-  filter: drop-shadow(0 0 3px oklch(0.68 0.15 28 / 0.55));
-}
 
 .client-rule-type {
   position: relative;
@@ -1350,15 +1322,15 @@ p {
 }
 
 @keyframes client-delete-strike {
-  0% { opacity: 1; transform: scaleX(0); transform-origin: left center; }
+  0% { opacity: 0.58; transform: scaleX(0); transform-origin: left center; }
-  42%, 52% { opacity: 1; transform: scaleX(1); transform-origin: left center; }
+  42%, 52% { opacity: 0.58; transform: scaleX(1); transform-origin: left center; }
-  53% { opacity: 1; transform: scaleX(1); transform-origin: right center; }
+  53% { opacity: 0.58; transform: scaleX(1); transform-origin: right center; }
   100% { opacity: 0; transform: scaleX(0); transform-origin: right center; }
 }
 
 @keyframes client-delete-content-dim {
-  0%, 42% { opacity: 0.58; filter: brightness(0.55) saturate(0.65) blur(0.7px); }
+  0%, 52% { opacity: 0.58; filter: brightness(0.55) saturate(0.65) blur(1.4px); }
-  62%, 100% { opacity: 0.28; filter: brightness(0.42) saturate(0.5) blur(1.5px); }
+  100% { opacity: 0; filter: brightness(0.42) saturate(0.5) blur(2.6px); }
 }
 
 @keyframes client-local-rules-notice {

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

@@ -21,19 +21,18 @@ test('rule editor add latency stays constant and dirty exits are guarded', () =>
   assert.match(component, /Перезапустить VPN/);
   assert.match(component, /client-deletable-row/);
   assert.match(component, /className="client-delete-strike"[\s\S]*onAnimationEnd/);
-  assert.match(component, /client-rule-delete-cross/);
+  assert.doesNotMatch(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]*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 24%, 100% 50%, 0 76%\)/);
-  assert.match(styles, /\.client-delete-strike::before[\s\S]*20% 8%[\s\S]*filter: blur\(3px\)/);
+  assert.doesNotMatch(styles, /\.client-delete-strike::before/);
   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, /53%[\s\S]*transform-origin: right center[\s\S]*100%[\s\S]*scaleX\(0\)/);
   assert.match(styles, /@keyframes client-local-rule-leave[\s\S]*translateX\(28px\)/);
-  assert.match(styles, /@keyframes client-delete-content-dim[\s\S]*brightness\(0\.55\)[\s\S]*blur\(0\.7px\)[\s\S]*brightness\(0\.42\)/);
+  assert.match(styles, /@keyframes client-delete-content-dim[\s\S]*opacity: 0\.58[\s\S]*blur\(1\.4px\)[\s\S]*opacity: 0/);
   assert.match(styles, /\.client-local-rule:has\(\.client-rule-type\.is-open\)[\s\S]*z-index: 5/);
 });