fixed yubikey icon on the open screen

app/scripts/views/open-view.js

@@ -105,10 +105,11 @@ class OpenView extends View {
             !this.model.settings.canOpen &&
             !this.model.settings.canCreate &&
             !(this.model.settings.canOpenDemo && !this.model.settings.demoOpened);
+        const hasYubiKeys = !!UsbListener.attachedYubiKeys.length;
         const canOpenYubiKey =
+            hasYubiKeys &&
             this.model.settings.canOpenOtpDevice &&
             this.model.settings.yubiKeyShowIcon &&
-            !!UsbListener.attachedYubiKeys.length &&
             !this.model.files.get('yubikey');
 
         super.render({
@@ -123,6 +124,7 @@ class OpenView extends View {
             canCreate: this.model.settings.canCreate,
             canRemoveLatest: this.model.settings.canRemoveLatest,
             canOpenYubiKey,
+            hasYubiKeys,
             showMore,
             showLogo
         });
@@ -320,7 +322,7 @@ class OpenView extends View {
 
     displayOpenFile() {
         this.$el.addClass('open--file');
-        this.$el.find('.open__settings-key-file').removeClass('hide');
+        this.$el.find('.open__settings-key-file,.open__settings-yubikey').removeClass('hide');
         this.inputEl[0].removeAttribute('readonly');
         this.inputEl[0].setAttribute('placeholder', Locale.openPassFor + ' ' + this.params.name);
         this.focusInput();
@@ -991,8 +993,10 @@ class OpenView extends View {
         if (this.model.settings.canOpenOtpDevice && this.model.settings.yubiKeyShowIcon) {
             const hasYubiKeys = !!UsbListener.attachedYubiKeys.length;
 
-            const icons = this.$el.find('.open__icon-yubikey, .open__settings-yubikey');
-            icons.toggleClass('hide', !hasYubiKeys);
+            this.$el.find('.open__icon-yubikey').toggleClass('hide', !hasYubiKeys);
+            this.$el
+                .find('.open__settings-yubikey')
+                .toggleClass('open__settings-yubikey--present', hasYubiKeys);
 
             if (!hasYubiKeys && this.busy && this.otpDevice) {
                 this.otpDevice.cancelOpen();

app/styles/areas/_open.scss

@@ -108,7 +108,7 @@
             > i {
                 font-size: 3em;
                 @include mobile {
-                    line-height: .8;
+                    line-height: 0.8;
                 }
             }
         }
@@ -184,10 +184,16 @@
     input[type='password'].open__pass-input {
         font-size: $large-pass-font-size;
         margin-bottom: 0;
-        &[readonly] { cursor: pointer; }
+        &[readonly] {
+            cursor: pointer;
+        }
         width: 38vw;
-        @media (max-width: 1000px) { width: 16em; }
-        @include mobile { width: calc(100vw - 20px); }
+        @media (max-width: 1000px) {
+            width: 16em;
+        }
+        @include mobile {
+            width: calc(100vw - 20px);
+        }
     }
 
     &__settings {
@@ -245,6 +251,10 @@
         }
 
         &-yubikey {
+            display: none;
+            &--present {
+                display: block;
+            }
             &-img {
                 fill: var(--muted-color);
                 width: 2em;

app/templates/open.hbs

@@ -90,7 +90,7 @@
                 </i><span class="open__settings-key-file-name">{{res 'openKeyFile'}}</span>
                 {{#if canOpenKeyFromDropbox}}<span class="open__settings-key-file-dropbox"> {{res 'openKeyFileDropbox'}}</span>{{/if}}
             </div>
-            <div class="open__settings-yubikey hide" tabindex="26" title="YubiKey">
+            <div class="open__settings-yubikey {{#if hasYubiKeys}}open__settings-yubikey--present{{/if}} hide" tabindex="26" title="YubiKey">
                 {{{svg 'usb-token' 'open__settings-yubikey-img'}}}
             </div>
         </div>