Tweak UI around new recovery code (#747)

**Why**: needed a little love
18F · Nov 18, 2016 · b579fe9 · b579fe9
1 parent 9b91b8f
commit b579fe9
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/app/assets/stylesheets/components/_alert.scss b/app/assets/stylesheets/components/_alert.scss
@@ -38,4 +38,10 @@ $ico-offset: -10px;
   &::before { background-image: url(image-path('alert/ico-exclamation.svg')); }
 }
 
+.alert-warning {
+  background-color: #fff1d2;
+
+  &::before { background-image: url(image-path('alert/ico-warning.svg')); }
+}
+
 .alert-blank::before { content: none; }
diff --git a/app/views/profile/index.html.slim b/app/views/profile/index.html.slim
@@ -2,9 +2,9 @@
 - btn_cls = 'btn btn-primary p0 w-60p bg-light-blue blue h6 regular border-box center'
 
 - if @recovery_code
-  p.mt-tiny.mb0 = t('idv.messages.recovery_code')
-  .mt4.mb4.py2.px3.inline-block.fs-20p.border.border-dashed.monospace = @recovery_code
-  br
+  .mb4.alert.alert-warning
+    p = t('idv.messages.recovery_code')
+    .mb1.py1.px2.inline-block.fs-20p.regular.monospace.bg-white.rounded = @recovery_code
 
 - if @decrypted_pii
   h2.h3.my0.mr1.inline-block = t('headings.profile.profile_info')