Merge pull request #651 from hashicorp/fix-hidden-secret-component

fix: 🐛 Fix style and accessibility issues for hidden secret

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

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 'actions.toggle-secret'}}
+  </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>

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