diff --git a/src/assets/icons/eye-off-outline.svg b/src/assets/icons/eye-off-outline.svg new file mode 100644 index 0000000..95f4c30 --- /dev/null +++ b/src/assets/icons/eye-off-outline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/eye-outline.svg b/src/assets/icons/eye-outline.svg new file mode 100644 index 0000000..663f3f1 --- /dev/null +++ b/src/assets/icons/eye-outline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/options.tsx b/src/options.tsx index 84efb30..5036097 100644 --- a/src/options.tsx +++ b/src/options.tsx @@ -25,6 +25,8 @@ import AddCircleIcon from './assets/icons/add-circle-outline.svg'; import ArrowUpCircleIcon from './assets/icons/arrow-up-circle-outline.svg'; import CopyIcon from './assets/icons/copy-outline.svg'; import DiceIcon from './assets/icons/dice-outline.svg'; +import EyeIcon from './assets/icons/eye-outline.svg'; +import EyeOffIcon from './assets/icons/eye-off-outline.svg'; import DownloadIcon from './assets/icons/download-outline.svg'; import RadioIcon from './assets/icons/radio-outline.svg'; import TrashIcon from './assets/icons/trash-outline.svg'; @@ -315,6 +317,10 @@ function Options() { setPrivateKey(nip19.nsecEncode(generateSecretKey())); } + function handlePrivateKeyShowClick() { + setKeyHidden(!isKeyHidden); + } + //#endregion Private key //#region Permissions @@ -521,9 +527,10 @@ function Options() { value={privateKey} readOnly={selectedProfilePubKey != ''} onChange={handlePrivateKeyChange} - onFocus={() => setKeyHidden(false)} - onBlur={() => setKeyHidden(true)} /> + diff --git a/src/style.scss b/src/style.scss index 53f97a3..910b3ad 100644 --- a/src/style.scss +++ b/src/style.scss @@ -347,9 +347,20 @@ input, border-right: 0; } button { + margin-left: calc(var(--bs-border-width) * -1); border-top-left-radius: 0; border-bottom-left-radius: 0; - margin-left: calc(var(--bs-border-width) * -1); + border-top-right-radius: 0; + border-bottom-right-radius: 0; + + &:first-child { + border-top-left-radius: $button-radius; + border-bottom-left-radius: $button-radius; + } + &:last-child { + border-top-right-radius: $button-radius; + border-bottom-right-radius: $button-radius; + } } }