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;
+ }
}
}