From adcf04c1e3110c283ec9b0204620f2543f4844e6 Mon Sep 17 00:00:00 2001
From: Benoit Devos <benoit@logion.network>
Date: Thu, 16 May 2024 16:15:02 +0200
Subject: [PATCH] feat: improve secrets management styling.

logion-network/logion-internal#1253
logion-network/logion-internal#1254
---
 public/assets/key.svg              | 4 ++++
 src/components/toggle/Eye.css      | 2 +-
 src/img/eye-closed.svg             | 3 ---
 src/img/eye-slash.svg              | 5 +++++
 src/img/eye.svg                    | 6 +++---
 src/loc/secrets/SecretsButton.css  | 3 +++
 src/loc/secrets/SecretsButton.tsx  | 6 +++++-
 src/loc/secrets/SecretsPane.tsx    | 3 ++-
 src/loc/secrets/ViewableSecret.tsx | 2 +-
 9 files changed, 24 insertions(+), 10 deletions(-)
 create mode 100644 public/assets/key.svg
 delete mode 100644 src/img/eye-closed.svg
 create mode 100644 src/img/eye-slash.svg
 create mode 100644 src/loc/secrets/SecretsButton.css

diff --git a/public/assets/key.svg b/public/assets/key.svg
new file mode 100644
index 00000000..b4aef876
--- /dev/null
+++ b/public/assets/key.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-key" viewBox="0 0 16 16" color="white">
+  <path d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8m4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5"/>
+  <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
+</svg>
diff --git a/src/components/toggle/Eye.css b/src/components/toggle/Eye.css
index ba05d608..7baad067 100644
--- 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
deleted file mode 100644
index 2c826d1e..00000000
--- a/src/img/eye-closed.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" stroke="white">
-    <path d="M8.052 5.837A9.715 9.715 0 0 1 12 5c2.955 0 5.309 1.315 7.06 2.864 1.756 1.553 2.866 3.307 3.307 4.08a.11.11 0 0 1 .016.055.122.122 0 0 1-.017.06 16.766 16.766 0 0 1-1.53 2.218.75.75 0 1 0 1.163.946 18.253 18.253 0 0 0 1.67-2.42 1.607 1.607 0 0 0 .001-1.602c-.485-.85-1.69-2.757-3.616-4.46C18.124 5.034 15.432 3.5 12 3.5c-1.695 0-3.215.374-4.552.963a.75.75 0 0 0 .604 1.373Zm11.114 12.15C17.328 19.38 14.933 20.5 12 20.5c-3.432 0-6.125-1.534-8.054-3.24C2.02 15.556.814 13.648.33 12.798a1.606 1.606 0 0 1 .001-1.6A18.283 18.283 0 0 1 3.648 7.01L1.317 5.362a.75.75 0 1 1 .866-1.224l20.5 14.5a.75.75 0 1 1-.866 1.224ZM4.902 7.898c-1.73 1.541-2.828 3.273-3.268 4.044a.112.112 0 0 0-.017.059c0 .015.003.034.016.055.441.774 1.551 2.527 3.307 4.08C6.69 17.685 9.045 19 12 19c2.334 0 4.29-.82 5.874-1.927l-3.516-2.487a3.5 3.5 0 0 1-5.583-3.949L4.902 7.899Z"/>
-</svg>
diff --git a/src/img/eye-slash.svg b/src/img/eye-slash.svg
new file mode 100644
index 00000000..2d3ea73c
--- /dev/null
+++ b/src/img/eye-slash.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-eye-slash" viewBox="0 0 16 16" color="white">
+    <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z"/>
+    <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829"/>
+    <path d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z"/>
+</svg>
diff --git a/src/img/eye.svg b/src/img/eye.svg
index d7de87cc..6dba537c 100644
--- a/src/img/eye.svg
+++ b/src/img/eye.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" stroke="white">
-    <path d="M15.5 12a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"/>
-    <path d="M12 3.5c3.432 0 6.124 1.534 8.054 3.241 1.926 1.703 3.132 3.61 3.616 4.46a1.6 1.6 0 0 1 0 1.598c-.484.85-1.69 2.757-3.616 4.461-1.929 1.706-4.622 3.24-8.054 3.24-3.432 0-6.124-1.534-8.054-3.24C2.02 15.558.814 13.65.33 12.8a1.6 1.6 0 0 1 0-1.598c.484-.85 1.69-2.757 3.616-4.462C5.875 5.034 8.568 3.5 12 3.5ZM1.633 11.945a.115.115 0 0 0-.017.055c.001.02.006.039.017.056.441.774 1.551 2.527 3.307 4.08C6.691 17.685 9.045 19 12 19c2.955 0 5.31-1.315 7.06-2.864 1.756-1.553 2.866-3.306 3.307-4.08a.111.111 0 0 0 .017-.056.111.111 0 0 0-.017-.056c-.441-.773-1.551-2.527-3.307-4.08C17.309 6.315 14.955 5 12 5 9.045 5 6.69 6.314 4.94 7.865c-1.756 1.552-2.866 3.306-3.307 4.08Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16" color="white">
+    <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z"/>
+    <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0"/>
 </svg>
diff --git a/src/loc/secrets/SecretsButton.css b/src/loc/secrets/SecretsButton.css
new file mode 100644
index 00000000..7ce12cdd
--- /dev/null
+++ 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
index 019235d2..2eb6a2da 100644
--- 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
index 418aab4a..90430fca 100644
--- 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
index 9fb59bc9..56a95f2f 100644
--- 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>
     )