3 files changed, 41 insertions, 0 deletions
diff --git a/ui/app/css/itcss/components/editable-label.scss b/ui/app/css/itcss/components/editable-label.scss
new file mode 100644
index 000000000..13570610c
--- /dev/null
+++ b/ui/app/css/itcss/components/editable-label.scss
@@ -0,0 +1,34 @@
+.editable-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  &__value {
+    max-width: 250px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &__input {
+    width: 250px;
+    font-size: 14px;
+    text-align: center;
+
+    &--error {
+      border: 1px solid $monzo;
+    }
+  }
+
+  &__icon-wrapper {
+    position: absolute;
+    margin-left: 10px;
+    left: 100%;
+  }
+
+  &__icon {
+    cursor: pointer;
+    color: $dusty-gray;
+  }
+}
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index 03c59cacf..4ba02be67 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -47,3 +47,5 @@
 @import './request-signature.scss';
 
 @import './account-dropdown-mini.scss';
+
+@import './editable-label.scss';
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index cd1039d0a..b69bd5c7e 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -294,6 +294,11 @@
   font-size: 18px;
 }
 
+.account-modal__name {
+  margin-top: 9px;
+  font-size: 20px;
+}
+
 .private-key-password {
   display: flex;
   flex-direction: column;