Merge pull request #59 from wanhose/v6.1.0

6.1.0
2022-10-13 16:34:12 +02:00 · 2022-10-13 16:34:12 +02:00 · 6779dcd8e4
commit 6779dcd8e4
parent 7a5d84bbc5 ff8a0115d2
21 changed files with 715 additions and 312 deletions
--- a/packages/api/src/routes/v2/report.ts
+++ b/packages/api/src/routes/v2/report.ts
@ -2,7 +2,9 @@ import { FastifyInstance, RouteShorthandOptions } from 'fastify';
 import { sendMail } from 'services/mailing';

 type PostReportBody = {
+  reason?: string;
  url: string;
+  userAgent?: string;
  version: string;
 };

@ -13,9 +15,15 @@ export default (server: FastifyInstance, options: RouteShorthandOptions, done: (
      schema: {
        body: {
          properties: {
+            reason: {
+              type: 'string',
+            },
            url: {
              type: 'string',
            },
+            userAgent: {
+              type: 'string',
+            },
            version: {
              type: 'string',
            },
@ -26,8 +34,8 @@ export default (server: FastifyInstance, options: RouteShorthandOptions, done: (
      },
    },
    async (request, reply) => {
-      const { url, version } = request.body;
-      const html = `<b>Site:</b> ${url}<br/><b>Version:</b> ${version}`;
+      const { reason = 'Unknown', url, userAgent = 'Unknown', version } = request.body;
+      const html = `<b>Site:</b> ${url}<br/><b>Reason: ${reason}<br/></b><b>User-Agent:</b> ${userAgent}<br/><b>Version:</b> ${version}`;
      const subject = 'Cookie Dialog Monster Report';
      const to = 'hello@wanhose.dev';

--- a/packages/browser-extension/src/_locales/de/messages.json
+++ b/packages/browser-extension/src/_locales/de/messages.json
@ -1,38 +1,53 @@
 {
  "appDesc": {
-    "description": "Hat jemand Dialoge zur Cookie-Zustimmung gesagt? 😋",
    "message": "Hat jemand Dialoge zur Cookie-Zustimmung gesagt? 😋"
  },
-  "contextMenuText": {
-    "description": "Webseite melden...",
+  "contextMenu_reportOption": {
    "message": "Webseite melden..."
  },
  "contributeText": {
-    "description": "Tragen Sie zu diesem Projekt bei",
    "message": "Tragen Sie zu diesem Projekt bei"
  },
  "helpText": {
-    "description": "Hilfe oder Probleme?",
    "message": "Hilfe oder Probleme?"
  },
  "negativeText": {
-    "description": "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>",
    "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": {
-    "description": "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>",
    "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>"
  },
-  "reportText": {
-    "description": "Bericht gesendet!",
+  "reportDialog_blankPageOption": {
+    "message": "Seite ist leer"
+  },
+  "reportDialog_bodyText": {
+    "message": "Bitte wählen Sie unten eine Option aus"
+  },
+  "reportDialog_cannotClickOption": {
+    "message": "Kann nicht klicken"
+  },
+  "reportDialog_laggyPageOption": {
+    "message": "Seite ist verzögert"
+  },
+  "reportDialog_pageNotRespondingOption": {
+    "message": "Seite antwortet nicht"
+  },
+  "reportDialog_pageVisualGlitchOption": {
+    "message": "Seite enthält visuelle Störungen"
+  },
+  "reportDialog_popupShowUpOption": {
+    "message": "Popup ist aufgetaucht"
+  },
+  "reportDialog_submitExtraText": {
+    "message": "Wir empfehlen Ihnen dringend, die Erweiterung auf dieser Website zu deaktivieren, bis wir das Problem behoben haben."
+  },
+  "reportDialog_submitText": {
    "message": "Bericht gesendet!"
  },
  "reviewText": {
-    "description": "Gefällt dir diese Erweiterung?",
    "message": "Gefällt dir diese Erweiterung?"
  },
  "toggleText": {
-    "description": "Essensdialoge in ",
    "message": "Essensdialoge in "
  }
 }
--- a/packages/browser-extension/src/_locales/en/messages.json
+++ b/packages/browser-extension/src/_locales/en/messages.json
@ -1,38 +1,53 @@
 {
  "appDesc": {
-    "description": "Did someone say cookie consent dialogs? 😋",
    "message": "Did someone say cookie consent dialogs? 😋"
  },
-  "contextMenuText": {
-    "description": "Report site...",
+  "contextMenu_reportOption": {
    "message": "Report site..."
  },
  "contributeText": {
-    "description": "Contribute to this project",
    "message": "Contribute to this project"
  },
  "helpText": {
-    "description": "Help or issues?",
    "message": "Help or issues?"
  },
  "negativeText": {
-    "description": "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>",
    "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": {
-    "description": "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>",
    "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>"
  },
-  "reportText": {
-    "description": "Report sent!",
+  "reportDialog_blankPageOption": {
+    "message": "Page is blank"
+  },
+  "reportDialog_bodyText": {
+    "message": "Please select an option below"
+  },
+  "reportDialog_cannotClickOption": {
+    "message": "Cannot click"
+  },
+  "reportDialog_laggyPageOption": {
+    "message": "Page is laggy"
+  },
+  "reportDialog_pageNotRespondingOption": {
+    "message": "Page is not responding"
+  },
+  "reportDialog_pageVisualGlitchOption": {
+    "message": "Page contains visual glitches"
+  },
+  "reportDialog_popupShowUpOption": {
+    "message": "Popup showed up"
+  },
+  "reportDialog_submitExtraText": {
+    "message": "We strongly recommend you to turn off the extension in this site until we fix the issue"
+  },
+  "reportDialog_submitText": {
    "message": "Report sent!"
  },
  "reviewText": {
-    "description": "Do you like this extension?",
    "message": "Do you like this extension?"
  },
  "toggleText": {
-    "description": "Eating dialogs in ",
    "message": "Eating dialogs in "
  }
 }
--- a/packages/browser-extension/src/_locales/es/messages.json
+++ b/packages/browser-extension/src/_locales/es/messages.json
@ -1,38 +1,53 @@
 {
  "appDesc": {
-    "description": "¿Alguien dijo diálogos de consentimiento de cookies? 😋",
    "message": "¿Alguien dijo diálogos de consentimiento de cookies? 😋"
  },
-  "contextMenuText": {
-    "description": "Reportar sitio...",
+  "contextMenu_reportOption": {
    "message": "Reportar sitio..."
  },
  "contributeText": {
-    "description": "Contribuye a este proyecto",
    "message": "Contribuye a este proyecto"
  },
  "helpText": {
-    "description": "¿Ayuda o problemas?",
    "message": "¿Ayuda o problemas?"
  },
  "negativeText": {
-    "description": "¡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>",
    "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": {
-    "description": "¡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>",
    "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>"
  },
-  "reportText": {
-    "description": "¡Reporte enviado!",
+  "reportDialog_blankPageOption": {
+    "message": "La página está en blanco"
+  },
+  "reportDialog_bodyText": {
+    "message": "Por favor selecciona una opción"
+  },
+  "reportDialog_cannotClickOption": {
+    "message": "No se puede hacer clic"
+  },
+  "reportDialog_laggyPageOption": {
+    "message": "La página tarda mucho en cargar"
+  },
+  "reportDialog_pageNotRespondingOption": {
+    "message": "La página no responde"
+  },
+  "reportDialog_pageVisualGlitchOption": {
+    "message": "La página está mal visualmente"
+  },
+  "reportDialog_popupShowUpOption": {
+    "message": "Ha aparecido un diálogo"
+  },
+  "reportDialog_submitExtraText": {
+    "message": "Le recomendamos encarecidamente que desactive la extensión en este sitio hasta que solucionemos el problema"
+  },
+  "reportDialog_submitText": {
    "message": "¡Reporte enviado!"
  },
  "reviewText": {
-    "description": "¿Te gusta esta extensión?",
    "message": "¿Te gusta esta extensión?"
  },
  "toggleText": {
-    "description": "Comiendo diálogos en ",
    "message": "Comiendo diálogos en "
  }
 }
--- a/packages/browser-extension/src/_locales/fr/messages.json
+++ b/packages/browser-extension/src/_locales/fr/messages.json
@ -1,38 +1,53 @@
 {
  "appDesc": {
-    "description": "Quelqu'un a-t-il dit boîtes de dialogue de consentement aux cookies? 😋",
    "message": "Quelqu'un a-t-il dit boîtes de dialogue de consentement aux cookies? 😋"
  },
-  "contextMenuText": {
-    "description": "Signaler le site...",
+  "contextMenu_reportOption": {
    "message": "Signaler le site..."
  },
  "contributeText": {
-    "description": "Contribuez à ce projet",
    "message": "Contribuez à ce projet"
  },
  "helpText": {
-    "description": "Aide ou problèmes?",
    "message": "Aide ou problèmes?"
  },
  "negativeText": {
-    "description": "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>",
    "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": {
-    "description": "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>",
    "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>"
  },
-  "reportText": {
-    "description": "Rapport envoyé!",
+  "reportDialog_blankPageOption": {
+    "message": "La page est vide"
+  },
+  "reportDialog_bodyText": {
+    "message": "Veuillez sélectionner une option ci-dessous"
+  },
+  "reportDialog_cannotClickOption": {
+    "message": "Impossible de cliquer"
+  },
+  "reportDialog_laggyPageOption": {
+    "message": "La page est lente"
+  },
+  "reportDialog_pageNotRespondingOption": {
+    "message": "La page ne répond pas"
+  },
+  "reportDialog_pageVisualGlitchOption": {
+    "message": "La page contient des problèmes visuels"
+  },
+  "reportDialog_popupShowUpOption": {
+    "message": "La fenêtre contextuelle s'est affichée"
+  },
+  "reportDialog_submitExtraText": {
+    "message": "Nous vous recommandons vivement de désactiver l'extension sur ce site jusqu'à ce que nous résolvions le problème"
+  },
+  "reportDialog_submitText": {
    "message": "Rapport envoyé!"
  },
  "reviewText": {
-    "description": "Aimez-vous cette extension?",
    "message": "Aimez-vous cette extension?"
  },
  "toggleText": {
-    "description": "Manger des dialogues dans ",
    "message": "Manger des dialogues dans "
  }
 }
--- a/packages/browser-extension/src/_locales/it/messages.json
+++ b/packages/browser-extension/src/_locales/it/messages.json
@ -1,38 +1,53 @@
 {
  "appDesc": {
-    "description": "Qualcuno ha detto finestre di dialogo per il consenso ai cookie? 😋",
    "message": "Qualcuno ha detto finestre di dialogo per il consenso ai cookie? 😋"
  },
-  "contextMenuText": {
-    "description": "Segnala sito...",
+  "contextMenu_reportOption": {
    "message": "Segnala sito..."
  },
  "contributeText": {
-    "description": "Contribuisci a questo progetto",
    "message": "Contribuisci a questo progetto"
  },
  "helpText": {
-    "description": "Aiuto o problemi?",
    "message": "Aiuto o problemi?"
  },
  "negativeText": {
-    "description": "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>",
    "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": {
-    "description": "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>",
    "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>"
  },
-  "reportText": {
-    "description": "Rapporto inviato!",
+  "reportDialog_blankPageOption": {
+    "message": "La pagina è vuota"
+  },
+  "reportDialog_bodyText": {
+    "message": "Seleziona un'opzione qui sotto"
+  },
+  "reportDialog_cannotClickOption": {
+    "message": "Não é possível clicar"
+  },
+  "reportDialog_laggyPageOption": {
+    "message": "La pagina è in ritardo"
+  },
+  "reportDialog_pageNotRespondingOption": {
+    "message": "La pagina non risponde"
+  },
+  "reportDialog_pageVisualGlitchOption": {
+    "message": "La pagina contiene difetti visivi"
+  },
+  "reportDialog_popupShowUpOption": {
+    "message": "È apparso il popup"
+  },
+  "reportDialog_submitExtraText": {
+    "messaggio": "Ti consigliamo vivamente di disattivare l'estensione in questo sito finché non risolviamo il problema"
+  },
+  "reportDialog_submitText": {
    "message": "Rapporto inviato!"
  },
  "reviewText": {
-    "description": "Ti piace questa estensione?",
    "message": "Ti piace questa estensione?"
  },
  "toggleText": {
-    "description": "Mangiare dialoghi in ",
    "message": "Mangiare dialoghi in "
  }
 }
--- a/packages/browser-extension/src/_locales/pt_BR/messages.json
+++ b/packages/browser-extension/src/_locales/pt_BR/messages.json
@ -1,38 +1,53 @@
 {
  "appDesc": {
-    "description": "Alguém disse diálogos de consentimento de cookies? 😋",
    "message": "Alguém disse diálogos de consentimento de cookies? 😋"
  },
-  "contextMenuText": {
-    "description": "Reportar site...",
+  "contextMenu_reportOption": {
    "message": "Reportar site..."
  },
  "contributeText": {
-    "description": "Contribua para este projeto",
    "message": "Contribua para este projeto"
  },
  "helpText": {
-    "description": "Ajuda ou problemas?",
    "message": "Ajuda ou problemas?"
  },
  "negativeText": {
-    "description": "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>",
    "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": {
-    "description": "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>",
    "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>"
  },
-  "reportText": {
-    "description": "Relatório enviado!",
+  "reportDialog_blankPageOption": {
+    "message": "A página está em branco"
+  },
+  "reportDialog_bodyText": {
+    "message": "Por favor selecione uma opção abaixo"
+  },
+  "reportDialog_cannotClickOption": {
+    "message": "Não é possível clicar"
+  },
+  "reportDialog_laggyPageOption": {
+    "message": "A página está com lag"
+  },
+  "reportDialog_pageNotRespondingOption": {
+    "message": "A página não está respondendo"
+  },
+  "reportDialog_pageVisualGlitchOption": {
+    "message": "A página contém falhas visuais"
+  },
+  "reportDialog_popupShowUpOption": {
+    "message": "Apareceu um popup"
+  },
+  "reportDialog_submitExtraText": {
+    "message": "Recomendamos fortemente que você desative a extensão neste site até corrigirmos o problema"
+  },
+  "reportDialog_submitText": {
    "message": "Relatório enviado!"
  },
  "reviewText": {
-    "description": "Você gosta desta extensão?",
    "message": "Você gosta desta extensão?"
  },
  "toggleText": {
-    "description": "Comer diálogos em ",
    "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
@ -1,38 +1,53 @@
 {
  "appDesc": {
-    "description": "Alguém disse diálogos de consentimento de cookies? 😋",
    "message": "Alguém disse diálogos de consentimento de cookies? 😋"
  },
-  "contextMenuText": {
-    "description": "Reportar site...",
+  "contextMenu_reportOption": {
    "message": "Reportar site..."
  },
  "contributeText": {
-    "description": "Contribua para este projeto",
    "message": "Contribua para este projeto"
  },
  "helpText": {
-    "description": "Ajuda ou problemas?",
    "message": "Ajuda ou problemas?"
  },
  "negativeText": {
-    "description": "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>",
    "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": {
-    "description": "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>",
    "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>"
  },
-  "reportText": {
-    "description": "Relatório enviado!",
+  "reportDialog_blankPageOption": {
+    "message": "A página está em branco"
+  },
+  "reportDialog_bodyText": {
+    "message": "Por favor selecione uma opção abaixo"
+  },
+  "reportDialog_cannotClickOption": {
+    "message": "Não é possível clicar"
+  },
+  "reportDialog_laggyPageOption": {
+    "message": "A página está com lag"
+  },
+  "reportDialog_pageNotRespondingOption": {
+    "message": "A página não está respondendo"
+  },
+  "reportDialog_pageVisualGlitchOption": {
+    "message": "A página contém falhas visuais"
+  },
+  "reportDialog_popupShowUpOption": {
+    "message": "Apareceu um popup"
+  },
+  "reportDialog_submitExtraText": {
+    "message": "Recomendamos fortemente que você desative a extensão neste site até corrigirmos o problema"
+  },
+  "reportDialog_submitText": {
    "message": "Relatório enviado!"
  },
  "reviewText": {
-    "description": "Você gosta desta extensão?",
    "message": "Você gosta desta extensão?"
  },
  "toggleText": {
-    "description": "Comer diálogos em ",
    "message": "Comer diálogos em "
  }
 }
--- a/packages/browser-extension/src/_locales/ro/messages.json
+++ b/packages/browser-extension/src/_locales/ro/messages.json
@ -1,38 +1,53 @@
 {
  "appDesc": {
-    "description": "A spus cineva dialoguri de consimțământ pentru cookie? 😋",
    "message": "A spus cineva dialoguri de consimțământ pentru cookie? 😋"
  },
-  "contextMenuText": {
-    "description": "Raportați site-ul...",
+  "contextMenu_reportOption": {
    "message": "Raportați site-ul..."
  },
  "contributeText": {
-    "description": "Contribuie la acest proiect",
    "message": "Contribuie la acest proiect"
  },
  "helpText": {
-    "description": "Ajutor sau probleme?",
    "message": "Ajutor sau probleme?"
  },
  "negativeText": {
-    "description": "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>",
    "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": {
-    "description": "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>",
    "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>"
  },
-  "reportText": {
-    "description": "Raport trimis!",
+  "reportDialog_blankPageOption": {
+    "message": "Pagina este goală"
+  },
+  "reportDialog_bodyText": {
+    "message": "Vă rugăm să selectați o opțiune de mai jos"
+  },
+  "reportDialog_cannotClickOption": {
+    "message": "Nu se poate face clic"
+  },
+  "reportDialog_laggyPageOption": {
+    "message": "Pagina este întârziată"
+  },
+  "reportDialog_pageNotRespondingOption": {
+    "message": "Pagina nu răspunde"
+  },
+  "reportDialog_pageVisualGlitchOption": {
+    "message": "Pagina conține erori vizuale"
+  },
+  "reportDialog_popupShowUpOption": {
+    "message": "A apărut o fereastră pop-up"
+  },
+  "reportDialog_submitExtraText": {
+    "message": "Îți recomandăm insistent să dezactivați extensia de pe acest site până când remediam problema"
+  },
+  "reportDialog_submitText": {
    "message": "Raport trimis!"
  },
  "reviewText": {
-    "description": "Îți place această extensie?",
    "message": "Îți place această extensie?"
  },
  "toggleText": {
-    "description": "Mâncând dialoguri în ",
    "message": "Mâncând dialoguri în "
  }
 }
--- a/packages/browser-extension/src/_locales/ru/messages.json
+++ b/packages/browser-extension/src/_locales/ru/messages.json
@ -1,38 +1,53 @@
 {
  "appDesc": {
-    "description": "Кто-то сказал диалоги согласия на использование файлов cookie? 😋",
    "message": "Кто-то сказал диалоги согласия на использование файлов cookie? 😋"
  },
-  "contextMenuText": {
-    "description": "Сообщить о сайте...",
+  "contextMenu_reportOption": {
    "message": "Сообщить о сайте..."
  },
  "contributeText": {
-    "description": "Внести свой вклад в этот проект",
    "message": "Внести свой вклад в этот проект"
  },
  "helpText": {
-    "description": "Помощь или проблемы?",
    "message": "Помощь или проблемы?"
  },
  "negativeText": {
-    "description": "Ой! Приносим извинения за неудобства, пожалуйста, <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">свяжитесь с нами</a> <span aria-label=\"Улыбающееся лицо от пота\" role=\"img\">😅</span>",
    "message": "Ой! Приносим извинения за неудобства, пожалуйста, <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">свяжитесь с нами</a> <span aria-label=\"Улыбающееся лицо от пота\" role=\"img\">😅</span>"
  },
  "positiveText": {
-    "description": "Спасибо! Пожалуйста, оцените наше расширение <a id=\"store\" target=\"_blank\">здесь</a> <span aria-label=\"Улыбающееся лицо с глазами-сердечками\" role=\"img\">😍</span>",
    "message": "Спасибо! Пожалуйста, оцените наше расширение <a id=\"store\" target=\"_blank\">здесь</a> <span aria-label=\"Улыбающееся лицо с глазами-сердечками\" role=\"img\">😍</span>"
  },
-  "reportText": {
-    "description": "Отчет отправлен!",
+  "reportDialog_bodyText": {
+    "message": "Выберите вариант ниже"
+  },
+  "reportDialog_blankPageOption": {
+    "message": "Страница пуста"
+  },
+  "reportDialog_cannotClickOption": {
+    "message": "Невозможно нажать"
+  },
+  "reportDialog_laggyPageOption": {
+    "message": "Страница тормозит"
+  },
+  "reportDialog_pageNotRespondingOption": {
+    "message": "Страница не отвечает"
+  },
+  "reportDialog_pageVisualGlitchOption": {
+    "message": "Страница содержит визуальные сбои"
+  },
+  "reportDialog_popupShowUpOption": {
+    "message": "Появилось всплывающее окно"
+  },
+  "reportDialog_submitExtraText": {
+    "message": "Настоятельно рекомендуем отключить расширение на этом сайте, пока мы не исправим проблему"
+  },
+  "reportDialog_submitText": {
    "message": "Отчет отправлен!"
  },
  "reviewText": {
-    "description": "Вам нравится это расширение?",
    "message": "Вам нравится это расширение?"
  },
  "toggleText": {
-    "description": "Есть диалоги в ",
    "message": "Есть диалоги в "
  }
 }
--- a/packages/browser-extension/src/assets/fonts/Lato-Bold.ttf
+++ b/packages/browser-extension/src/assets/fonts/Lato-Bold.ttf
--- a/packages/browser-extension/src/assets/fonts/Lato-Regular.ttf
+++ b/packages/browser-extension/src/assets/fonts/Lato-Regular.ttf
--- 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.0.4",
+  "version": "6.1.0",
  "default_locale": "en",
  "description": "__MSG_appDesc__",
  "icons": {
@ -19,19 +19,24 @@
  },
  "content_scripts": [
    {
-      "css": ["styles/snackbar.css"],
+      "css": ["styles/dialog.css"],
      "exclude_matches": [
        "*://*.gfycat.com/*",
-        "*://*.gmx.com/*",
        "*://*.mediathekviewweb.de/*",
        "*://*.rundschau-online.de/*",
        "*://*.youtube.com/embed/*"
      ],
-      "js": ["scripts/content.js", "scripts/snackbar.js"],
+      "js": ["scripts/content.js", "scripts/dialog.js"],
      "matches": ["http://*/*", "https://*/*"],
      "run_at": "document_start"
    }
  ],
  "host_permissions": ["http://*/*", "https://*/*"],
-  "permissions": ["contextMenus", "storage", "tabs"]
+  "permissions": ["contextMenus", "storage", "tabs"],
+  "web_accessible_resources": [
+    {
+      "matches": ["http://*/*", "https://*/*"],
+      "resources": ["https://fonts.googleapis.com/css?family=Inter"]
+    }
+  ]
 }
--- a/packages/browser-extension/src/popup.html
+++ b/packages/browser-extension/src/popup.html
@ -1,10 +1,10 @@
 <html>
  <head>
-    <link rel="stylesheet" href="/styles/fonts.css" />
-    <link rel="stylesheet" href="/styles/reset.css" />
-    <link rel="stylesheet" href="/styles/popup.css" />
    <meta charset="UTF-8" />
    <meta name="author" content="wanhose" />
+    <link rel="stylesheet" href="/styles/reset.css" />
+    <link rel="stylesheet" href="/styles/popup.css" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter" />
    <script src="/scripts/popup.js"></script>
  </head>
  <body>
@ -29,8 +29,8 @@
            <button aria-label="Unlike" id="unlike">
              <svg
                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
+                width="16"
+                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
@ -40,14 +40,14 @@
              >
                <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"
-                ></path>
+                />
              </svg>
            </button>
            <button aria-label="Like" id="like">
              <svg
                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
+                width="16"
+                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
@ -57,7 +57,7 @@
              >
                <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"
-                ></path>
+                />
              </svg>
            </button>
          </div>
@ -70,8 +70,8 @@
        <a href="https://www.github.com/wanhose/cookie-dialog-monster" target="_blank">
          <svg
            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
+            width="16"
+            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
@ -79,10 +79,10 @@
            stroke-linecap="round"
            stroke-linejoin="round"
          >
-            <circle cx="18" cy="18" r="3"></circle>
-            <circle cx="6" cy="6" r="3"></circle>
-            <path d="M13 6h3a2 2 0 0 1 2 2v7"></path>
-            <line x1="6" y1="9" x2="6" y2="21"></line>
+            <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>
@ -91,8 +91,8 @@
        <a href="mailto:hello@wanhose.dev" target="_blank">
          <svg
            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
+            width="16"
+            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
@ -100,8 +100,8 @@
            stroke-linecap="round"
            stroke-linejoin="round"
          >
-            <line x1="22" y1="2" x2="11" y2="13"></line>
-            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+            <line x1="22" y1="2" x2="11" y2="13" />
+            <polygon points="22 2 15 22 11 13 2 9 22 2" />
          </svg>
        </a>
      </div>
--- a/packages/browser-extension/src/scripts/background.js
+++ b/packages/browser-extension/src/scripts/background.js
@ -28,7 +28,7 @@ const refreshData = (callback) => {
  fetch(`${apiUrl}/data/`).then((result) => {
    result.json().then(({ data }) => {
      chrome.storage.local.set({ data });
-      callback(data);
+      callback?.(data);
    });
  });
 };
@ -36,17 +36,19 @@ const refreshData = (callback) => {
 /**
 * @async
 * @description Reports active tab URL
+ * @param {any} message
 * @param {chrome.tabs.Tab} tab
 */

-const report = async (tab) => {
+const report = async (message, tab) => {
+  const reason = message.reason;
+  const userAgent = message.userAgent;
  const version = chrome.runtime.getManifest().version;
-  const body = JSON.stringify({ url: tab?.url, version });
+  const body = JSON.stringify({ reason, url: tab.url, userAgent, version });
  const headers = { 'Content-type': 'application/json' };
  const url = `${apiUrl}/report/`;

  await fetch(url, { body, headers, method: 'POST' });
-  chrome.tabs.sendMessage(tab.id, { type: 'SHOW_REPORT_CONFIRMATION' });
 };

 /**
@ -56,7 +58,7 @@ const report = async (tab) => {
 chrome.contextMenus.onClicked.addListener((info, tab) => {
  switch (info.menuItemId) {
    case reportMenuItemId:
-      if (tab) report(tab);
+      if (tab) chrome.tabs.sendMessage(tab.id, { type: 'SHOW_REPORT_DIALOG' });
      break;
    default:
      break;
@ -94,6 +96,9 @@ chrome.runtime.onMessage.addListener((message, sender, callback) => {
    case 'GET_TAB':
      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => callback(tabs[0]));
      break;
+    case 'REPORT':
+      if (tabId) report(message, sender.tab);
+      break;
    case 'UPDATE_STATE':
      if (hostname) chrome.storage.local.set({ [hostname]: message.state });
      break;
@ -113,7 +118,7 @@ chrome.runtime.onInstalled.addListener(() => {
    contexts: ['all'],
    documentUrlPatterns: chrome.runtime.getManifest().content_scripts[0].matches,
    id: reportMenuItemId,
-    title: chrome.i18n.getMessage('contextMenuText'),
+    title: chrome.i18n.getMessage('contextMenu_reportOption'),
  });
 });

--- a/packages/browser-extension/src/scripts/dialog.js
+++ b/packages/browser-extension/src/scripts/dialog.js
@ -0,0 +1,228 @@
+/**
+ * @description Report reasons
+ * @type {string[]}
+ */
+
+const reasons = [
+  'Cannot click',
+  'Page contains visual glitches',
+  'Page is blank',
+  'Page is laggy',
+  'Page is not responding',
+  'Popup showed up',
+];
+
+/**
+ * @description Report dialog ID
+ */
+
+const reportDialogId = 'report-dialog';
+
+/**
+ * @description Report dialog outer HTML
+ */
+
+const reportDialogHtml = `
+  <dialog id="${reportDialogId}" tabindex="0">
+    <report-dialog-header>
+      <report-dialog-header-title>Cookie Dialog Monster</report-dialog-header-title>
+      <report-dialog-close-button role="button" tabindex="0">
+        <svg 
+          viewBox="0 0 24 24" 
+          width="20" 
+          height="20" 
+          stroke="currentColor" 
+          stroke-width="2" 
+          fill="none" 
+          stroke-linecap="round" 
+          stroke-linejoin="round"
+        >
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </report-dialog-close-button>
+    </report-dialog-header>
+    <report-dialog-body>
+      <report-dialog-form-view>
+        <report-dialog-body-text>
+          ${chrome.i18n.getMessage('reportDialog_bodyText')}
+        </report-dialog-body-text>
+        <report-dialog-form>
+          <report-dialog-radio-group>
+            <report-dialog-radio 
+              aria-checked="false" 
+              data-value="0" role="radio" 
+              tabindex="0">
+              ${chrome.i18n.getMessage('reportDialog_cannotClickOption')}
+            </report-dialog-radio>
+            <report-dialog-radio 
+              aria-checked="false" 
+              data-value="1" 
+              role="radio" 
+              tabindex="0">
+              ${chrome.i18n.getMessage('reportDialog_pageVisualGlitchOption')}
+            </report-dialog-radio>
+            <report-dialog-radio 
+              aria-checked="false" 
+              data-value="2" 
+              role="radio" 
+              tabindex="0">
+              ${chrome.i18n.getMessage('reportDialog_blankPageOption')}
+            </report-dialog-radio>
+            <report-dialog-radio 
+              aria-checked="false" 
+              data-value="3" 
+              role="radio" 
+              tabindex="0">
+              ${chrome.i18n.getMessage('reportDialog_laggyPageOption')}
+            </report-dialog-radio>
+            <report-dialog-radio 
+              aria-checked="false" 
+              data-value="4" 
+              role="radio" 
+              tabindex="0">
+              ${chrome.i18n.getMessage('reportDialog_pageNotRespondingOption')}
+            </report-dialog-radio>
+            <report-dialog-radio 
+              aria-checked="false" 
+              data-value="5" 
+              role="radio" 
+              tabindex="0">
+              ${chrome.i18n.getMessage('reportDialog_popupShowUpOption')}
+            </report-dialog-radio>
+          </report-dialog-radio-group>
+          <report-dialog-submit-button aria-disabled="true" role="button" tabindex="0">
+            ${chrome.i18n.getMessage('contextMenu_reportOption')?.replace('...', '')}
+          </report-dialog-submit-button>
+        </report-dialog-form>
+      </report-dialog-form-view>
+      <report-dialog-submit-view hidden>
+        <svg 
+          viewBox="0 0 24 24" 
+          width="48" 
+          height="48" 
+          stroke="var(--cookie-dialog-monster-color-success)" 
+          stroke-width="2" 
+          fill="none" 
+          stroke-linecap="round" 
+          stroke-linejoin="round"
+        >
+          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+          <polyline points="22 4 12 14.01 9 11.01" />
+        </svg>
+        <report-dialog-submit-text>
+          ${chrome.i18n.getMessage('reportDialog_submitText')}
+        </report-dialog-submit-text>
+        <report-dialog-submit-extra-text>
+          ${chrome.i18n.getMessage('reportDialog_submitExtraText')}
+        </report-dialog-submit-extra-text>
+      </report-dialog-submit-view>
+    </report-dialog-body>
+  </dialog>
+`;
+
+/**
+ * @description Dialog close button click handler
+ * @param {MouseEvent} event
+ */
+
+const closeButtonClickHandler = (event) => {
+  const dialog = document.getElementById(reportDialogId);
+
+  event.preventDefault();
+  dialog?.remove();
+};
+
+/**
+ * @description Hides report dialog
+ */
+
+const hideReportDialog = () => {
+  document.getElementById(reportDialogId)?.remove();
+};
+
+/**
+ * @description Dialog radio input click handler
+ * @param {MouseEvent} event
+ */
+
+const radioClickHandler = (event) => {
+  const dialog = document.getElementById(reportDialogId);
+  const radios = dialog.getElementsByTagName('report-dialog-radio');
+  const submitButton = dialog?.getElementsByTagName('report-dialog-submit-button')[0];
+
+  for (const radio of radios) {
+    radio.setAttribute('aria-checked', 'false');
+  }
+
+  event.preventDefault();
+  event.currentTarget.setAttribute('aria-checked', 'true');
+  submitButton.setAttribute('aria-disabled', 'false');
+  submitButton.addEventListener('click', submitButtonClickHandler);
+};
+
+/**
+ * @description Shows report dialog
+ */
+
+const showReportDialog = () => {
+  const parser = new DOMParser();
+  const result = parser.parseFromString(reportDialogHtml, 'text/html');
+  const dialog = result.body.firstElementChild;
+  const closeButton = dialog.getElementsByTagName('report-dialog-close-button')[0];
+  const link = document.createElement('link');
+  const radios = dialog.getElementsByTagName('report-dialog-radio');
+
+  closeButton.addEventListener('click', closeButtonClickHandler);
+  link.setAttribute('href', 'https://fonts.googleapis.com/css?family=Inter');
+  link.setAttribute('id', 'report-dialog-font');
+  link.setAttribute('rel', 'stylesheet');
+
+  for (const radio of radios) {
+    radio.addEventListener('click', radioClickHandler);
+  }
+
+  document.body.appendChild(dialog);
+  dialog.showModal();
+
+  if (!document.getElementById('report-dialog-font')) {
+    document.head.appendChild(link);
+  }
+};
+
+/**
+ * @description Dialog submit button click handler
+ * @param {MouseEvent} event
+ */
+
+const submitButtonClickHandler = (event) => {
+  const dialog = document.getElementById(reportDialogId);
+  const formView = dialog?.getElementsByTagName('report-dialog-form-view')[0];
+  const option = dialog?.querySelector('report-dialog-radio[aria-checked="true"]');
+  const reasonIndex = option?.dataset.value;
+  const reason = Number.isNaN(reasonIndex) ? 'Unknown' : reasons[reasonIndex];
+  const submitView = dialog?.getElementsByTagName('report-dialog-submit-view')[0];
+  const userAgent = window.navigator.userAgent;
+
+  event.preventDefault();
+  dispatch({ userAgent, reason, type: 'REPORT' });
+  formView?.setAttribute('hidden', 'true');
+  submitView?.removeAttribute('hidden');
+};
+
+/**
+ * @description Listens to messages
+ */
+
+chrome.runtime.onMessage.addListener((message) => {
+  switch (message.type) {
+    case 'HIDE_REPORT_DIALOG':
+      hideReportDialog();
+      break;
+    case 'SHOW_REPORT_DIALOG':
+      showReportDialog();
+      break;
+    default:
+      break;
+  }
+});
--- a/packages/browser-extension/src/scripts/snackbar.js
+++ b/packages/browser-extension/src/scripts/snackbar.js
@ -1,97 +0,0 @@
-/**
- * @description Listens to messages
- */
-
-chrome.runtime.onMessage.addListener((message) => {
-  switch (message.type) {
-    case 'HIDE_REPORT_CONFIRMATION':
-      hideReportConfirmation();
-      break;
-    case 'SHOW_REPORT_CONFIRMATION':
-      showReportConfirmation();
-      break;
-    default:
-      break;
-  }
-});
-
-/**
- * @description Report confirmation ID
- */
-
-const REPORT_CONFIRMATION_ID = 'report-confirmation';
-
-/**
- * @description Report confirmation outer HTML
- */
-
-const REPORT_CONFIRMATION_HTML = `
-      <div id="${REPORT_CONFIRMATION_ID}">
-        <div id="report-confirmation-bar"></div>
-        <div id="report-confirmation-content">
-          <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" height="32" width="32">
-              <path
-                fill="#3dd9eb"
-                d="M45,22.5C45,32,36,41,24,41S3,33,3,22.5C3,14.492,14.059,12,24,12S45,14.492,45,22.5z"
-              />
-              <circle cx="17.5" cy="13.5" r="9.5" fill="#3dd9eb" />
-              <circle cx="30.5" cy="13.5" r="9.5" fill="#3dd9eb" />
-              <circle cx="17.5" cy="13.5" r="6.5" fill="#fff" />
-              <circle cx="30.5" cy="13.5" r="6.5" fill="#fff" />
-              <circle cx="18" cy="15" r="2" fill="#34495e" />
-              <circle cx="29" cy="13" r="2" fill="#34495e" />
-              <path
-                fill="#3dd9eb"
-                d="M8.118,15.007c0,0-1.91-1.046-4.118-0.007l1.5,1.817c0,0-3.994,1.404-5.486,4.525l3.16-0.632 c0,0-2.149,1.315-2.174,5.284l2.098-1.466c0,0-2.402,3.514-0.126,7.483l1.138-3.362c0,0-0.126,4.475,1.871,7.306l0.657-2.831 c0,0,0.413,3.84,3.413,5.84l-0.303-2.629c0,0,1.702,2.25,4.197,4.542l0.034-1.989L17.011,40L19,33.09L8.118,15.007z"
-              />
-              <path
-                fill="#3dd9eb"
-                d="M39.906,15.007c0,0,1.91-1.046,4.118-0.007l-1.5,1.817c0,0,3.994,1.404,5.486,4.525l-3.16-0.632 c0,0,2.149,1.315,2.174,5.284l-2.098-1.466c0,0,2.402,3.514,0.126,7.483l-1.138-3.362c0,0,0.126,4.475-1.871,7.306l-0.657-2.831 c0,0-0.413,3.84-3.413,5.84l0.303-2.629c0,0-1.702,2.25-4.197,4.542l-0.034-1.989L31.013,40l-1.989-6.91L39.906,15.007z"
-              />
-              <path
-                fill="#34495e"
-                d="M24,28.5c-5.661,0-12.909-1.736-15.24-4.643l2.34-1.877c1.478,1.842,7.626,3.52,12.9,3.52 c5.231,0,11.363-1.657,12.865-3.477l2.313,1.909C36.819,26.792,29.608,28.5,24,28.5z"
-              />
-              <path
-                fill="#34495e"
-                d="M36,25.5C36,31.851,30.075,36,24,36s-12-4.149-12-10.5c0-0.25,6.5,1.5,12,1.5S36,25.25,36,25.5z"
-              />
-              <path
-                fill="#3dd9eb"
-                d="M13.978,38.888C13.978,38.888,18,42,20,42l-2-3L13.978,38.888z"
-              />
-              <path fill="#3dd9eb" d="M34,38.888c0,0-4.022,3.112-6.022,3.112l2-3L34,38.888z" />
-              <polygon fill="#3dd9eb" points="19.034,40.472 24,43 29.011,40.404" />
-          </svg>
-          <span>${chrome.i18n.getMessage('reportText')}</span>
-        </div>
-      </div>
-    `;
-
-/**
- * @description Hides report confirmation
- */
-
-const hideReportConfirmation = () => {
-  document.getElementById(REPORT_CONFIRMATION_ID)?.setAttribute('hidden', 'true');
-};
-
-/**
- * @description Shows report confirmation
- */
-
-const showReportConfirmation = () => {
-  const element = document.getElementById(REPORT_CONFIRMATION_ID);
-
-  if (element) {
-    element.removeAttribute('hidden');
-  } else {
-    const parser = new DOMParser();
-    const result = parser.parseFromString(REPORT_CONFIRMATION_HTML, 'text/html');
-    const snackbar = result.body.firstElementChild;
-
-    document.body.appendChild(snackbar);
-  }
-
-  setTimeout(() => hideReportConfirmation(), 3750);
-};
--- a/packages/browser-extension/src/styles/dialog.css
+++ b/packages/browser-extension/src/styles/dialog.css
@ -0,0 +1,202 @@
+:root {
+  --cookie-dialog-monster-color-primary: #3dd9eb;
+  --cookie-dialog-monster-color-secondary: #34495e;
+  --cookie-dialog-monster-color-success: #5cb85c;
+  --cookie-dialog-monster-color-tertiary: #6b7280;
+  --cookie-dialog-monster-color-white: #ffffff;
+}
+
+#report-dialog {
+  background-color: var(--cookie-dialog-monster-color-white);
+  border: none;
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: var(--cookie-dialog-monster-color-secondary);
+  font-family: Inter, Arial, Helvetica, sans-serif;
+  font-size: 100%;
+  margin: auto !important;
+  padding: 0px !important;
+  text-align: left !important;
+  width: 320px;
+}
+
+#report-dialog::backdrop {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+#report-dialog * {
+  box-sizing: border-box;
+}
+
+report-dialog-body {
+  display: block;
+  font-size: 14px;
+  line-height: 14px;
+  padding: 16px;
+}
+
+report-dialog-body-text {
+  display: block;
+  margin: 0px;
+  padding: 0px;
+}
+
+report-dialog-close-button {
+  align-items: center;
+  background-color: transparent;
+  border: none;
+  border-radius: 4px;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  margin: 0px;
+  outline: none !important;
+  padding: 0px;
+  transition: 0.4s;
+}
+
+report-dialog-close-button:focus,
+report-dialog-close-button:hover {
+  background-color: var(--cookie-dialog-monster-color-white);
+  color: var(--cookie-dialog-monster-color-secondary);
+}
+
+report-dialog-form-view[hidden] {
+  display: none;
+}
+
+report-dialog-header {
+  align-items: center;
+  background-color: var(--cookie-dialog-monster-color-secondary);
+  color: var(--cookie-dialog-monster-color-white);
+  display: flex;
+  font-size: 16px;
+  height: 54px;
+  justify-content: space-between;
+  line-height: 16px;
+  padding: 16px;
+}
+
+report-dialog-header-title {
+  font-weight: 500;
+}
+
+report-dialog-radio {
+  color: var(--cookie-dialog-monster-color-tertiary);
+  cursor: pointer;
+  display: block;
+  margin-top: 18px;
+  outline: none !important;
+  padding-left: 24px;
+  position: relative;
+}
+
+report-dialog-radio[aria-checked='true']:after {
+  opacity: 1;
+  transform: scale(1, 1);
+}
+
+report-dialog-radio:after {
+  background-color: var(--cookie-dialog-monster-color-primary);
+  border-radius: 50%;
+  box-sizing: border-box;
+  content: '';
+  display: block;
+  height: 8px;
+  left: 3px;
+  opacity: 0;
+  position: absolute;
+  top: 3px;
+  transform: scale(0, 0);
+  transition: all 0.2s cubic-bezier(0.64, 0.57, 0.67, 1.53);
+  width: 8px;
+}
+
+report-dialog-radio:focus:not([aria-checked='true']):after,
+report-dialog-radio:hover:not([aria-checked='true']):after {
+  background: var(--cookie-dialog-monster-color-tertiary);
+  opacity: 1;
+  transform: scale(1, 1);
+}
+
+report-dialog-radio:before {
+  background: var(--cookie-dialog-monster-color-white);
+  border: 1px solid var(--cookie-dialog-monster-color-tertiary);
+  border-radius: 50%;
+  box-sizing: border-box;
+  content: '';
+  display: block;
+  height: 14px;
+  left: 0px;
+  margin-right: 5px;
+  position: absolute;
+  top: 0px;
+  width: 14px;
+}
+
+report-dialog-radio-group {
+  display: flex;
+  flex-direction: column;
+}
+
+report-dialog-submit-button {
+  align-items: center;
+  background-color: var(--cookie-dialog-monster-color-secondary);
+  border: 1px solid var(--cookie-dialog-monster-color-secondary);
+  border-radius: 4px;
+  color: var(--cookie-dialog-monster-color-white);
+  cursor: pointer;
+  display: flex;
+  font-family: inherit;
+  font-size: 14px;
+  height: 39px;
+  justify-content: center;
+  margin-top: 24px;
+  outline: none !important;
+  padding: 8px 16px;
+  text-align: center;
+  transition: 0.4s;
+  width: 100%;
+}
+
+report-dialog-submit-button:focus,
+report-dialog-submit-button:hover {
+  background-color: var(--cookie-dialog-monster-color-white);
+  color: var(--cookie-dialog-monster-color-secondary);
+}
+
+report-dialog-submit-button[aria-disabled='true'] {
+  background-color: var(--cookie-dialog-monster-color-tertiary);
+  border: 1px solid var(--cookie-dialog-monster-color-tertiary);
+  color: var(--cookie-dialog-monster-color-white);
+  cursor: not-allowed;
+}
+
+report-dialog-submit-extra-text {
+  font-size: 14px;
+  line-height: 14px;
+  margin: 0px;
+  margin-top: 16px;
+  text-align: center;
+}
+
+report-dialog-submit-text {
+  font-size: 18px;
+  line-height: 18px;
+  margin: 0px;
+  margin-top: 24px;
+  text-align: center;
+}
+
+report-dialog-submit-view {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 269px;
+}
+
+report-dialog-submit-view[hidden] {
+  display: none;
+}
--- a/packages/browser-extension/src/styles/fonts.css
+++ b/packages/browser-extension/src/styles/fonts.css
@ -1,13 +0,0 @@
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 400;
-  src: url('/assets/fonts/Lato-Regular.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 700;
-  src: url('/assets/fonts/Lato-Bold.ttf') format('truetype');
-}
--- a/packages/browser-extension/src/styles/popup.css
+++ b/packages/browser-extension/src/styles/popup.css
@ -24,7 +24,7 @@ body {
  color: var(--color-tertiary);
  display: flex;
  flex-direction: column;
-  font-family: 'Lato', Arial, Helvetica, sans-serif;
+  font-family: Inter, Arial, Helvetica, sans-serif;
  height: 24rem;
  width: 20rem;
 }
@ -83,11 +83,6 @@ strong {
  font-weight: bold;
 }

-svg {
-  height: 1rem;
-  width: 1rem;
-}
-
 .header-actions {
  align-items: center;
  display: flex;
--- a/packages/browser-extension/src/styles/snackbar.css
+++ b/packages/browser-extension/src/styles/snackbar.css
@ -1,65 +0,0 @@
-#report-confirmation {
-  bottom: 30px !important;
-  font-family: 'Lato', Arial, Helvetica, sans-serif !important;
-  min-width: 250px !important;
-  position: fixed;
-  right: 10px !important;
-  text-align: left !important;
-  visibility: hidden !important;
-  z-index: 99999 !important;
-}
-
-#report-confirmation:not([hidden]) {
-  animation: fadeIn 0.5s, fadeOut 0.5s 3.5s !important;
-  visibility: visible !important;
-}
-
-#report-confirmation:not([hidden]) #report-confirmation-bar {
-  animation: roundTime 3.5s linear forwards !important;
-}
-
-#report-confirmation-content {
-  align-items: center !important;
-  background-color: #34495e !important;
-  border-radius: 2px !important;
-  color: #fff !important;
-  display: flex !important;
-  font-size: 14px !important;
-  gap: 16px !important;
-  overflow: hidden !important;
-  padding: 16px !important;
-}
-
-#report-confirmation-bar {
-  background-color: #3dd9eb !important;
-  height: 4px !important;
-  transform-origin: left center !important;
-}
-
-@keyframes fadeIn {
-  from {
-    bottom: 0;
-    opacity: 0;
-  }
-  to {
-    bottom: 30px;
-    opacity: 1;
-  }
-}
-
-@keyframes fadeOut {
-  from {
-    bottom: 30px;
-    opacity: 1;
-  }
-  to {
-    bottom: 0;
-    opacity: 0;
-  }
-}
-
-@keyframes roundTime {
-  to {
-    transform: scaleX(0);
-  }
-}