Fix print styling for 2FA recovery codes page

app/assets/stylesheets/components/_totp-setup.scss

@@ -47,6 +47,12 @@
   &__recovery {
     &-container {
       max-width: 455px;
+
+      @media print {
+        .card {
+          box-shadow: none;
+        }
+      }
     }
 
     &-icon {
@@ -73,4 +79,4 @@
 
 #user_otp_attempt {
   @extend %totp-input;
-}
+}

app/views/layouts/base.html.haml

@@ -18,7 +18,7 @@
     %link{ rel: 'icon', href: '/icons/maskable_icon_x192.png', sizes: '192x192' }
     %link{ rel: 'icon', href: '/images/favicon/favicon-32.png', sizes: '32x32' }
     %title= yield(:title)
-    = stylesheet_link_tag 'application', data: { 'turbo-track': 'reload' }
+    = stylesheet_link_tag 'application', data: { 'turbo-track': 'reload' }, media: 'all'
     = javascript_include_tag 'application', data: { 'turbo-track': 'reload' }, defer: true
     = csrf_meta_tags
     = yield(:og)

app/views/navigation/_main.html.haml

@@ -3,5 +3,5 @@
 = render 'navigation/mobile', notifications: notifications
 
 = render 'modal/ask'
-%button.btn.btn-primary.btn-fab.d-block.d-lg-none{ data: { bs_target: '#modal-ask-followers', bs_toggle: :modal }, type: 'button' }
+%button.btn.btn-primary.btn-fab.d-block.d-lg-none.d-print-none{ data: { bs_target: '#modal-ask-followers', bs_toggle: :modal }, type: 'button' }
   %i.fa.fa-pencil-square-o

app/views/settings/two_factor_authentication/otp_authentication/recovery_keys.html.haml

@@ -4,7 +4,7 @@
       .card
         .card-body
           .d-none.d-print-block.totp-setup__recovery-icon
-            %i.fa.fa-comments
+            %img{ src: "/icons/icon.svg", width: 96 }
           %h1.totp-setup__recovery-title= t(".heading", app_name: APP_CONFIG['site_name'])
 
           %ul.totp-setup__recovery-codes