Improve secrets management styling.

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 {

src/loc/secrets/SecretsButton.css

@@ -0,0 +1,3 @@
+.SecretsButton img {
+    margin-right: 10px;
+}

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>
     )

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 || [] }

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>
     )