Fix Spacing nits on website settings screen (#59)

| Before | After | |--------|-------| | ![Screenshot 2024-09-10 at 14 40 18](https://github.com/user-attachments/assets/90a1457d-e47a-46ee-80ff-dbfcce3ff26b) | ![Screenshot 2024-09-10 at 14 40 07](https://github.com/user-attachments/assets/4cc9c2c6-758b-4c25-b68d-0f3796c46ed4) |
mozilla-extensions · Sep 10, 2024 · 1ab707f · 1ab707f
1 parent 43853ea
commit 1ab707f
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 21 deletions.
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
@@ -86,11 +86,11 @@
     "description": "Table heading for the column listing websites."
   },
   "tableHeadingVpnStatus": {
-    "message": "VPN Status",
+    "message": "VPN status",
     "description": "Table heading for the column indicating whether the VPN is on or off for a website."
   },
   "tableHeadingLocation": {
-    "message": "Location",
+    "message": "VPN location",
     "description": "Table heading for the column showing the location of the website."
   },
   "headlineNoWebsitePreferences": {

diff --git a/src/assets/logos/logo-wide.svg b/src/assets/logos/logo-wide.svg
diff --git a/src/ui/settingsPage/settingsPage.js b/src/ui/settingsPage/settingsPage.js
@@ -21,6 +21,7 @@ import { settingTypo } from "./styles.js";
 export class SettingsPage extends LitElement {
   static properties = {
     contexts: { type: Object },
+    serverList: { type: Object },
   };
   constructor() {
     super();
@@ -46,24 +47,11 @@ export class SettingsPage extends LitElement {
     // Let's render the view!
     return html`
       <header>
-        <picture class="icon" alt="${tr("productName")}">
-          <!-- User prefers light mode: -->
-          <source
-            srcset="../../assets/logos/logo-dark.svg"
-            media="(prefers-color-scheme: light)"
-          />
-          <!-- User prefers dark mode: -->
-          <source
-            srcset="../../assets/logos/logo-light.svg"
-            media="(prefers-color-scheme: dark)"
-          />
-          <!-- User has no color preference: -->
-          <img
-            src="../../assets/logos/logo-dark.svg"
-            alt="${tr("productName")}"
-          />
-        </picture>
-        <h1>${tr("productName")}</h1>
+        <img
+          class="invert_darkmode"
+          src="/assets/logos/logo-wide.svg"
+          alt="${tr("productName")}"
+        />
       </header>
       <main>
         <h2>${tr("headlineWebsitePreferences")}</h2>
@@ -130,7 +118,7 @@ export class SettingsPage extends LitElement {
       padding: 20px 30px;
       border-bottom: 1px solid var(--border-color);
       width: 100%;
-      margin-bottom: 16px;
+      margin-bottom: 32px;
     }
     main {
       width: calc(min(70%, 920px));
@@ -161,6 +149,19 @@ export class SettingsPage extends LitElement {
       flex-direction: column;
       justify-content: center;
       align-items: center;
+      max-width: 640px;
+    }
+    @media (prefers-color-scheme: dark) {
+      .invert_darkmode {
+        filter: invert();
+      }
+    }
+
+    h3 {
+      margin-top: 32px;
+    }
+    .emptyState p {
+      opacity: 0.8;
     }
   `;
 }