From 4488d10a7736f0f4183693df5c1e879d3a2d0089 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Luba=C5=84ski?= <dominik.lubanski@gmail.com>
Date: Thu, 26 Sep 2024 09:37:52 +0200
Subject: [PATCH] Minor fixes

---
 .../src/pages/onboarding/components/layout.js       | 13 ++++++++-----
 .../src/pages/onboarding/views/main.js              |  2 +-
 extension-manifest-v3/src/ui/components/card.js     |  2 +-
 extension-manifest-v3/src/ui/labels.js              |  1 +
 extension-manifest-v3/src/ui/localize.js            |  1 +
 extension-manifest-v3/src/ui/styles.css             |  2 +-
 6 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/extension-manifest-v3/src/pages/onboarding/components/layout.js b/extension-manifest-v3/src/pages/onboarding/components/layout.js
index b9fc1f5ab..24a4889a1 100644
--- a/extension-manifest-v3/src/pages/onboarding/components/layout.js
+++ b/extension-manifest-v3/src/pages/onboarding/components/layout.js
@@ -32,11 +32,6 @@ export default {
       </div>
     </template>
   `.css`
-    @media (prefers-color-scheme: dark) {
-      #bg { display: none; }
-      :host { background: var(--ui-color-gray-100); }
-    }
-
     #bg { transform: translateX(-50%); }
 
     #c-1 {
@@ -52,5 +47,13 @@ export default {
     header {
       color: var(--ui-color-primary-500);
     }
+
+    @media (prefers-color-scheme: dark) {
+      :host {
+        background: var(--ui-color-gray-100);
+      }
+
+      #bg { display: none; }
+    }
    `,
 };
diff --git a/extension-manifest-v3/src/pages/onboarding/views/main.js b/extension-manifest-v3/src/pages/onboarding/views/main.js
index 0f51c4e32..1536dcf54 100644
--- a/extension-manifest-v3/src/pages/onboarding/views/main.js
+++ b/extension-manifest-v3/src/pages/onboarding/views/main.js
@@ -44,7 +44,7 @@ export default define({
             </onboarding-feature>
           </div>
         </div>
-        <ui-text underline>
+        <ui-text type="body-s" underline>
           ${msg.html`
               Information about web trackers, add-on health and performance telemetry will be shared in accordance with our <a href="${
                 __PLATFORM__ === 'firefox'
diff --git a/extension-manifest-v3/src/ui/components/card.js b/extension-manifest-v3/src/ui/components/card.js
index 3f2e3e92b..d6b6e832a 100644
--- a/extension-manifest-v3/src/ui/components/card.js
+++ b/extension-manifest-v3/src/ui/components/card.js
@@ -18,7 +18,7 @@ export default {
     </template>
   `.css`
     :host {
-      background: var(--ui-card-bg, var(--ui-color-layout));
+      background: var(--ui-color-layout);
       border-radius: 16px;
       box-shadow: 15px 30px 80px rgba(0, 0, 0, 0.15);
     }
diff --git a/extension-manifest-v3/src/ui/labels.js b/extension-manifest-v3/src/ui/labels.js
index 95938e126..24f9fb5fb 100644
--- a/extension-manifest-v3/src/ui/labels.js
+++ b/extension-manifest-v3/src/ui/labels.js
@@ -10,6 +10,7 @@
  */
 import { msg } from 'hybrids';
 
+// Required to force loading localization module before using msg`...`
 import './localize.js';
 
 export const categories = {
diff --git a/extension-manifest-v3/src/ui/localize.js b/extension-manifest-v3/src/ui/localize.js
index 9cb008570..6595d7fda 100644
--- a/extension-manifest-v3/src/ui/localize.js
+++ b/extension-manifest-v3/src/ui/localize.js
@@ -10,6 +10,7 @@
  */
 import { localize } from 'hybrids';
 
+// Localize wrapper for chrome.i18n
 if (typeof chrome === 'object' && chrome.i18n) {
   localize(chrome.i18n.getMessage.bind(chrome.i18n), { format: 'chrome.i18n' });
 }
diff --git a/extension-manifest-v3/src/ui/styles.css b/extension-manifest-v3/src/ui/styles.css
index 20414208d..a66825502 100644
--- a/extension-manifest-v3/src/ui/styles.css
+++ b/extension-manifest-v3/src/ui/styles.css
@@ -30,7 +30,7 @@ html {
   --ui-color-gray-400: #a7a7aa;
   --ui-color-gray-300: #cdced0;
   --ui-color-gray-200: #e3e5e8;
-  --ui-color-gray-100: hsl(228, 20%, 96%);
+  --ui-color-gray-100: #f3f4f7;
 
   --ui-color-primary-700: #0077cc;
   --ui-color-primary-500: #00aef0;