[SETTINGS] Add icons to settings pane titles matching navigation rail

src/settings/__tests__/settings.browser.test.mjs

@@ -98,6 +98,83 @@ describe('Settings in Browser test suite', () => {
       expect(items).toContainEqual({label, icon});
     });
   });
+  describe('Pane Titles', () => {
+    describe('Services', () => {
+      test('title contains icon', () => {
+        // Services pane is shown by default
+        const title = document.querySelector('h2.title');
+        expect(title).not.toBeNull();
+        const iconElement = title.querySelector('.material3.icon');
+        expect(iconElement).not.toBeNull();
+        expect(iconElement.textContent).toBe('\ue5c3');
+      });
+
+      test('title contains text', () => {
+        // Services pane is shown by default
+        const title = document.querySelector('h2.title');
+        expect(title).not.toBeNull();
+        expect(title.textContent).toContain('Services');
+      });
+    });
+
+    describe('Spell check', () => {
+      let spellCheckButton;
+
+      beforeEach(async () => {
+        spellCheckButton = Array.from(document.querySelectorAll('.navigation-rail-button'))
+          .find(button => button.querySelector('.navigation-rail-button__label').textContent === 'Spell check');
+        fireEvent.click(spellCheckButton);
+        await waitFor(() => document.querySelector('h2.title'));
+      });
+
+      test('title contains icon', async () => {
+        await waitFor(() => {
+          const title = document.querySelector('h2.title');
+          expect(title).not.toBeNull();
+          const iconElement = title.querySelector('.material3.icon');
+          expect(iconElement).not.toBeNull();
+          expect(iconElement.textContent).toBe('\ue8ce');
+        });
+      });
+
+      test('title contains text', async () => {
+        await waitFor(() => {
+          const title = document.querySelector('h2.title');
+          expect(title).not.toBeNull();
+          expect(title.textContent).toContain('Spell check');
+        });
+      });
+    });
+
+    describe('Other', () => {
+      let otherButton;
+
+      beforeEach(async () => {
+        otherButton = Array.from(document.querySelectorAll('.navigation-rail-button'))
+          .find(button => button.querySelector('.navigation-rail-button__label').textContent === 'Other');
+        fireEvent.click(otherButton);
+        await waitFor(() => document.querySelector('h2.title'));
+      });
+
+      test('title contains icon', async () => {
+        await waitFor(() => {
+          const title = document.querySelector('h2.title');
+          expect(title).not.toBeNull();
+          const iconElement = title.querySelector('.material3.icon');
+          expect(iconElement).not.toBeNull();
+          expect(iconElement.textContent).toBe('\ue619');
+        });
+      });
+
+      test('title contains text', async () => {
+        await waitFor(() => {
+          const title = document.querySelector('h2.title');
+          expect(title).not.toBeNull();
+          expect(title.textContent).toContain('Other');
+        });
+      });
+    });
+  });
   describe('New tab Input field', () => {
     let $tabContainer;
     let $input;

src/settings/settings.other.browser.mjs

@@ -33,7 +33,7 @@ export const OtherPane = ({dispatch, state}) => {
   const settingsImport = () => ipcRenderer.invoke(APP_EVENTS.settingsImport);
   const settingsOpenFolder = () => ipcRenderer.invoke(APP_EVENTS.settingsOpenFolder);
   return isPaneActive(state)(OtherPane.id) && html`
-    <h2 class='title'>Other</h2>
+    <h2 class='title'><${Icon}>${Icon.more}</${Icon}>Other</h2>
     <${Card} className='settings__other'>
       <${SettingsRow}>
         <${Select}

src/settings/settings.services.browser.mjs

@@ -98,7 +98,7 @@ export const ServicesPane = ({dispatch, state}) => {
     }
   };
   return isPaneActive(state)(ServicesPane.id) && html`
-    <h2 class='title'>Services</h2>
+    <h2 class='title'><${Icon}>${Icon.apps}</${Icon}>Services</h2>
     <${Card} className='settings__services'>
       <div class='settings__new-tab'>
         <${TextField}

src/settings/settings.spell-check.browser.mjs

@@ -13,7 +13,7 @@
    See the License for the specific language governing permissions and
    limitations under the License.
  */
-import {Card, Checkbox, html} from '../components/index.mjs';
+import {Card, Checkbox, html, Icon} from '../components/index.mjs';
 import {
   dictionaries,
   dictionariesEnabled,
@@ -36,7 +36,7 @@ export const SpellCheckPane = ({dispatch, state}) => {
   const useNative = useNativeSpellChecker(state);
   const enabledDictionaries = dictionariesEnabled(state);
   return isPaneActive(state)(SpellCheckPane.id) && html`
-    <h2 class='title'>Spell check</h2>
+    <h2 class='title'><${Icon}>${Icon.spellcheck}</${Icon}>Spell check</h2>
     <${Card} className='settings__spell-check'>
       <${SettingsOption}
           className='settings__use-native-spell-checker'