Merge pull request #7109 from mozilla/recovery-code-style r=@vbudhram

style(TOTP): add border to the recovery codes in TOTP

Author: Shane Tomlinson

app/styles/_variables.scss

@@ -203,6 +203,8 @@ $close-button-color: $color-grey-spinner;
 $close-button-zindex: $fox-logo-zindex + 1;
 
 $recovery-code-color: #666;
+$recovery-code-background-color: #fbfbfb;
+$recovery-code-border-color: #e6e6e6;
 
 $image-url-path: '/images/' !default;
 

app/styles/modules/_settings-totp.scss

@@ -86,13 +86,16 @@
     margin-bottom: 20px;
 
     .recovery-code {
+      background-color: $recovery-code-background-color;
+      border-color: $recovery-code-border-color;
+      border-style: dotted;
+      border-width: 2px;
       color: $recovery-code-color;
       display: inline-block;
       font-family: monospace;
-      font-size: 2em;
-      @include respond-to('small') {
-        font-size: 1.5em;
-      }
+      font-size: 1.2em;
+      margin-bottom: 6px;
+      padding: 8px;
       text-transform: uppercase;
       width: 49%;
     }