feat: 🎸 Refactor details of the component

Delete unnecessary <span>. Make icon smaller and aligned. Fix linting
issues.

ui/admin/app/styles/app.scss

@@ -95,12 +95,14 @@
   p {
     margin-bottom: 0;
   }
+
   .rose-table-header-cell {
     p {
       color: var(--ui-gray-subtler-1);
       font-weight: normal;
     }
   }
+
   .rose-form-checkbox {
     margin-bottom: 0;
 

ui/desktop/app/components/hidden-secret/index.hbs

@@ -1,7 +1,7 @@
 <div class='hidden-secret'>
   <Rose::Icon
-    @name={{if this.secretVisible 'visibility-show' 'visibility-hide'}}
-    @size='large'
+    @name={{if this.isHidden 'visibility-show' 'visibility-hide'}}
+    @size='medium'
     {{on 'click' this.toggleSecretVisibility}}
   />
   <Copyable
@@ -9,12 +9,10 @@
     @buttonText={{t 'actions.copy-to-clipboard'}}
     @acknowledgeText={{t 'states.copied'}}
   >
-    <span>
-      {{#if this.secretVisible}}
-        {{@secret}}
-      {{else}}
-        {{this.textMask}}
-      {{/if}}
-    </span>
+    {{#if this.isHidden}}
+      {{@secret}}
+    {{else}}
+      {{this.textMask}}
+    {{/if}}
   </Copyable>
 </div>

ui/desktop/app/components/hidden-secret/index.js

@@ -5,10 +5,10 @@ import { tracked } from '@glimmer/tracking';
 export default class HiddenSecretComponent extends Component {
   textMask = '■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■';
 
-  @tracked secretVisible = false;
+  @tracked isHidden = false;
 
   @action
   toggleSecretVisibility() {
-    this.secretVisible = !this.secretVisible;
+    this.isHidden = !this.isHidden;
   }
 }

ui/desktop/app/styles/app.scss

@@ -481,6 +481,7 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
   color: var(--ui-gray-subtler-2);
 
   .rose-icon {
+    margin-top: sizing.rems(xxxs);
     margin-right: sizing.rems(s);
   }