feat: redesign settings screen (#1193)

Author: Robot-Inventor

src/css/browserAction.css

@@ -1,22 +1,31 @@
 :root {
+    font-size: 16px;
+
     --window-padding: 1.75rem;
+    --container-outside-text-padding-left: 0.25rem;
 
-    --theme-background-color: #fff;
+    --theme-background-color: #f2f3f6;
+    --theme-secondary-background-color: white;
+    --theme-secondary-background-color-variant: #fafafc;
     --theme-font-color: rgb(51, 51, 51);
     --theme-secondary-font-color: rgb(51, 51, 51, 0.7);
 
-    --md-sys-color-primary: rgb(29, 155, 240);
+    --md-sys-color-primary: rgb(73, 113, 214);
+    --md-sys-color-on-primary: var(--theme-secondary-background-color);
     --md-sys-color-on-surface-variant: #888;
     --md-sys-color-on-surface: #aaa;
 }
 
 @media (prefers-color-scheme: dark) {
     :root {
-        --theme-background-color: #121212;
-        --theme-font-color: rgb(255, 255, 255);
-        --theme-secondary-font-color: rgb(255, 255, 255, 0.7);
-
-        --md-sys-color-primary: rgb(29, 155, 240);
+        --theme-background-color: #0d0e14;
+        --theme-secondary-background-color: #1f2029;
+        --theme-secondary-background-color-variant: #2a2b37;
+        --theme-font-color: #ebedf2;
+        --theme-secondary-font-color: #a8b2c7;
+
+        --md-sys-color-primary: rgb(98, 125, 194);
+        --md-sys-color-on-primary: var(--theme-secondary-background-color);
         --md-sys-color-on-surface-variant: #aaa;
         --md-sys-color-on-surface: #888;
     }
@@ -29,16 +38,6 @@
     font-family: sans-serif;
 }
 
-html {
-    font-size: 16px;
-}
-
-html,
-body {
-    max-width: 100%;
-    max-height: 100%;
-}
-
 body {
     padding: var(--window-padding);
     width: max-content;
@@ -62,24 +61,39 @@ h1 {
     margin-left: 0.5rem;
     color: inherit;
     text-decoration: none;
+    color: var(--theme-secondary-font-color);
 }
 
 fieldset {
-    margin: 1rem 0;
+    margin: 1.5rem 0;
     border: none;
 }
 
-settings-separator:not(:first-of-type) {
-    margin-top: 1rem;
+settings-item {
+    margin: 0.15rem 0;
+}
+
+*:not(settings-item) + settings-item {
+    border-radius: 1rem 1rem 0.25rem 0.25rem;
+}
+
+settings-group-title {
+    padding-left: var(--container-outside-text-padding-left);
+}
+
+settings-group-title:not(:first-child) {
+    margin: 1.5rem 0 0.5rem 0;
 }
 
 settings-description {
-    margin: 1rem 0;
+    margin: 0.25rem 0 0.5rem 0;
+    padding-left: var(--container-outside-text-padding-left);
 }
 
 small {
     font-size: 0.8em;
     color: var(--theme-secondary-font-color);
+    padding-left: var(--container-outside-text-padding-left);
 }
 
 #footer-links {

src/ts/browserAction/loadSettings.ts

@@ -3,51 +3,65 @@ import "../components/settingsItem";
 // eslint-disable-next-line import-x/no-unassigned-import
 import "../components/settingsDescription";
 // eslint-disable-next-line import-x/no-unassigned-import
-import "../components/settingsSeparator";
+import "../components/settingsGroupTitle";
+import { SETTINGS_ITEMS, type SettingsData, type SettingsItemData } from "./settingsItems";
 import { i18n, runtime } from "webextension-polyfill";
 import { loadSettingsFromStorage, writeSettingsToStorage } from "../common/settings";
-import { SETTINGS_ITEMS } from "./settingsItems";
 import type { Settings } from "../../types/common/settings";
 // eslint-disable-next-line no-duplicate-imports
 import type { SettingsDescription } from "../components/settingsDescription";
 // eslint-disable-next-line no-duplicate-imports
-import type { SettingsItem } from "../components/settingsItem";
+import type { SettingsGroupTitle } from "../components/settingsGroupTitle";
 // eslint-disable-next-line no-duplicate-imports
-import type { SettingsSeparator } from "../components/settingsSeparator";
+import type { SettingsItem } from "../components/settingsItem";
 import { TRANSLATION_ATTRIBUTE } from "../common/constants";
 import { Translator } from "../common/translator";
 
 /**
- * Create new settings separator element.
+ * Create new settings group title element.
  * @param translationKey translation key
  * @returns created settings separator
  */
-const createSettingsSeparator = (translationKey: string): SettingsSeparator => {
-    const separator = document.createElement("settings-separator");
+const createGroupTitle = (translationKey: string): SettingsGroupTitle => {
+    const separator = document.createElement("settings-group-title");
     separator.setAttribute(TRANSLATION_ATTRIBUTE, translationKey);
 
     return separator;
 };
 
-const createSettingsDescription = (translationKey: string): SettingsDescription => {
+/**
+ * Create new settings description element.
+ * @param translationKey translation key
+ * @returns created settings description
+ */
+const createGroupDescription = (translationKey: string): SettingsDescription => {
     const description = document.createElement("settings-description");
     description.setAttribute(TRANSLATION_ATTRIBUTE, translationKey);
 
     return description;
 };
 
 /**
- * Create new settings item element.
- * @param settingsName settings name
- * @param translationKey translation key
- * @param checked settings status
- * @returns created settings item
+ * Create a new settings item element.
+ * @param settingsItemData Settings item data
+ * @param checked Settings status
+ * @param isFirstItem Whether this is the first item
+ * @param isLastItem Whether this is the last item
+ * @returns The created settings item
  */
-const createSettingsItem = (settingsName: string, translationKey: string, checked: boolean): SettingsItem => {
+const createSettingsItem = (
+    settingsItemData: SettingsItemData,
+    checked: boolean,
+    isFirstItem: boolean,
+    isLastItem: boolean
+    // eslint-disable-next-line max-params
+): SettingsItem => {
     const item = document.createElement("settings-item");
-    item.settingsName = settingsName;
-    item.setAttribute(TRANSLATION_ATTRIBUTE, translationKey);
+    item.settingsName = settingsItemData.settingsName;
+    item.setAttribute(TRANSLATION_ATTRIBUTE, settingsItemData.translationKey);
     item.checked = checked;
+    item.isFirstItem = isFirstItem;
+    item.isLastItem = isLastItem;
     item.addEventListener("change", () => {
         void writeSettingsToStorage({ [item.settingsName]: item.checked });
     });
@@ -64,28 +78,28 @@ const runTranslation = (): void => {
 };
 
 /**
- * Create settings item or separator element from data.
+ * Create settings items from group.
  * @param settings settings
- * @param data settings item data
- * @returns created element
+ * @param group settings item group
+ * @returns created elements
  */
-const createItemsFromData = (
-    settings: Settings,
-    data: (typeof SETTINGS_ITEMS)[number]
-): SettingsSeparator | SettingsDescription | SettingsItem => {
-    switch (data.type) {
-        case "separator":
-            return createSettingsSeparator(data.translationKey);
-
-        case "description":
-            return createSettingsDescription(data.translationKey);
-
-        case "checkbox":
-            return createSettingsItem(data.settingsName, data.translationKey, settings[data.settingsName]);
+const createItemsFromGroup = (settings: Settings, group: SettingsData[number]): DocumentFragment => {
+    const fragment = document.createDocumentFragment();
+    fragment.appendChild(createGroupTitle(group.groupName));
+    if (group.description) {
+        fragment.appendChild(createGroupDescription(group.description));
+    }
 
-        default:
-            throw new Error("Invalid type");
+    for (const [index, item] of group.items.entries()) {
+        // eslint-disable-next-line no-magic-numbers
+        const isFirstItem = index === 0;
+        // eslint-disable-next-line no-magic-numbers
+        const isLastItem = index === group.items.length - 1;
+        const settingsItem = createSettingsItem(item, settings[item.settingsName], isFirstItem, isLastItem);
+        fragment.appendChild(settingsItem);
     }
+
+    return fragment;
 };
 
 /**
@@ -98,8 +112,8 @@ const loadSettings = async (): Promise<void> => {
     if (!fieldset) throw new Error("Failed to get fieldset");
     const fragment = document.createDocumentFragment();
 
-    for (const data of SETTINGS_ITEMS) {
-        const element = createItemsFromData(settings, data);
+    for (const settingsGroup of SETTINGS_ITEMS) {
+        const element = createItemsFromGroup(settings, settingsGroup);
         fragment.appendChild(element);
     }
 

src/ts/browserAction/settingsItems.ts

@@ -1,87 +1,85 @@
 import type { Settings } from "../../types/common/settings";
 import type { TranslationKey } from "../../types/common/translator";
 
-interface SettingsItem {
+interface SettingsItemData {
     settingsName: keyof Settings;
     translationKey: TranslationKey;
     type: "checkbox";
 }
 
-interface SettingsSeparator {
-    translationKey: TranslationKey;
-    type: "separator";
-}
-
-interface SettingsDescription {
-    translationKey: TranslationKey;
-    type: "description";
+interface SettingsGroup {
+    groupName: TranslationKey;
+    type: "group";
+    description?: TranslationKey;
+    items: SettingsItemData[];
 }
 
-type SettingsItems = Array<SettingsItem | SettingsSeparator | SettingsDescription>;
+type SettingsData = SettingsGroup[];
 
 const SETTINGS_ITEMS = [
     {
-        translationKey: "settingsWhereToDisplayCheckResults",
-        type: "separator"
-    },
-    {
-        translationKey: "settingsAlwaysShowMessagesIfYourAccountShadowbanned",
-        type: "description"
-    },
-    {
-        settingsName: "showMessagesInUnproblematicTweets",
-        translationKey: "settingsShowMessagesInUnproblematicTweets",
-        type: "checkbox"
-    },
-    {
-        settingsName: "showMessagesInUnproblematicProfiles",
-        translationKey: "settingsShowMessagesInUnproblematicProfiles",
-        type: "checkbox"
-    },
-    {
-        settingsName: "enableForOtherUsersTweets",
-        translationKey: "settingsEnableForOtherUsersTweets",
-        type: "checkbox"
-    },
-    {
-        settingsName: "enableForOtherUsersProfiles",
-        translationKey: "settingsEnableForOtherUsersProfiles",
-        type: "checkbox"
-    },
-    {
-        translationKey: "settingsOtherSettings",
-        type: "separator"
-    },
-    {
-        settingsName: "enableCompactMode",
-        translationKey: "settingsEnableCompactMode",
-        type: "checkbox"
-    },
-    {
-        settingsName: "alwaysDetailedView",
-        translationKey: "settingsAlwaysDetailedView",
-        type: "checkbox"
-    },
-    {
-        settingsName: "showNotesInMessages",
-        translationKey: "settingsShowNotesInMessages",
-        type: "checkbox"
-    },
-    {
-        settingsName: "showTweetButton",
-        translationKey: "settingsShowTweetButton",
-        type: "checkbox"
-    },
-    {
-        settingsName: "enableOnXPro",
-        translationKey: "settingsEnableOnXPro",
-        type: "checkbox"
+        description: "settingsAlwaysShowMessagesIfYourAccountShadowbanned",
+        groupName: "settingsWhereToDisplayCheckResults",
+        items: [
+            {
+                settingsName: "showMessagesInUnproblematicTweets",
+                translationKey: "settingsShowMessagesInUnproblematicTweets",
+                type: "checkbox"
+            },
+            {
+                settingsName: "showMessagesInUnproblematicProfiles",
+                translationKey: "settingsShowMessagesInUnproblematicProfiles",
+                type: "checkbox"
+            },
+            {
+                settingsName: "enableForOtherUsersTweets",
+                translationKey: "settingsEnableForOtherUsersTweets",
+                type: "checkbox"
+            },
+            {
+                settingsName: "enableForOtherUsersProfiles",
+                translationKey: "settingsEnableForOtherUsersProfiles",
+                type: "checkbox"
+            }
+        ],
+        type: "group"
     },
     {
-        settingsName: "showReleaseNotes",
-        translationKey: "settingsShowReleaseNotes",
-        type: "checkbox"
+        groupName: "settingsOtherSettings",
+        items: [
+            {
+                settingsName: "enableCompactMode",
+                translationKey: "settingsEnableCompactMode",
+                type: "checkbox"
+            },
+            {
+                settingsName: "alwaysDetailedView",
+                translationKey: "settingsAlwaysDetailedView",
+                type: "checkbox"
+            },
+            {
+                settingsName: "showNotesInMessages",
+                translationKey: "settingsShowNotesInMessages",
+                type: "checkbox"
+            },
+            {
+                settingsName: "showTweetButton",
+                translationKey: "settingsShowTweetButton",
+                type: "checkbox"
+            },
+            {
+                settingsName: "enableOnXPro",
+                translationKey: "settingsEnableOnXPro",
+                type: "checkbox"
+            },
+            {
+                settingsName: "showReleaseNotes",
+                translationKey: "settingsShowReleaseNotes",
+                type: "checkbox"
+            }
+        ],
+        type: "group"
     }
-] as const satisfies SettingsItems;
+] as const satisfies SettingsData;
 
-export { SETTINGS_ITEMS };
+export { type SettingsData, type SettingsItemData, SETTINGS_ITEMS };