From d2ba3754910f4b52825ed8045070369eb2c3a6e1 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 19 Dec 2019 10:34:08 +0100
Subject: [PATCH] Improve profile UI

---
 www/common/common-ui-elements.js |  4 ++--
 www/profile/app-profile.less     | 14 ++++++++++----
 www/profile/inner.js             |  4 ++--
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 64ae9dd0d..27458c9f9 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -2073,12 +2073,12 @@ define([
         for (var k in actions) {
             $('<button>', {
                 'data-type': k,
-                'class': 'fa ' + actions[k].icon,
+                'class': 'pure-button fa ' + actions[k].icon,
                 title: Messages['mdToolbar_' + k] || k
             }).click(onClick).appendTo($toolbar);
         }
         $('<button>', {
-            'class': 'fa fa-question cp-markdown-help',
+            'class': 'pure-button fa fa-question cp-markdown-help',
             title: Messages.mdToolbar_help
         }).click(function () {
             var href = Messages.mdToolbar_tutorial;
diff --git a/www/profile/app-profile.less b/www/profile/app-profile.less
index 61b3bbbe6..9371a714a 100644
--- a/www/profile/app-profile.less
+++ b/www/profile/app-profile.less
@@ -25,6 +25,7 @@
             flex: 1;
             display: flex;
             flex-flow: column;
+            align-items: start;
         }
     }
     #cp-app-profile-avatar {
@@ -80,8 +81,6 @@
         text-align: center;
     }
     #cp-app-profile-displayname, #cp-app-profile-link {
-        width: 100%;
-        height: 40px;
         margin: 10px 0;
         input {
             width: 100%;
@@ -114,6 +113,14 @@
         }
         .cp-app-profile-link-code {
             display: none;
+            min-width: 500px;
+            input {
+                flex: 1;
+                min-width: 0;
+            }
+            button {
+                height: 48px !important;
+            }
         }
         & > button:empty {
             margin-left: 25px !important;
@@ -139,8 +146,7 @@
         float: right;
     }
     .cp-app-profile-viewprofile-button {
-        margin-bottom: 20px;
-        width: 300px;
+        margin-bottom: 5px !important;
     }
     #cp-app-profile-description {
         position: relative;
diff --git a/www/profile/inner.js b/www/profile/inner.js
index a37991ad9..d9e874ccb 100644
--- a/www/profile/inner.js
+++ b/www/profile/inner.js
@@ -137,7 +137,7 @@ define([
         }, Messages.profile_addLink);
         APP.$linkEdit = $(button);
         $block.append(button);
-        var save = h('button.btn.btn-success', Messages.settings_save);
+        var save = h('button.btn.btn-primary', Messages.settings_save);
         var text = h('input');
         var code = h('div.cp-app-profile-link-code', [
             text,
@@ -149,7 +149,7 @@ define([
         $block.append(div);
         $(button).click(function () {
             $(text).val(APP.$link.attr('href'));
-            $(code).show();
+            $(code).css('display', 'flex');
             APP.editor.refresh();
             $(button).hide();
         });