Beautify lock icon on encryptable show

puzzle · Jul 10, 2023 · d3c6cfd · d3c6cfd
1 parent 3399952
commit d3c6cfd
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 13 deletions.
diff --git a/frontend/app/styles/encryptable-show.scss b/frontend/app/styles/encryptable-show.scss
@@ -126,3 +126,9 @@
     justify-content: center;
   }
 }
+
+.show-lock-icon {
+  border: 0;
+  margin-left: 15px;
+  margin-top: 7px;
+}
diff --git a/frontend/app/templates/components/encryptable/attribute-field.hbs b/frontend/app/templates/components/encryptable/attribute-field.hbs
@@ -7,20 +7,22 @@
     {{/if}}
   </div>
 {{/unless}}
-<div class="input-group border-tertiary border-2 border border-radius-4 {{if this.args.row "w-100" "w-50 mb-1"}}">
-  {{#if this.isAttributeVisible}}
-    <Input id="cleartext_{{this.args.attribute}}" class="text-truncate d-inline form-control border-0" disabled="true" @value={{format-cleartext this.args.encryptable this.args.attribute}} />
-  {{else}}
-    <span id="show-{{this.args.attribute}}" role="button" class="text-truncate correct-pixel-error-omg show-hidden-attribute-button show-text hidden-attribute-cover border-0" {{on "click" (action "showValue")}}>{{t (concat "encryptable/credentials.show.show_" this.args.attribute)}}</span>
-  {{/if}}
-  <button class="btn btn-light btn-outline-secondary rounded-corners-right" type="button" {{on "click" this.copyAttribute}}>
-    <img class="icon-clippy img" src="/assets/images/clipboard.svg" alt="clip">
-    <BsTooltip @title={{t (concat "encryptable/credentials.show.copy_" this.args.attribute)}} @delayShow="500" />
-  </button>
+<div class="d-flex">
+  <div class="input-group border-tertiary border-2 border border-radius-4 {{if this.args.row "w-100" "w-50 mb-1"}}">
+    {{#if this.isAttributeVisible}}
+      <Input id="cleartext_{{this.args.attribute}}" class="text-truncate d-inline form-control border-0" disabled="true" @value={{format-cleartext this.args.encryptable this.args.attribute}} />
+    {{else}}
+      <span id="show-{{this.args.attribute}}" role="button" class="text-truncate correct-pixel-error-omg show-hidden-attribute-button show-text hidden-attribute-cover border-0" {{on "click" (action "showValue")}}>{{t (concat "encryptable/credentials.show.show_" this.args.attribute)}}</span>
+    {{/if}}
+    <button class="btn btn-light btn-outline-secondary rounded-corners-right" type="button" {{on "click" this.copyAttribute}}>
+      <img class="icon-clippy img" src="/assets/images/clipboard.svg" alt="clip">
+      <BsTooltip @title={{t (concat "encryptable/credentials.show.copy_" this.args.attribute)}} @delayShow="500" />
+    </button>
+  </div>
   {{#unless this.args.row}}
-    <span class="input-group-text encryption_algorithm">
-      <img class="icon-button encryptable-show-back" src="/assets/images/encrypted_small.svg" alt="lock">
-      <BsTooltip @title="{{t "tooltips.encryption_algorithm"}} {{@encryptable.encryptionAlgorithm}}/{{@encryptable.teamPasswordBitsize}} bits" @delayShow="1000" />
+    <span class="show-lock-icon">
+      <img class="icon-button encryptable-show-back" src="/assets/images/lock-tick.svg" alt="lock">
+      <BsTooltip @title="{{t "tooltips.encryption_algorithm"}} {{@encryptable.encryptionAlgorithm}}/{{@encryptable.teamPasswordBitsize}} bits" @delayShow="500" />
     </span>
   {{/unless}}
 </div>
diff --git a/frontend/public/assets/images/lock-tick.svg b/frontend/public/assets/images/lock-tick.svg