1 files changed, 60 insertions, 4 deletions

diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index fe084eb9397..14ad06b0ac2 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -286,7 +286,7 @@ table.u2f-registrations {
 }
 
 .user-callout {
-  margin: 0 auto;
+  margin: 20px -5px 0;
 
   .bordered-box {
     border: 1px solid $blue-300;
@@ -295,14 +295,15 @@ table.u2f-registrations {
     position: relative;
     display: flex;
     justify-content: center;
+    align-items: center;
   }
 
   .landing {
-    margin-top: $gl-padding;
-    margin-bottom: $gl-padding;
+    padding: 32px;
 
     .close {
       position: absolute;
+      top: 20px;
       right: 20px;
       opacity: 1;
 
@@ -330,11 +331,20 @@ table.u2f-registrations {
         height: 110px;
         vertical-align: top;
       }
+
+      &.convdev {
+        margin: 0 0 0 30px;
+
+        svg {
+          height: 127px;
+        }
+      }
     }
 
     .user-callout-copy {
       display: inline-block;
       vertical-align: top;
+      max-width: 570px;
     }
   }
 
@@ -348,13 +358,59 @@ table.u2f-registrations {
     .landing {
       .svg-container,
       .user-callout-copy {
-        margin: 0;
+        margin: 0 auto;
         display: block;
 
         svg {
           height: 75px;
         }
+
+        &.convdev {
+          margin: $gl-padding auto 0;
+
+          svg {
+            height: 120px;
+          }
+        }
       }
     }
   }
 }
+
+.nav-wip {
+  border: 1px solid $blue-500;
+  background: $blue-25;
+  padding: $gl-padding;
+  margin-bottom: $gl-padding;
+
+  a {
+    color: $blue-500;
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.gpg-email-badge {
+  display: inline;
+  margin-right: $gl-padding / 2;
+
+  .gpg-email-badge-email {
+    display: inline;
+    margin-right: $gl-padding / 4;
+  }
+
+  .label-verification-status {
+    border-width: 1px;
+    border-style: solid;
+
+    &.verified {
+      @include green-status-color;
+    }
+
+    &.unverified {
+      @include status-color($gray-dark, $gray, $common-gray-dark);
+    }
+  }
+}