From 699d5063d9635e4dd0ab2a322b15368562a0df40 Mon Sep 17 00:00:00 2001
From: Carlos Alcaide <me@calcaide.com>
Date: Tue, 20 Jul 2021 13:28:39 -0700
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=F0=9F=90=9B=20Fix=20style=20and=20a?=
 =?UTF-8?q?ccessibility=20issues=20for=20hidden=20secret?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix style and accessibility issues for hidden secret component
---
 addons/core/translations/resources/en-us.yaml  |  2 ++
 .../app/components/hidden-secret/index.hbs     | 12 +++++++-----
 ui/desktop/app/styles/app.scss                 | 18 ++++++++++--------
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index 2c9712a67..0e8a331b8 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/addons/core/translations/resources/en-us.yaml
@@ -267,6 +267,8 @@ target:
       add:
         title: Add Host Sets
         description: Select host sets to assign to this target.
+  secret:
+    toggle: Toggle secret visibility.
 credential-store:
   title: Credential Store
   title_plural: Credential Stores
diff --git a/ui/desktop/app/components/hidden-secret/index.hbs b/ui/desktop/app/components/hidden-secret/index.hbs
index 8b5cc1cac..18474329c 100644
--- a/ui/desktop/app/components/hidden-secret/index.hbs
+++ b/ui/desktop/app/components/hidden-secret/index.hbs
@@ -1,9 +1,11 @@
 <div class='hidden-secret'>
-  <Rose::Icon
-    @name={{if this.isHidden 'visibility-show' 'visibility-hide'}}
-    @size='medium'
+  <Rose::Button
+    @style='ghost'
+    @iconOnly={{if this.isHidden 'visibility-show' 'visibility-hide'}}
     {{on 'click' this.toggleSecretVisibility}}
-  />
+  >
+    {{t 'resources.target.secret.toggle'}}
+  </Rose::Button>
   <Copyable
     @text={{@secret}}
     @buttonText={{t 'actions.copy-to-clipboard'}}
@@ -12,7 +14,7 @@
     {{#if this.isHidden}}
       {{@secret}}
     {{else}}
-      {{this.textMask}}
+      <span class='secret-mask'>{{this.textMask}}</span>
     {{/if}}
   </Copyable>
 </div>
\ No newline at end of file
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index f65623c56..617f09ea5 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -478,20 +478,22 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
 .hidden-secret {
   display: flex;
   align-items: center;
-  color: var(--ui-gray-subtler-2);
-
-  .rose-icon {
-    margin-top: sizing.rems(xxxs);
-    margin-right: sizing.rems(s);
-  }
 
   .copyable {
     display: flex;
     width: 100%;
     justify-content: space-between;
+
+    .secret-mask {
+      color: var(--ui-gray-subtler-2);
+    }
+
+    .rose-button-ghost { // Copyable button icon.
+      color: var(--ui-gray-subtler-1);
+    }
   }
 
-  .rose-button-ghost {
-    color: var(--ui-gray-subtler-1);
+  .rose-button-ghost { // Hide/Show secret button icon.
+    color: var(--ui-gray);
   }
 }

From c5f72c53d81b19d1213768a94e2b8f1d6491b626 Mon Sep 17 00:00:00 2001
From: Carlos Alcaide <me@calcaide.com>
Date: Tue, 20 Jul 2021 13:43:11 -0700
Subject: [PATCH 2/2] Move translation to actions file

---
 addons/core/translations/actions/en-us.yaml       | 1 +
 addons/core/translations/resources/en-us.yaml     | 2 --
 ui/desktop/app/components/hidden-secret/index.hbs | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/addons/core/translations/actions/en-us.yaml b/addons/core/translations/actions/en-us.yaml
index dd00b107b..49bde4799 100644
--- a/addons/core/translations/actions/en-us.yaml
+++ b/addons/core/translations/actions/en-us.yaml
@@ -33,3 +33,4 @@ edit-form: Edit Form
 change-origin: Change Origin URL
 change-state: Change State
 close: Close
+toggle-secret: Toggle secret visibility
diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index 0e8a331b8..2c9712a67 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/addons/core/translations/resources/en-us.yaml
@@ -267,8 +267,6 @@ target:
       add:
         title: Add Host Sets
         description: Select host sets to assign to this target.
-  secret:
-    toggle: Toggle secret visibility.
 credential-store:
   title: Credential Store
   title_plural: Credential Stores
diff --git a/ui/desktop/app/components/hidden-secret/index.hbs b/ui/desktop/app/components/hidden-secret/index.hbs
index 18474329c..6660a77e5 100644
--- a/ui/desktop/app/components/hidden-secret/index.hbs
+++ b/ui/desktop/app/components/hidden-secret/index.hbs
@@ -4,7 +4,7 @@
     @iconOnly={{if this.isHidden 'visibility-show' 'visibility-hide'}}
     {{on 'click' this.toggleSecretVisibility}}
   >
-    {{t 'resources.target.secret.toggle'}}
+    {{t 'actions.toggle-secret'}}
   </Rose::Button>
   <Copyable
     @text={{@secret}}