From eeb26b3da4d35683d207abc3022d90755a4e660e Mon Sep 17 00:00:00 2001 From: GrzegorzZajac000 Date: Thu, 26 Sep 2024 15:41:37 +0200 Subject: [PATCH] #1663 Custom icon --- src/background/functions/setIcon.js | 8 +- src/global-styles/_variables.scss | 2 + src/optionsPage/functions/setIconSelect.js | 4 +- src/optionsPage/optionsPage.scss | 100 +++++++++++++++++++++ src/optionsPage/styles/_content.scss | 11 +++ src/views/optionsViews/normal.html | 4 +- webpack/utils/export/messages.json | 3 + 7 files changed, 128 insertions(+), 4 deletions(-) diff --git a/src/background/functions/setIcon.js b/src/background/functions/setIcon.js index 3ee5d43..b9ce955 100644 --- a/src/background/functions/setIcon.js +++ b/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) { diff --git a/src/global-styles/_variables.scss b/src/global-styles/_variables.scss index 8f156b5..23477e0 100644 --- a/src/global-styles/_variables.scss +++ b/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; diff --git a/src/optionsPage/functions/setIconSelect.js b/src/optionsPage/functions/setIconSelect.js index 4d3fb6c..7852876 100644 --- a/src/optionsPage/functions/setIconSelect.js +++ b/src/optionsPage/functions/setIconSelect.js @@ -9,12 +9,12 @@ const setIconSelect = () => { select: '#twofas-icon-select', data: [ { - html: `DefaultDefault`, + html: `DefaultDefault`, text: 'Default', value: 0 }, { - html: `Type1Type 1`, + html: `Type1Type 1`, text: 'Type 1', value: 1 } diff --git a/src/optionsPage/optionsPage.scss b/src/optionsPage/optionsPage.scss index 0615244..eea6c70 100644 --- a/src/optionsPage/optionsPage.scss +++ b/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; + } + } + } + } +} diff --git a/src/optionsPage/styles/_content.scss b/src/optionsPage/styles/_content.scss index 23758bb..d7e87af 100644 --- a/src/optionsPage/styles/_content.scss +++ b/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 { diff --git a/src/views/optionsViews/normal.html b/src/views/optionsViews/normal.html index 7fa2e08..ac67bbc 100644 --- a/src/views/optionsViews/normal.html +++ b/src/views/optionsViews/normal.html @@ -30,7 +30,9 @@

Icon:

- +
+ +

Choose an icon for the 2FAS Browser Extension to personalize its appearance in your browser.

diff --git a/webpack/utils/export/messages.json b/webpack/utils/export/messages.json index 830e385..1616317 100644 --- a/webpack/utils/export/messages.json +++ b/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",