#1663 Custom icon

src/background/functions/setIcon.js

@@ -21,7 +21,9 @@ const browser = require('webextension-polyfill');
 const loadFromLocalStorage = require('../../localStorage/loadFromLocalStorage');
 
 const getIconObj = async (tabID, isActive) => {
+  const MAX_TYPE = 3;
   const isSafari = process.env.EXT_PLATFORM === 'Safari';
+  
   let type = 0;
   let typeFilename = '';
   let iconFileName = '';
@@ -32,8 +34,12 @@ const getIconObj = async (tabID, isActive) => {
   } else {
     const storage = await loadFromLocalStorage(['extIcon']);
 
-    if (storage && storage?.extIcon) {
+    if (storage && storage?.extIcon && !isNaN(storage.extIcon)) {
       type = parseInt(storage.extIcon, 10);
+
+      if (type > MAX_TYPE) {
+        type = 0;
+      }
     }
   
     if (type !== 0) {

src/global-styles/_variables.scss

@@ -37,6 +37,8 @@ $input-color: #000;
 $input-color-dark: #fff;
 $button-bg: $input-bg;
 $button-bg-dark: $input-bg-dark;
+$select-option-selected: #d3d4e2;
+$select-option-selected-dark: #272931;
 
 // OPTIONS PAGE
 $op-rwd-height: 575px;

src/optionsPage/functions/setIconSelect.js

@@ -9,12 +9,12 @@ const setIconSelect = () => {
     select: '#twofas-icon-select',
     data: [
       {
-        html: `<span><img src="${browser.runtime.getURL('images/icons/icon16.png')}" alt="Default" /><span>Default</span></span>`,
+        html: `<span><img src="${browser.runtime.getURL('images/icons/icon32.png')}" alt="Default" /><span>Default</span></span>`,
         text: 'Default',
         value: 0
       },
       {
-        html: `<span><img src="${browser.runtime.getURL('images/icons/icon16_1.png')}" alt="Type1" /><span>Type 1</span></span>`,
+        html: `<span><img src="${browser.runtime.getURL('images/icons/icon32_1.png')}" alt="Type1" /><span>Type 1</span></span>`,
         text: 'Type 1',
         value: 1
       }

src/optionsPage/optionsPage.scss

@@ -40,3 +40,103 @@
 
   @import "styles/menu", "styles/content", "styles/pinInfo", "styles/pushConfig", "styles/socialIcons", "styles/integrityError";
 }
+
+.ss-main {
+  background-color: $input-bg;
+  border: 0;
+  border-radius: 10px;
+  height: 51px;
+  padding: 0 17px;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: $input-bg-dark;
+    color: $input-color-dark;
+  }
+
+  @media all and (max-width: 660px) {
+    padding: 0 10px;
+  }
+
+  &:active,
+  &:focus {
+    box-shadow: none;
+  }
+}
+
+.ss-content .ss-list .ss-option,
+.ss-main .ss-single {
+  > span {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    gap: 0 12px;
+
+    > img {
+      height: 24px;
+      width: auto;
+    }
+
+    > span {
+      color: $input-color;
+      font-size: 16px;
+      font-weight: 400;
+
+      @media (prefers-color-scheme: dark) {
+        color: $input-color-dark;
+      }
+    }
+  }
+}
+
+.ss-content {
+  background-color: $color-2;
+  border: 0;
+  border-radius: 10px;
+  box-shadow: rgba($color-header-line-dark, .2) 0 2px 8px 0;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: $dark-color;
+    box-shadow: rgba($color, .2) 0 2px 8px 0;
+  }
+
+  &.ss-open-below,
+  &.ss-open-above {
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
+
+  .ss-list {
+    border-radius: 10px;
+
+    .ss-option {
+      gap: 0 6px;
+      padding: 6px 12px;
+      transition: background-color .3s ease-in-out, color .3s ease-in-out;
+
+      &:not(.ss-disabled) {
+        &.ss-selected {
+          background-color: $select-option-selected;
+          color: $color-header;
+
+          @media (prefers-color-scheme: dark) {
+            background-color: $select-option-selected-dark;
+            color: $color-2;
+          }
+        }
+      }
+
+      &:hover {
+        background-color: rgba($theme-color, .8);
+        color: $color-2;
+      }
+
+      > span {
+        > span {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}

src/optionsPage/styles/_content.scss

@@ -617,6 +617,17 @@
   &-icon {
     margin-top: 20px;
     max-width: 305px;
+
+    &-box {
+      margin-bottom: 10px;
+    }
+
+    p {
+      color: $desc-color;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 18px;
+    }
   }
 
   &-advanced {

src/views/optionsViews/normal.html

@@ -30,7 +30,9 @@
 
 <div class="twofas-options-page-content-icon">
   <h2><span data-i18n="icon">Icon</span>:</h2>
+  <div class="twofas-options-page-content-icon-box">
     <select name="twofas-icon-select" id="twofas-icon-select"></select>
+  </div>
   <p data-i18n="optionsIconDesc">Choose an icon for the 2FAS Browser Extension to personalize its appearance in your browser.</p>
 </div>
 

webpack/utils/export/messages.json

@@ -19,6 +19,8 @@
   "add": "Add",
   "cancel": "Cancel",
   "shortcut": "Shortcut",
+  "icon": "Icon",
+  "options": "Options",
   "neverShowAgain": "Never show again",
   "isNotSupportedByExt": "is not supported by 2FAS Extension",
   "shortcutSetDesc": "Set a shortcut to open the 2FAS Browser Extension on any page.",
@@ -184,6 +186,7 @@
   "optionsDomainTooLong": "Domain is too long",
   "optionsDomainIncorrect": "Domain is not correct",
   "optionsDomainExists": "Domain exists on excluded list",
+  "optionsIconDesc": "Choose an icon for the 2FAS Browser Extension to personalize its appearance in your browser.",
   "tokenHeader": "Your token",
   "tokenCopy": "Copy",
   "tokenCopied": "Copied",