Merge branch 'master' of https://git.startinblox.com/applications/hubl into feature/resource-component

2020-12-02 14:48:34 +01:00
parent a640f565db 354807c512
commit f86dff4081
112 changed files with 14045 additions and 2004 deletions
--- a/src/components/hubl-reactivity.js
+++ b/src/components/hubl-reactivity.js
@ -1,6 +1,4 @@
-import { store } from 'https://unpkg.com/@startinblox/core@0.10';
-import { Sib } from "https://unpkg.com/@startinblox/core@0.10/dist/libs/Sib.js";
-import { StoreMixin } from "https://unpkg.com/@startinblox/core@0.10/dist/mixins/storeMixin.js";
+import { store, Sib, StoreMixin } from 'https://cdn.skypack.dev/@startinblox/core@0.13';

 export const HublReactivity = {
  name: 'hubl-reactivity',
@ -13,21 +11,17 @@ export const HublReactivity = {
        this.subscribe();
      }
    },
-    dataSrc: {
-      type: String,
-      default: '',
-      callback: async function (value) {
-        this.resourceId = null;
-        if (this.nestedField) {
-          const resource = store.get(value) || await store.getData(value, this.context);
-          const nestedResource = await resource[this.nestedField]
-          this.resourceId = nestedResource ? nestedResource['@id'] : null;
-        } else {
-          this.resourceId = value;
-        }
-        this.subscribe();
-      }
-    },
+  },
+  async fetchData(value) {
+    this.resourceId = null;
+    if (this.nestedField) {
+      const resource = store.get(value) || await store.getData(value, this.context);
+      const nestedResource = await resource[this.nestedField]
+      this.resourceId = nestedResource ? nestedResource['@id'] : null;
+    } else {
+      this.resourceId = value;
+    }
+    this.subscribe();
  },
  subscribe() {
    if (this.resourceId && this.targetSrc) {
--- a/src/components/hubl-search-users.js
+++ b/src/components/hubl-search-users.js
@ -1,4 +1,4 @@
-import { widgetFactory } from 'https://unpkg.com/@startinblox/core@0.10/dist/widgets/widget-factory.js';
+import { widgetFactory } from 'https://cdn.skypack.dev/@startinblox/core@0.13';

 const HublSearchUsers = widgetFactory(
  'hubl-search-users',
--- a/src/components/hubl-status.js
+++ b/src/components/hubl-status.js
@ -1,6 +1,5 @@
-import { widgetFactory } from 'https://unpkg.com/@startinblox/core@0.10/dist/widgets/widget-factory.js';
-import { importCSS } from 'https://unpkg.com/@startinblox/core@0.10/dist/libs/helpers.js';
-import SlimSelect from 'https://dev.jspm.io/slim-select@1.23';
+import { widgetFactory, Helpers } from 'https://cdn.skypack.dev/@startinblox/core@0.13';
+import SlimSelect from 'https://cdn.skypack.dev/slim-select@1.23';

 const HublStatus = widgetFactory(
  'hubl-status',
@ -11,10 +10,10 @@ const HublStatus = widgetFactory(
      name="\${name}">
      <option
        value="Public"
-        \${value=="Public" ? 'selected' : ''}>Public</option>
+        \${value=="Public" ? 'selected' : ''} data-trans="hublStatus.public">Public</option>
      <option
        value="Private"
-        \${value=="Private" ? 'selected' : ''}>Privé</option>
+        \${value=="Private" ? 'selected' : ''} data-trans="hublStatus.private">Privé</option>
    </select>
  </label>`,
  '',
@ -22,7 +21,7 @@ const HublStatus = widgetFactory(
    let select = formWidget.querySelector('select');
    if (!select) return;
    const slimSelect = new SlimSelect({select: select});
-    importCSS('https://dev.jspm.io/slim-select/dist/slimselect.min.css');
+    Helpers.importCSS('https://dev.jspm.io/slim-select/dist/slimselect.min.css');
    select.addEventListener('change', () => slimSelect.render());
  },
 );
--- a/src/components/sentry.js
+++ b/src/components/sentry.js
@ -0,0 +1,8 @@
+if(typeof Sentry !== 'undefined') {
+    Sentry.init({
+        dsn: 'https://b4b29557689049a39168599577adb940@sentry.startinblox.com/4',
+        integrations: [new Sentry.Integrations.BrowserTracing()],
+        environment: document.location.hostname,
+        tracesSampleRate: 0.2,
+    });
+}
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@ -1,46 +1,55 @@
+script(src="https://browser.sentry-cdn.com/5.25.0/bundle.tracing.min.js" defer)
+
+script(type="module" src="/components/sentry.js" defer)
 script(type="module" src="/components/hubl-search-users.js" defer)
 script(type="module" src="/components/hubl-status.js" defer)
 script(type="module" src="/components/hubl-reactivity.js" defer)

-script(type="module" src="https://unpkg.com/@startinblox/core@0.10" defer)
+script(type="module" src="https://cdn.skypack.dev/@startinblox/core@0.13" defer)
 //- script(type="module" src="/lib/sib-core/dist/index.js" defer)

-script(type="module" src="https://unpkg.com/@startinblox/oidc@0.9" defer)
-//- script(type="module" src="/lib/sib-oidc/index.js" defer)
+script(type="module" src="https://cdn.skypack.dev/@startinblox/oidc@0.11" defer)
+//- script(type="module" src="/lib/sib-auth/index.js" defer)

-script(type="module" src="https://unpkg.com/@startinblox/router@0.8" defer)
-    //- script(type="module" src="/lib/solid-router/src/index.js" defer)
+script(type="module" src="https://cdn.skypack.dev/@startinblox/router@0.11" defer)
+//- script(type="module" src="/lib/sib-router/src/index.js" defer)

-script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.6.2" defer)
-    //- script(type="module" src="/lib/sib-notifications/index.js" defer)
+script(type="module" src="https://cdn.skypack.dev/@startinblox/component-notifications@0.8" defer)
+//- script(type="module" src="/lib/sib-notifications/index.js" defer)

-if (endpoints.events || (endpoints.get && endpoints.get.events)) && (endpoints.typeevents || (endpoints.get && endpoints.get.typeevents))
-    script(type="module" src="https://unpkg.com/@startinblox/component-event@1.1" defer)
+//- DISABLED - please migrate to dev.skypack.dev + upgrade to core@0.13
+//- if (endpoints.events || (endpoints.get && endpoints.get.events)) && (endpoints.typeevents || (endpoints.get && endpoints.get.typeevents))
+//-     script(type="module" src="https://cdn.skypack.dev/@startinblox/component-event@1.2" defer)
    //- script(type="module" src="/lib/sib-event-component/sib-event.js" defer)

-if (endpoints.resources || (endpoints.get && endpoints.get.resources)) && (endpoints.resourceskeywords || (endpoints.get && endpoints.get.resourceskeywords)) && (endpoints.resourcestypes || (endpoints.get && endpoints.get.resourcestypes))
-    script(type="module" src="https://unpkg.com/@startinblox/component-resource@1.0" defer)
+//- DISABLED - please migrate to dev.skypack.dev + upgrade to core@0.13
+//- if (endpoints.resources || (endpoints.get && endpoints.get.resources)) && (endpoints.resourceskeywords || (endpoints.get && endpoints.get.resourceskeywords)) && (endpoints.resourcestypes || (endpoints.get && endpoints.get.resourcestypes))
+//-     script(type="module" src="https://cdn.skypack.dev/@startinblox/component-resource@1.0" defer)
    //- script(type="module" src="/lib/sib-resource/sib-resource.js" defer)

 if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
-    script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.6" defer)
+    script(type="module" src="https://cdn.skypack.dev/@startinblox/component-job-board@1.2" defer)
    //- script(type="module" src="/lib/solid-job-board/dist/index.js" defer)

 if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
-    script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.7" defer)
+    script(type="module" src="https://cdn.skypack.dev/@startinblox/component-directory@1.2" defer)
    //- script(type="module" src="/lib/solid-directory/dist/index.js" defer)

 if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
-    script(type="module" src="https://unpkg.com/@startinblox/component-dashboard@0.3" defer)
+    script(type="module" src="https://cdn.skypack.dev/@startinblox/component-dashboard@0.6" defer)
    //- script(type="module" src="/lib/solid-dashboard/dist/index.js" defer)

 if endpoints.users || (endpoints.get && endpoints.get.users)
-    script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.8" defer)
+    script(type="module" src="https://cdn.skypack.dev/@startinblox/component-chat@1.4" defer)
    //- script(type="module" src="/lib/solid-xmpp-chat/dist/index.js" defer)

-if endpoints.polls || (endpoints.get && endpoints.get.polls)
-    script(type="module" src="https://unpkg.com/@startinblox/component-poll@1.0" defer)
-    //- script(type="module" src="/lib/sib-event-component/sib-event.js" defer)
+//- DISABLED - please migrate to dev.skypack.dev + upgrade to core@0.13
+//- if endpoints.polls || (endpoints.get && endpoints.get.polls)
+    //- script(type="module" src="https://cdn.skypack.dev/@startinblox/component-poll@1.0" defer)
+    //- script(type="module" src="/lib/sib-polls-component/index.js" defer)
+
+//- swal2 does not work with skypack
+script(src="https://cdn.jsdelivr.net/npm/sweetalert2@10")

 script(src="/scripts/index.js" defer)

--- a/src/header.pug
+++ b/src/header.pug
@ -1,6 +1,9 @@
-.logo
-  solid-link(next='dashboard')
-    img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '32px'}`)
+.header-left
+  .logo
+    solid-link(next='dashboard')
+      img(src=`${clientLogo || '/images/logo.webp'}` style=`max-height:${clientLogoHeight || '74px'}`)
+
+  span.beta-tag(data-trans='header.beta')

 solid-notifications.notLoggedIn(
  nested-field="inbox"
@ -8,8 +11,8 @@ solid-notifications.notLoggedIn(
 )

 //- Templates for notifications from circles and from other users
-include views/circle/page-circle-notifications.pug
-include views/user/page-user-notifications.pug
+include views/notifications/message-circle.pug
+include views/notifications/message-private.pug

 include templates/hubl-user-avatar.pug

@ -27,18 +30,18 @@ details#user-controls.notLoggedIn
      ul
        if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
          li
-            solid-link(next='profile') Mon profil
+            solid-link(next='profile' data-trans='header.myProfile')
        li
-          solid-link(next='admin') Administration
+          solid-link(next='admin' data-trans='header.admin')
        li
-          solid-link(next='about') A propos
-      button(role='log out' onclick="document.querySelector('sib-auth').logout();") Se déconnecter
+          solid-link(next='about' data-trans='header.about')
+      button(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut')

-button.loggedIn(role='log in' onclick="document.querySelector('sib-auth').login();") Se connecter
+button.loggedIn(role='log in' onclick="document.querySelector('sib-auth').login();" data-trans='header.logIn')

 button.notLoggedIn.mobile-menu-icon.icon-menu#toggleMainMenu

-sib-auth(style='display:none!important')
+sib-auth(style='display:none!important', auto-login)
  sib-auth-provider(
    data-authority=`${authority}`
    data-id=`${authorityName || "authority"}`
--- a/src/images/favicon.png
+++ b/src/images/favicon.png
--- a/src/images/favicon.webp
+++ b/src/images/favicon.webp
--- a/src/images/hubl-icon-192.png
+++ b/src/images/hubl-icon-192.png
--- a/src/images/hubl-icon-512.png
+++ b/src/images/hubl-icon-512.png
--- a/src/images/logo.png
+++ b/src/images/logo.png
--- a/src/images/logo.webp
+++ b/src/images/logo.webp
--- a/src/index.pug
+++ b/src/index.pug
@ -9,11 +9,11 @@ html(lang="en")
    if clientFavicon
      link(rel="icon" type="image/png" href=`${clientFavicon}`)
    else
-      link(rel="icon" type="image/png" href="/images/favicon.png")
+      link(rel="icon" type="image/webp" href="/images/favicon.webp")
    include dependencies.pug
    if clientCSS
      link(rel='stylesheet', href=`${clientCSS}`)
-
+    link(rel="manifest" href="/manifest.webmanifest")
  body

    .wrapper
@ -27,15 +27,15 @@ html(lang="en")
      main#viewport.content.notLoggedIn

        if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
-          #dashboard(hidden).no-sidebar.with-padding
+          #dashboard(hidden, data-view="dashboard").no-sidebar.with-padding
            include page-dashboard.pug

        if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
-          #members(hidden).no-sidebar.with-padding
+          #members(hidden, data-view="members", no-render).no-sidebar.with-padding
            include page-directory.pug

        if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
-          #job-offers(hidden).no-sidebar.with-padding
+          #job-offers(hidden, data-view="job-offers", no-render).no-sidebar.with-padding
            if (endpoints.post && endpoints.post.joboffers) && (endpoints.get && endpoints.get.joboffers)
              hubl-reactivity(data-src=`${endpoints.post.joboffers}current/` target-src=`${endpoints.get.joboffers}`)
              hubl-reactivity(data-src=`${endpoints.post.joboffers}expired/` target-src=`${endpoints.get.joboffers}`)
@ -49,7 +49,7 @@ html(lang="en")
            include page-job-offers.pug

        if endpoints.projects || (endpoints.get && endpoints.get.projects)
-          #project(hidden).with-sidebar
+          #project(hidden, data-view="project", no-render).with-sidebar
            if (endpoints.post && endpoints.post.projects) && (endpoints.get && endpoints.get.projects)
              hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${endpoints.get.projects}`)
              hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${endpoints.get.projects}`)
@ -61,7 +61,7 @@ html(lang="en")
            include page-project.pug

        if endpoints.circles || (endpoints.get && endpoints.get.circles)
-          #circle(hidden).with-sidebar
+          #circle(hidden, data-view="circle", no-render).with-sidebar
            if (endpoints.post && endpoints.post.circles) && (endpoints.get && endpoints.get.circles)
              hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src=`${endpoints.get.circles}`)
              hubl-reactivity(data-src=`${endpoints.post.circles}` target-src=`${endpoints.get.circles}`)
@ -72,29 +72,29 @@ html(lang="en")
            hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}joinable/`)
            include page-circle.pug
        if endpoints.users || (endpoints.get && endpoints.get.users)
-          #messages(hidden).with-sidebar
+          #messages(hidden, data-view="messages", no-render).with-sidebar
            include page-messages.pug
 						
        if endpoints.polls || (endpoints.get && endpoints.get.polls)
-          #polls(hidden).with-sidebar
+          #polls(hidden, data-view="polls", no-render).with-sidebar
            include page-polls.pug

        if endpoints.events || (endpoints.get && endpoints.get.events)
-          #events(hidden)
+          #events(hidden, data-view="events", no-render)
            include page-events.pug

        if endpoints.resources || (endpoints.get && endpoints.get.resources)
-          #resources(hidden)
+          #resources(hidden, data-view="resources", no-render)
            include page-resources.pug

-        #admin(hidden).with-sidebar
+        #admin(hidden, data-view="admin", no-render).with-sidebar
          include page-admin.pug

-        #about(hidden).no-sidebar.with-padding
+        #about(data-view="about", no-render).no-sidebar.with-padding
          include page-about.pug
          
        if (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.uploads || (endpoints.post && endpoints.post.uploads)) && (endpoints.users || (endpoints.post && endpoints.post.users))
-          #profile(hidden).no-sidebar
+          #profile(hidden, data-view="profile", no-render).no-sidebar
            include page-profile.pug
    
    if analytics
--- a/src/locales/en.json
+++ b/src/locales/en.json
@ -0,0 +1,208 @@
+{
+  "header": {
+    "beta": "Beta",
+    "myProfile": "My profile",
+    "admin": "Administration",
+    "about": "About",
+    "logOut": "Logout",
+    "logIn": "Log-in"
+  },
+  "menuLeft": {
+    "emptyCircleProject": {
+      "notPartOf": "You're not part of",
+      "createNew": "To create a new one, you can go in the",
+      "adminPanel": "administration panel",
+      "project": "project",
+      "circle": "circle"
+    },
+    "dashboard": "Dashboard",
+    "events": "Events",
+    "gov": "Governance",
+    "resources": "Resources",
+    "jobBoard": "Job offers",
+    "profileDirectory": "Profiles directory",
+    "projects": "Projects",
+    "circles": "Circles",
+    "messages": "Messages",
+    "search": "Search..."
+  },
+  "about": {
+    "title": "About",
+    "card1": {
+      "subTitle": "This application is developed by Startin'blox",
+      "paragraph1": "Startin'blox is a cooperative that develops open source tools to easily and cheaply build federated and interoperable applications based on the latest web standards pushed by the SOLID project.",
+      "paragraph2": "Its mission is to empower users by enabling them to regain control of their digital tools and benefit from a network effect within a chosen ecosystem in order to emancipate themselves from large platforms."
+    },
+    "card2": {
+      "title": "Contact us",
+      "paragraph-1": "You want to contribute, report a bug, suggest an improvement, work with us?",
+      "link": "Contact"
+    }
+  },
+  "admin": {
+    "menuRight": {
+      "fold": "Fold the menu",
+      "community": "Communities",
+      "circles": "Circles",
+      "projects": "Projects"
+    }
+  },
+  "dashboard": {
+    "title": "Dashboard"
+  },
+  "circle": {
+    "menuRight": {
+      "buttonMobile": "MENU",
+      "fold": "Fold the menu",
+      "chat": "Chat",
+      "information": "Information",
+      "resources": "Resources",
+      "events": "Events",
+      "polls": "Polls"
+    },
+    "create": {
+      "backlink": "Back",
+      "title": " Create a circle",
+      "labelStatus": "Statut du circle",
+      "labelName": "Circle name *",
+      "labelDescription": "Circle headline *",
+      "buttonSubmit": "Save"
+    },
+    "edit": {
+      "buttonDelete": "Remove",
+      "backlink": "Back",
+      "title": "Edit your circle",
+      "labelStatus": "Circle status",
+      "labelName": "Circle name *",
+      "labelOwner": "Admin *",
+      "labelDescription": "Circle headline *",
+      "subTitle": "Members list :",
+      "tableHeader1": "Name",
+      "tableHeader2": "Access",
+      "buttonSubmit": "Save",
+      "buttonAddMember": "Add a member"
+    },
+    "list": {
+      "title": "Administration",
+      "buttonMobile": "MENU",
+      "subTitle": "Circles",
+      "buttonCreate": " Create a circle",
+      "tableHeader1": "Name",
+      "tableHeader2": "Admins",
+      "tableHeader3": "Join",
+      "buttonQuit": "Leave",
+      "buttonJoin": "Join"
+    },
+    "left": {
+      "paragraphQuit": "You left this circle.",
+      "paragraphJoin": "To join it again, go to the panel",
+      "paragraphContact": "or contact an admin.",
+      "admin": "administration"
+    },
+    "profile": {
+      "creationDate": "Creation date : ",
+      "buttonModify": "Edit and add a member",
+      "buttonAdd": "Add a member",
+      "buttonDelete": "Remove the circle",
+      "buttonQuit": "Leave the circle",
+      "buttonJoin": "Join the circle",
+      "subTitle": "Members :"
+    }
+  },
+  "communities": {
+    "title": "Administration",
+    "menuMobile": "MENU",
+    "linkInvite": "Invite a new user",
+    "noPermission": "Member, no permission",
+    "subTitle": "Communities",
+    "tableHeader1": "Name",
+    "tableHeader2": "Action"
+  },
+  "project": {
+    "menuRight": {
+      "buttonMobile": "MENU",
+      "fold": "Fold the menu",
+      "chat": "Chat",
+      "information": "Information"
+    },
+    "create": {
+      "backlink": "Back",
+      "title": " Create a nouveau project",
+      "labelName": "Project name*",
+      "labelCustomer": "Customer name*",
+      "labelCaptain": "Project captain*",
+      "buttonSubmit": "Save"
+    },
+    "edit": {
+      "buttonDelete": "Remove",
+      "backlink": "Back",
+      "title": "Edit your project",
+      "labelName": "Project name *",
+      "labelCustomer": "Customer name *",
+      "subTitle": "Team members :",
+      "tableHeader1": "Name",
+      "tableHeader2": "Access",
+      "buttonSubmit": "Save",
+      "buttonAddMember": "Add a member"
+    },
+    "modifyPicture": {
+      "backlink": "Back",
+      "title": "Modify the project picture"
+    },
+    "list": {
+      "title": "Administration",
+      "buttonMobile": "MENU",
+      "subTitle": "Projects",
+      "buttonCreate": "Create a new project",
+      "tableHeader1": "Name",
+      "tableHeader2": "Admins",
+      "tableHeader3": "Captains",
+      "tableHeader4": "Join",
+      "buttonQuit": "Leave",
+      "buttonJoin":"Join"
+    },
+    "left": {
+      "paragraphQuit": "You left this project.",
+      "paragraphJoin": "This is a private project. To join it again, go to the panel",
+      "paragraphContact": "and request an invitation.",
+      "admin": "administration"
+    },
+    "profile": {
+      "creationDate": "Creation date : ",
+      "buttonModify": "Edit and add a member",
+      "buttonAdd": "Add a member",
+      "buttonDelete": "Delete the project",
+      "buttonQuit": "Leave the project",
+      "buttonJoin": "Join the project",
+      "captain": "Captain :",
+      "subTitle": "Team :"
+    }
+  },
+  "user": {
+    "create": {
+      "backlink": "Back",
+      "title": "Invite a user to ",
+      "labelUsername": "Username*",
+      "labelUsernameTitle": "Alphanumeric characters only",
+      "labelEmail": "E-mail *",
+      "labelFirstname": "Firstname *",
+      "labelLastname": "Lastname *",
+      "buttonSubmit": "Invite"
+    }
+  },
+  "notification": {
+    "circle": {
+      "in": "in"
+    },
+    "private": {
+      "private": "in private"
+    }
+  },
+  "template-captain": {
+    "isLead": "Captain"
+  },
+  "hublStatus": {
+    "private": "Private",
+    "public": "Public"
+  }
+}
--- a/src/locales/es.json
+++ b/src/locales/es.json
@ -0,0 +1,208 @@
+{
+  "header": {
+    "beta": "Beta",
+    "myProfile": "Mi perfil",
+    "admin": "Administración",
+    "about": "Acerca de",
+    "logOut": "Cerrar sesión",
+    "logIn": "Iniciar sesión"
+    },
+  "menuLeft": {
+    "emptyCircleProject": {
+      "notPartOf": "No eres parte de ninguno",
+      "createNew": "Para crear uno nuevo, puede ir al ",
+      "adminPanel": "panel de administración",
+      "project": "proyecto",
+      "circle": "círculo"
+    },
+    "dashboard": "Panel de control",
+    "events": "Eventos",
+    "gov": "Gobernanza",
+    "resources": "Recursos",
+    "jobBoard": "Ofertas de trabajo",
+    "profileDirectory": "Directorio de miembrxs",
+    "projects": "Proyectos",
+    "circles": "Círculos",
+    "messages": "Mensajes",
+    "search": "Buscar..."
+  },
+  "about": {
+    "title": "Acerca de",
+    "card1": {
+      "subTitle": "Esta aplicación fue desarrollada por Startin'blox",
+      "paragraph1": "Startin'blox es una cooperativa que desarrolla herramientas gratuitas para construir de manera fácil y económica aplicaciones federadas e interoperables basadas en los últimos estándares web impulsados por el proyecto SOLID.",
+      "paragraph2": "Su misión es devolver el poder a los usuarios permitiéndoles recuperar el control de su herramienta digital y beneficiarse de un efecto de red dentro de un ecosistema elegido para emanciparse de las grandes plataformas."
+    },
+    "card2": {
+      "title": "Contactenos",
+      "paragraph-1": "¿Quieres contribuir, informar de un error, sugerir una mejora, trabajar con nosotrxs?",
+      "link": "Contacto"
+    }
+  },
+  "admin": {
+    "menuRight": {
+      "fold": "Contraer el menú",
+      "community": "Comunidades",
+      "circles": "Círculos",
+      "projects": "Proyectos"
+    }
+  },
+  "dashboard": {
+    "title": "Panel de control"
+  },
+  "circle": {
+    "menuRight": {
+      "buttonMobile": "MENÚ",
+      "fold": "Contraer el menú",
+      "chat": "Chat",
+      "information": "Información",
+      "resources": "Recursos",
+      "events": "Eventos",
+      "polls": "Encuentas"
+    },
+    "create": {
+      "backlink": "Atrás",
+      "title": "Crear un círculo",
+      "labelStatus": "Estado del círculo",
+      "labelName": "Nombre del círculo *",
+      "labelDescription": "Subtítulo del círculo *",
+      "buttonSubmit": "Guardar"
+    },
+    "edit": {
+      "buttonDelete": "Eliminar",
+      "backlink": "Atrás",
+      "title": "Modificá tu círculo",
+      "labelStatus": "Estado del círculo",
+      "labelName": "Nombre del círculo *",
+      "labelOwner": "Administrador/a *",
+      "labelDescription": "Subtítulo del círculo *",
+      "subTitle": "Listado de miembrxs: ",
+      "tableHeader1": "Nombre",
+      "tableHeader2": "Acceso",
+      "buttonSubmit": "Guardar",
+      "buttonAddMember": "Añadir miembrx"
+    },
+    "list": {
+      "title": "Administración",
+      "buttonMobile": "MENÚ",
+      "subTitle": "Círculos",
+      "buttonCreate": "Crear un círculo",
+      "tableHeader1": "Nombre",
+      "tableHeader2": "Administradorxs",
+      "tableHeader3": "Unirse",
+      "buttonQuit": "Salir",
+      "buttonJoin": "Unirse"
+    },
+    "left": {
+      "paragraphQuit": "Dejaste este círculo.",
+      "paragraphJoin": "Para volver a unirse, vaya al panel",
+      "paragraphContact": "o contacte un/a administrador/a",
+      "admin": "de administración"
+    },
+    "profile": {
+      "creationDate": "Fecha de creación: ",
+      "buttonModify": "Editar y agregar un/a miembrx",
+      "buttonAdd": "Agregar un/a miebro",
+      "buttonDelete": "Eliminar el círculo",
+      "buttonQuit": "Salir del círculo",
+      "buttonJoin": "Unirse al círculo",
+      "subTitle": "Miembrxs: "
+    }
+  },
+  "communities": {
+    "title": "Administración",
+    "menuMobile": "MENÚ",
+    "linkInvite": "Invita a un/a nuevx usuarix",
+    "noPermission": "Miembrx sin permiso",
+    "subTitle": "Comunidades",
+    "tableHeader1": "Nombre",
+    "tableHeader2": "Acción"
+  },
+  "project": {
+    "menuRight": {
+      "buttonMobile": "MENÚ",
+      "fold": "Contraer el menú",
+      "chat": "Chat",
+      "information": "Información"
+    },
+    "create": {
+      "backlink": "Atrás",
+      "title": "Crear un proyecto nuevo",
+      "labelName": "Nombre del proyecto *",
+      "labelCustomer": "Nombre del/la clientx *",
+      "labelCaptain": "Líder del proyecto *",
+      "buttonSubmit": "Guardar"
+    },
+    "edit": {
+      "buttonDelete": "Eliminar",
+      "backlink": "Atrás",
+      "title": "Modificar tu proyecto",
+      "labelName": "Nombre del proyecto *",
+      "labelCustomer": "Nombre del/la clientx *",
+      "subTitle": "Lista de miembrxs: ",
+      "tableHeader1": "Nombre",
+      "tableHeader2": "Acceso",
+      "buttonSubmit": "Guardar",
+      "buttonAddMember": "Añadir miembrx"
+    },
+    "modifyPicture": {
+      "backlink": "Atrás",
+      "title": "Cambiar la imagen del proyecto"
+    },
+    "list": {
+      "title": "Administración",
+      "buttonMobile": "MENÚ",
+      "subTitle": "Proyectos",
+      "buttonCreate": "Crear un proyecto nuevo",
+      "tableHeader1": "Nombre",
+      "tableHeader2": "Administradorxs",
+      "tableHeader3": "Líderes",
+      "tableHeader4": "Unirse",
+      "buttonQuit": "Salir",
+      "buttonJoin": "Unirse"
+    },
+    "left": {
+      "paragraphQuit": "Dejaste este proyecto.",
+      "paragraphJoin": "Este es un proyecto privado. Para volver a unirse, vaya al panel",
+      "paragraphContact": "y solicite una invitación.",
+      "admin": "de administración"
+    },
+    "profile": {
+      "creationDate": "Fecha de creación: ",
+      "buttonModify": "Editar y agregar un/a miembrx",
+      "buttonAdd": "Añadir miembrx",
+      "buttonDelete": "Eliminar el proyecto",
+      "buttonQuit": "Salir del proyecto",
+      "buttonJoin": "Unirse al proyecto",
+      "captain": "Líder : ",
+      "subTitle": "Equipo : "
+    }
+  },
+  "user": {
+    "create": {
+      "backlink": "Atrás",
+      "title": "Invitar a un/a usuarix",
+      "labelUsername": "Nombre de usuarix *",
+      "labelUsernameTitle": "Solo caracteres alfanuméricos",
+      "labelEmail": "E-mail *",
+      "labelFirstname": "Nombre *",
+      "labelLastname": "Apellido *",
+      "buttonSubmit": "Invitar"
+    }
+  },
+  "notification": {
+    "circle": {
+      "in": "dentro"
+    },
+    "private": {
+      "private": "en privado"
+    }
+  },
+  "template-captain": {
+    "isLead": "Líder"
+  },
+  "hublStatus": {
+    "private": "Privado",
+    "public": "Público"
+  }
+}
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@ -0,0 +1,208 @@
+{
+  "header": {
+    "beta": "Beta",
+    "myProfile": "Mon profil",
+    "admin": "Administration",
+    "about": "A propos",
+    "logOut": "Se déconnecter",
+    "logIn": "Se connecter"
+    },
+  "menuLeft": {
+    "emptyCircleProject": {
+      "notPartOf": "Tu ne fais partie d'aucun",
+      "createNew": "Pour en créer un nouveau, tu peux te rendre dans le",
+      "adminPanel": "panneau d'administration",
+      "project": "projet",
+      "circle": "cercle"
+    },
+    "dashboard": "Tableau de bord",
+    "events": "Evènements",
+    "gov": "Gouvernance",
+    "resources": "Ressources",
+    "jobBoard": "Offres de mission",
+    "profileDirectory": "Annuaire des membres",
+    "projects": "Projets",
+    "circles": "Circles",
+    "messages": "Messages",
+    "search": "Rechercher..."
+  },
+  "about": {
+    "title": "A propos",
+    "card1": {
+      "subTitle": "Cette application est développée par Startin'blox",
+      "paragraph1": "Startin’blox est une coopérative qui développe des outils libres pour construire facilement et à moindre coût des applications fédérées et interopérables basées sur les derniers standards du web poussés par le projet SOLID.",
+      "paragraph2": "Sa mission est de redonner le pouvoir aux utilisateurs en leur permettant de reprendre la main sur leur outil numérique et de bénéficier d’un effet de réseau au sein d’un écosystème choisi afin de s’émanciper des grandes plateformes."
+    },
+    "card2": {
+      "title": "Contacte-nous",
+      "paragraph-1": "Tu veux contribuer, nous remonter un bug, nous suggérer une amélioration, travailler avec nous ?",
+      "link": "Contact"
+    }
+  },
+  "admin": {
+    "menuRight": {
+      "fold": "Replier le menu",
+      "community": "Communautés",
+      "circles": "Cercles",
+      "projects": "Projets"
+    }
+  },
+  "dashboard": {
+    "title": "Tableau de bord"
+  },
+  "circle": {
+    "menuRight": {
+      "buttonMobile": "MENU",
+      "fold": "Replier le menu",
+      "chat": "Chat",
+      "information": "Information",
+      "resources": "Resources",
+      "events": "Events",
+      "polls": "Polls"
+    },
+    "create": {
+      "backlink": "Retour",
+      "title": "Créer un cercle",
+      "labelStatus": "Statut du cercle",
+      "labelName": "Nom du cercle *",
+      "labelDescription": "Sous-titre du cercle *",
+      "buttonSubmit": "Enregistrer"
+    },
+    "edit": {
+      "buttonDelete": "Retirer",
+      "backlink": "Retour",
+      "title": "Modifie ton cercle",
+      "labelStatus": "Statut du cercle",
+      "labelName": "Nom du cercle *",
+      "labelOwner": "Administrateur ou administratrice *",
+      "labelDescription": "Sous-titre du cercle *",
+      "subTitle": "Liste des membres :",
+      "tableHeader1": "Nom",
+      "tableHeader2": "Accès",
+      "buttonSubmit": "Enregistrer",
+      "buttonAddMember": "Ajouter un membre"
+    },
+    "list": {
+      "title": "Administration",
+      "buttonMobile": "MENU",
+      "subTitle": "Cercles",
+      "buttonCreate": "Créer un cercle",
+      "tableHeader1": "Nom",
+      "tableHeader2": "Administrateurs",
+      "tableHeader3": "Rejoindre",
+      "buttonQuit": "Quitter",
+      "buttonJoin": "Rejoindre"
+    },
+    "left": {
+      "paragraphQuit": "Tu as quitté ce cercle.",
+      "paragraphJoin": "Pour le rejoindre à nouveau, rends-toi dans le panneau",
+      "paragraphContact": "ou contacte un administrateur.",
+      "admin": "d'administration"
+    },
+    "profile": {
+      "creationDate": "Date de création : ",
+      "buttonModify": "Modifier et ajouter un membre",
+      "buttonAdd": "Ajouter un membre",
+      "buttonDelete": "Supprimer le cercle",
+      "buttonQuit": "Quitter le cercle",
+      "buttonJoin": "Rejoindre le cercle",
+      "subTitle": "Membres :"
+    }
+  },
+  "communities": {
+    "title": "Administration",
+    "menuMobile": "MENU",
+    "linkInvite": "Inviter un nouvel utilisateur",
+    "noPermission": "Membre, aucune permission",
+    "subTitle": "Communautés",
+    "tableHeader1": "Nom",
+    "tableHeader2": "Action"
+  },
+  "project": {
+    "menuRight": {
+      "buttonMobile": "MENU",
+      "fold": "Replier le menu",
+      "chat": "Chat",
+      "information": "Information"
+    },
+    "create": {
+      "backlink": "Retour",
+      "title": "Créer un nouveau projet",
+      "labelName": "Nom du projet *",
+      "labelCustomer": "Nom du client*",
+      "labelCaptain": "Capitaine du projet*",
+      "buttonSubmit": "Enregistrer"
+    },
+    "edit": {
+      "buttonDelete": "Retirer",
+      "backlink": "Retour",
+      "title": "Modifie ton projet",
+      "labelName": "Nom du projet *",
+      "labelCustomer": "Nom du client *",
+      "subTitle": "Liste des membres :",
+      "tableHeader1": "Nom",
+      "tableHeader2": "Accès",
+      "buttonSubmit": "Enregistrer",
+      "buttonAddMember": "Ajouter un membre"
+    },
+    "modifyPicture": {
+      "backlink": "Retour",
+      "title": "Modifier l'image du projet"
+    },
+    "list": {
+      "title": "Administration",
+      "buttonMobile": "MENU",
+      "subTitle": "Projets",
+      "buttonCreate": "Créer un nouveau projet",
+      "tableHeader1": "Nom",
+      "tableHeader2": "Administrateurs",
+      "tableHeader3": "Capitaines",
+      "tableHeader4": "Rejoindre",
+      "buttonQuit": "Quitter",
+      "buttonJoin":"Rejoindre"
+    },
+    "left": {
+      "paragraphQuit": "Tu as quitté ce projet.",
+      "paragraphJoin": "Ceci est un projet privé. Pour le joindre à nouveau, rends-toi dans le panneau",
+      "paragraphContact": "et demande une invitation.",
+      "admin": "d'administration"
+    },
+    "profile": {
+      "creationDate": "Date de création : ",
+      "buttonModify": "Modifier et ajouter un membre",
+      "buttonAdd": "Ajouter un membre",
+      "buttonDelete": "Supprimer le projet",
+      "buttonQuit": "Quitter le projet",
+      "buttonJoin": "Rejoindre le projet",
+      "captain": "Capitaine :",
+      "subTitle": "Equipe :"
+    }
+  },
+  "user": {
+    "create": {
+      "backlink": "Retour",
+      "title": "Inviter un utilisateur à ",
+      "labelUsername": "Nom d'utilisateur*",
+      "labelUsernameTitle": "Caractères alphanumérique uniquement",
+      "labelEmail": "E-mail *",
+      "labelFirstname": "Prénom *",
+      "labelLastname": "Nom *",
+      "buttonSubmit": "Inviter"
+    }
+  },
+  "notification": {
+    "circle": {
+      "in": "dans"
+    },
+    "private": {
+      "private": "en privé"
+    }
+  },
+  "template-captain": {
+    "isLead": "Capitaine"
+  },
+  "hublStatus": {
+    "private": "Privé",
+    "public": "Public"
+  }
+}
--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@ -14,78 +14,85 @@ solid-widget(name='hubl-menu-publicprivate')

 solid-widget(name='hubl-create')
  template
-    p.create Tu ne fais partie d'aucun ${value}.
+    p.create 
+      span(data-trans="menuLeft.emptyCircleProject.notPartOf")
+      span &nbsp;${value}.
      br
-      | Pour en créer un nouveau, tu peux te rendre dans le 
-      solid-link(next='admin') panneau d'administration
+      span(data-trans="menuLeft.emptyCircleProject.createNew")
+      span &nbsp;
+      solid-link(next="${value == 'projet' ? 'admin-projects' : 'admin-circles'}", data-trans="menuLeft.emptyCircleProject.adminPanel")

 solid-widget(name='hubl-menu-fix-url-circle')
  template
-    solid-display(
-      data-src='${value}'
-      fields='status, name, jabberID, badge'
-      value-badge='${value}'
-      widget-status='hubl-menu-publicprivate'
-      widget-badge='hubl-counter'
-      widget-jabberID='hubl-menu-jabberid'
-      widget-name='solid-display-div'
-      order-by="name"
-    )
+    solid-link(data-src="${value}" next="circle")
+      solid-display(
+        data-src='${value}'
+        fields='status, name, jabberID, badge'
+        value-badge='${value}'
+        widget-status='hubl-menu-publicprivate'
+        widget-badge='hubl-counter'
+        widget-jabberID='hubl-menu-jabberid'
+        widget-name='solid-display-div'
+        order-by="name"
+      )

 solid-widget(name='hubl-menu-fix-url-project')
  template
-    solid-display(
-      data-src='${value}'
-      fields='status, project(customer.name, name, jabberID), badge'
-      class-name='project-name'
-      class-customer.name='project-customer'
-      value-badge='${value}'
-      widget-status='hubl-menu-publicprivate'
-      widget-jabberID='hubl-menu-jabberid'
-      widget-badge='hubl-counter'
-      widget-name='solid-display-div'
-      order-by="customer.name"
-    )
+    solid-link(data-src="${value}" next="project")
+      solid-display(
+        data-src='${value}'
+        fields='status, project(customer.name, name, jabberID), badge'
+        class-name='project-name'
+        class-customer.name='project-customer'
+        value-badge='${value}'
+        widget-status='hubl-menu-publicprivate'
+        widget-jabberID='hubl-menu-jabberid'
+        widget-badge='hubl-counter'
+        widget-name='solid-display-div'
+        order-by="customer.name"
+      )


 solid-router#navbar-router(default-route='dashboard')
  if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
    solid-route.menu(name='dashboard')
-      div.menu-label Tableau de bord
+      div.menu-label(data-trans="menuLeft.dashboard")
      div.menu-icon.icon-home
    div.divider
  if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
    solid-route.menu(name='members')
-      div.menu-label Annuaire des membres
+      div.menu-label(data-trans="menuLeft.profileDirectory")
      div.menu-icon.icon-people
    div.divider
  if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
    solid-route.menu(name='job-offers', rdf-type='hd:joboffer')
-      div.menu-label Offres de mission
+      div.menu-label(data-trans="menuLeft.jobBoard")
      div.menu-icon.icon-briefcase
    div.divider
  if endpoints.resources || (endpoints.get && endpoints.get.resources)
    solid-route.menu(name='resources')
-      div.menu-label Ressources
+      div.menu-label(data-trans="menuLeft.resources")
      div.menu-icon.icon-docs
    div.divider
  if endpoints.polls || (endpoints.get && endpoints.get.polls)
    solid-route.menu(name='polls')
-      div.menu-label Gouvernance
+      div.menu-label(data-trans="menuLeft.gov")
      div.menu-icon.icon-bubbles
    div.divider
  if endpoints.events || (endpoints.get && endpoints.get.events)
    solid-route.menu(name='events')
-      div.menu-label Evènements
+      div.menu-label(data-trans="menuLeft.events")
      div.menu-icon.icon-calendar
    div.divider
  if endpoints.projects || (endpoints.get && endpoints.get.projects)
-    div
-      solid-link(next='admin-project-list')
+    div.menu-wrapper
+      solid-link
+        //- (next='admin-project-list')
        div.menu
          div.menu-chevron
-            div.menu-icon.icon-arrow-right-circle
-          div.menu-label  Projets
+            div.menu-icon.icon-arrow-up
+            //- div.menu-icon.icon-arrow-right-circle
+          div.menu-label(data-trans="menuLeft.projects")
          div.menu-icon.icon-folder-alt
      solid-route(name='project', rdf-type='hd:project', use-id='', hidden)
      div.sub-menu.menu-notification
@ -100,19 +107,21 @@ solid-router#navbar-router(default-route='dashboard')
          fields='project'
          loader-id='loader-projects'
          empty-widget='hubl-create'
-          empty-value='projet'
+          empty-value=''
+          data-trans="empty-value=menuLeft.emptyCircleProject.project"
          widget-project='hubl-menu-fix-url-project'
-          order-by='project.customer.name'
-          next='project'
+          order-by="project.customer.name"
        )
    div.divider
  if endpoints.circles || (endpoints.get && endpoints.get.circles)
-    div
-      solid-link(next='admin-circle-list')
+    div.menu-wrapper
+      solid-link
+        //- (next='admin-circle-list')
        div.menu
          div.menu-chevron
-            div.menu-icon.icon-arrow-right-circle
-          div.menu-label  Cercles
+            div.menu-icon.icon-arrow-up
+            //- div.menu-icon.icon-arrow-right-circle
+          div.menu-label(data-trans="menuLeft.circles")
          div.menu-icon.icon-folder-alt
      solid-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
      div.sub-menu.menu-notification
@ -127,10 +136,10 @@ solid-router#navbar-router(default-route='dashboard')
          fields='circle'
          loader-id='loader-circles'
          empty-widget='hubl-create'
-          empty-value='cercle'
+          empty-value=''
+          data-trans="empty-value=menuLeft.emptyCircleProject.circle"
          widget-circle='hubl-menu-fix-url-circle'
-          order-by='circle.name'
-          next='circle'
+          order-by="circle.name"
        )
    div.divider
  if endpoints.users || (endpoints.get && endpoints.get.users)
@ -138,7 +147,7 @@ solid-router#navbar-router(default-route='dashboard')
      div.menu
        div.menu-chevron
          div.menu-icon.icon-arrow-up
-        div.menu-label Messages
+        div.menu-label(data-trans="menuLeft.messages")
        div.menu-icon.icon-envelope-letter
      solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
      div.sub-menu.menu-notification
@ -152,7 +161,8 @@ solid-router#navbar-router(default-route='dashboard')
          fields='name, chatProfile.jabberID, badge'
          loader-id='loader-messages'
          search-fields="name"
-          search-label-name="Rechercher..."
+          search-label-name=""
+          data-trans="search-label-name=menuLeft.search"
          search-widget-name="hubl-search-users"
          widget-name='solid-display-div'
          widget-badge='hubl-counter'
--- a/src/page-about.pug
+++ b/src/page-about.pug
@ -1,17 +1,17 @@
 .views-container
-  h2 A propos
+  h2(data-trans='about.title')
  div.flex-content-white
    div
      div
-        h3 Cette application est développée  par Startin'blox
-        p Startin’blox est une coopérative qui développe des outils libres pour construire facilement et à moindre coût des applications fédérées et interopérables basées sur les derniers standards du web poussés par le projet SOLID.
-        p Sa mission est de redonner le pouvoir aux utilisateurs en leur permettant de reprendre la main sur leur outil numérique et de bénéficier d’un effet de réseau au sein d’un écosystème choisi afin de s’émanciper des grandes plateformes.
+        h3(data-trans='about.card1.subTitle')
+        p(data-trans='about.card1.paragraph1')
+        p(data-trans='about.card1.paragraph2')
      div
        a(href="https://startinblox.com/fr/" target="_blank") https://startinblox.com/fr/

    div
      div
-        h3 Contacte-nous
-        p Tu veux contribuer, nous remonter un bug, nous suggérer une amélioration, travailler avec nous ? 
+        h3(data-trans='about.card2.subTitle')
+        p(data-trans='about.card2.paragraph1')
      div
-        a(href="https://startinblox.com/fr/#home-contact" target="_blank").main-cta Contact 
+        a(href="https://startinblox.com/fr/#home-contact" target="_blank" data-trans='about.card2.link').main-cta
--- a/src/page-admin.pug
+++ b/src/page-admin.pug
@ -1,27 +1,27 @@
 .views-container.sidebar-is-closed
  if endpoints.circles || (endpoints.get && endpoints.get.circles)
-    #admin-circles(hidden)
+    #admin-circles(hidden, data-view="admin-circles")
      include views/admin/page-admin-circles.pug
  if endpoints.projects || (endpoints.get && endpoints.get.projects)
-    #admin-projects(hidden)
+    #admin-projects(hidden, data-view="admin-projects")
      include views/admin/page-admin-projects.pug
  if (endpoints.users || (endpoints.get && endpoints.get.users))
-    #admin-users(hidden)
-      include views/admin/page-admin-users.pug
+    #admin-communities(hidden, data-view="admin-communities")
+      include views/admin/page-admin-communities.pug
 nav.jsRightMenu(role='navigation')
  solid-router(default-route='admin-circles')
    ul
      li.jsOffsiteToggle
-        a Replier le menu
+        a(data-trans='admin.menuRight.fold')
      if (endpoints.users || (endpoints.get && endpoints.get.users))
-        solid-route.active-color(name='admin-users')
+        solid-route(name='admin-communities')
          li
-            a Utilisateurs
+            a(data-trans='admin.menuRight.community')
      if endpoints.circles || (endpoints.get && endpoints.get.circles)
        solid-route(name='admin-circles')
          li
-            a Cercles
+            a(data-trans='admin.menuRight.circles')
      if endpoints.projects || (endpoints.get && endpoints.get.projects)
        solid-route(name='admin-projects')
          li
-            a Projets
+            a(data-trans='admin.menuRight.projects')
--- a/src/page-circle.pug
+++ b/src/page-circle.pug
@ -9,41 +9,41 @@
          class-name='h1-like'
          class-description='h1-aside description'
        )
-        button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
+        button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='circle.menuRight.buttonMobile')
    div.content-box__height
      solid-ac-checker(permission='acl:Read', bind-resources)
-        #circle-chat(hidden)
+        #circle-chat(hidden, data-view="circle-chat")
          include views/circle/page-circle-chat.pug
-        #circle-information.content-box__height(hidden)
+        #circle-information.content-box__height(hidden, data-view="circle-information")
          include views/circle/page-circle-profile.pug
-        #circle-events(hidden)
+        #circle-events(hidden, data-view="circle-events")
          include views/circle/page-circle-events.pug
-        #circle-resources(hidden)
+        #circle-resources(hidden, data-view="circle-resources")
          include views/circle/page-circle-resources.pug
-        #circle-polls(hidden)
+        #circle-polls(hidden, data-view="circle-polls")
          include views/circle/page-circle-polls.pug

 nav.jsRightMenu(role='navigation')
  solid-router(default-route='circle-chat')
    ul
      li.jsOffsiteToggle
-        a Replier le menu
+        a(data-trans='circle.menuRight.fold')
      solid-route(name='circle-chat')
        li
-          a Chat
+          a(data-trans='circle.menuRight.chat')
      solid-route(name='circle-information')
        li
-          a Information
+          a(data-trans='circle.menuRight.information')
      if (endpoints.resources || (endpoints.get && endpoints.get.resources)) && (endpoints.resourceskeywords || (endpoints.get && endpoints.get.resourceskeywords)) && (endpoints.resourcestypes || (endpoints.get && endpoints.get.resourcestypes))
        solid-route(name='circle-resources' use-id)
          li
-            a Resources
+            a(data-trans='circle.menuRight.resources')
      if (endpoints.events || (endpoints.get && endpoints.get.events)) && (endpoints.typeevents || (endpoints.get && endpoints.get.typeevents))
        solid-route(name='circle-events' use-id)
          li
-            a Events
+            a(data-trans='circle.menuRight.events')
      if endpoints.polls || (endpoints.get && endpoints.get.polls)
        solid-route(name='circle-polls' use-id)
          li
-            a Polls
+            a(data-trans='circle.menuRight.polls')
      
--- a/src/page-dashboard.pug
+++ b/src/page-dashboard.pug
@ -1,5 +1,5 @@
 .views-container
-  h1 Tableau de bord
+  h1(data-trans='dashboard.title')
  solid-dashboard(
    data-src=`${endpoints.dashboards || endpoints.get.dashboards}`
  )
--- a/src/page-messages.pug
+++ b/src/page-messages.pug
@ -3,21 +3,23 @@
  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
    solid-xmpp-chat(
      data-authentication='login',
      data-auto-login='true',
-      data-bosh-service-url=`${xmpp}`,
+      data-websocket-url=`${xmppWebsocket || 'wss://jabber.happy-dev.fr/xmpp-websocket'}`,
      data-i18n='en',
      bind-resources
    )
--- a/src/page-project.pug
+++ b/src/page-project.pug
@ -13,25 +13,25 @@
    
          value-const-title1='N°'
        )
-        button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
+        button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='project.menuRight.buttonMobile')
    div.content-box__height
      solid-ac-checker(permission='acl:Read', bind-resources)
-        #project-chat(hidden)
+        #project-chat(hidden, data-view="project-chat")
          include views/project/page-project-chat.pug
-        #project-information.content-box__height(hidden)
+        #project-information.content-box__height(hidden, data-view="project-information")
          include views/project/page-project-profile.pug
-        #project-picture(hidden)
+        #project-picture(hidden, data-view="project-picture")
          include views/project/page-project-picture.pug

 nav.jsRightMenu(role='navigation')
  solid-router(default-route='project-chat')
    ul
      li.jsOffsiteToggle
-        a Replier le menu
+        a(data-trans='project.menuRight.fold')
      solid-route(name='project-chat')
        li 
-          a Chat
+          a(data-trans='project.menuRight.chat')
      solid-route(name='project-information')
        li 
-          a Information
+          a(data-trans='project.menuRight.information')
      solid-route(name='project-picture' use-id)
--- a/src/page-user-profile.pug
+++ b/src/page-user-profile.pug
@ -1,71 +0,0 @@
-include templates/hubl-groups.pug
-
-.content-box.with-form.user-profile__container
-
-  .section.user-bio
-
-    solid-display.avatar-display(
-      bind-user=''
-      fields='account.picture'
-      label-account.picture=''
-      widget-account.picture='solid-display-img'
-    )
-    
-    solid-display.name-diplay(
-      bind-user=''
-      fields='user-name-groups(name, groups), username'
-
-      class-name='name'
-
-      label-groups=''
-      multiple-groups=''
-      widget-groups='hubl-groups-name'
-      
-      class-username='username'
-    )
-
-    solid-form.info-form(
-      bind-user=''
-      fields='profile.bio, inline-1(profile.city, email), inline-2(profile.phone, profile.website), inline-3(profile.available), account.picture, instruction'
-
-      class-profile.bio='form-label is-light'
-      label-profile.bio='short description'
-
-      class-profile.city='form-label is-light'
-      label-profile.city='your cell'
-
-      class-email='form-label is-light'
-
-      class-profile.phone='form-label is-light'
-      label-profile.phone='phone'
-
-      class-profile.website='form-label is-light'
-      label-profile.website='your website'
-
-      class-profile.available='form-label is-light'
-      label-profile.available='your availability'
-
-      class-account.picture='form-label is-light'
-      label-account.picture='your picture'
-
-      widget-instruction='hubl-instruction'
-    )
-
-  .section.user-skills
-
-    solid-form(
-      bind-user=''
-      range-skills=`${endpoints.skills || endpoints.get.skills}`
-      fields='skills'
-
-      class-skills='form-label is-dark'
-      label-skills='Your main skills (4 max.):'
-      multiple-skills='solid-multiple-select'
-      widget-skills='solid-form-auto-completion'
-    )
-
-
-  solid-widget(name='hubl-instruction')
-    template
-      span Show us your most beautiful smile
-      p Pictures help us to know ourselves and also to recognize ourselves, so don't be afraid to show your pretty face and avoid strange avatars.
--- a/src/scripts/firefox-scroll.js
+++ b/src/scripts/firefox-scroll.js
@ -0,0 +1,60 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const resizeChat = () => {
+    let isMobile = window.innerWidth < 993;
+    let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+    let isFirefoxMobile = navigator.platform.toLowerCase().indexOf("mobile") > -1 || navigator.platform.toLowerCase().indexOf("tablet") > -1;
+    let chatBox = Array.from(document.querySelectorAll("solid-xmpp-chat"))
+      .map((el) => el.shadowRoot ? el.shadowRoot.getElementById("conversejs") : false)
+      .filter((el) => el)
+      .pop();
+    if (chatBox) {
+      let chatTextArea = chatBox.querySelector(".message-form-container");
+      let ischatTextArea = setInterval(() => {
+        chatTextArea = chatBox.querySelector(".message-form-container");
+        if (chatTextArea) {
+          clearInterval(ischatTextArea);
+          if (
+            chatBox.getBoundingClientRect().height -
+            chatTextArea.getBoundingClientRect().height !=
+            chatTextArea.offsetTop
+          ) {
+            let viewportChat = Array.from(
+              document.querySelectorAll("#viewport .chat-view")
+            );
+            viewportChat.forEach(
+              (c) => (c.style.height = isMobile ? (isFirefox && isFirefoxMobile) ? "calc(100vh - 106px - 57px)" : "calc(100vh - 106px)" : "calc(100vh - 64px - 83px)")
+            );
+          }
+        }
+      }, 15);
+    }
+  };
+  resizeChat();
+
+  let isbody = setInterval(() => {
+    if (document.body) {
+      clearInterval(isbody);
+      resizeChat();
+    }
+  }, 50);
+
+  window.addEventListener("load", () => {
+    setTimeout(() => {
+      resizeChat();
+    }, 0);
+  });
+
+  let windowResizing;
+  window.addEventListener("resize", () => {
+    windowResizing = setTimeout(() => {
+      clearInterval(windowResizing);
+      resizeChat();
+    }, 50);
+  });
+
+  document.addEventListener("navigate", () => {
+    setTimeout(() => {
+      resizeChat();
+    }, 0);
+  });
+});
--- a/src/scripts/intl.js
+++ b/src/scripts/intl.js
@ -0,0 +1,198 @@
+/*
+  js intl, inspired by danabr/jsI18n
+*/
+class JsI18n {
+
+  constructor() {
+    this.locale = ""; //Current locale
+    this.locales = new Array(); //Available locales
+  }
+
+  /*
+    Method for automatically detecting the language, does not work in every browser.
+  */
+  detectLanguage() {
+    if (localStorage.getItem('language') || (window.navigator.language !== null && window.navigator.language !== undefined)) {
+      this.setLocale(localStorage.getItem('language') || window.navigator.language.slice(0, 2));
+    } else {
+      console.error('Language not found');
+      this.setLocale('fr');
+    }
+  };
+
+  /*
+    Translates tag contents and
+    attributes depending on the
+    value of key.
+  */
+  translateTag(node, key) {
+    if (key.indexOf("=") == -1) { //Simple key
+      this.translateNodeContent(node, key);
+    } else { //Attribute/key pairs
+      var parts = key.split(";");
+
+      for (var i = 0; i < parts.length; i++) {
+        var pair = parts[i].split("=");
+        var attr = pair[0].toLowerCase().trim();
+        var k = pair[1].trim();
+
+        if (attr == "html") {
+          this.translateNodeContent(node, k);
+        } else {
+          if(node.tagName == "SOLID-DELETE") {
+            let button = node.querySelector('button');
+            if(button != null) {
+              this.translateNodeContent(button, k);
+            }
+          }
+          this.translateNodeContent(node.attributes[attr], k);
+        }
+      }
+    }
+  }
+
+  /**
+    Replace the content of the given node
+    if there is a translation for the given key.
+  **/
+  translateNodeContent(node, key) {
+    var translation = this.t(key);
+    if (node != null && translation != undefined) {
+      if (node.nodeType == 1) { //Element
+        try {
+          node.innerHTML = translation;
+        } catch (e) {
+          node.text = translation;
+        }
+      } else if (node.nodeType == 2) { //Attribute
+        node.value = translation;
+      }
+    }
+  }
+
+  /*
+    Helper for translating a node
+    and all its child nodes.
+  */
+  processNode(node) {
+    if (node != undefined) {
+      if (node.nodeType == 1) { //Element node
+
+        var key = node.attributes["data-trans"];
+        if (key != null) {
+          this.translateTag(node, key.nodeValue);
+        }
+      }
+
+      //Process child nodes
+      var children = node.childNodes;
+      for (var i = 0; i < children.length; i++) {
+        this.processNode(children[i]);
+      }
+    }
+  }
+
+  /*
+    Adds a locale to the list,
+    replacing the translations
+    if the locale is already defined.
+  */
+  addLocale(locale, translations) {
+    this.locales[locale.toString()] = translations;
+  }
+
+  /*
+    Sets the locale to use when translating.
+  */
+  setLocale(locale) {
+    try {
+      fetch(`/locales/${locale}.json`).then((result) => {
+        if (result.ok) {
+          result.json().then(e => {
+            this.addLocale(locale, e);
+            this.processPage();
+          }).catch(() => {
+            if (locale != "fr") {
+              console.warn(`Locale not found: ${locale}, fallback to french`);
+              this.setLocale("fr");
+            } else {
+              console.error("Language not found");
+            }
+          });
+        } else {
+            if (locale != "fr") {
+              console.warn(`Locale not found: ${locale}, fallback to french`);
+              this.setLocale("fr");
+            } else {
+              console.error("Language not found");
+            }
+        }
+      });
+      this.locale = locale;
+    } catch {
+      if (locale != "fr") {
+        console.warn(`Locale not found: ${locale}, fallback to french`);
+        this.setLocale("fr");
+      } else {
+        console.error("Language not found");
+      }
+    }
+  }
+
+  /*
+    Fetches the translation associated with the given key.
+  */
+  t(key) {
+    var translations = this.locales[this.locale];
+    if (translations != undefined) {
+      let translation = key.toString().split('.').reduce((o, i) => (o ? o[i] : undefined), translations);
+      if(typeof translation == "string") {
+        return translation;
+      } else {
+        return translations[key.toString()];
+      }
+    }
+    return undefined;
+  }
+
+  /*
+    Alias for JsI18n.t
+  */
+  translate(key) {
+    this.t(key);
+  }
+
+  /**
+    Replaces the contents of all tags
+    that have the data-trans attribute set.
+  **/
+  processPage() {
+    this.processNode(document.getElementsByTagName("html")[0]);
+  }
+}
+
+//Global
+jsI18n = new JsI18n;
+
+document.addEventListener("DOMContentLoaded", () => {
+
+  // Detect the lang & initialize, based on the browser or "language" item from localstorage
+  jsI18n.detectLanguage();
+  
+  /*
+    recursivePopulate(DOMElement)
+    Will listen for the populate event of any sib element
+    Process the changed node every time it populate
+    Recursively add a populate listener for children elements
+  */
+  function recursivePopulate(element) {
+    Array.from(element.querySelectorAll('*')).forEach((e) => {
+      e.addEventListener("populate", (e) => {
+        recursivePopulate(e.target);
+        jsI18n.processNode(e.target);
+      });
+    });
+  }
+  // Process every children from document
+  recursivePopulate(document);
+});
--- a/src/scripts/login-element-visibility.js
+++ b/src/scripts/login-element-visibility.js
@ -1,4 +1,4 @@
-document.addEventListener("DOMContentLoaded", function (event) {
+document.addEventListener("DOMContentLoaded", function () {
  document
    .querySelector("sib-auth")
    .getUser()
@ -10,8 +10,6 @@ document.addEventListener("DOMContentLoaded", function (event) {
        document
          .querySelector('.loggedIn')
          .setAttribute("style", "display:none !important");
-      } else {
-        document.querySelector('sib-auth').login();
      }
    });
 });
--- a/src/scripts/menu-toggle.js
+++ b/src/scripts/menu-toggle.js
@ -0,0 +1,11 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const menuWrappers = Array.from(document.querySelectorAll(".menu-wrapper"));
+  
+    //- Toggle sub-menus
+    menuWrappers.forEach(menuWrapper => {
+      const menu = menuWrapper.querySelector(".menu");
+      menu.addEventListener("click", e => {
+        menuWrapper.classList.toggle("is-closed");
+      });
+    });
+});  
--- a/src/scripts/navigate-event.js
+++ b/src/scripts/navigate-event.js
@ -27,10 +27,10 @@ function closeUserControls() {
    );
  }

-document.addEventListener("DOMContentLoaded", function(event) {
+document.addEventListener("DOMContentLoaded", function() {
  
    //- View change event
-    window.addEventListener("navigate", event => {
+    window.addEventListener("navigate", () => {
      closeLeftMenu();
      closeUserControls();
    });
@ -63,7 +63,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
      }
    };

-    document.querySelector("#toggleMainMenu").addEventListener("click", event => {
+    document.querySelector("#toggleMainMenu").addEventListener("click", () => {
      let leftMenu = document.querySelector("#main__menu");
      if (leftMenu.hasAttribute("open")) {
        closeLeftMenu();
@ -75,7 +75,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
    const rightMenus = Array.from(document.querySelectorAll("nav.jsRightMenu"));
    rightMenus.forEach(rightMenu => {
      const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
-      btnRightMenu.addEventListener("click", e => {
+      btnRightMenu.addEventListener("click", () => {
        if (rightMenu.hasAttribute("open")) {
          closeRightMenu();
        } else {
@ -86,7 +86,7 @@ document.addEventListener("DOMContentLoaded", function(event) {

    Array.from(document.querySelectorAll(".jsMobileSidebarOpenButton")).forEach(
      el => {
-        el.addEventListener("click", event => {
+        el.addEventListener("click", () => {
          openRightMenu();
        });
      }
--- a/src/scripts/register-sw.js
+++ b/src/scripts/register-sw.js
@ -0,0 +1,11 @@
+// if('serviceWorker' in navigator) {
+  // var refreshing;
+  // navigator.serviceWorker.addEventListener('controllerchange', () => {
+  //     if (refreshing) {
+  //         return;
+  //     }
+  //     refreshing = true;
+  //     window.location.reload();
+  // });
+  // navigator.serviceWorker.register('/sw.js');
+// }
--- a/src/scripts/save-feedback.js
+++ b/src/scripts/save-feedback.js
@ -0,0 +1,19 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const Toast = Swal.mixin({
+        toast: true,
+        position: 'top',
+        showConfirmButton: false,
+        timer: 3000,
+        timerProgressBar: true,
+        didOpen: (toast) => {
+            toast.addEventListener('mouseenter', Swal.stopTimer)
+            toast.addEventListener('mouseleave', Swal.resumeTimer)
+        }
+    })
+    document.addEventListener("save", () => {
+        Toast.fire({
+            icon: 'success',
+            title: 'Succès!'
+        })
+    });
+});
--- a/src/scripts/unreads-menu.js
+++ b/src/scripts/unreads-menu.js
@ -1,7 +1,7 @@
-document.addEventListener("DOMContentLoaded", function (event) {
+document.addEventListener("DOMContentLoaded", function () {
  window.addEventListener('newMessage', event => {
    let jid = event.detail.jid;
-    Array.from(document.querySelectorAll('[data-jabberID="'+jid+'"]')).forEach(el => {
+    Array.from(document.querySelectorAll('[data-jabberID="' + jid + '"]')).forEach(el => {
      el.parentElement.parentElement.classList.add('unread');
    });
  });
@ -9,7 +9,12 @@ document.addEventListener("DOMContentLoaded", function (event) {
  window.addEventListener('read', (event) => {
    if (event.detail && event.detail.resource && event.detail.resource['@id']) {
      const badge = document.querySelector(`solid-badge[data-src="${event.detail.resource['@id']}"]`);
-      if (badge) badge.parentElement.parentElement.classList.remove('unread');
+      if (badge) {
+        badge.parentElement.parentElement.classList.remove('unread');
+        const project = badge.parentElement.parentElement.querySelector('.unread');
+        if (project) project.classList.remove('unread');
+      }
+
    }
  });
 });
--- a/src/scripts/widget-extension.js
+++ b/src/scripts/widget-extension.js
@ -44,7 +44,7 @@ function recursiveAdaptWidgets(prefix, element, user) {
  });
 }

-document.addEventListener("DOMContentLoaded", function (event) {
+document.addEventListener("DOMContentLoaded", function () {
  document
    .querySelector("sib-auth")
    .getUser()
--- a/src/styles/abstracts/_variables.scss
+++ b/src/styles/abstracts/_variables.scss
@ -102,6 +102,8 @@
  --color-select-list: var(--color-secondary);
  --color-select-add-button: var(--color-button-secondary);
  --color-select-add-button-background: var(--color-button-white);
+  --color-add-button-background: var(--color-button-secondary);
+  --color-add-button: var(--color-white);

  --color-label-light: var(--color-grey-6);

--- a/src/styles/base/about.scss
+++ b/src/styles/base/about.scss
@ -1,6 +1,4 @@
 #about{
-  $main-color: rgb(236, 94, 92);
-  $second-color: white;
  h2,h3{
    text-transform: uppercase;
  }
@ -37,10 +35,10 @@
  }

  .main-cta{
-    background: $second-color none repeat scroll 0% 0%;
-    border: 1px solid $main-color;
+    background: var(--color-white) none repeat scroll 0% 0%;
+    border: 1px solid var(--color-primary);
    border-radius: 55px;
-    color: $main-color;
+    color: var(--color-primary);
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
@ -51,8 +49,8 @@
  }

  .main-cta:hover{
-    background: $main-color none repeat scroll 0% 0%;
-    border : 1px solid $second-color;
-    color: $second-color;
+    background: var(--color-primary) none repeat scroll 0% 0%;
+    border : 1px solid var(--color-primary);
+    color: var(--color-white);
  }
 }
--- a/src/styles/base/form.scss
+++ b/src/styles/base/form.scss
@ -1,3 +1,9 @@
+solid-form {
+  [data-id="error"] {
+    display: none !important; // Hide the default core message, english only with a weird message
+  }
+}
+
 .form form {
  display: block;
  height: fit-content;
@ -41,16 +47,14 @@
 .form-label {
  /*flex: 1 1 auto;*/
  
-  label {
-    display: flex;
-    flex-direction: column; /* To align label and input vertically */
-    font-weight: 600;
-    margin-bottom: 0.8rem;
-    margin-top: 1.8rem;
-    text-transform: uppercase;
-  }
+  display: flex;
+  flex-direction: column; /* To align label and input vertically */
+  font-weight: 600;
+  margin-bottom: 0.8rem;
+  margin-top: 1.8rem;
+  text-transform: uppercase;
  
-  &.is-light label {
+  &.is-light {
    color: var(--color-label-light);
  }
 }
@ -130,11 +134,14 @@ textarea {

 /* WIDGETS SIB  (let in .content-box to override default styles) */

-solid-form-auto-completion,
+solid-form-dropdown-autocompletion,
+solid-form-dropdown-autocompletion-label,
+solid-form-multipleselect-autocompletion-label,
 hubl-status {

  .ss-main {
    font-weight: normal;
+    margin-top: 0.8rem;
    text-transform: none;
  

@ -144,7 +151,6 @@ hubl-status {
      border-radius: 0px;
      color: var(--color-input-text);
      font-weight: normal;
-      margin-top: 0.8rem;
      min-height: 4.6rem;
      padding-left: 1.2rem;

@ -179,6 +185,7 @@ hubl-status {
    display: flex;
    flex-direction: row;
    margin-bottom: 2.6rem;
+    margin-top: 1.8rem;
  }

  label {
@ -199,6 +206,7 @@ hubl-status {
    width: 100%;

    @include breakpoint(lg) {
+      height: 32px;
      margin: auto 0 auto 2.2rem;
      width: auto;
    }
@ -288,13 +296,13 @@ solid-form-file {
  }
 }

-/*solid-multiple-select {
+/*solid-form-multipleselect {

  &.select-skills .ss-values .ss-disabled::before {
    content: "Select skills";
  }

-  solid-form-auto-completion > label {
+  solid-form-dropdown-autocompletion-label > label {
    display: flex;
    flex-direction: column;

@ -378,7 +386,8 @@ hubl-member-form {
      margin-bottom: 1rem;
    }

-    solid-form-auto-completion {
+    solid-form-dropdown-autocompletion-label,
+    solid-form-multipleselect-autocompletion-label {
      float: left;
    }

--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@ -26,6 +26,34 @@
    }
  }

+  .header-left {
+    flex-grow: 1;
+    position: relative;
+
+    .logo {
+      display: inline-block;
+    }
+
+    .beta-tag {
+      display: none;
+
+      @include breakpoint(lg) {
+        display: inline-block;
+        font-size: 1.4rem;
+        font-weight: 600;
+        line-height: 19px;
+        letter-spacing: 0.19px;
+        padding: 3px 13px 3px 15px;
+        border-radius: 3px;
+        background: var(--color-primary);
+        color: var(--color-white);
+        position: fixed;
+        top: 12px;
+        left: 267px;
+      }
+    }
+  }
+
  >*:not(:first-child) {
    margin-left: 2rem;

@ -34,15 +62,15 @@
    }
  }

-  .logo {
-    flex: 1 0 0;
-    align-items: stretch;
-  }
-
-  /* To remove the place taken by this element */
+  /* Fix: to remove the place taken by these elements */
  solid-widget[name='hubl-user-avatar'] {
    display: contents;
  }
+
+  solid-notifications-template[data-rdf-type='hd:circle'],
+  solid-notifications-template[data-rdf-type='foaf:user'] {
+    position: absolute;
+  }
 }
  
 /* General styling for both notification and user's panel */
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
--- a/src/styles/base/menu-left.scss
+++ b/src/styles/base/menu-left.scss
@ -1,263 +1,302 @@
 #main__menu {
-    background-color: var(--color-menu-background);
-    color: var(--color-menu-text);
-    /*transition: flex-basis 0.5s ease-in-out;*/
-    &.open {
-        transform: translateX(0);
+  background-color: var(--color-menu-background);
+  color: var(--color-menu-text);
+  /*transition: flex-basis 0.5s ease-in-out;*/
+
+  &.open {
+    transform: translateX(0);
+  }
+
+  .unread {
+    font-weight: bolder;
+  }
+
+  solid-router {
+    .menu-wrapper {
+      .menu-icon.icon-arrow-up {
+        visibility: hidden;
+      }
+      @include breakpoint(lg) {
+        .menu-icon.icon-arrow-up {
+          visibility: visible;
+        }
+        &.is-closed {
+          .sub-menu {
+            display: none;
+          }
+
+          .menu-chevron {
+            transform: rotate(180deg);
+          }
+        }
+      }
    }
-    .unread {
-        font-weight: bolder;
+
+    solid-link {
+      width: 100%;
    }
-    solid-router {
-        .menu-wrapper {
-            &.is-closed {
-                .sub-menu {
-                    display: none;
-                }
-                .menu-chevron {
-                    transform: rotate(180deg);
-                }
+
+    .menu {
+      cursor: pointer;
+      display: flex;
+      flex-direction: row-reverse;
+      font-weight: bold;
+      padding: 1.2rem;
+
+      &[active] {
+        background-color: var(--color-menu-highlight-primary);
+
+        .menu-icon:before {
+          background-color: var(--color-menu-icon-background-active);
+        }
+
+        .menu-notification>solid-display>div:first-child {
+          background-color: var(--color-menu-badge-background);
+        }
+      }
+
+      .menu-icon {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        flex-grow: 0;
+        flex-shrink: 0;
+        font-size: 1.7rem;
+        width: 3.2em;
+
+        &:before {
+          border-radius: 100%;
+          height: 1.9em;
+          line-height: 1.9em;
+          width: 1.9em;
+        }
+      }
+
+      .menu-label {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        flex-shrink: 0;
+        font-weight: 600;
+        justify-content: center;
+        letter-spacing: 0.017rem;
+        text-transform: uppercase;
+        width: 8em;
+      }
+
+      .menu-chevron {
+        align-items: center;
+        display: flex;
+        flex-grow: 0;
+        flex-shrink: 0;
+        justify-content: center;
+        width: 2em;
+      }
+
+      >solid-display {
+        display: block;
+      }
+    }
+
+    .sub-menu {
+
+      /* Ellipsis for project tab */
+
+      .project-tab>div>solid-display>div:nth-child(1) {
+
+        solid-set-default[name='project'] {
+          flex: 3;
+
+          .project-customer,
+          .project-name {
+            box-sizing: border-box;
+            display: block;
+            width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */
+
+            @include breakpoint(lg) {
+              width: 150px;
            }
+          }
+
+          .project-customer,
+          .project-name>div {
+
+            @include breakpoint(lg) {
+              display: block;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+          }
        }
-        solid-link {
-            width: 100%;
+      }
+
+      /* Ellipsis for circle tab */
+
+      .circle-tab>div>solid-display>div {
+
+        solid-display-div[name='name'] {
+          flex: 3;
+
+          >div[name='name'] {
+            box-sizing: border-box;
+            padding-left: 0.2em;
+            width: calc(80vw - 96px);  /*96px = padding of the element + width and margin of counter */
+
+            @include breakpoint(lg) {
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              width: 150px;
+            }
+          }
        }
-        .menu {
+      }
+
+      /* Ellipsis for message tab */
+
+      .message-tab>div>solid-display>div>solid-display-div>div {
+        box-sizing: border-box;
+        width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */
+
+        @include breakpoint(lg) {
+          width: 150px;
+        }
+      }
+
+      solid-display.nosub>solid-form[fields="name"]>hubl-search-users>input {
+        margin-left: 30px;
+        margin-bottom: 10px;
+        width: calc(80vw - 71px);
+        display: block;
+        background-color: var(--color-secondary);
+        color: var(--color-white);
+        border: 1px solid var(--color-grey-4);
+        border-radius: 3px;
+        padding: 4px;
+
+        @include breakpoint(lg) {
+          margin: auto;
+          margin-bottom: 10px;
+          width: auto;
+        }
+      }
+
+      solid-display.nosub>nav {
+        text-align: center;
+        overflow: hidden;
+        display: grid;
+        grid-template-columns: auto 50% auto;
+        grid-template-areas: "left middle right";
+
+        >* {
+          color: var(--color-white);
+        }
+
+        >[data-id="prev"] {
+          grid-area: left;
+        }
+
+        >[data-id="next"] {
+          grid-area: right;
+        }
+
+        >span {
+          grid-area: middle;
+        }
+      }
+
+      hubl-menu-publicprivate {
+        display: inline-block;
+        text-align: center;
+
+        div {
+          font-family: simple-line-icons;
+          width: 20px;
+          font-size: 0.8em;
+          padding-top: 0.1em;
+        }
+      }
+
+      >solid-display.nosub>div>solid-display>div {
+        padding: 1rem 1rem 1rem 3rem;
+      }
+
+      solid-display>div {
+
+        .create {
+          color: var(--color-white);
+          margin: 1rem 1rem 2.2rem 3.2rem;
+        }
+
+        &>solid-display {
+          &:last-child>div {
+            margin-bottom: 2.2rem;
+          }
+
+          >div {
+            color: var(--color-white);
            cursor: pointer;
-            display: flex;
-            flex-direction: row-reverse;
-            font-weight: bold;
-            padding: 1.2rem;
-            &[active] {
-                background-color: var(--color-menu-highlight-primary);
-                .menu-icon:before {
-                    background-color: var(--color-menu-icon-background-active);
-                }
-                .menu-notification>solid-display>div:first-child {
-                    background-color: var(--color-menu-badge-background);
-                }
-            }
-            &[name="dashboard"][active] .menu-icon:before,
-            &[name="members"][active] .menu-icon:before,
-            &[name="resources"][active] .menu-icon:before,
-            &[name="polls"][active] .menu-icon:before,
-            &[name="events"][active] .menu-icon:before {
-                background-color: transparent;
-            }
-            .menu-icon {
-                align-items: center;
-                display: flex;
-                justify-content: center;
-                flex-grow: 0;
-                flex-shrink: 0;
-                font-size: 1.7rem;
-                width: 3.2em;
-                &:before {
-                    border-radius: 100%;
-                    height: 1.9em;
-                    line-height: 1.9em;
-                    width: 1.9em;
-                }
-            }
-            .menu-label {
-                display: flex;
-                flex-direction: column;
-                flex-grow: 1;
-                flex-shrink: 0;
-                font-weight: 600;
-                justify-content: center;
-                letter-spacing: 0.017rem;
-                text-transform: uppercase;
-                width: 8em;
-            }
-            .menu-chevron {
-                align-items: center;
-                display: flex;
-                flex-grow: 0;
-                flex-shrink: 0;
-                justify-content: center;
-                width: 2em;
-            }
-            >solid-display {
-                display: block;
-            }
-            &[name="events"],
-            &[name="resources"],
-            &[name="polls"],
-            &[name="dashboard"],
-            &[name="members"] {
-                .menu-label {
-                    width: 9.9em;
-                }
+
+            >hubl-menu-fix-url-circle>solid-link>solid-display>div,
+            >hubl-menu-fix-url-project>solid-link>solid-display>div {
+              padding: 1rem 1rem 1rem 3rem;
            }
+          }
+
+          &[fields="project(customer.name, name), badge"]>div {
+            padding: 0;
+          }
        }
-        .sub-menu {
-            /* Ellipsis for project tab */
-            .project-tab>div>solid-display>div:nth-child(1) {
-                solid-set-default[name='project'] {
-                    flex: 3;
-                    .project-customer,
-                    .project-name {
-                        box-sizing: border-box;
-                        display: block;
-                        width: calc(80vw - 96px);
-                        /*96px = padding of the element + width and margin of counter */
-                        @include breakpoint(lg) {
-                            width: 150px;
-                        }
-                    }
-                    .project-customer,
-                    .project-name>div {
-                        @include breakpoint(lg) {
-                            display: block;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                            white-space: nowrap;
-                        }
-                    }
-                }
-            }
-            /* Ellipsis for circle tab */
-            .circle-tab>div>solid-display>div {
-                solid-display-div[name='name'] {
-                    flex: 3;
-                    >div[name='name'] {
-                        box-sizing: border-box;
-                        padding-left: 0.2em;
-                        width: calc(80vw - 96px);
-                        /*96px = padding of the element + width and margin of counter */
-                        @include breakpoint(lg) {
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                            white-space: nowrap;
-                            width: 150px;
-                        }
-                    }
-                }
-            }
-            /* Ellipsis for message tab */
-            .message-tab>div>solid-display>div>solid-display-div>div {
-                box-sizing: border-box;
-                width: calc(80vw - 96px);
-                /*96px = padding of the element + width and margin of counter */
-                @include breakpoint(lg) {
-                    width: 150px;
-                }
-            }
-            solid-display.nosub>solid-form[fields="name"]>hubl-search-users>input {
-                margin-left: 30px!important;
-                margin-bottom: 10px;
-                width: calc(80vw - 71px);
-                display: block;
-                background-color: var(--color-secondary);
-                color: var(--color-grey-6);
-                border: 1px solid var(--color-grey-4);
-                border-radius: 3px;
-                padding: 4px;
-                @include breakpoint(lg) {
-                    margin: auto;
-                    margin-bottom: 10px;
-                    width: auto;
-                    &::placeholder {
-                        color: var(--color-grey-6);
-                    }
-                }
-            }
-            solid-display.nosub>nav {
-                text-align: center;
-                overflow: hidden;
-                display: grid;
-                grid-template-columns: auto 50% auto;
-                grid-template-areas: "left middle right";
-                >* {
-                    color: var(--color-grey-6);
-                }
-                >[data-id="prev"] {
-                    grid-area: left;
-                }
-                >[data-id="next"] {
-                    grid-area: right;
-                }
-                >span {
-                    grid-area: middle;
-                }
-            }
-            hubl-menu-publicprivate {
-                display: inline-block;
-                text-align: center;
-                div {
-                    font-family: simple-line-icons;
-                    width: 20px;
-                    font-size: 0.8em;
-                    padding-top: 0.1em;
-                }
-            }
-            >solid-display.nosub>div>solid-display>div {
-                padding: 1rem 1rem 1rem 3rem;
-            }
-            solid-display>div {
-                .create {
-                    color: var(--color-white);
-                    margin: 1rem 1rem 2.2rem 3.2rem;
-                }
-                &>solid-display {
-                    &:last-child>div {
-                        margin-bottom: 2.2rem;
-                    }
-                    >div {
-                        color: var(--color-grey-6);
-                        cursor: pointer;
-                        >hubl-menu-fix-url-circle>solid-display>div,
-                        >hubl-menu-fix-url-project>solid-display>div {
-                            padding: 1rem 1rem 1rem 3rem;
-                        }
-                    }
-                    &[fields="project(customer.name, name), badge"]>div {
-                        padding: 0;
-                    }
-                }
-                &>solid-display[active]>div,
-                &>solid-display>div>hubl-menu-fix-url-circle>solid-display[active]>div,
-                &>solid-display>div>hubl-menu-fix-url-project>solid-display[active]>div {
-                    background-color: var(--color-menu-highlight-primary);
-                    color: var(--color-menu-text-active);
-                    font-weight: bold;
-                }
-            }
-            &.menu-notification {
-                >solid-display>div>solid-display>div>hubl-menu-fix-url-circle,
-                >solid-display>div>solid-display>div>hubl-menu-fix-url-project {
-                    flex: 1;
-                }
-                >solid-display>div>solid-display>div,
-                >solid-display>div>solid-display>div>hubl-menu-fix-url-circle>solid-display>div,
-                >solid-display>div>solid-display>div>hubl-menu-fix-url-project>solid-display>div {
-                    display: flex;
-                    justify-content: space-between;
-                }
-                hubl-counter {
-                    height: 20px;
-                    width: 20px;
-                    margin-right: 1em;
-                    div.counter:not([data-nb-unread="0"]) {
-                        text-align: center;
-                        display: block;
-                        background-color: var(--sib-notifications-theme, gray);
-                        border-radius: 50%;
-                        font-size: 12px;
-                        line-height: 20px;
-                        width: 20px;
-                        height: 20px;
-                        padding-bottom: 0;
-                        color: var(--color-secondary);
-                    }
-                }
-            }
+
+        &>solid-display[active]>div,
+        &>solid-display>div>hubl-menu-fix-url-circle>solid-link>solid-display[active]>div,
+        &>solid-display>div>hubl-menu-fix-url-project>solid-link>solid-display[active]>div {
+          background-color: var(--color-menu-highlight-primary);
+          color: var(--color-menu-text-active);
+          font-weight: bold;
        }
-        .divider {
-            height: 1px;
-            background-color: var(--color-grey-11);
-            opacity: 0.2;
+      }
+
+      &.menu-notification {
+
+        >solid-display>div>solid-display>div>hubl-menu-fix-url-circle,
+        >solid-display>div>solid-display>div>hubl-menu-fix-url-project {
+          flex: 1;
        }
+
+        >solid-display>div>solid-display>div,
+        >solid-display>div>solid-display>div>hubl-menu-fix-url-circle>solid-link>solid-display>div,
+        >solid-display>div>solid-display>div>hubl-menu-fix-url-project>solid-link>solid-display>div {
+          display: flex;
+          justify-content: space-between;
+        }
+
+        hubl-counter {
+          height: 20px;
+          width: 20px;
+          margin-right: 1em;
+
+          div.counter:not([data-nb-unread="0"]) {
+            text-align: center;
+            display: block;
+            background-color: var(--sib-notifications-theme, gray);
+            border-radius: 50%;
+            font-size: 12px;
+            line-height: 20px;
+            width: 20px;
+            height: 20px;
+            padding-bottom: 0;
+            color: var(--color-secondary);
+          }
+        }
+      }
    }
-}
+
+    .divider {
+      height: 1px;
+      background-color: var(--color-grey-11);
+      opacity: 0.2;
+    }
+  }
+}
--- a/src/styles/base/table.scss
+++ b/src/styles/base/table.scss
@ -46,13 +46,17 @@
          &>* {
            border-bottom: 1px solid var(--color-table-border);
            display: table-cell;
+            text-align: center;
            vertical-align: middle;
          }
+          solid-multiple[name="user.communities"] {
+            text-align: left;
+          }
        }
      }

-      &>solid-multiple {
-        display: contents;
+      /*&>solid-multiple {
+        display: contents;*/

        &>div {
          display: contents;
@ -68,7 +72,7 @@
            }
          }
        }
-      }
+      /*}*/
    }
  }
 }
@ -117,6 +121,14 @@
    width: 280px;
  }

+  .w450 {
+    width: 450px;
+  }
+
+  .w370 {
+    width: 370px;
+  }
+
  .w230 {
    width: 230px;
  }
@ -152,6 +164,10 @@
      .desktop-btn-margin__left;
    }
  }
+
+  &.is-spaced {
+    padding: 0.8rem 2.2rem;
+  }
 }

 .cell-with-name {
@ -163,23 +179,11 @@

 /* Styles of elements inside cells */

-.user-thumb>div,
-[name='user-thumb'] {
-  vertical-align: middle;
-  text-align: left;
-  @extend %user-thumb__grid;
-  padding: 0 2.2rem;
-
-  >.user-thumb__picture {
-    @extend .user-thumb__picture;
-  }
-
-  >[name='sup'] {
-    @extend %user-thumb__grid-sup;
-  }
-
-  >[name='sub'] {
-    @extend %user-thumb__grid-inf;
+.table {
+  
+  .user-thumb.is-spaced,
+  [name='user-thumb'] {
+    padding: 0.8rem 2.2rem;
  }
 }

--- a/src/styles/base/user-thumb.scss
+++ b/src/styles/base/user-thumb.scss
@ -35,6 +35,22 @@
  color: var(--color-user-thumb-name);
  font-weight: 600;
  margin-right: 1rem;
+  text-align: left;
+}
+
+.user-thumb__send {
+  position: relative;
+  bottom: 7px;
+  left: -5px;
+
+  solid-link {
+    @include icon('speech');
+
+    &::before {
+      display: inline-block;
+      color: var(--color-primary);
+    }
+  }
 }

 .user-thumb__admin:not(:empty) {
@ -50,8 +66,33 @@
    content: '@';
  }
 }
+solid-multiple[name="user.communities"] {
+  * {
+    display: contents;
+  }
+
+  solid-display-value {
+    &:after {
+      content: ",";
+      margin-right: 5px;
+    }
+
+    display: inline-block!important;
+  }
+
+  >solid-display>div>solid-display:last-child>div>solid-display-value:after {
+    display: none;
+  }
+
+  >solid-display {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: calc(50% - 22px - 0.5rem);
+    line-height: 22px;
+  }

-.user-thumb__city:not(:empty) {
  @include mdi('atom');
  align-items: center;
  display: flex;
@ -76,10 +117,16 @@
    margin-right: 0.50rem;
  }
 }
+.user-thumb[name="classGroup"] {
+  display: block;
+  margin-top: 15px;
+}

 /* Apply the grids to all user-thumbs */
 .user-thumb>div,
+.user-thumb>[name='classGrid'],
 [name='user-thumb'] {
+
  @extend %user-thumb__grid;

  >[name='sup'] {
@ -90,9 +137,3 @@
    @extend %user-thumb__grid-inf;
  }
 }
-
-/* Add extra spaces to user-thumbs that are inside a table */
-.user-thumb.is-spaced>div,
-[name='user-thumb'] {
-  padding: 0.8rem 2.2rem;
-}
--- a/src/styles/components/comment.scss
+++ b/src/styles/components/comment.scss
@ -37,9 +37,9 @@
      }
    }

-    solid-conversation.conversation {
+    sib-conversation.conversation {

-      .solid-conversation {
+      .sib-conversation {
        font-family: Open Sans;

        [name='conversation-wrapper'] {
@ -74,7 +74,7 @@
        solid-ac-checker {
          border-top: 1px solid $color-210-17-91;

-          solid-form-textarea {
+          solid-form-textarea-label {

            >label div {
              color: $color-210-5-56;
--- a/src/styles/components/sidebar.scss
+++ b/src/styles/components/sidebar.scss
@ -8,6 +8,10 @@

  &.with-padding {
    padding: 1.3rem;
+
+    @include breakpoint(lg) {
+      padding: 2.5rem;
+    }
  }
 }

@ -82,7 +86,8 @@
        >solid-route {

          &[name*='circle'],
-          &[name*='project'] {
+          &[name*='project'],
+          &[name*='communities'] {

            >li::before {
              font-size: 4rem;
@ -116,16 +121,8 @@
            @include ci('file');
          }

-          &[name='admin-users']>li::before {
-            background-color: var(--color-secondary);
-            content: '';
-            display: inline-block;
-            height: 40px;
-            mask: url('/images/add-user.svg') 1% 1% / 1px 1px no-repeat;
-            mask-size: cover;
-            -webkit-mask: url('/images/add-user.svg') 1% 1% / 1px 1px no-repeat;
-            -webkit-mask-size: cover;
-            width: 40px;
+          &[name='admin-communities']>li {
+            @include ci('networking');
          }

          &[name='admin-circles']>li {
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@ -26,4 +26,3 @@
    @import 'layout/dashboard/index';
    @import 'layout/polls/index';
 }
-@import '../../client.sample.etuc.scss';
--- a/src/styles/layout/events/events.scss
+++ b/src/styles/layout/events/events.scss
@ -7,20 +7,20 @@ solid-event section {
    width: 100%;
    font-family: "Facit";
    font-weight: 400;
-    color: #7A7F85;
+    color: var(--color-main-text);
    solid-event {
-        sib-display div {
+        solid-display div {
            max-width: 1110px;
-            sib-display {
+            solid-display {
                margin: 0 0 20px 40px;
            }
        }
        .red-button,
        .event-type {
-            background-color: #C4262E;
+            background-color: var(--color-add-button-background);
        }
        .black-button {
-            background-color: #3A3A3A;
+            background-color: var(--highlight-font-color);
            margin-left: 10%;
        }
        .event-type,
@ -30,23 +30,23 @@ solid-event section {
        #listevents,
        #circle-listevents {
            [name="name"],
-            solid-display-link-event .mdi::before {
-                color: #063B5C;
+            event-display-link-event .mdi::before {
+                color: var(--color-primary);
            }
        }
        .event-place-name,
        .nextevent-startdate,
-        solid-display-link-event {
-            color: #3A3A3A;
+        event-display-link-event {
+            color: var(--highlight-font-color);
        }
-        .sib-event {
+        .solid-event {
            font-family: "Facit";
            font-weight: 400;
            .page-title {
                font-family: "RefrigeratorDelxW01Bold";
                font-size: 3.2rem;
                line-height: 3.8rem;
-                color: #063B5C;
+                color: var(--color-primary);
            }
        }
        #default-listevents,
@ -56,22 +56,21 @@ solid-event section {
                width: max-content;
                height: max-content;
                padding: 5px 20px;
-                color: #063B5C;
+                color: var(--color-primary);
            }
-            sib-form {
-                sib-form-dropdown {
-                    margin-left: 15px;
-                    label div {
+            .headline h2 {
+                float: left;
+                margin-top: 35px;
+                color: var(--color-primary);
+                text-transform: none;
+                font-family: "RefrigeratorDelxW01Bold";
+                font-size: 2.4rem;
+            }
+            solid-form {
+                solid-form-dropdown-label {
+                    label {
                        height: 2.5rem;
                    }
-                    &::before {
-                        font-family: "RefrigeratorDelxW01Bold";
-                        font-size: 2.4rem;
-                        line-height: 29px;
-                        color: #063B5C;
-                        top: -40px;
-                        content: "Research an event";
-                    }
                }
            }
            [name="name"] {
@ -79,7 +78,7 @@ solid-event section {
                font-size: 1.8rem;
                line-height: 2.6rem;
                letter-spacing: 0.32px;
-                color: #063B5C;
+                color: var(--color-primary);
                padding: 5px;
                max-width: 250px;
                margin: 5px auto;
@ -90,12 +89,12 @@ solid-event section {
                width: max-content;
                height: max-content;
            }
-            solid-display-location-events {
+            event-display-location-events {
                padding: 5px;
            }
        }
        .eventdetail {
-            sib-display div {
+            solid-display div {
                display: block;
            }
            .mdi::before {
@ -108,10 +107,10 @@ solid-event section {
                font-family: "RefrigeratorDelxW01Bold";
                font-size: 3.2rem;
                line-height: 3.8rem;
-                color: #063B5C;
+                color: var(--color-primary);
                display: block;
            }
-            color: #063B5C;
+            color: var(--color-primary);
            .event-type {
                width: max-content;
                padding: 5px 20px;
@ -124,12 +123,12 @@ solid-event section {
                font-size: 1.6rem;
                line-height: 2.6rem;
            }
-            solid-display-link-event a {
+            event-display-link-event a {
                font-size: 1.6rem;
            }
        }
        .newevent label div, 
-        .newevent sib-form-file div label {
+        .newevent solid-form-file-label div label {
            line-height: 2.2rem;
            text-transform: uppercase;
            color: var(--form-title);
@ -165,7 +164,7 @@ solid-event section {
    background-color: #f0f3f6;
 }

-#circle-events solid-event .events sib-form sib-form-dropdown select {
+#circle-events solid-event .events solid-form solid-form-dropdown-label select {
    background-color: #f0f3f6;
 }

--- a/src/styles/layout/job-offers/job-offers.scss
+++ b/src/styles/layout/job-offers/job-offers.scss
@ -180,7 +180,7 @@ solid-job-board {
          }
        }

-        .solid-conversation,
+        .sib-conversation,
        .conversation > div {
          display: flex;
          flex-direction: column-reverse;
--- a/src/styles/layout/polls/_index.scss
+++ b/src/styles/layout/polls/_index.scss
@ -1 +1 @@
-@import '_polls.scss';
+@import 'polls.scss';
--- a/src/styles/layout/polls/_polls.scss
+++ b/src/styles/layout/polls/_polls.scss
@ -12,27 +12,25 @@ solid-poll > div {
        margin: auto;
        .headline {
            h2 {
-                margin: 0 40px;
                font-family: "RefrigeratorDelxW01Bold";
                font-size: 2.4rem;
-                line-height: 3.8rem;
-                color: #063B5C;
+                color: var(--color-primary);
+                float: left;
+                margin-top: 5px;
            }
-            .add-poll {
-                solid-link {
-                    float: right;
-                    margin-top: 10px;
-                    display: initial;
-                    margin-right: 75px;
-                    position: relative;
-                    z-index: 1;
+            solid-link {
+                display:flex;
+                justify-content: end;
+                margin-top: 30px;
+                margin-right: 70px;
+                z-index: 1;
+                position: relative;
+                .add-poll {
+                    background-color: var(--color-add-button-background);
+                    color: var(--color-add-button);
                    box-shadow: 0px 0px 4px 1px #CACACA;
-                    height: 2rem;
-                    font-size: 1.4rem;
                    text-transform: uppercase;
                    font-weight: 700;
-                    padding: 0.55rem 2.5rem;
-                    width: max-content;
                    line-height: 20px;
                    &::before {
                        font-family: "material-design-icons";
@ -52,9 +50,12 @@ solid-poll > div {
                display: block;
                border-bottom: solid 1px #cacaca;
                height: 90px;
-                width: 650px;
-                margin: 16px 25px 25px;
+                margin: 30px 25px 25px;
                max-width: 85%;
+                solid-form-dropdown-label label {
+                    font-size: 1.4rem;
+                    font-family: "Facit";
+                }
                solid-form-placeholder-text {
                    margin-left: 15px;
                    input {
@ -69,7 +70,7 @@ solid-poll > div {
                height: 100%;
                max-width: 1100px;
                margin: auto;
-                solid-display {
+                > solid-display {
                    width: 320px;
                    height: 520px;
                    margin: 0 0 20px 40px;
@ -84,7 +85,7 @@ solid-poll > div {
                        *[name="body"] {
                            padding: 10px;
                            /*size of tags of poll card*/
-                            etuc-display-votetags {
+                            poll-display-votetags {
                                >div {
                                    width: 64px;
                                    height: 24px;
@ -101,7 +102,7 @@ solid-poll > div {
                        }
                        [name="title"] {
                            font-family: "RefrigeratorDelxW01Bold";
-                            color: #063B5C;
+                            color: var(--color-primary);
                            font-size: 1.8rem;
                            font-weight: 600;
                            text-transform: uppercase;
@ -112,7 +113,7 @@ solid-poll > div {
                        }
                        [name="hostingOrganisation"],
                        [name="endDate"] {
-                            color: #3A3A3A;
+                            color: var(--highlight-font-color);
                            font-family: Facit;
                            font-size: 14px;
                            letter-spacing: 0;
@ -122,7 +123,7 @@ solid-poll > div {
                            &::before {
                                content: '\e037';
                                font-family: 'simple-line-icons';
-                                color: #C4262E;
+                                color: var(--color-secondary);
                                height: 22px;
                                width: 24px;
                                font-size: 16px;
@ -136,11 +137,11 @@ solid-poll > div {
                            display: flex;
                            flex-direction: row;
                            margin-top: 10px;
-                            solid-display-div [name="dateImage"]::before {
+                            div [name="dateImage"]::before {
                                display: inline-block;
                                font: normal normal normal 24px/1 "Material Design Icons";
                                content: "\F6AF";
-                                color: #C4262E;
+                                color: var(--color-secondary);
                                height: 22px;
                                width: 24px;
                                font-size: 20px;
@ -149,7 +150,7 @@ solid-poll > div {
                            }
                        }
                        [name="shortDescription"] {
-                            color: #7A7F85;
+                            color: var(--color-main-text);
                            font-family: Facit;
                            font-size: 14px;
                            letter-spacing: 0;
@ -174,6 +175,7 @@ solid-poll > div {
        h1 {
            font-size: 3.2rem;
            line-height: 3.8rem;
+            margin: 20px auto;
        }
        h2 {
            font-size: 26px;
@ -186,7 +188,7 @@ solid-poll > div {
        solid-display.topline {
            >div:first-of-type {
                *[name="right"] {
-                    etuc-display-votetags {
+                    poll-display-votetags {
                        >div {
                            width: 64px;
                            height: 24px;
@ -200,15 +202,15 @@ solid-poll > div {
        }
        [name="hostingOrganisation"],
        [name="dateLine"] {
-            color: #3A3A3A;
+            color: var(--highlight-font-color);
            font-family: Facit;
            font-size: 16px;
            font-weight: bold;
        }
-        [name="dateLine"]  solid-set-default {
+        [name="dateLine"] solid-set-default {
            display: flex;
            margin-top: 7px;
-            solid-display-date {
+            solid-display-value, solid-display-date-value {
                margin-left: 7px;
            }
        }
@ -216,24 +218,24 @@ solid-poll > div {
            margin-left: 0;
            [name="hostingOrganisation"]::before {
                content: '\e037';
-                font-family: 'simple-line-icons';
+                font-family: "simple-line-icons";
                font-weight: 400;
-                color: #C4262E;
+                color: var(--color-secondary);
                margin-right: 10px;
                font-size: 16px;
            }
        }
-        solid-display-div [name="dateImage"]::before {
+        div [name="dateImage"]::before {
            font-family: "Material Design Icons";
            font-weight: 400;
            content: "\F6AF";
-            color: #C4262E;
+            color: var(--color-secondary);
            font-size: 20px;
        }
        [name="shortDescription"],
        [name="longDescription"] {
            margin: 20px 0;
-            color: #7A7F85;
+            color: var(--color-main-text);
            font-family: Facit;
        }
        [name="shortDescription"] {
@ -255,7 +257,7 @@ solid-poll > div {
            font-weight: 400;
            font-size: 20px;
            margin-right: 10px;
-            color: #3A3A3A;
+            color: var(--highlight-font-color);
        }
        .vote-section > h3::before {
            content:"\F004";
@ -278,16 +280,15 @@ solid-poll > div {
        div[name="progressBar"] div .progressBarValue {
            margin: 0;
        }
-        #poll-votes-form input[type="submit"] {
+        .poll-votes-form input[type="submit"] {
            height: 38px;
-            width: 149px;
            border-radius: 19px;
            box-shadow: 0 0 7px 0 rgba(0,0,0,0.15);
        }
-        #poll-votes-form input[type="submit"]:disabled {
+        .poll-votes-form input[type="submit"]:disabled {
            opacity: 0.3;
        }
-        #unavailablePoll {
+        .unavailablePoll {
            font-style: italic;
        }
        .progressBarValue {
@ -297,7 +298,7 @@ solid-poll > div {
        }
        .send-share,
        .back-to-list {
-            background-color: #3A3A3A;
+            background-color: var(--highlight-font-color);
            padding: 5px 25px;
            font-size: 1.4rem;
            &::before {
@ -378,9 +379,9 @@ solid-poll > div {
        background-color: #f0f3f6;;
    }
    #circles-add-survey, #default-add-survey {
-            background-color: white;
-            padding: 50px 0;
-            margin: -20px auto;
+        background-color: white;
+        padding: 50px 0;
+        margin: -20px auto;
        h2 {
            font-family: "RefrigeratorDelxW01Bold";
            font-size: 3.2rem;
@ -390,7 +391,7 @@ solid-poll > div {
        }
        p {
            margin-top: 10px;
-            color: #7A7F85;
+            color: var(--color-main-text);
            font-family: Facit;
            font-size: 16px;
        }
@ -406,12 +407,14 @@ solid-poll > div {
                height: 110px;
            }
            solid-form-label-text,
-            solid-form-textarea {
+            solid-form-textarea,
+            solid-form-label-textarea,
+            solid-form-textarea-label {
                display: block;
                margin: 15px 0;
                padding: 0;
            }
-            label > div, solid-form-file-image > div label, solid-form-auto-completion[name="tags"] > label::before {
+            label > div, solid-form-file-image > div label, solid-form-dropdown-autocompletion[name="tags"] > label::before {
                margin-bottom: 5px;
                margin-top: 20px;
                color: var(--form-title);
@ -451,18 +454,18 @@ solid-poll > div {
                        display: flex;
                        width: 100%;
                        justify-content: space-between;
-                        custom-choix {
+                        poll-custom-choice {
                            width: calc(100% - 45px);
                            solid-form-label-text[name="name"] {
                                margin-bottom: 0;
                            }
                        }
                        button {
-                            border: 1px solid var(--main-color);
+                            border: 1px solid var(--color-primary);
                            background-color: transparent;
                            border-radius: 15px;
                            font-size: 24px;
-                            color: var(--main-color);
+                            color: var(--color-primary);
                            padding: 0;
                            height: 30px;
                            width: 30px;
@ -480,7 +483,7 @@ solid-poll > div {
                    font-weight: bold;
                    font-size: 13px;
                    margin: 10px 0;
-                    color: var(--main-color);
+                    color: var(--color-primary);
                    &::before {
                        content: "\F419";
                        font-family: Material Design Icons;
@ -495,7 +498,7 @@ solid-poll > div {
                margin-top: 10px;
                .ss-multi-selected .ss-values .ss-value {
                    border-radius: 14px;
-                    background-color: #C4262E;
+                    background-color: var(--color-secondary);
                    padding: 5px 10px;
                    font-size: 11px;
                }
@ -510,6 +513,24 @@ solid-poll > div {
                text-transform: uppercase;
            }
        }
+        .poll-footer {
+            .back-to-list {
+                background-color: var(--highlight-font-color);
+                padding: 5px 25px;
+                font-size: 1.4rem;
+                margin-left: 10%;
+                border-radius: 15px;
+                color: white;
+                &::before {
+                    font-family: "Material Design Icons";
+                    font-weight: 400;
+                    font-size: 20px;
+                    vertical-align: middle;
+                    color: white;
+                    content: "\F04D";
+                }
+            }
+        }
    }
 }

--- a/src/styles/layout/resources/resources.scss
+++ b/src/styles/layout/resources/resources.scss
@ -3,27 +3,27 @@
    width: 100%;
    font-family: "Facit";
    font-weight: 400;
-    color: #7A7F85;
+    color: var(--content-font-color);
    solid-resource {
-        sib-display div {
+        solid-display div {
            max-width: 1110px;
-            sib-display {
+            solid-display {
                margin: 0 0 20px 40px;
            }
        }
-        .sib-resource {
+        .solid-resource {
            font-family: "Facit";
            .page-title {
                font-family: "RefrigeratorDelxW01Bold";
                font-size: 3.2rem;
                line-height: 3.8rem;
-                color: #063B5C;
+                color: var(--color-primary);
            }
            .red-button {
-                background-color: #C4262E;
+                background-color: var(--color-add-button-background);
            }
            .black-button {
-                background-color: #3A3A3A;
+                background-color: var(--highlight-font-color);
                margin-left: 10%;
            }
            .lnk-newresource {
@ -33,23 +33,22 @@
                position: relative;
            }
            .listresources .lnk-newkeyword {
-                top: 133px;
+                top: 155px;
                left: 220px;
                .button.thin-button.mdi {
                    padding: 5px 20px;
                }
            }
-            .resources {
-                margin-top: -35px;
-                sib-form {
-                    &::before {
-                        content: "Research a resource";
-                        font-family: "RefrigeratorDelxW01Bold";
-                        color: #063B5C;
-                        font-size: 2.4rem;
-                        line-height: 3.8rem;
-                        top: -10px;
-                    }
+            .listresources {
+                .headline h2 {
+                    float: left;
+                    margin-top: 5px;
+                    color: var(--color-primary);
+                    text-transform: none;
+                    font-family: "RefrigeratorDelxW01Bold";
+                    font-size: 2.4rem;
+                }
+                solid-form {
                    select {
                        width: 150px;
                    }
@ -61,14 +60,16 @@
                    width: max-content;
                    height: max-content;
                    padding: 10px 30px;
-                    color: #063B5C;
+                    color: var(--color-primary);
                }
-                sib-display sib-display {
+                solid-display solid-display {
                    [name="name"] {
                        font-family: "RefrigeratorDelxW01Bold";
-                        color: #063B5C;
+                        color: var(--color-primary);
                    }
-                    [name="link"] a {
+                    [name="link"] a, [name="document"] a  {
+                        width: 75%;
+                        margin-bottom: 10px;
                        padding-left: 35px;
                        position: relative;
                        &::before {
@ -84,7 +85,7 @@
                    font-family: "RefrigeratorDelxW01Bold";
                    font-size: 3.2rem;
                    line-height: 3.8rem;
-                    color: #063B5C;
+                    color: var(--color-primary);
                }
                [name="infotext"] {
                    justify-content: flex-start;
@ -97,7 +98,7 @@
                }
            }
            .newresource label div, 
-            .newresource sib-form-file div label {
+            .newresource solid-form-file div label {
                line-height: 2.2rem;
                text-transform: uppercase;
                color: var(--form-title);
@ -108,11 +109,11 @@
            .newresource select, 
            .newresource textarea, 
            .newresource input, 
-            .newresource sib-multiple-select .ss-main .ss-multi-selected {
+            .newresource solid-multiple-select .ss-main .ss-multi-selected {
                background-color: var(--form-inputs-background);
            }
            .newresource input[type="submit"] {
-                background-color: #3C3F57;
+                background-color: var(--form-submit-button);
            }
            .newresource input[type="file"] {
                background-color: transparent;
@ -124,7 +125,7 @@
        }
    }
    @media (max-width: 991px) {
-        .sib-resource {
+        .solid-resource {
            margin-top: 65px;
        }
    }
@ -134,7 +135,7 @@
    background-color: #f0f3f6;
 }

-#circle-resources .resources sib-form sib-form-dropdown select {
+#circle-resources .resources solid-form solid-form-dropdown select {
    background-color: #f0f3f6;
 }

--- a/src/styles/layout/user/_index.scss
+++ b/src/styles/layout/user/_index.scss
@ -1 +1 @@
-@import 'user-profile';
+@import 'messages';
--- a/src/styles/layout/user/messages.scss
+++ b/src/styles/layout/user/messages.scss
@ -0,0 +1,16 @@
+.avatar-container {
+  display: inline-block;
+  margin-right: 10px;
+
+  .avatar {
+    height: 40px;
+    width: 40px;
+  }
+}
+.avatar-text {
+  position: absolute;
+  top: 7.5rem;
+  @include breakpoint(lg) {
+    top: 2.8rem;
+  }
+}
--- a/src/styles/layout/user/user-profile.scss
+++ b/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;
-      }
-    }
-  }
-}*/
--- a/src/sw.js
+++ b/src/sw.js
@ -0,0 +1,113 @@
+const CACHE_NAME = 'hubl-store';
+
+self.addEventListener('install', function (e) {
+  self.skipWaiting();
+  e.waitUntil(
+    caches.open(CACHE_NAME).then(function (cache) {
+      return cache.addAll([
+        '/locales/es.json',
+        '/locales/fr.json',
+        '/scripts/index.js',
+        '/syles/index.css',
+        '/index.html',
+        '/'
+      ]);
+    })
+  );
+});
+
+self.addEventListener('activate', function (e) {
+  // invalidate older versions
+  e.waitUntil(
+    caches.keys()
+    .then(function (keyList) {
+      return Promise.all(keyList.map(function (key) {
+        if (key !== CACHE_NAME && key !== (CACHE_NAME + "-cdn") && key !== (CACHE_NAME + "-api")) {
+          return caches.delete(key);
+        }
+      }));
+    }));
+  self.clients.claim();
+});
+
+self.addEventListener('fetch', function (event) {
+  let requestURL = new URL(event.request.url);
+  if (requestURL.origin == location.origin) {
+    // Static asset, cache then network
+    event.respondWith(
+      caches.open(CACHE_NAME).then(function (cache) {
+        return cache.match(event.request).then(function (response) {
+          var fetchPromise = fetch(event.request).then(function (networkResponse) {
+            cache.put(event.request, networkResponse.clone());
+            return networkResponse;
+          });
+          return response || fetchPromise;
+        });
+      }),
+    );
+  } else {
+    if (
+      event.request.method == 'POST' ||
+      event.request.method == 'PUT'
+    ) {
+      // disabled: lead to cors errors
+      // // POST/PUT to api, rewrite the cache
+      // event.respondWith(
+      //   caches.open(CACHE_NAME + '-api').then(function (cache) {
+      //     return fetch(event.request).then(function (response) {
+      //       cache.put(event.request, response.clone());
+      //       return response;
+      //     })
+      //   }));
+      // api: no cache
+      event.respondWith(fetch(event.request));
+    } else if (
+      /matomo/.test(requestURL.origin) ||
+      /sentry/.test(requestURL.origin) ||
+      /jabber/.test(requestURL.origin) ||
+      /xmpp/.test(requestURL.origin)
+    ) {
+      // analytics, always distant
+      event.respondWith(fetch(event.request));
+    } else {
+      if (
+        /unpkg/.test(requestURL.origin) ||
+        /skypack/.test(request.origin) ||
+        /jspm/.test(requestURL.origin) ||
+        /jsdeliver/.test(requestURL.origin) ||
+        /cdn/.test(requestURL.origin) ||
+        /googleapis/.test(requestURL.origin)
+      ) {
+        // cdn: cache then network
+        event.respondWith(
+          caches.open(CACHE_NAME + '-cdn').then(function (cache) {
+            return cache.match(event.request).then(function (response) {
+              var fetchPromise = fetch(event.request).then(function (networkResponse) {
+                cache.put(event.request, networkResponse.clone());
+                return networkResponse;
+              });
+              return response || fetchPromise;
+            });
+          }),
+        );
+      } else {
+        // disabled: lead to cors errors
+        // // api: distant then cache
+        // event.respondWith(
+        //   fetch(event.request)
+        //   .then((response) => {
+        //     caches.open(CACHE_NAME + '-api').then(function (cache) {
+        //       cache.put(event.request, response.clone());
+        //       return response;
+        //     });
+        //   })
+        //   .catch(() => {
+        //     return caches.match(event.request);
+        //   })
+        // );
+        // api: no cache
+        event.respondWith(fetch(event.request));
+      }
+    }
+  }
+});
--- a/src/templates/hubl-captain.pug
+++ b/src/templates/hubl-captain.pug
@ -11,5 +11,6 @@ solid-widget(name='hubl-captain')
      class-is_lead='user-thumb__lead'

      widget-account.picture='hubl-user-avatar'
-      value-is_lead='Capitaine'
+      value-is_lead=''
+      data-trans='value-is_lead=template-captain.isLead'
    )
--- a/src/templates/hubl-circle-team.pug
+++ b/src/templates/hubl-circle-team.pug
@ -1,20 +0,0 @@
-include hubl-user-avatar.pug
-
-solid-widget(name='hubl-circle-team-template')
-  template
-    solid-display.user-thumb.is-spaced(
-      data-src='${await value.user}'
-      fields='account.picture, sup(name, isadmin), sub(profile.city)'
-      value-isadmin='${await value.is_admin}'
-
-      class-account.picture='avatar user-thumb__picture'
-      class-name='user-thumb__name'
-      class-isadmin='user-thumb__admin'
-      class-profile.city='user-thumb__city'
-
-      widget-account.picture='hubl-user-avatar'
-      widget-isadmin='hubl-circle-user-admin'
-    )
-
-solid-widget(name='hubl-circle-user-admin')
-  template ${(await value) != "false" ? "Administrateur" : ""}
--- a/src/templates/hubl-project-team.pug
+++ b/src/templates/hubl-project-team.pug
@ -1,22 +0,0 @@
-include hubl-user-avatar.pug
-
-solid-widget(name='hubl-project-team')
-  template
-    solid-display.user-thumb.is-spaced(
-      data-src='${await value}'
-      fields='user.account.picture, sup(user.name, isadmin), sub(user.profile.city, name)'
-      value-isadmin='${await value.is_admin}'
-
-      class-user.account.picture='avatar user-thumb__picture'
-
-      class-user.name='user-thumb__name'
-      class-isadmin='user-thumb__admin'
-      class-user.profile.city='user-thumb__city'
-      class-name='user-thumb__lead'
-
-      widget-user.account.picture='hubl-user-avatar'
-      widget-isadmin='hubl-project-user-admin'
-    )
-
-solid-widget(name='hubl-project-user-admin')
-  template ${(await value) == "false" ? "" : "Administrateur"}
--- a/src/views/admin/page-admin-circles-create.pug
+++ b/src/views/admin/page-admin-circles-create.pug
@ -1,7 +1,7 @@
 div.content-box__info.flex
-  solid-link(class="backlink right", next='admin-circle-list') Retour
+  solid-link(class="backlink right", next='admin-circle-list' data-trans='circle.create.backlink')

-  h1.centered Créer un cercle
+  h1.centered(data-trans='circle.create.title')

  div#loader-circles-create.loader.loader-top
    div
@ -13,19 +13,24 @@ div.content-box__info.flex
    data-src=`${endpoints.circles || endpoints.post.circles}`

    fields='status, name, description'
+    required-status
+    required-name
+    required-description
    loader-id='loader-circles-create'

    class-status='form-label is-light is-full-width color'
    class-name='form-label is-light is-full-width input-text-like'
    class-description='form-label is-light is-full-width input-text-like'

-    label-status='Statut du cercle'
-    label-name='Nom du cercle *'
-    label-description='Sous-titre du cercle *'
+    label-status=''
+    label-name=''
+    label-description=''

    widget-status='hubl-status'
    
    next='circle'

-    submit-button='Enregistrer'
+    submit-button=''
+    
+    data-trans='label-status=circle.create.labelStatus;label-name=circle.create.labelName;label-description=circle.create.labelDescription;submit-button=circle.create.buttonSubmit'
  )
--- a/src/views/admin/page-admin-circles.pug
+++ b/src/views/admin/page-admin-circles.pug
@ -5,17 +5,17 @@
    solid-route(name='circle-left')

  div.content-box__header.flex.space-between
-    h1.without-margin Administration
-    button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
+    h1.without-margin(data-trans='circle.list.title')
+    button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='circle.list.buttonMobile')

  include ../circle/page-circle-left.pug

-  #admin-circle-list.content-box__height(hidden)
+  #admin-circle-list.content-box__height(hidden, data-view="admin-circle-list")
    include ../../templates/hubl-user-avatar.pug

    solid-widget(name='hubl-circle-owner')
      template
-        solid-display.user-thumb.is-spaced(
+        solid-display.user-thumb.block.is-spaced(
          data-src='${await value}'
          fields='account.picture, sup(name), sub(username)'

@ -31,27 +31,29 @@

      div.admin-header.flex

-        h3 Cercles
+        h3(data-trans='circle.list.subTitle')

-        solid-link(
-          class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
-          next='admin-circle-create'
-        ) Créer un cercle
+        solid-ac-checker(data-src=`${endpoints.circles || (endpoints.post && endpoints.post.circles)}`, permission='acl:Append')
+          solid-link(
+            class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
+            next='admin-circle-create' data-trans='circle.list.buttonCreate'
+          )

      .table-wrapper
        .table

          div.table-header.grey-color
-            div.w280 Nom
-            div.w280 Administrateurs
-            div.w280 Rejoindre
+            div.w280(data-trans='circle.list.tableHeader1')
+            div.w280(data-trans='circle.list.tableHeader2')
+            div.w280(data-trans='circle.list.tableHeader3')

          solid-widget(name='hubl-admin-circle-leave-button')
            template
              solid-delete(
                class='circle-leave button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
                data-src="${src}"
-                data-label='Quitter'
+                data-label=''
+                data-trans='data-label=circle.list.buttonQuit'
              )
              hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}` target-src='${src}')
              hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src='${src}')
@ -70,7 +72,7 @@

            class-circle.name='w280 border cell-with-name'
            class-circle.owner='w280 border cell-with-id-card'
-            class-leaveButton='w280 border cell-with-buttons'
+            class-leaveButton='w280 border cell-with-buttons is-spaced'

            action-leaveButton="joinButton"
            widget-leaveButton="hubl-admin-circle-leave-button"
@ -89,6 +91,7 @@
                widget-user.username='solid-form-hidden'

                submit-button='Rejoindre'
+                data-trans='submit-button=circle.list.buttonJoin'
              )
              hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}` target-src='${value}')
              hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src='${value}')
@ -108,7 +111,7 @@
            class-owner='w280 border cell-with-id-card'
            widget-owner='hubl-circle-owner'

-            class-members='w280 border cell-with-buttons'
+            class-members='w280 border cell-with-buttons is-spaced'
            widget-members="hubl-admin-circle-join-button"

            order-by="name"
@ -120,5 +123,5 @@
        div
        div

-  #admin-circle-create.content-box__height(hidden)
+  #admin-circle-create.content-box__height(hidden, data-view="admin-circle-create")
    include page-admin-circles-create.pug
--- a/src/views/admin/page-admin-communities.pug
+++ b/src/views/admin/page-admin-communities.pug
@ -0,0 +1,54 @@
+.content-box.flex.full-width.with-form
+  solid-router(default-route='admin-communities-list', hidden)
+    solid-route(name='admin-communities-list')
+    solid-route(name='admin-users-create', use-id)
+
+  div.content-box__header.flex.space-between
+    h1.without-margin(data-trans='communities.title')
+    button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='communities.menuMobile')
+  
+  solid-widget(name='hubl-action-community')
+    template
+      solid-ac-checker(data-src="${value}", nested-field="members", permission='acl:Append')
+        solid-link(
+          class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
+          data-src="${value}"
+          next="admin-users-create"
+          data-trans='communities.linkInvite'
+        )
+      solid-ac-checker(data-src="${value}", nested-field="members", no-permission='acl:Append')
+        div.button.text-bold.text-uppercase.button-disabled(data-trans='communities.noPermission')
+
+  #admin-communities-list.content-box__height(hidden, data-view="admin-communities-list")
+    div.content-box__info.flex
+      div.admin-header.flex
+        h3(data-trans='communities.subTitle')
+
+      .table-wrapper
+        .table
+          div.table-header.grey-color
+            div.w450(data-trans='communities.tableHeader1') 
+            div.w370(data-trans='communities.tableHeader2')
+        
+          solid-display(
+            class='table-body'
+            bind-user
+            nested-field='communities'
+            fields='community.name, community'
+            loader-id='loader-admin-community'
+
+            class-community.name='w450 border cell-with-name'
+            class-community='w370 border cell-with-buttons is-spaced'
+            widget-community='hubl-action-community'
+
+            order-asc='community.name'
+          )
+
+      div#loader-admin-community.loader.loader-top
+        div
+        div
+        div
+        div
+
+  #admin-users-create.content-box__height(hidden, data-view="admin-users-create")
+    include page-admin-users-create.pug
--- a/src/views/admin/page-admin-projects-create.pug
+++ b/src/views/admin/page-admin-projects-create.pug
@ -1,18 +1,7 @@
 div.content-box__info.flex
-  solid-link(class="backlink right" next='admin-project-list') Retour
+  solid-link(class="backlink right" next='admin-project-list' data-trans='project.create.backlink')

-  solid-widget(name="hubl-admin-project-add-user")
-    template
-      solid-form(
-        data-holder
-        fields='user, project'
-        range-user=`${endpoints.users || endpoints.get.users}`
-        value-project='${src}'
-        widget-project='solid-form-hidden'
-        naked
-      )
-
-  h1.centered Créer un nouveau projet
+  h1.centered(data-trans='project.create.title')

  div#loader-projects-create.loader.loader-top
    div
@ -24,27 +13,33 @@ div.content-box__info.flex
    data-src=`${endpoints.projects || endpoints.post.projects}`
    
    fields='status, line-1(customer.name, name), line-2(captain)'
+    required-status
+    required-customer.name
+    required-name
+    required-captain
    loader-id='loader-projects-create'

-    label-status='Statut du cercle*'
+    label-status=''
    widget-status='solid-form-hidden'
    class-status='form-label is-light is-full-width'
    value-status="Private"

-		label-customer.name='Nom du client*'
+		label-customer.name=''
    class-customer.name='form-label is-light is-half-width input-text-like'

-		label-name='Nom du projet*'
+		label-name=''
    class-name='form-label is-light is-half-width input-text-like'

-    label-captain='Capitaine du projet*'
+    label-captain=''
    range-captain=`${endpoints.users || endpoints.get.users}`
    class-captain='form-label is-light is-half-width'
-    widget-captain='solid-form-auto-completion'
+    widget-captain='solid-form-dropdown-autocompletion-label'

    class='input-text-like'

    next='project'

-    submit-button='Enregistrer'
+    submit-button=''
+
+    data-trans='label-status=project.create.labelStatus;label-customer.name=project.create.labelCustomer;label-name=project.create.labelName;label-captain=project.create.labelCaptain;submit-button=project.create.buttonSubmit'
  )
--- a/src/views/admin/page-admin-projects.pug
+++ b/src/views/admin/page-admin-projects.pug
@ -5,37 +5,40 @@
    solid-route(name='project-left')

  div.content-box__header.flex.space-between
-    h1.without-margin Administration
-    button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
+    h1.without-margin(data-trans='project.list.title')
+    button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='project.list.buttonMobile')

-  #project-left(hidden)
+  #project-left(hidden, data-view="project-left")
    include ../project/page-project-left.pug

-  #admin-project-list.content-box__height(hidden)
+  #admin-project-list.content-box__height(hidden, data-view="admin-project-list")
    include ../../templates/hubl-user-avatar.pug

    div.content-box__info.flex
      div.admin-header.flex
-        h3 Projets
-        solid-link(
-          class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
-          next='admin-project-create'
-        ) Créer un nouveau projet
+        h3(data-trans='project.list.subTitle')
+        solid-ac-checker(data-src=`${endpoints.projects || (endpoints.post && endpoints.post.projects)}`, permission='acl:Append')
+          solid-link(
+            class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
+            next='admin-project-create'
+            data-trans='project.list.buttonCreate'
+          )

      .table-wrapper
        .table
          div.table-header.grey-color
-            div.w280 Nom
-            div.w280 Administrateurs
-            div.w280 Capitaines
-            div.w230 Rejoindre
+            div.w280(data-trans='project.list.tableHeader1')
+            div.w280(data-trans='project.list.tableHeader2')
+            div.w280(data-trans='project.list.tableHeader3')
+            div.w230(data-trans='project.list.tableHeader4')

          solid-widget(name="hubl-admin-project-leave-button")
            template
              solid-delete(
                class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
                data-src="${src}"
-                data-label='Quitter'
+                data-label=''
+                data-trans='data-label=project.list.buttonQuit'
              )
              hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}` target-src='${src}')
              hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src='${src}')
