From 341c5e4ed84e11cfa68b5235453ae44283e2b244 Mon Sep 17 00:00:00 2001
From: Mikunj <mikunj@live.com.au>
Date: Mon, 3 Dec 2018 13:31:43 +1100
Subject: [PATCH] Updated nickname display modal.

---
 stylesheets/_conversation.scss                | 24 ++++++++++++-------
 stylesheets/_modules.scss                     |  1 +
 stylesheets/_variables.scss                   |  1 +
 .../conversation/ConversationHeader.tsx       |  2 +-
 4 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 8c9c8f669..85d374b97 100644
--- a/stylesheets/_conversation.scss
+++ b/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;
-        border-radius: $border-radius;
-        padding: 5px 8px;
-        border: 1px solid $grey_l2;
+        background-color: $color-loki-green;
+        border-radius: 100px;
+        padding: 5px 15px;
+        border: 1px solid $color-loki-green;
+        color: white;
+        outline: none;
 
         &:hover {
-          background-color: $grey_l2;
-          border-color: $grey_l3;
+          background-color: $color-loki-green-dark;
+          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;
     }
   }
 }
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 2e534ab57..75cab2bed 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -6,6 +6,7 @@
   flex-direction: column;
   align-items: flex-start;
   margin-right: 8px;
+  overflow-x: hidden;
 }
 
 .module-contact-name span {
diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss
index 98236c7d8..3d0ba7ba7 100644
--- a/stylesheets/_variables.scss
+++ b/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
 
diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx
index 490fd541e..5dfd089ee 100644
--- a/ts/components/conversation/ConversationHeader.tsx
+++ b/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>
     );
   }