From bd7f587aa7662d2231397a1153a8e392289ca509 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric.ackermann@smile.fr>
Date: Thu, 28 Nov 2019 14:52:50 +1100
Subject: [PATCH] Center avatar and display name in UserDetailsDialog

---
 stylesheets/_index.scss             | 4 ++--
 ts/components/EditProfileDialog.tsx | 4 ++--
 ts/components/UserDetailsDialog.tsx | 8 ++++++--
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index e1718001a..f5156f5dc 100644
--- a/stylesheets/_index.scss
+++ b/stylesheets/_index.scss
@@ -42,12 +42,12 @@
     margin-bottom: 1em;
   }
 
-  .avatar-upload {
+  .avatar-center {
     display: flex;
     justify-content: center;
   }
 
-  .avatar-upload-inner {
+  .avatar-center-inner {
     display: flex;
   }
 
diff --git a/ts/components/EditProfileDialog.tsx b/ts/components/EditProfileDialog.tsx
index 56bf25f8e..4c103b56d 100644
--- a/ts/components/EditProfileDialog.tsx
+++ b/ts/components/EditProfileDialog.tsx
@@ -64,8 +64,8 @@ export class EditProfileDialog extends React.Component<Props, State> {
 
     return (
       <div className="content">
-        <div className="avatar-upload">
-          <div className="avatar-upload-inner">
+        <div className="avatar-center">
+          <div className="avatar-center-inner">
             {this.renderAvatar()}
             <div className="upload-btn-background">
               <input
diff --git a/ts/components/UserDetailsDialog.tsx b/ts/components/UserDetailsDialog.tsx
index 3c59518e1..bec36e7be 100644
--- a/ts/components/UserDetailsDialog.tsx
+++ b/ts/components/UserDetailsDialog.tsx
@@ -35,8 +35,12 @@ export class UserDetailsDialog extends React.Component<Props> {
 
     return (
       <div className="content">
-        {this.renderAvatar()}
-        <span className="profile-name">{this.props.profileName}</span>
+        <div className="avatar-center">
+          <div className="avatar-center-inner">
+            {this.renderAvatar()}
+          </div>
+        </div>
+        <div className="profile-name">{this.props.profileName}</div>
         <div className="message">{this.props.pubkey}</div>
 
         <div className="buttons">