@ -46,7 +49,7 @@

          solid-widget(name='hubl-project-captain')
            template
-              solid-display.user-thumb.is-spaced(
+              solid-display.user-thumb.block.is-spaced(
                data-src='${await value}'
                fields='account.picture, sup(name), sub(username)'

@ -73,7 +76,8 @@
              solid-delete(
                class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
                data-src="${src}"
-                data-label='Quitter'
+                data-label=''
+                data-trans='data-label=project.list.buttonQuit'
              )

          solid-display(
@ -87,7 +91,7 @@
            class-project.name='w280 cell border cell-with-name'
            class-project.members='w280 cell border cell-with-id-card'
            class-project.captain='w280 cell border cell-with-id-card'
-            class-leaveButton='w230 cell border cell-with-buttons'
+            class-leaveButton='w230 cell border cell-with-buttons is-spaced'

            action-leaveButton="joinButton"
            widget-leaveButton="hubl-admin-project-leave-button"
@ -108,7 +112,8 @@
                value-user.username='hubl-workaround-493'
                widget-user.username='solid-form-hidden'

-                submit-button='Rejoindre'
+                submit-button=''
+                data-trans='submit-button=project.list.buttonJoin'
              )
              hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}` target-src='${src}')
              hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src='${src}')
@ -127,7 +132,7 @@
            class-name='w280 cell border cell-with-name'
            class-members='w280 cell border cell-with-id-card'
            class-captain='w280 cell border cell-with-id-card'
-            class-joinButton='w230 cell border cell-with-buttons'
+            class-joinButton='w230 cell border cell-with-buttons is-spaced'

            action-joinButton="joinButton" # Workaround: I need members two times
            widget-joinButton="hubl-admin-project-join-button"
@ -144,5 +149,5 @@
        div
        div

-  #admin-project-create(hidden)
-    include page-admin-projects-create.pug
+  #admin-project-create(hidden, data-view="admin-project-create")
+    include page-admin-projects-create.pug
--- a/src/views/admin/page-admin-users-create.pug
+++ b/src/views/admin/page-admin-users-create.pug
@ -1,7 +1,19 @@
 div.content-box__info.flex
-  solid-link(class='backlink right', next='admin-users-list') Retour
+  solid-link(class='backlink right', next='admin-communities-list' data-trans='user.create.backlink')

-  h1.centered Ajouter un utilisateur à la plateforme
+  solid-display.h1-like.centered(
+    bind-resources
+    fields='text, name'
+    value-text=''
+    data-trans='value-text=user.create.title'
+    loader-id='loader-users-title'
+  )
+
+  div#loader-users-title.loader.loader
+    div
+    div
+    div
+    div

  div#loader-users-create.loader.loader-top
    div
@ -9,26 +21,45 @@ div.content-box__info.flex
    div
    div

-  solid-form.form.button-register(
-    data-src=`${endpoints.users || endpoints.post.users}`
+  solid-widget(name='hubl-username-field')
+    template
+      label(data-trans='user.create.labelUsername')
+      input(type="text" title='' pattern="[a-zA-Z0-9]+" label="" data-trans='title=user.create.labelUsernameTitle;label=user.create.labelUsername' name="username" required value="\${value}" data-holder)

-    fields='line-1(first_name, last_name), line-2(username, email), line-3(password)'
+  solid-widget(name='hubl-email-field')
+    template
+      label(data-trans='user.create.labelEmail')
+      input(type="email" label='' data-trans='label=user.create.labelEmail' name="email" required value="\${value}" data-holder)
+
+  solid-form.form.button-register#selected-community(
+    bind-resources
+    nested-field='members'
+
+    fields='line-1(user.first_name, user.last_name), line-2(user.username, user.email), user.password'
+    required-user.first_name
+    required-user.last_name
+    required-user.username
+    required-user.email
    loader-id='loader-users-create'

-    class-first_name='form-label is-light is-half-width input-text-like'
-    class-last_name='form-label is-light is-half-width input-text-like'
-    class-username='form-label is-light is-half-width input-text-like'
-    class-email='form-label is-light is-half-width input-text-like'
+    class-user.first_name='form-label is-light is-half-width input-text-like'
+    class-user.last_name='form-label is-light is-half-width input-text-like'
+    class-user.username='form-label is-light is-half-width input-text-like'
+    class-user.email='form-label is-light is-half-width input-text-like'

-    label-first_name='Prénom *'
-    label-last_name='Nom *'
-    label-username='Nom d\'utilisateur *'
-    label-email='E-mail *'
+    label-user.first_name=''
+    label-user.last_name=''
+    label-user.username=''
+    label-user.email=''

-    value-password=''
-    widget-password='solid-form-hidden'
+    value-user.password=''
+    widget-user.password='solid-form-hidden'

-    next='admin-users-list'
+    widget-user.username='hubl-username-field'
+    widget-user.email='hubl-email-field'

-    submit-button='Enregistrer'
+    next='admin-communities-list'
+
+    submit-button=''
+    data-trans='label-user.first_name=user.create.labelFirstname;label-user.last_name=user.create.labelLastname;label-user.username=user.create.labelUsername;label-user.email=user.create.labelEmail;submit-button=user.create.buttonSubmit'
  )
--- a/src/views/admin/page-admin-users-edit.pug
+++ b/src/views/admin/page-admin-users-edit.pug
@ -1,36 +0,0 @@
-div.content-box__info.flex
-  solid-link(class='backlink right', next='admin-users-list') Retour
-
-  h1.centered 
-    span Modifier un utilisateur
-
-    div#loader-users-edit.loader.loader-top
-      div
-      div
-      div
-      div
-
-    solid-display(
-      bind-resources=''
-      fields='name'
-      loader-id='loader-users-edit'
-    )  
-
-  solid-form.form.button-register(
-    bind-resources=''
-
-    fields='line-1(first_name, last_name), line-2(email)'
-    loader-id='loader-users-edit'
-
-    class-first_name='form-label is-light is-half-width input-text-like'
-    class-last_name='form-label is-light is-half-width input-text-like'
-    class-email='form-label is-light is-full-width input-text-like'
-
-    label-first_name='Prénom *'
-    label-last_name='Nom *'
-    label-email='E-mail *'
-
-    next='admin-user-list'
-
-    submit-button='Enregistrer'
-  )
--- a/src/views/admin/page-admin-users.pug
+++ b/src/views/admin/page-admin-users.pug
@ -1,67 +0,0 @@
-.content-box.flex.full-width.with-form
-  solid-router(default-route='admin-users-list', hidden)
-    solid-route(name='admin-users-list')
-    solid-route(name='admin-users-create')
-    solid-route(name='admin-users-edit')
-
-  div.content-box__header.flex.space-between
-    h1.without-margin Administration
-    button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
-  
-  solid-widget(name='hubl-solid-action-custom')
-    template
-      solid-ac-checker(data-src="${src}", permission='acl:Write')
-        solid-link(
-          class='button rounded reversed button-primary bordered icon-pencil'
-          data-src="${src}"
-          next="${value}"
-        )
-
-
-  #admin-users-list.content-box__height(hidden)
-    div.content-box__info.flex
-      div.admin-header.flex
-        h3 Utilisateurs
-        solid-ac-checker(data-src=`${endpoints.users || endpoints.post.users}`, permission='acl:Append')
-          solid-link(
-            class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
-            next='admin-users-create'
-          ) Ajouter un utilisateur
-
-      .table-wrapper
-        .table
-          div.table-header.grey-color
-            div.w280 Nom
-            div.w70
-        
-          solid-display(
-            class='table-body'
-            data-src=`${endpoints.users || endpoints.get.users}`
-            fields='cell-1(user-thumb(account.picture, sup(name), sub(username))), actions'
-            loader-id='loader-admin-users'
-
-            class-account.picture='avatar user-thumb__picture'
-            class-name='user-thumb__name'
-            class-username='user-thumb__username'
-            class-profile.city='user-thumb__city'
-            widget-account.picture='hubl-user-avatar'
-
-            label-actions='Edit'
-            action-actions='admin-users-edit'
-            class-actions='w70 border cell-with-buttons'
-            widget-actions='hubl-solid-action-custom'
-
-            order-by='username'
-          )
-
-      div#loader-admin-users.loader.loader-top
-        div
-        div
-        div
-        div
-
-  #admin-users-create.content-box__height(hidden)
-    include page-admin-users-create.pug
-
-  #admin-users-edit.content-box__height(hidden)
-    include page-admin-users-edit.pug
--- a/src/views/circle/page-circle-chat.pug
+++ b/src/views/circle/page-circle-chat.pug
@ -2,7 +2,7 @@
  solid-xmpp-chat(
    data-authentication='login',
    data-auto-login='true',
-    data-bosh-service-url=`${xmpp}`,
+    data-websocket-url=`${xmppWebsocket || 'wss://jabber.happy-dev.fr/xmpp-websocket'}`,
    data-i18n='en',
    bind-resources
  )
--- a/src/views/circle/page-circle-edit.pug
+++ b/src/views/circle/page-circle-edit.pug
@ -2,49 +2,20 @@ div.content-box__info

  include ../../templates/hubl-user-avatar.pug

-  solid-widget(name='hubl-user-groups')
-    template ${await value.name}
-
-  solid-widget(name='hubl-team-template-edit')
+  solid-widget(name="circle-edit-members-delete")
    template
-      solid-display.user-thumb.is-spaced(
-        class='w280 cell border cell-with-id-card user-thumb'
-        data-src='${await value.user}'
-        fields='account.picture, sup(name, groups), sub(profile.city)'
-
-        class-account.picture='user-thumb__picture avatar'
-        class-name='user-thumb__name'
-        class-groups='user-thumb__groups'
-        class-profile.city='user-thumb__city'
-
-        widget-account.picture='hubl-user-avatar'
-
-        multiple-groups=''
-        widget-groups='hubl-user-groups'
-      )
-
-      solid-ac-checker(
-        class='w162 cell border'
-        permission="acl:Delete"
-        data-src="${value['@id']}"
-      )
+      solid-ac-checker(permission="acl:Delete" data-src="${src}")
        solid-delete(
          class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
-          data-src="${value['@id']}"
-          data-label='Retirer'
+          data-src="${src}"
+          data-label=''
+          data-trans='data-label=circle.edit.buttonDelete'
        )

-      //- Only to show the table grid
-      solid-ac-checker(
-        class='w162 cell border'
-        no-permission="acl:Delete"
-        data-src="${value['@id']}"
-      )
-
-  solid-link(class="backlink right", bind-resources, next='circle-profile') Retour
+  solid-link(class="backlink right", bind-resources, next='circle-profile' data-trans='circle.edit.backlink')

  solid-ac-checker(permission='acl:Write', bind-resources)
-    h1 Modifie ton cercle
+    h1(data-trans='circle.edit.title')

    div#loader-circle-edit.loader.loader-top
      div
@ -56,29 +27,35 @@ div.content-box__info
      bind-resources

      fields='status, line-1(name, owner), description'
+      required-status
+      required-name
+      required-owner
+      required-description
      range-owner=`${endpoints.users || endpoints.get.users}`

-      label-status='Statut du cercle'
+      label-status=''
      widget-status='hubl-status'

-      label-name='Nom du cercle'
-      label-owner='Administrateur ou administratrice'
-      label-description='Sous-titre du cercle *'
+      label-name=''
+      label-owner=''
+      label-description=''

      class-name='form-label is-light is-half-width input-text-like'
      class-owner='form-label is-light is-half-width member-select color'
      class-description='form-label is-light is-full-width input-text-like'
      class-status='form-label is-light is-full-width member-select color'

-      widget-owner='solid-form-auto-completion'
+      widget-owner='solid-form-dropdown-autocompletion-label'

      partial=''

      submit-button='Enregistrer'
      next='circle-information'
+
+      data-trans='label-name=circle.edit.labelStatus;label-name=circle.edit.labelName;label-owner=circle.edit.labelOwner;label-description=circle.edit.labelDescription;submit-button=circle.edit.buttonSubmit'
    )

-  h2 Liste des membres :
+  h2(data-trans='circle.edit.subTitle')

  solid-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
    solid-form.block.select-add(
@ -87,27 +64,42 @@ div.content-box__info
      fields='user'
      range-user=`${endpoints.users || endpoints.get.users}`

-      class-user='team form-label is-light'
-      label-user=''
-      widget-user='solid-form-auto-completion'
+      class-user='team'
+      widget-user='solid-form-dropdown-autocompletion'

-      submit-button='Ajouter un membre'
+      submit-button=''
+      data-trans='submit-button=circle.edit.buttonAddMember'
    )

  .table-wrapper
    .table
      div.table-header.grey-color
-        div.w280 Nom
-        div.w162 Accès
+        div.w280(data-trans='circle.edit.tableHeader1')
+        div.w162(data-trans='circle.edit.tableHeader2')

-      //-class='table-body'
      solid-display(
        class='table-body'
        bind-resources
-        fields='members'
+        nested-field='members'
+        fields='classGroup(classGrid(user.account.picture, sup(user.name, user.groups), sub(user.communities))), self'
        loader-id='loader-circle-edit'

-        multiple-members=''
-        widget-members='hubl-team-template-edit'
+        class-classGroup='w280 cell border cell-with-id-card user-thumb is-spaced'
+        class-user.account.picture='user-thumb__picture avatar'
+        class-user.name='user-thumb__name'
+        class-user.groups='user-thumb__groups'
+        multiple-user.communities
+        multiple-user.communities-fields="community.name"
+
+        widget-user.account.picture='hubl-user-avatar'
+
+        multiple-user.groups
+        multiple-user.groups-fields='name'
+
+        action-self='self'
+        widget-self='circle-edit-members-delete'
      )

+      //- Only to show the table grid
+      div.w162.cell.border
+
--- a/src/views/circle/page-circle-left.pug
+++ b/src/views/circle/page-circle-left.pug
@ -1,5 +1,10 @@
-#circle-left(hidden)
+#circle-left(hidden, data-view="circle-left")
  div.content-box__info.flex(style="padding: 15px")

-    p Tu as quitté ce cercle.
-    p Pour le rejoindre à nouveau, rends-toi dans le panneau <solid-link next="admin-circle-list">administration</solid-link> ou contacte un administrateur.
+    p(data-trans='circle.left.paragraphQuit')
+    p
+      span(data-trans='circle.left.paragraphJoin')
+      span &nbsp;
+      solid-link(next="admin-circle-list" data-trans='circle.left.admin')
+      span &nbsp;
+      span(data-trans='circle.left.paragraphContact')
--- a/src/views/circle/page-circle-profile.pug
+++ b/src/views/circle/page-circle-profile.pug
@ -2,8 +2,11 @@ solid-router(default-route='circle-profile', hidden)
  solid-route(name='circle-profile')
  solid-route(name='circle-edit')

-#circle-profile(hidden)
-  include ../../templates/hubl-circle-team.pug
+#circle-profile(hidden, data-view="circle-profile")
+
+  solid-widget(name='hubl-circle-team-contact')
+    template 
+      solid-link(data-src='\${value}', next='messages')
  
  .content-box__info.flex

@ -21,15 +24,16 @@ solid-router(default-route='circle-profile', hidden)

        class-title='word-spacing-right'

-        value-title='Date de création : '
+        value-title=''
+        data-trans='value-title=circle.profile.creationDate'

-        widget-creationDate='solid-display-date'
+        widget-creationDate='solid-display-value-date'
      )
      solid-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
        solid-ac-checker(permission='acl:Delete', bind-resources)
-          solid-link(class='button mobile-full-width text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='circle-edit' bind-resources) Modifier et ajouter un membre
+          solid-link(class='button mobile-full-width text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='circle-edit' bind-resources data-trans='circle.profile.buttonModify')
        solid-ac-checker(no-permission='acl:Delete', bind-resources)
-          solid-link(class='button mobile-full-width text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='circle-edit' bind-resources) Ajouter un membre
+          solid-link(class='button mobile-full-width text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='circle-edit' bind-resources data-trans='circle.profile.buttonAdd')


    div.flex.desktop-button__end
@ -37,7 +41,9 @@ solid-router(default-route='circle-profile', hidden)
        solid-delete(
          class='button mobile-full-width text-bold text-uppercase button-primary bordered with-icon icon-trash'
          bind-resources
-          data-label='Supprimer le cercle'
+          data-label=''
+          data-trans='data-label=circle.profile.buttonDelete'
+          next='admin-circles'
        )

      solid-widget(name='hubl-circle-leave-button')
@ -46,7 +52,8 @@ solid-router(default-route='circle-profile', hidden)
            solid-delete(
              class='button mobile-full-width desktop-btn-margin__left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
              data-src="${src}"
-              data-label='Quitter le cercle'
+              data-label=''
+              data-trans='data-label=circle.profile.buttonQuit'
              next='circle-left'
            )

@ -61,7 +68,8 @@ solid-router(default-route='circle-profile', hidden)
              value-user.username='hubl-workaround-493'
              widget-user.username='solid-form-hidden'

-              submit-button='Rejoindre le cercle'
+              submit-button=''
+              data-trans='submit-button=circle.profile.buttonJoin'
            )

      solid-display(
@ -78,16 +86,32 @@ solid-router(default-route='circle-profile', hidden)
        hubl-inherit-user-id="search-value-user"
      )

-    h2 Membres :
+    h2(data-trans='circle.profile.subTitle')
+
+    solid-widget(name='hubl-circle-user-admin')
+      template ${value ? "Administrateur" : ""}

    solid-display.block(
      bind-resources
-      fields='members'
+      nested-field='members'
      loader-id='loader-circle-profile'
+      fields='classGroup(user.account.picture, sup(user.name, user, is_admin), sub(user.communities))'

-      multiple-members=''
-      widget-members='hubl-circle-team-template'
+      widget-user='hubl-circle-team-contact'
+
+      class-classGroup='user-thumb is-spaced'
+      class-user.account.picture='avatar user-thumb__picture'
+      class-user.name='user-thumb__name'
+      class-user='user-thumb__send'
+      class-is_admin='user-thumb__admin'
+      multiple-user.communities
+      multiple-user.communities-fields="community.name"
+
+      widget-classGroup='solid-set-div'
+      widget-user.account.picture='hubl-user-avatar'
+      widget-is_admin='hubl-circle-user-admin'
    )

-#circle-edit.content-box__height(hidden)
+
+#circle-edit.content-box__height(hidden, data-view="circle-edit")
  include page-circle-edit.pug
--- a/src/views/job-offer/page-job-offer-create.pug
+++ b/src/views/job-offer/page-job-offer-create.pug
@ -1,27 +0,0 @@
-.content-box.with-padding.with-form
-  h1 Post a new job offer
-  
-  solid-form(
-    data-src=`${endpoints.joboffers || endpoints.post.joboffers}`
-    range-skills=`${endpoints.skills || endpoints.get.skills}`
-
-    fields='title, description, skills, closingDate'
-
-    class-title='field form-label is-light is-expanded'
-    label-title='Title*'
-    
-    class-description='field form-label is-light is-expanded'
-    label-description='Description*'
-    widget-description='solid-form-textarea'
-    
-    class-skills='form-label is-dark select-skills'
-    label-skills='The required skills for this mission:*'
-    multiple-skills='solid-multiple-select'
-    widget-skills='solid-form-auto-completion'
-
-    class-closingDate='form-label is-dark'
-    label-closingDate='Publication end date:*'
-    widget-closingDate='solid-form-date'
-    
-    next='job-offers'
-  )
--- a/src/views/job-offer/page-job-offer-edit.pug
+++ b/src/views/job-offer/page-job-offer-edit.pug
@ -1,27 +0,0 @@
-.content-box.with-padding.with-form
-  h1 Edit your job offer
-  
-  solid-form(
-    bind-resources
-    range-skills=`${endpoints.skills || endpoints.get.skills}`
-
-    fields='title, description, skills, closingDate'
-
-    class-title='field form-label is-light is-expanded'
-    label-title='Title*'
-    
-    class-description='field form-label is-light is-expanded'
-    label-description='Description*'
-    widget-description='solid-form-textarea'
-
-    class-skills='form-label is-dark select-skills'
-    label-skills='The required skills for this mission:*'
-    multiple-skills='solid-multiple-select'
-    widget-skills='solid-form-auto-completion'
-    
-    class-closingDate='form-label is-dark'
-    label-closingDate='Publication end date:*'
-    widget-closingDate='solid-form-date'
-
-    next='job-offers'
-  )
--- a/src/views/circle/page-circle-notifications.pug
+++ b/src/views/circle/page-circle-notifications.pug
@ -4,7 +4,8 @@ solid-notifications-template(data-rdf-type='hd:circle')
      | ${await author['account.foaf:depiction'] ? `<img src="${await author['account.foaf:depiction']}" style="max-width:100%; max-height: 100%;" />` : `<object type="image/svg+xml" data="/images/alien.svg"></object>`}
    .solid-notification__content
      .solid-notification__title ${await author.name} 
-        span.solid-notification__title__side dans 
+        span.solid-notification__title__side
+          span(data-trans='notification.circle.in')
          span.solid-notification__title__icon ${(await object.status) == 'Public' ? '#' : ''} 
          | ${await object.name}
      p.solid-notification__summary ${summary}
--- a/src/views/notifications/message-private.pug
+++ b/src/views/notifications/message-private.pug
@ -4,5 +4,5 @@ solid-notifications-template(data-rdf-type='foaf:user')
      | ${await author['account.foaf:depiction'] ? `<img src="${await author['account.foaf:depiction']}" style="max-width:100%; max-height: 100%;" />` : `<object type="image/svg+xml" data="/images/alien.svg"></object>`}
    .solid-notification__content
      .solid-notification__title ${await author.name} 
-        span.solid-notification__title__side en privé
+        span.solid-notification__title__side(data-trans='notification.private.private')
      p.solid-notification__summary ${summary}
--- a/src/views/project/page-project-chat.pug
+++ b/src/views/project/page-project-chat.pug
@ -2,7 +2,7 @@
  solid-xmpp-chat(
    data-authentication='login',
    data-auto-login='true',
-    data-bosh-service-url=`${xmpp}`,
+    data-websocket-url=`${xmppWebsocket || 'wss://jabber.happy-dev.fr/xmpp-websocket'}`,
    data-i18n='en',
    bind-resources
  )
--- a/src/views/project/page-project-edit.pug
+++ b/src/views/project/page-project-edit.pug
@ -1,11 +1,21 @@
 div.content-box__info

  include ../../templates/hubl-user-avatar.pug
+
+  solid-widget(name="project-edit-members-delete")
+    template
+      solid-ac-checker(permission="acl:Delete" data-src="${src}")
+        solid-delete(
+          class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
+          data-src="${src}"
+          data-label=''
+          data-trans='data-label=project.edit.buttonDelete'
+        )
 			
-  solid-link(class='backlink right', bind-resources, next='project-profile') Retour
+  solid-link(class='backlink right', bind-resources, next='project-profile' data-trans='project.edit.backlink')

  solid-ac-checker(permission='acl:Write', bind-resources)
-    h1 Modifie ton projet
+    h1(data-trans='project.edit.title')

    div#loader-project-edit.loader.loader-top
      div
@ -17,21 +27,24 @@ div.content-box__info
      bind-resources
    
      fields='line-1(customer.name, name)'
+      required-customer.name
+      required-name

-
-      label-name='Nom du projet*'
+      label-name=''
      class-name='form-label is-light is-half-width input-text-like'

-      label-customer.name='Nom du client*'
+      label-customer.name=''
      class-customer.name='form-label is-light is-half-width input-text-like'

      partial=""

      submit-button='Enregistrer'
      next='project-information'
+      
+      data-trans='label-name=project.edit.labelName;label-customer.name=project.edit.labelCustomer;submit-button=project.edit.buttonSubmit'
    )

-  h2 Liste des membres :
+  h2(data-trans='project.edit.subTitle')

  solid-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
    solid-form.block.select-add(
@ -40,26 +53,40 @@ div.content-box__info
      fields='user'
      range-user=`${endpoints.users || endpoints.get.users}`

-      class-user='team form-label is-light'
+      class-user='team'
      label-user=''
-      widget-user='solid-form-auto-completion'
+      widget-user='solid-form-dropdown-autocompletion'

-      submit-button='Ajouter un membre'
+      submit-button=''
+      data-trans='submit-button=project.edit.buttonAddMember'
    )

  .table-wrapper
    .table
      div.table-header.grey-color
-        div.w280 Nom
-        div.w162 Accès
+        div.w280(data-trans='project.edit.tableHeader1')
+        div.w162(data-trans='project.edit.tableHeader2')

      //-class='table-body'
      solid-display(
        class='table-body'
        bind-resources
-        fields='members'
+        nested-field='members'
+        fields='classGroup(classGrid(user.account.picture, sup(user.name, user.groups), sub(user.communities))), self'
        loader-id='loader-project-edit'

-        multiple-members=''
-        widget-members='hubl-team-template-edit'
+        class-classGroup='w280 cell border cell-with-id-card user-thumb is-spaced'
+        class-user.account.picture='user-thumb__picture avatar'
+        class-user.name='user-thumb__name'
+        class-user.groups='user-thumb__groups'
+        multiple-user.communities
+        multiple-user.communities-fields="community.name"
+
+        widget-user.account.picture='hubl-user-avatar'
+
+        multiple-user.groups
+        multiple-user.groups-fields='name'
+
+        action-self='self'
+        widget-self='project-edit-members-delete'
      )
--- a/src/views/project/page-project-left.pug
+++ b/src/views/project/page-project-left.pug
@ -1,5 +1,10 @@
 #project-left
  div.content-box__info.flex(style="padding: 15px")

-    p Tu as quitté ce projet.
-    p Ceci est un projet privé. Pour le rejoindre, rends-toi dans le panneau <solid-link next="admin-project-list">administration</solid-link> et demande une invitation.
+    p(data-trans='circle.left.paragraphQuit')
+    p
+      span(data-trans='project.left.paragraphJoin')
+      span &nbsp;
+      solid-link(next="admin-project-list" data-trans='project.left.admin')
+      span &nbsp;
+      span(data-trans='project.left.paragraphContact')
--- a/src/views/project/page-project-picture.pug
+++ b/src/views/project/page-project-picture.pug
@ -1,8 +1,8 @@
 div.content-box__info
 			
-  solid-link(class='backlink right', bind-resources, next='project-edit') Retour
+  solid-link(class='backlink right', bind-resources, next='project-edit' data-trans='project.modifyPicture.backlink')

-  h1 Modifier l'image du projet
+  h1(data-trans='project.modifyPicture.title')
  
  solid-picture.project-edit-picture(
    bind-resources
--- a/src/views/project/page-project-profile.pug
+++ b/src/views/project/page-project-profile.pug
@ -2,9 +2,12 @@ solid-router(default-route='project-profile', hidden)
  solid-route(name='project-profile')
  solid-route(name='project-edit')

-#project-profile(hidden)
+#project-profile(hidden, data-view="project-profile")
  include ../../templates/hubl-captain.pug
-  include ../../templates/hubl-project-team.pug
+
+  solid-widget(name='hubl-project-team-contact')
+    template 
+      solid-link(data-src='\${value}', next='messages')

  .content-box__info.flex

@ -22,22 +25,25 @@ solid-router(default-route='project-profile', hidden)

        class-title='word-spacing-right'

-        value-title='Date de création : '
+        value-title=''
+        data-trans='value-title=project.profile.creationDate'

-        widget-creationDate='solid-display-date'
+        widget-creationDate='solid-display-value-date'
      )
      solid-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
        solid-ac-checker(permission='acl:Delete', bind-resources)
-          solid-link(class='button mobile-full-width text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='project-edit' bind-resources) Modifier et ajouter un membre
+          solid-link(class='button mobile-full-width text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='project-edit' bind-resources data-trans='project.profile.buttonModify')
        solid-ac-checker(no-permission='acl:Delete', bind-resources)
-          solid-link(class='button mobile-full-width text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='project-edit' bind-resources) Ajouter un membre
+          solid-link(class='button mobile-full-width text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='project-edit' bind-resources data-trans='project.profile.buttonAdd')
      
    div.flex.desktop-button__end
      solid-ac-checker(permission='acl:Delete', bind-resources)
        solid-delete(
          class='button mobile-full-width text-bold text-uppercase button-primary bordered with-icon icon-trash'
          bind-resources
-          data-label='Supprimer le projet'
+          data-label=''
+          data-trans='data-label=project.profile.buttonDelete'
+          next='admin-projects'
        )

      solid-widget(name='hubl-project-leave-button')
@ -45,7 +51,8 @@ solid-router(default-route='project-profile', hidden)
          solid-delete(
            class='button mobile-full-width desktop-btn-margin__left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
            data-src="${src}"
-            data-label='Quitter le projet'
+            data-label=''
+            data-trans='data-label=project.profile.buttonQuit'
            next='project-left'
          )

@ -70,22 +77,39 @@ solid-router(default-route='project-profile', hidden)
        bind-resources
        fields='label-captain, captain'

-        value-label-captain='Capitaine :'
+        value-label-captain=''
+        data-trans='value-label-captain=project.profile.captain',
        class-label-captain='h2-like'
        widget-captain='hubl-captain'
      )

    br

-    h2 Equipe :
+    h2(data-trans:'project.profile.subTitle')
+
+    solid-widget(name='hubl-project-user-admin')
+      template ${value ? "Administrateur" : ""}

    solid-display.block(
      bind-resources
-      fields='members'
+      nested-field='members'
+      fields='classGroup(user.account.picture, sup(user.name, user, is_admin), sub(user.communities, name))'

-      multiple-members
-      widget-members='hubl-project-team'
+      widget-user='hubl-project-team-contact'
+
+      class-classGroup='user-thumb is-spaced'
+      class-user.account.picture='avatar user-thumb__picture'
+      class-user.name='user-thumb__name'
+      class-user='user-thumb__send'
+      class-is_admin='user-thumb__admin'
+      multiple-user.communities
+      multiple-user.communities-fields="community.name"
+      class-name='user-thumb__lead'
+
+      widget-classGroup='solid-set-div'
+      widget-user.account.picture='hubl-user-avatar'
+      widget-is_admin='hubl-project-user-admin'
    )

-#project-edit.content-box__height(hidden)
+#project-edit.content-box__height(hidden, data-view="project-edit")
  include page-project-edit.pug