Merge pull request #60 from wanhose/v6.2.0

6.2.0
2022-10-16 11:25:05 +02:00 · 2022-10-16 11:25:05 +02:00 · 00ee774109
commit 00ee774109
parent bf30f2b75b 7a68bc0a1d
14 changed files with 203 additions and 425 deletions
--- a/packages/browser-extension/src/_locales/de/messages.json
+++ b/packages/browser-extension/src/_locales/de/messages.json
@ -5,17 +5,14 @@
  "contextMenu_reportOption": {
    "message": "Webseite melden..."
  },
-  "contributeText": {
+  "popup_contributeOption": {
    "message": "Tragen Sie zu diesem Projekt bei"
  },
-  "helpText": {
+  "popup_helpOption": {
    "message": "Hilfe oder Probleme?"
  },
-  "negativeText": {
-    "message": "Ups! Wir entschuldigen uns für die Unannehmlichkeiten, bitte <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">kontaktieren Sie uns</a> <span aria-label=\"Grinsendes Gesicht mit Schweiß\" role=\"img\">😅</span>"
-  },
-  "positiveText": {
-    "message": "Dankeschön! Bitte bewerten Sie unsere Erweiterung <a id=\"store\" target=\"_blank\">hier</a> <span aria-label=\"Lächelndes Gesicht mit herzförmigen Augen\" role=\"img\">😍</span>"
+  "popup_rateOption": {
+    "message": "Diese Erweiterung bewerten"
  },
  "reportDialog_blankPageOption": {
    "message": "Seite ist leer"
@ -43,11 +40,5 @@
  },
  "reportDialog_submitText": {
    "message": "Bericht gesendet!"
-  },
-  "reviewText": {
-    "message": "Gefällt dir diese Erweiterung?"
-  },
-  "toggleText": {
-    "message": "Essensdialoge in "
  }
 }
--- a/packages/browser-extension/src/_locales/en/messages.json
+++ b/packages/browser-extension/src/_locales/en/messages.json
@ -5,17 +5,14 @@
  "contextMenu_reportOption": {
    "message": "Report site..."
  },
-  "contributeText": {
+  "popup_contributeOption": {
    "message": "Contribute to this project"
  },
-  "helpText": {
+  "popup_helpOption": {
    "message": "Help or issues?"
  },
-  "negativeText": {
-    "message": "Ooops! We apologize for the inconvenience, please <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">contact us</a> <span aria-label=\"Grinning face with sweat\" role=\"img\">😅</span>"
-  },
-  "positiveText": {
-    "message": "Thank you! Please rate our extension <a id=\"store\" target=\"_blank\">here</a> <span aria-label=\"Smiling face with heart-shaped eyes\" role=\"img\">😍</span>"
+  "popup_rateOption": {
+    "message": "Rate this extension"
  },
  "reportDialog_blankPageOption": {
    "message": "Page is blank"
@ -43,11 +40,5 @@
  },
  "reportDialog_submitText": {
    "message": "Report sent!"
-  },
-  "reviewText": {
-    "message": "Do you like this extension?"
-  },
-  "toggleText": {
-    "message": "Eating dialogs in "
  }
 }
--- a/packages/browser-extension/src/_locales/es/messages.json
+++ b/packages/browser-extension/src/_locales/es/messages.json
@ -5,17 +5,14 @@
  "contextMenu_reportOption": {
    "message": "Reportar sitio..."
  },
-  "contributeText": {
+  "popup_contributeOption": {
    "message": "Contribuye a este proyecto"
  },
-  "helpText": {
+  "popup_helpOption": {
    "message": "¿Ayuda o problemas?"
  },
-  "negativeText": {
-    "message": "¡Vaya! Sentimos lo ocurrido, por favor <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">contacta con nosotros</a> <span aria-label=\"Cara sonriente con sudor\" role=\"img\">😅</span>"
-  },
-  "positiveText": {
-    "message": "¡Gracias! Por favor valora la extensión <a id=\"store\" target=\"_blank\">aquí</a> <span aria-label=\"Cara sonriente con ojos en forma de corazón\" role=\"img\">😍</span>"
+  "popup_rateOption": {
+    "message": "Califica esta extensión"
  },
  "reportDialog_blankPageOption": {
    "message": "La página está en blanco"
@ -43,11 +40,5 @@
  },
  "reportDialog_submitText": {
    "message": "¡Reporte enviado!"
-  },
-  "reviewText": {
-    "message": "¿Te gusta esta extensión?"
-  },
-  "toggleText": {
-    "message": "Comiendo diálogos en "
  }
 }
--- a/packages/browser-extension/src/_locales/fr/messages.json
+++ b/packages/browser-extension/src/_locales/fr/messages.json
@ -5,17 +5,14 @@
  "contextMenu_reportOption": {
    "message": "Signaler le site..."
  },
-  "contributeText": {
+  "popup_contributeOption": {
    "message": "Contribuez à ce projet"
  },
-  "helpText": {
+  "popup_helpOption": {
    "message": "Aide ou problèmes?"
  },
-  "negativeText": {
-    "message": "Oups! Nous nous excusons pour la gêne occasionnée, veuillez <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">nous contacter</a> <span aria-label=\"Visage souriant de sueur\" role=\"img\">😅</span>"
-  },
-  "positiveText": {
-    "message": "Merci! Veuillez évaluer notre extension <a id=\"store\" target=\"_blank\">ici</a> <span aria-label=\"Visage souriant avec des yeux en forme de coeur\" role=\"img\">😍</span>"
+  "popup_rateOption": {
+    "message": "Évaluez cette extension"
  },
  "reportDialog_blankPageOption": {
    "message": "La page est vide"
@ -43,11 +40,5 @@
  },
  "reportDialog_submitText": {
    "message": "Rapport envoyé!"
-  },
-  "reviewText": {
-    "message": "Aimez-vous cette extension?"
-  },
-  "toggleText": {
-    "message": "Manger des dialogues dans "
  }
 }
--- a/packages/browser-extension/src/_locales/it/messages.json
+++ b/packages/browser-extension/src/_locales/it/messages.json
@ -5,17 +5,14 @@
  "contextMenu_reportOption": {
    "message": "Segnala sito..."
  },
-  "contributeText": {
+  "popup_contributeOption": {
    "message": "Contribuisci a questo progetto"
  },
-  "helpText": {
+  "popup_helpOption": {
    "message": "Aiuto o problemi?"
  },
-  "negativeText": {
-    "message": "Ops! Ci scusiamo per l'inconveniente, per favore <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">contattaci</a> <span aria-label=\"Faccina sorridente con il sudore\" role=\"img\">😅</span>"
-  },
-  "positiveText": {
-    "message": "Grazie! Valuta la nostra estensione <a id=\"store\" target=\"_blank\">qui</a> <span aria-label=\"Faccina sorridente con occhi a forma di cuore\" role=\"img\">😍</span>"
+  "popup_rateOption": {
+    "message": "Vota questa estensione"
  },
  "reportDialog_blankPageOption": {
    "message": "La pagina è vuota"
@ -43,11 +40,5 @@
  },
  "reportDialog_submitText": {
    "message": "Rapporto inviato!"
-  },
-  "reviewText": {
-    "message": "Ti piace questa estensione?"
-  },
-  "toggleText": {
-    "message": "Mangiare dialoghi in "
  }
 }
--- a/packages/browser-extension/src/_locales/pt_BR/messages.json
+++ b/packages/browser-extension/src/_locales/pt_BR/messages.json
@ -5,17 +5,14 @@
  "contextMenu_reportOption": {
    "message": "Reportar site..."
  },
-  "contributeText": {
+  "popup_contributeOption": {
    "message": "Contribua para este projeto"
  },
-  "helpText": {
+  "popup_helpOption": {
    "message": "Ajuda ou problemas?"
  },
-  "negativeText": {
-    "message": "Opa! Pedimos desculpas pelo transtorno, <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">entre em contato conosco</a> <span aria-label=\"Rosto sorridente com suor\" role=\"img\">😅</span>"
-  },
-  "positiveText": {
-    "message": "Obrigado! Avalie nossa extensão <a id=\"store\" target=\"_blank\">aqui</a> <span aria-label=\"Rosto sorridente com olhos em formato de coração\" role =\"img\">😍</span>"
+  "popup_rateOption": {
+    "message": "Avalie esta extensão"
  },
  "reportDialog_blankPageOption": {
    "message": "A página está em branco"
@ -43,11 +40,5 @@
  },
  "reportDialog_submitText": {
    "message": "Relatório enviado!"
-  },
-  "reviewText": {
-    "message": "Você gosta desta extensão?"
-  },
-  "toggleText": {
-    "message": "Comer diálogos em "
  }
 }
--- a/packages/browser-extension/src/_locales/pt_PT/messages.json
+++ b/packages/browser-extension/src/_locales/pt_PT/messages.json
@ -5,17 +5,14 @@
  "contextMenu_reportOption": {
    "message": "Reportar site..."
  },
-  "contributeText": {
+  "popup_contributeOption": {
    "message": "Contribua para este projeto"
  },
-  "helpText": {
+  "popup_helpOption": {
    "message": "Ajuda ou problemas?"
  },
-  "negativeText": {
-    "message": "Opa! Pedimos desculpas pelo transtorno, <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">entre em contato conosco</a> <span aria-label=\"Rosto sorridente com suor\" role=\"img\">😅</span>"
-  },
-  "positiveText": {
-    "message": "Obrigado! Avalie nossa extensão <a id=\"store\" target=\"_blank\">aqui</a> <span aria-label=\"Rosto sorridente com olhos em formato de coração\" role =\"img\">😍</span>"
+  "popup_rateOption": {
+    "message": "Avalie esta extensão"
  },
  "reportDialog_blankPageOption": {
    "message": "A página está em branco"
@ -43,11 +40,5 @@
  },
  "reportDialog_submitText": {
    "message": "Relatório enviado!"
-  },
-  "reviewText": {
-    "message": "Você gosta desta extensão?"
-  },
-  "toggleText": {
-    "message": "Comer diálogos em "
  }
 }
--- a/packages/browser-extension/src/_locales/ro/messages.json
+++ b/packages/browser-extension/src/_locales/ro/messages.json
@ -5,17 +5,14 @@
  "contextMenu_reportOption": {
    "message": "Raportați site-ul..."
  },
-  "contributeText": {
+  "popup_contributeOption": {
    "message": "Contribuie la acest proiect"
  },
-  "helpText": {
+  "popup_helpOption": {
    "message": "Ajutor sau probleme?"
  },
-  "negativeText": {
-    "message": "Hopa! Ne cerem scuze pentru inconvenient, vă rugăm să ne <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">contactați-ne</a> <span aria-label=\"Chipul rânjit de sudoare\" role=\"img\">😅</span>"
-  },
-  "positiveText": {
-    "message": "Mulțumesc! Vă rugăm să evaluați extensia noastră <a id=\"store\" target=\"_blank\">aici</a> <span aria-label=\"Față zâmbitoare cu ochi în formă de inimă\" role=\"img\">😍</span>"
+  "popup_rateOption": {
+    "message": "Evaluați această extensie"
  },
  "reportDialog_blankPageOption": {
    "message": "Pagina este goală"
@ -43,11 +40,5 @@
  },
  "reportDialog_submitText": {
    "message": "Raport trimis!"
-  },
-  "reviewText": {
-    "message": "Îți place această extensie?"
-  },
-  "toggleText": {
-    "message": "Mâncând dialoguri în "
  }
 }
--- a/packages/browser-extension/src/_locales/ru/messages.json
+++ b/packages/browser-extension/src/_locales/ru/messages.json
@ -5,17 +5,14 @@
  "contextMenu_reportOption": {
    "message": "Сообщить о сайте..."
  },
-  "contributeText": {
+  "popup_contributeOption": {
    "message": "Внести свой вклад в этот проект"
  },
-  "helpText": {
+  "popup_helpOption": {
    "message": "Помощь или проблемы?"
  },
-  "negativeText": {
-    "message": "Ой! Приносим извинения за неудобства, пожалуйста, <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">свяжитесь с нами</a> <span aria-label=\"Улыбающееся лицо от пота\" role=\"img\">😅</span>"
-  },
-  "positiveText": {
-    "message": "Спасибо! Пожалуйста, оцените наше расширение <a id=\"store\" target=\"_blank\">здесь</a> <span aria-label=\"Улыбающееся лицо с глазами-сердечками\" role=\"img\">😍</span>"
+  "popup_rateOption": {
+    "message": "Оцените это расширение"
  },
  "reportDialog_bodyText": {
    "message": "Выберите вариант ниже"
@ -43,11 +40,5 @@
  },
  "reportDialog_submitText": {
    "message": "Отчет отправлен!"
-  },
-  "reviewText": {
-    "message": "Вам нравится это расширение?"
-  },
-  "toggleText": {
-    "message": "Есть диалоги в "
  }
 }
--- a/packages/browser-extension/src/manifest.json
+++ b/packages/browser-extension/src/manifest.json
@ -1,7 +1,7 @@
 {
  "manifest_version": 3,
  "name": "Cookie Dialog Monster",
-  "version": "6.1.0",
+  "version": "6.2.0",
  "default_locale": "en",
  "description": "__MSG_appDesc__",
  "icons": {
--- a/packages/browser-extension/src/popup.html
+++ b/packages/browser-extension/src/popup.html
@ -12,99 +12,82 @@
      <h1 class="header-title">Cookie Dialog Monster</h1>
    </header>
    <main>
-      <label class="switch-label">
-        <span>
-          <span data-i18n="toggleText"></span>
-          <strong id="host"></strong>
-        </span>
-        <div class="switch">
-          <input checked="checked" id="power" type="checkbox" />
-          <span class="slider"></span>
-        </div>
-      </label>
-      <div>
-        <div class="rating">
-          <span data-i18n="reviewText"></span>
-          <div class="rating-actions">
-            <button aria-label="Unlike" id="unlike">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path
-                  d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"
-                />
-              </svg>
-            </button>
-            <button aria-label="Like" id="like">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path
-                  d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-        <p data-i18n="negativeText" hidden="true" id="negative"></p>
-        <p data-i18n="positiveText" hidden="true" id="positive"></p>
-      </div>
-      <div class="contribute">
-        <span data-i18n="contributeText"></span>
-        <a href="https://www.github.com/wanhose/cookie-dialog-monster" target="_blank">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <circle cx="18" cy="18" r="3" />
-            <circle cx="6" cy="6" r="3" />
-            <path d="M13 6h3a2 2 0 0 1 2 2v7" />
-            <line x1="6" y1="9" x2="6" y2="21" />
-          </svg>
-        </a>
-      </div>
-      <div class="help">
-        <span data-i18n="helpText"></span>
-        <a href="mailto:hello@wanhose.dev" target="_blank">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <line x1="22" y1="2" x2="11" y2="13" />
-            <polygon points="22 2 15 22 11 13 2 9 22 2" />
-          </svg>
-        </a>
-      </div>
+      <popup-button id="power-option" role="button" tabindex="0">
+        <svg
+          aria-hidden="true"
+          fill="none"
+          height="32"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="32"
+        >
+          <path d="M18.36 6.64a9 9 0 1 1-12.73 0" />
+          <line x1="12" y1="2" x2="12" y2="12" />
+        </svg>
+        <span id="host"></span>
+      </popup-button>
+      <popup-button data-href="mailto:hello@wanhose.dev" id="help-option" role="link" tabindex="0">
+        <svg
+          aria-hidden="true"
+          fill="none"
+          height="32"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="32"
+        >
+          <path
+            d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
+          />
+        </svg>
+        <span data-i18n="popup_helpOption"></span>
+      </popup-button>
+      <popup-button
+        data-href="https://www.github.com/wanhose/cookie-dialog-monster"
+        id="contribute-option"
+        role="link"
+        tabindex="0"
+      >
+        <svg
+          aria-hidden="true"
+          fill="none"
+          height="32"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="32"
+        >
+          <path
+            d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
+          />
+        </svg>
+        <span data-i18n="popup_contributeOption"></span>
+      </popup-button>
+      <popup-button data-href="#" id="rate-option" role="link" tabindex="0">
+        <svg
+          aria-hidden="true"
+          fill="none"
+          height="32"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="32"
+        >
+          <polygon
+            points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+          />
+        </svg>
+        <span data-i18n="popup_rateOption"></span>
+      </popup-button>
    </main>
    <footer></footer>
  </body>
--- a/packages/browser-extension/src/scripts/popup.js
+++ b/packages/browser-extension/src/scripts/popup.js
@ -24,7 +24,7 @@ const edgeUrl =
 * @type {string}
 */

-const firefoxUrl = 'https://addons.mozilla.org/es/firefox/addon/cookie-dialog-monster/';
+const firefoxUrl = 'https://addons.mozilla.org/firefox/addon/cookie-dialog-monster';

 /**
 * @description Current hostname
@ -77,57 +77,53 @@ const handleContentLoaded = async () => {
  const host = document.getElementById('host');
  host.innerText = hostname ?? 'unknown';

-  const like = document.getElementById('like');
-  like.addEventListener('click', handleRate);
+  const contribute = document.getElementById('contribute-option');
+  contribute?.addEventListener('click', handleLinkRedirect);

-  const power = document.getElementById('power');
-  power.addEventListener('change', handlePowerChange);
-  if (!state.enabled) power.removeAttribute('checked');
+  const help = document.getElementById('help-option');
+  help?.addEventListener('click', handleLinkRedirect);

-  const store = document.getElementById('store');
-  if (isEdge) store?.setAttribute('href', edgeUrl);
-  else if (isChromium) store?.setAttribute('href', chromeUrl);
-  else if (isFirefox) store?.setAttribute('href', firefoxUrl);
+  const power = document.getElementById('power-option');
+  power?.addEventListener('click', handlePowerToggle);
+  if (state.enabled) power?.setAttribute('data-value', 'on');
+  else power?.setAttribute('data-value', 'off');

-  const unlike = document.getElementById('unlike');
-  unlike.addEventListener('click', handleRate);
+  const rate = document.getElementById('rate-option');
+  rate?.addEventListener('click', handleLinkRedirect);
+  if (isEdge) rate?.setAttribute('data-href', edgeUrl);
+  else if (isChromium) rate?.setAttribute('data-href', chromeUrl);
+  else if (isFirefox) rate?.setAttribute('data-href', firefoxUrl);

  translate();
 };

 /**
- * @description Disables or enables extension on current page
- */
-
-const handlePowerChange = async () => {
-  state = { enabled: !state.enabled };
-  dispatch({ hostname, state, type: 'UPDATE_STATE' });
-  await chrome.tabs.reload({ bypassCache: true });
-};
-
-/**
- * @description Shows negative or positive messages
+ * @async
+ * @description Opens a new tab
 * @param {MouseEvent} event
 */

-const handleRate = (event) => {
-  const negative = document.getElementById('negative');
-  const positive = document.getElementById('positive');
+const handleLinkRedirect = async (event) => {
+  const { href } = event.currentTarget.dataset;

-  switch (event.currentTarget.id) {
-    case 'unlike':
-      positive.setAttribute('hidden', 'true');
-      negative.removeAttribute('hidden');
-      break;
-    case 'like':
-      negative.setAttribute('hidden', 'true');
-      positive.removeAttribute('hidden');
-      break;
-    default:
-      break;
+  if (href) {
+    await chrome.tabs.create({ url: href });
  }
 };

+/**
+ * @description Disables or enables extension on current page
+ * @param {MouseEvent} event
+ */
+
+const handlePowerToggle = async (event) => {
+  state = { enabled: !state.enabled };
+  dispatch({ hostname, state, type: 'UPDATE_STATE' });
+  if (state.enabled) event.currentTarget.setAttribute('data-value', 'on');
+  else event.currentTarget.setAttribute('data-value', 'off');
+  await chrome.tabs.reload({ bypassCache: true });
+};
+
 /**
 * @description Applies translations to tags with i18n data attribute
 */
--- a/packages/browser-extension/src/styles/popup.css
+++ b/packages/browser-extension/src/styles/popup.css
@ -4,39 +4,27 @@
  --color-secondary: #34495e;
  --color-success: #5cb85c;
  --color-tertiary: #6b7280;
+  --color-warning: #ffdf00;
  --color-white: #ffffff;
 }

-a {
-  color: inherit;
-  display: inline-block;
-  font-weight: bold;
-  outline: none;
-  text-decoration: none;
-}
-
-a:focus,
-a:hover {
-  text-decoration: underline;
-}
-
 body {
+  box-sizing: border-box;
  color: var(--color-tertiary);
  display: flex;
  flex-direction: column;
  font-family: Inter, Arial, Helvetica, sans-serif;
-  height: 24rem;
-  width: 20rem;
+  width: 320px;
 }

-button {
-  outline: none;
+body * {
+  box-sizing: border-box;
 }

 footer {
  background-color: var(--color-secondary);
-  font-size: 0.75rem;
-  height: 0.25rem;
+  font-size: 12px;
+  height: 4px;
  margin-top: auto;
  text-align: center;
 }
@ -46,181 +34,72 @@ header {
  background-color: var(--color-secondary);
  color: var(--color-white);
  display: flex;
-  font-size: 1rem;
-  height: 3rem;
+  font-size: 16px !important;
+  height: 48px;
  justify-content: space-between;
-  padding: 0 1rem;
-}
-
-hr {
-  margin-bottom: 1rem;
-}
-
-input:checked + .slider {
-  background-color: var(--color-secondary);
-}
-
-input:focus + .slider {
-  box-shadow: 0 0 0.0625rem var(--color-secondary);
-}
-
-input:checked + .slider:before {
-  transform: translateX(1.25rem);
+  padding: 0 16px;
 }

 main {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-  padding: 1rem;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  padding: 16px;
 }

-span {
-  display: inline-block;
+popup-button {
+  border-radius: 4px;
+  cursor: pointer;
+  display: grid;
+  font-size: 14px;
+  gap: 16px;
+  grid-template-rows: repeat(2, 1fr);
+  height: 136px;
+  justify-items: center;
+  outline: none;
+  padding: 8px;
+  text-align: center;
+  transition: 0.4s;
+  width: 100%;
+  word-break: break-word;
+}
+
+popup-button:focus,
+popup-button:hover {
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+}
+
+popup-button > span {
+  align-self: flex-start;
+}
+
+popup-button > svg {
+  align-self: flex-end;
 }

 strong {
  font-weight: bold;
 }

-.header-actions {
-  align-items: center;
-  display: flex;
-}
-
-.header-actions > button {
-  border-radius: 0.125rem;
+#power-option {
  color: var(--color-white);
-  padding: 0.25rem;
-  transition: 0.4s;
-}
-
-.header-actions > button:focus,
-.header-actions > button:hover {
-  background-color: var(--color-white);
-  color: var(--color-secondary);
-}
-
-.header-title {
-  font-size: 1rem;
-}
-
-.contribute,
-.help {
-  align-items: center;
-  display: flex;
-  font-size: 0.875rem;
-  justify-content: space-between;
-}
-
-.contribute > a,
-.help > a {
-  color: var(--color-secondary);
-  padding: 0.25rem;
-  transition: 0.4s;
-}
-
-.contribute > a:focus,
-.contribute > a:hover,
-.help > a:focus,
-.help > a:hover {
-  background-color: var(--color-secondary);
-  border-radius: 0.125rem;
-  color: var(--color-white);
-  outline: none;
-}
-
-.rating {
-  align-items: center;
-  display: flex;
-  font-size: 0.875rem;
-  justify-content: space-between;
-}
-
-.rating-actions {
-  align-items: center;
-  display: flex;
-}
-
-.rating-actions > button {
-  margin-left: 1rem;
-}
-
-.switch {
-  display: inline-block;
-  flex-shrink: 0;
-  height: 1.25rem;
-  margin-left: 0.75rem;
-  position: relative;
-  width: 2.5rem;
-}
-
-.switch input {
-  height: 0;
-  opacity: 0;
-  width: 0;
-}
-
-.switch-label {
-  cursor: pointer;
-  display: flex;
-  font-size: 0.875rem;
-  justify-content: space-between;
-}
-
-.switch-label > span {
-  line-height: 1.25rem;
  word-break: break-all;
 }

-.slider {
-  background-color: var(--color-tertiary);
-  bottom: 0;
-  cursor: pointer;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
+#power-option[data-value='off'] {
+  background-color: var(--color-error);
+}
+
+#power-option[data-value='on'] {
+  background-color: var(--color-success);
+}
+
+#rate-option > svg {
  transition: 0.4s;
 }

-.slider:before {
-  background-color: var(--color-white);
-  bottom: 0.25rem;
-  content: '';
-  height: 0.75rem;
-  left: 0.25rem;
-  position: absolute;
-  transition: 0.4s;
-  width: 0.75rem;
-}
-
-#like,
-#unlike {
-  color: var(--color-secondary);
-  cursor: pointer;
-  padding: 0.25rem;
-  transition: 0.4s;
-}
-
-#like:focus,
-#like:hover {
-  color: var(--color-success);
-}
-
-#negative,
-#positive {
-  background-color: var(--color-secondary);
-  border-radius: 0.125rem;
-  color: var(--color-white);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  margin-bottom: 0;
-  margin-top: 1rem;
-  padding: 1rem;
-}
-
-#unlike:focus,
-#unlike:hover {
-  color: var(--color-error);
+#rate-option:focus > svg,
+#rate-option:hover > svg {
+  color: var(--color-warning);
+  fill: var(--color-warning);
 }
--- a/packages/browser-extension/src/styles/reset.css
+++ b/packages/browser-extension/src/styles/reset.css
@ -29,6 +29,7 @@ h6,
 th,
 td,
 caption {
+  font-size: inherit;
  font-weight: normal;
  margin: 0;
 }