FIX - refine settings header and search icon

frontend/src/ui/SkyUiParity.contract.test.ts

@@ -169,6 +169,9 @@ describe('Sky UI Konsta 5.3 parity contracts', () => {
     expect(html).toContain('id="directory-search"')
     expect(html).toContain('sky-glass')
     expect(html).not.toContain('sky-glass--highlight')
+    expect(html).toContain('<svg class="sky-searchbar__icon"')
+    expect(html).toContain('fill-rule="evenodd"')
+    expect(html).not.toContain('<circle')
     expect(html).toContain('sky-searchbar__clear')
     expect(html).toContain('aria-label="Clear query"')
     expect(html).toContain('sky-searchbar__disable')

frontend/src/ui/controls.css

@@ -1465,26 +1465,13 @@ label.sky-list-item__row {
 }
 
 .sky-searchbar__icon {
-  width: 14px;
+  width: 18px;
-  height: 14px;
+  height: 18px;
-  position: relative;
+  display: block;
   flex: none;
-  border: 1.6px solid var(--sky-muted, rgba(0, 0, 0, 0.55));
+  color: var(--sky-muted, rgba(0, 0, 0, 0.55));
-  border-radius: 50%;
+  fill: currentColor;
-  opacity: 0.8;
+  opacity: 0.72;
-}
-
-.sky-searchbar__icon::after {
-  width: 6px;
-  height: 1.6px;
-  position: absolute;
-  right: -5px;
-  bottom: -2px;
-  content: '';
-  border-radius: 2px;
-  background: var(--sky-muted, rgba(0, 0, 0, 0.55));
-  transform: rotate(45deg);
-  transform-origin: left center;
 }
 
 .sky-searchbar__input {

frontend/src/ui/controls/SkySearchbar.vue

@@ -141,7 +141,13 @@ function disable(event: MouseEvent): void {
       <label v-if="label" class="sky-visually-hidden" :for="resolvedInputId">
         {{ label }}
       </label>
-      <span class="sky-searchbar__icon" aria-hidden="true" />
+      <svg class="sky-searchbar__icon" aria-hidden="true" viewBox="0 0 24 24">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M9.5 3a6.5 6.5 0 1 0 3.98 11.64l4.44 4.44a1 1 0 0 0 1.42-1.42l-4.44-4.44A6.5 6.5 0 0 0 9.5 3Zm0 2a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9Z"
+        />
+      </svg>
       <input
         :id="resolvedInputId"
         ref="input"

frontend/src/views/apps/SettingsApp.contract.test.ts

@@ -13,6 +13,10 @@ describe('SettingsApp Sky UI contract', () => {
     expect(source).not.toMatch(/<\/?k-[a-z]/)
     expect(source).toContain('<SkyAppPage')
     expect(source).toContain('<SkyNavbar')
+    expect(source).toContain('class="settings-navbar"')
+    expect(source).toContain(
+      '.settings-navbar.sky-navbar--large.sky-navbar--no-navigation',
+    )
     expect(source).toContain(
       ":variant=\"activeView === 'root' ? 'large' : 'compact'\"",
     )
@@ -66,7 +70,7 @@ describe('SettingsApp Sky UI contract', () => {
   })
 
   it('provides a non-destructive development preview for the reset progress screen', () => {
-    expect(source).toContain("import.meta.env.DEV")
+    expect(source).toContain('import.meta.env.DEV')
     expect(source).toContain("has('factoryResetPreview')")
     expect(source).toContain('factoryResetProgress.value = 46')
   })

frontend/src/views/apps/SettingsApp.vue

@@ -779,6 +779,7 @@ onBeforeUnmount(() => {
     :label="phone.t('Apps.settings.name')"
   >
     <SkyNavbar
+      class="settings-navbar"
       :title="
         activeView === 'root' ? phone.t('Apps.settings.name') : activeTitle
       "
@@ -1871,6 +1872,16 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
+:deep(.settings-navbar.sky-navbar--large) {
+  min-height: calc(
+    var(--sky-navbar-safe-area-top) + var(--sky-navbar-large-title-height)
+  );
+}
+
+:deep(.settings-navbar.sky-navbar--large.sky-navbar--no-navigation) {
+  padding-top: calc(var(--sky-navbar-safe-area-top) + var(--sky-space-3));
+}
+
 .settings-search {
   margin-bottom: var(--sky-space-4);
 }