From 836c779adf886fcbe93a8db9da9b4ace5f356c68 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Thu, 19 Nov 2020 16:53:48 +0100
Subject: [PATCH] feature: modify title o2o

---
 package.json                             |  4 +-
 src/page-messages.pug                    | 14 +++--
 src/styles/base/main.scss                |  2 +-
 src/styles/layout/user/_index.scss       |  2 +-
 src/styles/layout/user/messages.scss     | 13 ++++
 src/styles/layout/user/user-profile.scss | 76 ------------------------
 6 files changed, 25 insertions(+), 86 deletions(-)
 create mode 100644 src/styles/layout/user/messages.scss
 delete mode 100644 src/styles/layout/user/user-profile.scss

diff --git a/package.json b/package.json
index 7aa38bc..7048568 100644
--- a/package.json
+++ b/package.json
@@ -34,9 +34,9 @@
     "test": "cypress run"
   },
   "watch": {
-    "build:css": "src/styles/*",
+    "build:css": "src/styles/**/*",
     "build:manifest": "make-webmanifest.mjs",
-    "build:i18n": "src/locales/*",
+    "build:i18n": "src/locales/**/*",
     "copy:images": "src/fonts/*.js",
     "copy:fonts": "src/images/*.js",
     "copy:sw": "src/sw.js",
diff --git a/src/page-messages.pug b/src/page-messages.pug
index 7487d67..6bf8782 100644
--- a/src/page-messages.pug
+++ b/src/page-messages.pug
@@ -3,14 +3,16 @@
   div.content-box__header
     solid-display(
       bind-resources
-      fields='name, parenthesis, username, endParenthesis'
-      value-parenthesis=" ("
-      value-endParenthesis=")"
+      fields='avatar-container(account.picture), text(name, hyphen, at, username)'
+      value-hyphen=" - "
+      value-at="@"
 
-      class-parenthesis='h1-like'
-      class-endParenthesis='h1-like'
+      widget-account.picture='hubl-user-avatar'
+      class-text="avatar-text"
+      class-avatar-container="avatar-container"
+      class-account.picture='avatar'
       class-name='h1-like'
-      class-username='h1-like'
+      class-hypen='h1-like'
     )
 
   .chat-view
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index f67e73b..ea7b12d 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -406,7 +406,7 @@ h5 {
   margin: 0 1.6rem;
 
   @include breakpoint(lg) {
-  padding: 3rem;
+  padding: 2rem;
   margin: 0;
   }
 
diff --git a/src/styles/layout/user/_index.scss b/src/styles/layout/user/_index.scss
index 5158e8e..865c281 100644
--- a/src/styles/layout/user/_index.scss
+++ b/src/styles/layout/user/_index.scss
@@ -1 +1 @@
-@import 'user-profile';
+@import 'messages';
diff --git a/src/styles/layout/user/messages.scss b/src/styles/layout/user/messages.scss
new file mode 100644
index 0000000..f0ae1ec
--- /dev/null
+++ b/src/styles/layout/user/messages.scss
@@ -0,0 +1,13 @@
+.avatar-container {
+  display: inline-block;
+  margin-right: 10px;
+
+  .avatar {
+    height: 40px;
+    width: 40px;
+  }
+}
+.avatar-text {
+  position: absolute;
+  top: 2.8rem;
+}
\ No newline at end of file
diff --git a/src/styles/layout/user/user-profile.scss b/src/styles/layout/user/user-profile.scss
deleted file mode 100644
index 8a2be67..0000000
--- a/src/styles/layout/user/user-profile.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-/*.user-profile__container {
-
-  .user-bio {
-    display: grid;
-    grid-gap: 1rem;
-    grid-template-areas: "avatar name"
-      "avatar information";
-    grid-template-columns: minmax(300px, 400px) 2fr;
-
-    .avatar-display {
-      grid-area: avatar;
-      overflow: hidden;
-      position: relative;
-
-      img {
-        border-radius: 50%;
-        height: 300px;
-        object-fit: cover;
-        overflow: hidden;
-        object-position: center;
-        width: 300px;
-      }
-    }
-
-    .name-diplay {
-      grid-area: name;
-
-      [name='user-name-groups'] {
-        align-items: baseline;
-        align-self: end;
-        display: flex;
-
-        solid-multiple {
-          display: flex;
-          padding-left: 1.4rem;
-
-          hubl-groups-name {
-            @extend %tag-role;
-          }
-        }
-      }
-    }
-
-    .info-form {
-      grid-area: information; */
-
-      /* ces styles disparaitront lorsque l'on aura la fonctionnalité pour uploader une photo */
-      /*[name="account.picture"] {
-        margin-bottom: 1rem;
-      }
-
-      hubl-instruction {
-        margin-left: 1rem;
-
-        span {
-          color: $color-233-18-29;
-          font-weight: bold;
-        }
-
-        p {
-          margin-left: 1rem;
-        }
-      }*/
-      /* Fin commentaire sur upload photos */
-    /*}
-
-    [name^="inline-"] {
-      display: flex;
-      justify-content: flex-start;
-
-      >*:not(:last-child) {
-        margin-right: 3rem;
-      }
-    }
-  }
-}*/