Updated nickname display modal.

stylesheets/_conversation.scss

@@ -368,19 +368,20 @@
     box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
 
     .buttons {
-      margin-top: 10px;
 
       button {
         float: right;
         margin-left: 10px;
-        background-color: $grey_l;
+        background-color: $color-loki-green;
-        border-radius: $border-radius;
+        border-radius: 100px;
-        padding: 5px 8px;
+        padding: 5px 15px;
-        border: 1px solid $grey_l2;
+        border: 1px solid $color-loki-green;
+        color: white;
+        outline: none;
 
         &:hover {
-          background-color: $grey_l2;
+          background-color: $color-loki-green-dark;
-          border-color: $grey_l3;
+          border-color: $color-loki-green-dark;
         }
       }
     }
@@ -388,10 +389,16 @@
     input {
       width: 100%;
       padding: 8px;
-      margin-bottom: 4px;
+      margin-bottom: 15px;
+      border: 0;
+      outline: none;
+      border-radius: 100px;
+      background-color: $color-loki-light-gray;
     }
 
     h4 {
+      margin-top: 8px;
+      margin-bottom: 16px;
       white-space: -moz-pre-wrap; /* Mozilla */
       white-space: -hp-pre-wrap; /* HP printers */
       white-space: -o-pre-wrap; /* Opera 7 */
@@ -406,6 +413,7 @@
       font-style: italic;
       color: $grey;
       font-size: 12px;
+      margin-bottom: 16px;
     }
   }
 }

stylesheets/_modules.scss

@@ -6,6 +6,7 @@
   flex-direction: column;
   align-items: flex-start;
   margin-right: 8px;
+  overflow-x: hidden;
 }
 
 .module-contact-name span {

stylesheets/_variables.scss

@@ -30,6 +30,7 @@ $color-loki-light-gray: #e9e9e9;
 $color-loki-dark-gray: #323232;
 $color-loki-extra-dark-gray: #101010;
 $color-loki-green: #3bd110;
+$color-loki-green-dark: #32b10e;
 
 // New colors
 

ts/components/conversation/ConversationHeader.tsx

@@ -107,7 +107,7 @@ export class ConversationHeader extends React.Component<Props> {
           profileName={profileName}
           i18n={i18n}
         />
-        {isKeysPending ? ' (pending)' : null}
+        {isKeysPending ? '(pending)' : null}
       </div>
     );
   }