refactor(browser-extension): popup layout

packages/browser-extension/src/popup.html

@@ -12,99 +12,82 @@
       <h1 class="header-title">Cookie Dialog Monster</h1>
     </header>
     <main>
-      <label class="switch-label">
+      <popup-button id="power-option" role="button" tabindex="0">
-        <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"
+          aria-hidden="true"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
           fill="none"
+          height="32"
           stroke="currentColor"
-                stroke-width="2"
           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="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"
+            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>
-            </button>
+        <span data-i18n="popup_helpOption"></span>
-            <button aria-label="Like" id="like">
+      </popup-button>
+      <popup-button
+        data-href="https://www.github.com/wanhose/cookie-dialog-monster"
+        id="contribute-option"
+        role="link"
+        tabindex="0"
+      >
         <svg
-                xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
           fill="none"
+          height="32"
           stroke="currentColor"
-                stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
+          stroke-width="2"
+          viewBox="0 0 24 24"
+          width="32"
         >
           <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"
+            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>
-            </button>
+        <span data-i18n="popup_contributeOption"></span>
-          </div>
+      </popup-button>
-        </div>
+      <popup-button data-href="#" id="rate-option" role="link" tabindex="0">
-        <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"
+          aria-hidden="true"
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
           fill="none"
+          height="32"
           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"
+          viewBox="0 0 24 24"
-            stroke-linejoin="round"
+          width="32"
         >
-            <line x1="22" y1="2" x2="11" y2="13" />
+          <polygon
-            <polygon points="22 2 15 22 11 13 2 9 22 2" />
+            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>
-        </a>
+        <span data-i18n="popup_rateOption"></span>
-      </div>
+      </popup-button>
     </main>
     <footer></footer>
   </body>

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');
+  const contribute = document.getElementById('contribute-option');
-  like.addEventListener('click', handleRate);
+  contribute?.addEventListener('click', handleLinkRedirect);
 
-  const power = document.getElementById('power');
+  const help = document.getElementById('help-option');
-  power.addEventListener('change', handlePowerChange);
+  help?.addEventListener('click', handleLinkRedirect);
-  if (!state.enabled) power.removeAttribute('checked');
 
-  const store = document.getElementById('store');
+  const power = document.getElementById('power-option');
-  if (isEdge) store?.setAttribute('href', edgeUrl);
+  power?.addEventListener('click', handlePowerToggle);
-  else if (isChromium) store?.setAttribute('href', chromeUrl);
+  if (state.enabled) power?.setAttribute('data-value', 'on');
-  else if (isFirefox) store?.setAttribute('href', firefoxUrl);
+  else power?.setAttribute('data-value', 'off');
 
-  const unlike = document.getElementById('unlike');
+  const rate = document.getElementById('rate-option');
-  unlike.addEventListener('click', handleRate);
+  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
+ * @async
- */
+ * @description Opens a new tab
-
-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
  * @param {MouseEvent} event
  */
 
-const handleRate = (event) => {
+const handleLinkRedirect = async (event) => {
-  const negative = document.getElementById('negative');
+  const { href } = event.currentTarget.dataset;
-  const positive = document.getElementById('positive');
 
-  switch (event.currentTarget.id) {
+  if (href) {
-    case 'unlike':
+    await chrome.tabs.create({ url: href });
-      positive.setAttribute('hidden', 'true');
-      negative.removeAttribute('hidden');
-      break;
-    case 'like':
-      negative.setAttribute('hidden', 'true');
-      positive.removeAttribute('hidden');
-      break;
-    default:
-      break;
   }
 };
 
+/**
+ * @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
  */

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: 320px;
-  width: 20rem;
 }
 
-button {
+body * {
-  outline: none;
+  box-sizing: border-box;
 }
 
 footer {
   background-color: var(--color-secondary);
-  font-size: 0.75rem;
+  font-size: 12px;
-  height: 0.25rem;
+  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;
+  font-size: 16px !important;
-  height: 3rem;
+  height: 48px;
   justify-content: space-between;
-  padding: 0 1rem;
+  padding: 0 16px;
-}
-
-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);
 }
 
 main {
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  grid-template-columns: repeat(2, 1fr);
-  gap: 1.25rem;
+  gap: 16px;
-  padding: 1rem;
+  padding: 16px;
 }
 
-span {
+popup-button {
-  display: inline-block;
+  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 {
+#power-option {
-  align-items: center;
-  display: flex;
-}
-
-.header-actions > button {
-  border-radius: 0.125rem;
   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 {
+#power-option[data-value='off'] {
-  background-color: var(--color-tertiary);
+  background-color: var(--color-error);
-  bottom: 0;
+}
-  cursor: pointer;
+
-  left: 0;
+#power-option[data-value='on'] {
-  position: absolute;
+  background-color: var(--color-success);
-  right: 0;
+}
-  top: 0;
+
+#rate-option > svg {
   transition: 0.4s;
 }
 
-.slider:before {
+#rate-option:focus > svg,
-  background-color: var(--color-white);
+#rate-option:hover > svg {
-  bottom: 0.25rem;
+  color: var(--color-warning);
-  content: '';
+  fill: var(--color-warning);
-  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);
 }

packages/browser-extension/src/styles/reset.css

@@ -29,6 +29,7 @@ h6,
 th,
 td,
 caption {
+  font-size: inherit;
   font-weight: normal;
   margin: 0;
 }