feature: modify title o2o

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",

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

src/styles/base/main.scss

@@ -406,7 +406,7 @@ h5 {
   margin: 0 1.6rem;
 
   @include breakpoint(lg) {
-  padding: 3rem;
+  padding: 2rem;
   margin: 0;
   }
 

src/styles/layout/user/_index.scss

@@ -1 +1 @@
-@import 'user-profile';
+@import 'messages';

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;
+}

src/styles/layout/user/user-profile.scss

@@ -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;
-      }
-    }
-  }
-}*/