feat: improve secrets management styling.

logion-network/logion-internal#1253 logion-network/logion-internal#1254
logion-network · May 16, 2024 · adcf04c · adcf04c
1 parent d4ce955
commit adcf04c
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 10 deletions.
diff --git a/public/assets/key.svg b/public/assets/key.svg
diff --git a/src/components/toggle/Eye.css b/src/components/toggle/Eye.css
@@ -13,7 +13,7 @@
     background-image: url("../../img/eye.svg");
 }
 .Eye:not(.checked):after {
-    background-image: url("../../img/eye-closed.svg");
+    background-image: url("../../img/eye-slash.svg");
 }
 
 .Eye:after {

diff --git a/src/img/eye-closed.svg b/src/img/eye-closed.svg
diff --git a/src/img/eye-slash.svg b/src/img/eye-slash.svg
diff --git a/src/img/eye.svg b/src/img/eye.svg
diff --git a/src/loc/secrets/SecretsButton.css b/src/loc/secrets/SecretsButton.css
@@ -0,0 +1,3 @@
+.SecretsButton img {
+    margin-right: 10px;
+}
diff --git a/src/loc/secrets/SecretsButton.tsx b/src/loc/secrets/SecretsButton.tsx
@@ -2,6 +2,8 @@ import Button from "../../common/Button";
 import { useNavigate } from "react-router-dom";
 import { secretsPath } from "../../wallet-user/UserPaths";
 import { useLocContext } from "../LocContext";
+import Icon from "../../common/Icon";
+import "./SecretsButton.css";
 
 export default function SecretsButton() {
     const { loc } = useLocContext();
@@ -11,7 +13,9 @@ export default function SecretsButton() {
     }
 
     return (
-        <Button onClick={ () => { navigate(secretsPath(loc.id))} }>
+        <Button className="SecretsButton"
+                onClick={ () => navigate(secretsPath(loc.id)) }>
+            <Icon icon={ { id: "key" } } />
             Recoverable secrets
         </Button>
     )

diff --git a/src/loc/secrets/SecretsPane.tsx b/src/loc/secrets/SecretsPane.tsx
@@ -47,7 +47,8 @@ function UserSecretsPane() {
             contributionMode="Requester"
         >
             <Frame
-                title="Secrets"
+                title="Recoverable secrets"
+                titleIcon={ { icon: { id: "key" } } }
             >
                 <SecretsTable
                     secrets={ locState?.data().secrets || [] }

diff --git a/src/loc/secrets/ViewableSecret.tsx b/src/loc/secrets/ViewableSecret.tsx
@@ -11,7 +11,7 @@ export default function ViewableSecret(props: Props) {
     return (
         <div className="ViewableSecret">
             { !hidden && <span>{ props.value }</span> }
-            { hidden && <span>******</span> }
+            { hidden && <span>••••••</span> }
             <Checkbox checked={ hidden } setChecked={ setHidden } skin="Eye" />
         </div>
     )