Merge branch 'master' into feature/resource-component

2020-07-09 17:03:50 +02:00 · 2020-07-09 17:03:50 +02:00 · 026dc48f24
commit 026dc48f24
parent 9997379323 9650e3cf9c
63 changed files with 736 additions and 669 deletions
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -282,3 +282,21 @@ communityhubl:
  when: manual
  tags:
    - deploy
+
+playground:
+  stage: deployment
+  environment:
+    name: playground
+    url: https://playground.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_PLAYGROUND" > config.json
+    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
+    - npm run build
+    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* playground@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
--- a/README.md
+++ b/README.md
@ -10,7 +10,7 @@ These instructions will get you a copy of the project up and running on your loc

 To install Hubl, you'll need:

-* A Hubl Server (djangoldp>=0.6.42) with the appropriate modules
+* A Hubl Server (djangoldp>=0.7.11) with the appropriate modules
 * A Prosody Server (with [appropriate modules](https://git.startinblox.com/infra/prosody-modules/)
 * A SMTP Server (optional)
 * NodeJS on your machine
@ -71,7 +71,7 @@ By default, a Hubl includes only individual chat modules.

 On Server: `djangoldp_account`, `djangoldp_profile`, `djangoldp_notification`, `djangoldp_skill`, `djangoldp_upload`, `oidc_provider` packages

-On `config.json`: 
+On `config.json`:

 ```json
 {
@ -87,7 +87,7 @@ On `config.json`:

 Where:

-* `xmpp` is your Prosody with [appropriate modules](https://git.startinblox.com/infra/prosody-modules/) configured on.
+* `xmpp` is your [Prosody](https://prosody.im/) with [appropriate modules](https://git.startinblox.com/infra/prosody-modules/) configured on.
 * `authority` is the OpenID Provider. Usually, if you use `djangoldp-account` it's the same as your djangoldp server.
 * `endpoints.users` is the API endpoints for Users on your djangoldp server.

@ -177,7 +177,7 @@ On `config.json`:

 ### Project

-(Experimental) Project are a private group chat including Customer and Business Provider management. To activate them, you need:
+Project are a private group chat including Customer and Business Provider management. To activate them, you need:

 On Server: `djangoldp_project` packages

@ -194,7 +194,7 @@ On `config.json`:

 ### Users Directory

-(In development) Directory includes a listing of each users of your app and editable individual profile. To activate them, you need:
+Directory includes a listing of each users of your app and editable individual profile. To activate them, you need:

 On Server: `djangoldp_skill`, `djangoldp_upload` packages

@ -211,7 +211,7 @@ On `config.json`:

 ### Job Offers

-(In development) Job Offers includes a job board with conversation. To activate them, you need:
+Job Offers includes a job board with conversation. To activate them, you need:

 On Server: `djangoldp_joboffer`, `djangoldp_skill`, `djangoldp_upload`, `djangoldp_conversation` packages

--- a/client.sample.happy-dev.css
+++ b/client.sample.happy-dev.css
@ -112,32 +112,41 @@
  --color-chat-grey-3: var(--color-grey-10);

  /* Directory */
-  --color-directory-grey-4: #7A7F85;
-  --color-directory-grey-5: #F0F3F6;
+  --color-directory-grey-4: #7A7F85 !important;
+  --color-directory-grey-5: #F0F3F6 !important;

-  --color-directory-avatar-background: #E4E8ED;
-  --color-directory-back-link: #36383B;
-  --color-directory-border: #DAE2F3;
-  --color-directory-content-header-border: #DAE2F3;
+  --color-directory-avatar-background: #E4E8ED !important;
+  --color-directory-back-link: #36383B !important;
+  --color-directory-border: #DAE2F3 !important;
+  --color-directory-content-header-border: #DAE2F3 !important;
  --color-directory-h1: var(--color-complementary-darken);
  --color-directory-list-icon: var(--color-primary);
  --color-directory-text: var(--color-directory-grey-4);

-  --color-directory-form-input: #EDF1FA;
-  --color-directory-form-input-text: var(--color-directory-grey-4);
-  --color-directory-form-input-active: var(--color-complementary);
-  --color-directory-form-select-icon: var(--color-complementary);
+  --color-directory-send-border: var(--color-complementary) !important;
+  --color-directory-list-icon: var(--color-primary) !important;
+  --color-directory-counter-background: var(--color-directory-grey-5) !important;
+  --color-directory-counter-border: #9BA0A7 !important;
+  --color-directory-counter-text: #4A4A4A !important;
+
+  --color-directory-paginate: #36383B !important;
+  --color-directory-paginate-disabled: #9BA0A7 !important;
+
+  --color-directory-form-input: #EDF1FA !important;
+  --color-directory-form-input-text: var(--color-directory-grey-4) !important;
+  --color-directory-form-input-active: var(--color-complementary) !important;
+  --color-directory-form-select-icon: var(--color-complementary) !important;
 }

 /* Button to edit a channel or a project (in project-profile) */
-#project sib-link[next="project-edit"],
-#circle sib-link[next="circle-edit"] {
+#project solid-link[next="project-edit"],
+#circle solid-link[next="circle-edit"] {
  background: var(--color-complementary);
  border: 1px solid var(--color-complementary);
 }

-#project sib-link[next="project-edit"]:hover,
-#circle sib-link[next="circle-edit"]:hover {
+#project solid-link[next="project-edit"]:hover,
+#circle solid-link[next="circle-edit"]:hover {
  background: var(--color-white);
  border: 1px solid var(--color-complementary);
  color: var(--color-complementary);
@ -145,74 +154,117 @@

 /* Button to delete a channel */
 /* box-button is depreciated */
-#circle-profile>div>div.desktop-button__end>sib-ac-checker>sib-delete,
-#circle-profile>div>div.box-button>sib-ac-checker>sib-delete {
+#circle-profile>div>div.desktop-button__end>solid-ac-checker>solid-delete,
+#circle-profile>div>div.box-button>solid-ac-checker>solid-delete {
  background: var(--color-white);
  border: 1px solid var(--color-complementary);
  color: var(--color-complementary);
 }

-#circle-profile>div>div.desktop-button__end>sib-ac-checker>sib-delete>button,
-#circle-profile>div>div.box-button>sib-ac-checker>sib-delete>button {
+#circle-profile>div>div.desktop-button__end>solid-ac-checker>solid-delete>button,
+#circle-profile>div>div.box-button>solid-ac-checker>solid-delete>button {
  color: var(--color-complementary);
 }

-#circle-profile>div>div.desktop-button__end>sib-ac-checker>sib-delete:hover,
-#circle-profile>div>div.box-button>sib-ac-checker>sib-delete:hover {
+#circle-profile>div>div.desktop-button__end>solid-ac-checker>solid-delete:hover,
+#circle-profile>div>div.box-button>solid-ac-checker>solid-delete:hover {
  background: var(--color-complementary);
  border: 1px solid var(--color-complementary);
  color: var(--color-white);
 }

-#circle-profile>div>div.desktop-button__end>sib-ac-checker>sib-delete:hover>button,
-#circle-profile>div>div.box-button>sib-ac-checker>sib-delete:hover>button {
+#circle-profile>div>div.desktop-button__end>solid-ac-checker>solid-delete:hover>button,
+#circle-profile>div>div.box-button>solid-ac-checker>solid-delete:hover>button {
  color: var(--color-white);
 }

 /* Button with a pen to edit a user */
-#admin-users-list>div>div.table>sib-display>div>sib-display>div>sib-action-hd-custom>sib-ac-checker>sib-link {
+#admin-users-list>div>div.table>solid-display>div>solid-display>div>solid-action-hd-custom>solid-ac-checker>solid-link {
  background: var(--color-complementary);
  border: 1px solid var(--color-complementary);
  color: var(--color-white);
 }

-#admin-users-list>div>div.table>sib-display>div>sib-display>div>sib-action-hd-custom>sib-ac-checker>sib-link:hover {
+#admin-users-list>div>div.table>solid-display>div>solid-display>div>solid-action-hd-custom>solid-ac-checker>solid-link:hover {
  background: var(--color-white);
  border: 1px solid var(--color-complementary);
  color: var(--color-complementary);
 }

 /* Button to join a channel */
-#admin-circle-list>div>div.table>sib-display:nth-child(5)>div>sib-display>div>admin-circle-join-button>sib-form {
+#admin-circle-list>div>div.table>solid-display:nth-child(5)>div>solid-display>div>admin-circle-join-button>solid-form {
  background: var(--color-complementary);
  border: 1px solid var(--color-complementary);
  color: var(--color-white);
 }

-#admin-circle-list>div>div.table>sib-display:nth-child(5)>div>sib-display>div>admin-circle-join-button>sib-form:hover {
+#admin-circle-list>div>div.table>solid-display:nth-child(5)>div>solid-display>div>admin-circle-join-button>solid-form:hover {
  background: var(--color-white);
  border: 1px solid var(--color-complementary);
  color: var(--color-complementary);
 }

-#admin-circle-list>div>div.table>sib-display:nth-child(5)>div>sib-display>div>admin-circle-join-button>sib-form:hover input {
+#admin-circle-list>div>div.table>solid-display:nth-child(5)>div>solid-display>div>admin-circle-join-button>solid-form:hover input {
  color: var(--color-complementary);
 }


 /* Directory - my profile*/

-/* Button to update the avatar */
-#sib-picture-browse,
-#sib-picture-remove {
-  background-color: var(--color-white);
-  border: 1px solid var(--color-complementary);
-  color: var(--color-complementary);
+/* Colors for buttons to send a message to a member and to update or remove your profile picture */
+#member-profile>div.profile-card>div.user-profile>div>solid-display>div>solid-action.button.button-primary.bordered,
+button#solid-picture-browse.button.button-primary,
+button#solid-picture-remove.button.button-primary {
+  border: 1px solid var(--color-directory-complementary) !important;
 }

-#sib-picture-browse:hover,
-#sib-picture-remove:hover {
-  background-color: var(--color-complementary);
-  border: 1px solid var(--color-complementary);
-  color: var(--color-white);
+#member-profile solid-action.button.button-primary>solid-link,
+button#solid-picture-browse.button.button-primary,
+button#solid-picture-remove.button.button-primary {
+  color: var(--color-directory-complementary) !important;
+}
+
+#member-profile>div.profile-card>div.user-profile>div>solid-display>div>solid-action.button.button-primary.bordered>solid-link::before {
+  background-color: var(--color-directory-complementary) !important;
+}
+
+/* Hover */
+#member-profile solid-action.button.button-primary:hover,
+#member-profile solid-action.button.button-primary:hover>solid-link,
+button#solid-picture-browse.button.button-primary:hover,
+button#solid-picture-remove.button.button-primary:hover {
+  color: var(--color-directory-white) !important;
+  background-color: var(--color-directory-complementary) !important;
+}
+
+#member-profile>div.profile-card>div.user-profile>div>solid-display>div>solid-action.button.button-primary.bordered:hover>solid-link::before {
+  background-color: var(--color-directory-white) !important;
+}
+
+#members-list .send-display solid-link::before {
+    background-color: var(--color-directory-complementary)!important;
+}
+
+/* Dashboard */
+.dashboard-card>div>div>p {
+  color: var(--color-complementary) !important;
+}
+
+.dashboard-card .svg-color-secondary {
+  fill: var(--color-complementary) !important;
+}
+
+.dashboard-card i {
+  border-color: var(--color-primary) !important;
+  color: var(--color-complementary) !important;
+}
+
+.dashboard-card sib-link, .dashboard-card solid-link {
+  border-color: var(--color-complementary) !important;
+  color: var(--color-complementary) !important;
+}
+
+.dashboard-card sib-link:hover, .dashboard-card solid-link:hover {
+  background-color: var(--color-complementary) !important;
+  color: #fff !important;
 }
--- a/cypress/integration/tests.spec.js
+++ b/cypress/integration/tests.spec.js
@ -48,21 +48,21 @@ context('Browser testing', () => {
 //    });
 //    describe('Main interface', () => {
 //      // it('should show my name on top right', () => {
-//      //   cy.get('sib-display-value').contains('Admin');
+//      //   cy.get('solid-display-value').contains('Admin');
 //      // });
 //      it('should show my username on the left menu', () => {
-//        cy.get('[fields="username, badge"][data-src="http://localhost:8000/users/admin/"] > :nth-child(1) > sib-display-div > div').contains('admin');
+//        cy.get('[fields="username, badge"][data-src="http://localhost:8000/users/admin/"] > :nth-child(1) > solid-display-div > div').contains('admin');
 //      });
 //      it('should open a chat with myself', () => {
-//        cy.get('[fields="username, badge"][data-src="http://localhost:8000/users/admin/"] > :nth-child(1) > sib-display-div > div').click();
+//        cy.get('[fields="username, badge"][data-src="http://localhost:8000/users/admin/"] > :nth-child(1) > solid-display-div > div').click();
 //        cy.get('.name').contains('admin');
 //      });
 //      it('should not work, because I have no Prosody configured', () => {
-//        cy.get('.content-box > .chat-view > sib-chat').should('be.empty');
+//        cy.get('.content-box > .chat-view > solid-xmpp-chat').should('be.empty');
 //      });
 //      describe('Circles', () => {
 //        it('should navigate the Administration from left menu', () => {
-//          cy.get('.create > sib-link').click();
+//          cy.get('.create > solid-link').click();
 //          cy.get('#admin-circles > .content-box > .content-box__header > .without-margin').contains('Administration');
 //          cy.get('#admin-circle-list > .content-box__info > .admin-header > .admin-header__title').contains('Circles');
 //        });
@ -76,10 +76,10 @@ context('Browser testing', () => {
 //        crypto.getRandomValues(name);
 //        name = "Test Circle " + name;
 //        it('should allow Circle Creation', () => {
-//          cy.get('form > sib-form-label-text[name="name"] > label > input').type(name);
-//          cy.get('.content-box__info > sib-form > form > sib-form-label-text[name="description"] > label > input').type('With a great description!');
-//          cy.get('#admin-circle-create > .content-box__info > sib-form > form > [type="submit"]').click();
-//          cy.get('#admin-circle-list > div > div.table > sib-display').contains(name);
+//          cy.get('form > solid-form-label-text[name="name"] > label > input').type(name);
+//          cy.get('.content-box__info > solid-form > form > solid-form-label-text[name="description"] > label > input').type('With a great description!');
+//          cy.get('#admin-circle-create > .content-box__info > solid-form > form > [type="submit"]').click();
+//          cy.get('#admin-circle-list > div > div.table > solid-display').contains(name);
 //        });
 //        it('should open the circle information page', () => {
 //          cy.screenshot();
@ -87,7 +87,7 @@ context('Browser testing', () => {
 //          cy.get('[name="circle-information"] > li').click();
 //        });
 //        it('should delete the circle', () => {
-//          cy.get('.box-button > sib-ac-checker > .button').click();
+//          cy.get('.box-button > solid-ac-checker > .button').click();
 //          cy.get('#navbar-router').should('not.contain', name);
 //        });
 //      });
--- a/src/components/hubl-reactivity.js
+++ b/src/components/hubl-reactivity.js
@ -0,0 +1,40 @@
+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";
+
+export const HublReactivity = {
+  name: 'hubl-reactivity',
+  use: [StoreMixin],
+  attributes: {
+    targetSrc: {
+      type: String,
+      default: '',
+      callback: function () {
+        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();
+      }
+    },
+  },
+  subscribe() {
+    if (this.resourceId && this.targetSrc) {
+      store.subscribeVirtualContainerTo(this.resourceId, this.targetSrc);
+      store.subscribeVirtualContainerTo(this.targetSrc, this.resourceId);
+    }
+  }
+}
+
+Sib.register(HublReactivity);
--- 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.9/dist/widgets/widget-factory.js';
+import { widgetFactory } from 'https://unpkg.com/@startinblox/core@0.10/dist/widgets/widget-factory.js';

 const HublSearchUsers = widgetFactory(
  'hubl-search-users',
--- a/src/components/hubl-status.js
+++ b/src/components/hubl-status.js
@ -1,5 +1,5 @@
-import { widgetFactory } from 'https://unpkg.com/@startinblox/core@0.9/dist/widgets/widget-factory.js';
-import { importCSS } from 'https://unpkg.com/@startinblox/core@0.9/dist/libs/helpers.js';
+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';

 const HublStatus = widgetFactory(
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@ -1,16 +1,17 @@
 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.9" defer)
+script(type="module" src="https://unpkg.com/@startinblox/core@0.10" defer)
 //- script(type="module" src="/lib/sib-core/dist/index.js" defer)

-script(type="module" src="https://unpkg.com/@startinblox/oidc@0.8" 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://unpkg.com/@startinblox/router@0.7" defer)
-    //- script(type="module" src="/lib/sib-router/src/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://unpkg.com/@startinblox/component-notifications@0.3" defer)
+script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.4" defer)
    //- script(type="module" src="/lib/sib-notifications/index.js" defer)

 if endpoints.events || (endpoints.get && endpoints.get.events)
@ -22,22 +23,20 @@ if endpoints.resources || (endpoints.get && endpoints.get.resources)
    //- 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.3" defer)
-    script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.3" defer)
-    //- script(type="module" src="/lib/sib-job-board/sib-job-board.js" defer)
-    //- script(type="module" src="/lib/sib-conversation/sib-conversation.js" defer)
+    script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.5" 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.4" defer)
-    //- script(type="module" src="/lib/sib-directory/dist/index.js" defer)
+    script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.5" 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.1" defer)
-    //- script(type="module" src="/lib/sib-dashboard/sib-dashboard.js" defer)
+    script(type="module" src="https://unpkg.com/@startinblox/component-dashboard@0.2" 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.6" defer)
-    //-script(type="module" src="/lib/sib-chat/sib-chat.js" defer)
+    script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.8" defer)
+    //- script(type="module" src="/lib/solid-xmpp-chat/dist/index.js" defer)

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

--- a/src/header.pug
+++ b/src/header.pug
@ -1,5 +1,5 @@
 .logo
-  sib-link(next='dashboard')
+  solid-link(next='dashboard')
    img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '32px'}`)

 sib-notifications.notLoggedIn(
@ -11,7 +11,7 @@ include templates/hubl-user-avatar.pug

 details#user-controls.notLoggedIn
  summary(tabindex='0' role='button')
-    sib-display#user-controls__profile(
+    solid-display#user-controls__profile(
      fields='first_name, account.picture'
      class-first_name='flex'
      class-account.picture='avatar'
@ -23,11 +23,11 @@ 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
-            sib-link(next='profile') Mon profil
+            solid-link(next='profile') Mon profil
        li
-          sib-link(next='admin') Administration
+          solid-link(next='admin') Administration
        li
-          sib-link(next='about') A propos
+          solid-link(next='about') A propos
      button(role='log out' onclick="document.querySelector('sib-auth').logout();") Se déconnecter

 button.loggedIn(role='log in' onclick="document.querySelector('sib-auth').login();") Se connecter
--- a/src/index.pug
+++ b/src/index.pug
@ -35,14 +35,26 @@ html(lang="en")

        if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
          #job-offers(hidden).no-sidebar.with-padding
+            hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`)
+            hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`)
+            hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`)
+            hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`)
+            hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}`)
+            hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}current/`)
            include page-job-offers.pug

        if endpoints.projects || (endpoints.get && endpoints.get.projects)
          #project(hidden).with-sidebar
+            hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src=`${endpoints.projects || endpoints.get.projects}`)
+            hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}`)
+            hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}joinable/`)
            include page-project.pug

        if endpoints.circles || (endpoints.get && endpoints.get.circles)
          #circle(hidden).with-sidebar
+            hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src=`${endpoints.circles || endpoints.get.circles}`)
+            hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}`)
+            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)
@ -70,7 +82,7 @@ html(lang="en")
    if analytics
      each provider in analytics
        if provider.type && provider.url && provider.url
-            sib-analytics(
+            solid-analytics(
              type=`${provider.type}`
              url=`${provider.url}`
              id=`${provider.id}`
--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@ -1,40 +1,40 @@
-sib-widget(name='hubl-counter')
+solid-widget(name='hubl-counter')
  template
-    sib-fix-badge(data-src="${value == 'badge' ? src : value}")
+    solid-fix-badge(data-src="${value == 'badge' ? src : value}")

-sib-widget(name='hubl-menu-jabberid')
+solid-widget(name='hubl-menu-jabberid')
  template
    div.hidden(
      data-jabberID="${value}"
    )

-sib-widget(name='hubl-menu-publicprivate')
+solid-widget(name='hubl-menu-publicprivate')
  template
    div ${value == 'Public' ? '#' : ''}

-sib-widget(name='hubl-create')
+solid-widget(name='hubl-create')
  template
    p.create Tu ne fais partie d'aucun ${value}.
      br
      | Pour en créer un nouveau, tu peux te rendre dans le 
-      sib-link(next='admin') panneau d'administration
+      solid-link(next='admin') panneau d'administration

-sib-widget(name='hubl-menu-fix-url-circle')
+solid-widget(name='hubl-menu-fix-url-circle')
  template
-    sib-display(
+    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='sib-display-div'
+      widget-name='solid-display-div'
      order-by="name"
    )

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


-sib-router#navbar-router(default-route='dashboard')
+solid-router#navbar-router(default-route='dashboard')
  if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
-    sib-route.menu(name='dashboard')
+    solid-route.menu(name='dashboard')
      div.menu-label Tableau de bord
      div.menu-icon.icon-home
    div.divider
  if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
-    sib-route.menu(name='members')
+    solid-route.menu(name='members')
      div.menu-label Annuaire des membres
      div.menu-icon.icon-people
    div.divider
  if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
-    sib-route.menu(name='job-offers', rdf-type='hd:joboffer')
+    solid-route.menu(name='job-offers', rdf-type='hd:joboffer')
      div.menu-label Offres de mission
      div.menu-icon.icon-briefcase
    div.divider
  if endpoints.events || (endpoints.get && endpoints.get.events)
-    sib-route.menu(name='events')
+    solid-route.menu(name='events')
      div.menu-label Evènements
      div.menu-icon.icon-calendar
    div.divider
@ -76,15 +76,15 @@ sib-router#navbar-router(default-route='dashboard')
    div.divider
  if endpoints.projects || (endpoints.get && endpoints.get.projects)
    div
-      sib-link(next='admin-project-list')
+      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-folder-alt
-      sib-route(name='project', rdf-type='hd:project', use-id='', hidden)
+      solid-route(name='project', rdf-type='hd:project', use-id='', hidden)
      div.sub-menu.menu-notification
-        sib-display.project-tab(
+        solid-display.project-tab(
          bind-user
          nested-field='projects'
          fields='project'
@ -97,15 +97,15 @@ sib-router#navbar-router(default-route='dashboard')
    div.divider
  if endpoints.circles || (endpoints.get && endpoints.get.circles)
    div
-      sib-link(next='admin-circle-list')
+      solid-link(next='admin-circle-list')
        div.menu
          div.menu-chevron
            div.menu-icon.icon-arrow-right-circle
          div.menu-label  Canaux
          div.menu-icon.icon-folder-alt
-      sib-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
+      solid-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
      div.sub-menu.menu-notification
-        sib-display.circle-tab(
+        solid-display.circle-tab(
          bind-user
          nested-field='circles'
          fields='circle'
@ -123,15 +123,15 @@ sib-router#navbar-router(default-route='dashboard')
          div.menu-icon.icon-arrow-up
        div.menu-label Messages
        div.menu-icon.icon-envelope-letter
-      sib-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
+      solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
      div.sub-menu.menu-notification
-        sib-display.nosub.message-tab(
+        solid-display.nosub.message-tab(
          data-src=`${endpoints.users || (endpoints.get && endpoints.get.users)}`
          fields='name, chatProfile.jabberID, badge'
          search-fields="name"
          search-label-name="Rechercher..."
          search-widget-name="hubl-search-users"
-          widget-name='sib-display-div'
+          widget-name='solid-display-div'
          widget-badge='hubl-counter'
          widget-chatProfile.jabberID='hubl-menu-jabberid'
          action-badge='badge'
@ -141,6 +141,6 @@ sib-router#navbar-router(default-route='dashboard')
        )
    div.divider

-  sib-route(name='admin', hidden)
-  sib-route.menu(name='profile', hidden)
-  sib-route(name='about', hidden)
+  solid-route(name='admin', hidden)
+  solid-route.menu(name='profile', hidden)
+  solid-route(name='about', hidden)
--- a/src/page-admin.pug
+++ b/src/page-admin.pug
@ -9,19 +9,19 @@
    #admin-users(hidden)
      include views/admin/page-admin-users.pug
 nav.jsRightMenu(role='navigation')
-  sib-router(default-route='admin-circles')
+  solid-router(default-route='admin-circles')
    ul
      li.jsOffsiteToggle
        a Replier le menu
      if (endpoints.users || (endpoints.get && endpoints.get.users))
-        sib-route.active-color(name='admin-users')
+        solid-route.active-color(name='admin-users')
          li
            a Utilisateurs
      if endpoints.circles || (endpoints.get && endpoints.get.circles)
-        sib-route(name='admin-circles')
+        solid-route(name='admin-circles')
          li
            a Canaux
      if endpoints.projects || (endpoints.get && endpoints.get.projects)
-        sib-route(name='admin-projects')
+        solid-route(name='admin-projects')
          li
            a Projets
--- a/src/page-circle.pug
+++ b/src/page-circle.pug
@ -1,8 +1,8 @@
 .views-container.sidebar-is-closed
  .content-box.flex.full-width.with-form
    div.content-box__header
-      sib-ac-checker.flex.space-between(permission='acl:Read', bind-resources)
-        sib-display(
+      solid-ac-checker.flex.space-between(permission='acl:Read', bind-resources)
+        solid-display(
          bind-resources
          fields='name, description'

@ -11,7 +11,7 @@
        )
        button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
    div.content-box__height
-      sib-ac-checker(permission='acl:Read', bind-resources)
+      solid-ac-checker(permission='acl:Read', bind-resources)
        #circle-chat(hidden)
          include views/circle/page-circle-chat.pug
        #circle-information.content-box__height(hidden)
@ -22,14 +22,14 @@
          include views/circle/page-circle-resources.pug

 nav.jsRightMenu(role='navigation')
-  sib-router(default-route='circle-chat')
+  solid-router(default-route='circle-chat')
    ul
      li.jsOffsiteToggle
        a Replier le menu
-      sib-route(name='circle-chat')
+      solid-route(name='circle-chat')
        li
          a Chat
-      sib-route(name='circle-information')
+      solid-route(name='circle-information')
        li
          a Information
      sib-route(name='circle-events' use-id)
--- a/src/page-dashboard.pug
+++ b/src/page-dashboard.pug
@ -1,5 +1,5 @@
 .views-container
  h1 Tableau de bord
-  sib-dashboard(
+  solid-dashboard(
    data-src=`${endpoints.dashboards || endpoints.get.dashboards}`
  )
--- a/src/page-directory.pug
+++ b/src/page-directory.pug
@ -1,5 +1,4 @@
-sib-directory(
-  data-src=`${endpoints.users || endpoints.get.users}`,
-  range-groups=`${endpoints.groups || endpoints.get.groups}`,
+solid-directory(
+  data-src=`${endpoints.users || endpoints.get.users}`
  range-skills=`${endpoints.skills || endpoints.get.skills}`
 )
--- a/src/page-job-offers.pug
+++ b/src/page-job-offers.pug
@ -1,25 +1,7 @@
 .content-box.full-width
-  #job-offer-board
-    .job-offers__container
-    sib-job-board(
+  #job-offers.job-offers__container
+    solid-job-board(
      data-src=`${endpoints.joboffers || endpoints.get.joboffers}`,
+      post-data-src=`${endpoints.joboffers || endpoints.post.joboffers}`,
      range-skills=`${endpoints.skills || endpoints.get.skills}`
    )
-
-    div.job-offers__newoffer
-      sib-link(next="job-offer-create").plus-button
-        div.icon-plus
-        div Post a new offer
-
-  #job-offer-create(hidden)
-    sib-link(class="backlink", next="job-offers") Back
-    include views/job-offer/page-job-offer-create.pug
-
-  #job-offer-edit(hidden)
-    sib-link(class="backlink", next="job-offers") Back
-    include views/job-offer/page-job-offer-edit.pug
-
-sib-router(default-route='job-offer-board')
-  sib-route(name='job-offer-board')
-  sib-route(name='job-offer-create')
-  sib-route(name='job-offer-edit')
--- a/src/page-messages.pug
+++ b/src/page-messages.pug
@ -1,7 +1,7 @@
 .content-box.flex.full-width

  div.content-box__header
-    sib-display(
+    solid-display(
      bind-resources
      fields='name, parenthesis, username, endParenthesis'
      value-parenthesis=" ("
@ -14,7 +14,7 @@
    )

  .chat-view
-    sib-chat(
+    solid-xmpp-chat(
      data-authentication='login',
      data-auto-login='true',
      data-bosh-service-url=`${xmpp}`,
--- a/src/page-profile.pug
+++ b/src/page-profile.pug
@ -1,4 +1,4 @@
-sib-profile(
+solid-profile(
  bind-user
  upload-src=`${endpoints.uploads || endpoints.post.uploads}`
  range-skills=`${endpoints.skills || endpoints.get.skills}`
--- a/src/page-project.pug
+++ b/src/page-project.pug
@ -1,8 +1,8 @@
 .views-container.sidebar-is-closed
  .content-box.flex.full-width.with-form
    div.content-box__header
-      sib-ac-checker.flex.space-between(permission='acl:Read', bind-resources)
-        sib-display(
+      solid-ac-checker.flex.space-between(permission='acl:Read', bind-resources)
+        solid-display(
          bind-resources
          fields='const-title1, number, customer.name, name'

@ -15,21 +15,23 @@
        )
        button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
    div.content-box__height
-      sib-ac-checker(permission='acl:Read', bind-resources)
+      solid-ac-checker(permission='acl:Read', bind-resources)
        #project-chat(hidden)
          include views/project/page-project-chat.pug
        #project-information.content-box__height(hidden)
          include views/project/page-project-profile.pug
+        #project-picture(hidden)
+          include views/project/page-project-picture.pug

 nav.jsRightMenu(role='navigation')
-  sib-router(default-route='project-chat')
+  solid-router(default-route='project-chat')
    ul
      li.jsOffsiteToggle
        a Replier le menu
-      sib-route(name='project-chat')
+      solid-route(name='project-chat')
        li 
          a Chat
-      sib-route(name='project-information')
+      solid-route(name='project-information')
        li 
          a Information
-      sib-route(name='project-contributions-help')
+      solid-route(name='project-picture' use-id)
--- a/src/page-user-profile.pug
+++ b/src/page-user-profile.pug
@ -4,14 +4,14 @@ include templates/hubl-groups.pug

  .section.user-bio

-    sib-display.avatar-display(
+    solid-display.avatar-display(
      bind-user=''
      fields='account.picture'
      label-account.picture=''
-      widget-account.picture='sib-display-img'
+      widget-account.picture='solid-display-img'
    )
    
-    sib-display.name-diplay(
+    solid-display.name-diplay(
      bind-user=''
      fields='user-name-groups(name, groups), username'

@ -24,7 +24,7 @@ include templates/hubl-groups.pug
      class-username='username'
    )

-    sib-form.info-form(
+    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'

@ -53,19 +53,19 @@ include templates/hubl-groups.pug

  .section.user-skills

-    sib-form(
+    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='sib-multiple-select'
-      widget-skills='sib-form-auto-completion'
+      multiple-skills='solid-multiple-select'
+      widget-skills='solid-form-auto-completion'
    )


-  sib-widget(name='hubl-instruction')
+  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/reactive-store.js
+++ b/src/scripts/reactive-store.js
@ -1,152 +0,0 @@
-//auxiliary function clears cache & refreshes sib-displays for a given resource ID
-function refreshSibDisplays(resourceId, clearCache = true) {
-  let cacheCleared = false;
-
-  Array.from(document.querySelectorAll("sib-display"))
-    .filter(sibDisplay => sibDisplay.component?sibDisplay.component.resourceId == resourceId:false) // keep only elements with resource == edited resource
-    .forEach(async (e) => {
-      //clear cache if we were unable to before
-      if ((clearCache && !cacheCleared) && e.component.resource != null) {
-        await e.component.resource.clearCache();
-        cacheCleared = true;
-      }
-      e.dataset.src = e.dataset.src;
-    }); // and update them
-}
-
-async function updateSources(resource) {
-  let res = resource.split('/');
-  res.splice(3, 0, 'sources');
-  let cacheCleared = false;
-  if (event.target.component.resource != null) {
-    await event.target.component.resource.clearCache();
-    cacheCleared = true;
-  }
-  refreshSibDisplays(res.join('/'),cacheCleared);
-}
-
-async function resToChildrens(resource) {
-  resource = resource.getResourceData();
-  refreshSibDisplays(resource["http://happy-dev.fr/owl/#user"]["@id"]);
-  refreshSibDisplays(resource["http://happy-dev.fr/owl/#project"]["@id"] + "members/");
-  refreshSibDisplays(resource["http://happy-dev.fr/owl/#circle"]["@id"] + "members/");
-}
-
-//auxiliary function updates displays using a given resource
-//NOTE: this is a temporary workaround and should be replaced by a reactive storage
-//https://git.startinblox.com/framework/sib-core/issues/524
-async function refreshResource(event) {
-
-  // if of the edited resource || id of the container of the created resource
-  const resourceId = event.detail.resource["@id"] || event.target.dataset.src;
-  updateSources(resourceId, event);
-  [...new Set(Array.from(document.querySelectorAll('[data-src="' + resourceId + '"]')).map(e=>e.component?e.component.resource:null).filter(e=>e!=null))].forEach(resToChildrens);
-  [...new Set(Array.from(document.querySelectorAll('[data-src="' + resourceId.replace('circle-members','circles').split('/').slice(0, 4).join('/') + '/"]')).map(e=>e.component?e.component.resource:null).filter(e=>e!=null))].forEach(resToChildrens);
-  [...new Set(Array.from(document.querySelectorAll('[nested-field="' + resourceId.split('/').slice(3, 4).join('').replace('circle-members','circles') + '"]')).map(e=>e.component?e.component.resource:null).filter(e=>e!=null))].forEach(resToChildrens);
-
-  //special cases updating users/X/circles for the left-side-menu (leaving or joining circle)
-  let user = await document.querySelector('sib-auth').getUser();
-  if(resourceId.includes('circle') && user != null) {
-    let userId = user['@id'];
-    refreshSibDisplays(userId + "circles/");
-    refreshSibDisplays(resourceId.replace('circle-members','circles').split('/').slice(0, 3).join('/') + '/circles/joinable/');
-    refreshSibDisplays(resourceId.replace('circle-members','circles').split('/').slice(0, 3).join('/') + '/sources/circlesjoinable/');
-  }
-
-  if(resourceId.includes('users')) {
-    refreshSibDisplays(resourceId.split('/').slice(0, 3).join('/') + '/users/');
-    refreshSibDisplays(resourceId.split('/').slice(0, 3).join('/') + '/sources/users/');
-    refreshSibDisplays(resourceId + 'profile/');
-    refreshSibDisplays(resourceId + 'account/');
-    refreshSibDisplays(resourceId + 'chatProfile/');
-    refreshSibDisplays(resourceId + 'skills/');
-    refreshSibDisplays(resourceId + 'account/');
-  }
-
-  //clear cache on this resource
-  //NOTE: this is required because the cache is not refreshed after POSTing changes on the resource
-  let cacheCleared = false;
-  if (event.target.component.resource != null) {
-    await event.target.component.resource.clearCache();
-    cacheCleared = true;
-  }
-
-  //update all displays which use this resource
-  refreshSibDisplays(resourceId, cacheCleared);
-}
-
-//auxiliary function performs a redirect
-//NOTE: currently a sib-display is required to dispatch the requestNavigation event
-function performRedirect(route) {
-  document.dispatchEvent(
-    new CustomEvent("requestNavigation", {
-      bubbles: true,
-      detail: { route: route }
-    })
-  );
-}
-
-//auxiliary function redirects after leaving a project/circle
-//NOTE: this is a temporary workaround until the following issues are resolved:
-//https://git.startinblox.com/framework/sib-core/issues/476
-//https://git.startinblox.com/framework/sib-core/issues/546
-async function checkForPostLeaveRedirect(event) {
-  //a redirect will only be required if I left in the information page of the resource
-  if(!window.location.href.includes('-information')) {
-    return;
-  }
-  //first need to get a sib-display with this resource id (to have access to the target Proxy, containing model fields)
-  const resourceId = event.detail.resource['@id'] || event.target.dataset.src;
-  let target = document.querySelector('[data-src="' + resourceId + '"]');
-  let resource = target.component.resource.getResourceData();
-
-  //no redirect is required for public circles
-  let targetCircleId = resource["http://happy-dev.fr/owl/#circle"];
-  if(targetCircleId != undefined) {
-    let targetCircle = document.querySelector('[data-src="' + targetCircleId["@id"] + '"]');
-    let targetCircleResource = targetCircle.component.resource.getResourceData();
-    if(targetCircleResource['http://happy-dev.fr/owl/#status'] == 'Public') {
-      return;
-    }
-  }
-
-  //a redirect will only be required if I've deleted myself
-  let targetUser = resource['http://happy-dev.fr/owl/#user'];
-  if(targetUser != undefined) {
-    //compare with current user
-    let user = await document.querySelector('sib-auth').getUser();
-    if(targetUser['@id'] != user['@id'] && targetUser['@id'] != undefined) {
-      return;
-    }
-  }
-
-  //perform the redirect
-  if(resourceId.includes('circle')) {
-    performRedirect('circle-left');
-  } else if(resourceId.includes('project')) {
-    performRedirect('project-left');
-  }
-}
-
-
-document.addEventListener("DOMContentLoaded", function(event) {
-  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");
-    });
-  });
-
-  //- Watch every sib-forms & update data-src of linked sib-display
-  document.querySelector("body").addEventListener("save", event => {
-    refreshResource(event);
-  });
-  document.querySelector("body").addEventListener("resourceDeleted", event => {
-    //I might need to be redirected from this page
-    checkForPostLeaveRedirect(event).then(refreshResource(event));
-  });
-
-});
--- a/src/scripts/sib-notifications.js
+++ b/src/scripts/sib-notifications.js
@ -12,7 +12,7 @@ async function updateBadges(element) {
  }
  // update badges
  unreadNotifications.forEach((notifNumber, objectId) => {
-    const badge = document.querySelector(`sib-fix-badge[data-src="${objectId}"]`);
+    const badge = document.querySelector(`solid-fix-badge[data-src="${objectId}"]`);
    if (badge) {
      badge.innerText = notifNumber || '';
      badge.style.display = notifNumber ? 'block' : 'none';
@ -29,7 +29,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
      clearInterval(checkNotificationMenuExist);
      notifsMenu.addEventListener('populate', (event) => {
        const checkExist = setInterval(function () { // wait for left menus to exist
-          const subMenus = document.querySelectorAll('.sub-menu > sib-display > div');
+          const subMenus = document.querySelectorAll('.sub-menu > solid-display > div');
          if (subMenus.length >= 2) {
            updateBadges(event.target);
            clearInterval(checkExist);
@ -53,7 +53,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
  // on read notification
  window.addEventListener('read', (event) => {
    if (event.detail && event.detail.resource && event.detail.resource['@id']) {
-      const badge = document.querySelector(`sib-fix-badge[data-src="${event.detail.resource['@id']}"]`);
+      const badge = document.querySelector(`solid-fix-badge[data-src="${event.detail.resource['@id']}"]`);
      if (badge) badge.style.display = "none";
    }
  });
--- a/src/scripts/unreads-menu.js
+++ b/src/scripts/unreads-menu.js
@ -8,7 +8,7 @@ document.addEventListener("DOMContentLoaded", function (event) {

  window.addEventListener('read', (event) => {
    if (event.detail && event.detail.resource && event.detail.resource['@id']) {
-      const badge = document.querySelector(`sib-fix-badge[data-src="${event.detail.resource['@id']}"]`);
+      const badge = document.querySelector(`solid-fix-badge[data-src="${event.detail.resource['@id']}"]`);
      if (badge) badge.parentElement.parentElement.classList.remove('unread');
    }
  });
--- a/src/scripts/widget-extension.js
+++ b/src/scripts/widget-extension.js
@ -8,10 +8,10 @@ function applyAdapt(prefix, sibDisplay, user) {
    );
  }

-  //- Allow to set data-src to a children sib-form
+  //- Allow to set data-src to a children solid-form
  if (sibDisplay.getAttribute(prefix + "-bind-resources")) {
    let form = sibDisplay.querySelector(
-      sibDisplay.getAttribute(prefix + "-bind-resources") + " sib-form"
+      sibDisplay.getAttribute(prefix + "-bind-resources") + " solid-form"
    );
    if (form) {
      form.setAttribute(
@ -38,7 +38,7 @@ function recursiveAdaptWidgets(prefix, element, user) {
      el.setAttribute(el.getAttribute(prefix + "-user-id"), user["@id"]);
    });
    applyAdapt(prefix, element, user);
-    document.querySelectorAll('sib-display, sib-form').forEach(sibDisplay => {
+    document.querySelectorAll('solid-display, solid-form').forEach(sibDisplay => {
      applyAdapt(prefix, sibDisplay, user);
    });
  });
@ -50,12 +50,12 @@ document.addEventListener("DOMContentLoaded", function (event) {
    .getUser()
    .then(user => {
      if (user !== null) {
-        document.querySelectorAll('sib-display, sib-form').forEach(element => {
-          // Set current user id on set-user-id of sib-display
+        document.querySelectorAll('solid-display, solid-form').forEach(element => {
+          // Set current user id on set-user-id of solid-display
          recursiveAdaptWidgets("hubl-inherit", element, user);
        });
        for (leaveBtn of document.querySelectorAll(
-            "admin-circle-leave > sib-ac-checker:not([hidden])"
+            "admin-circle-leave > solid-ac-checker:not([hidden])"
          )) {
             // Hide Join button
          leaveBtn.parentNode.parentNode.parentNode.nextElementSibling.setAttribute(
--- a/src/styles/abstracts/_variables.scss
+++ b/src/styles/abstracts/_variables.scss
@ -118,6 +118,15 @@
  --color-backlink: var(--color-secondary);
  --color-content-header: var(--color-grey-9);

+  /* job board */
+  --color-job-board-primary:  var(--color-primary) !important;
+  --color-job-board-secondary: var(--color-secondary)!important;
+  --color-job-board-complementary: var(--color-complementary)!important;
+  --color-job-board-complementary-darken: var(--color-complementary-darken)!important;
+  --color-job-board-white: var(--color-white)!important;
+  --color-job-board-black-1: var(--color-black)!important;
+  --color-job-board-grey-10: #E4E8ED !important; // for some reason with the var it doesh't work var(--color-grey-12) !important;
+
  /* directory */
  --color-directory-primary: var(--color-primary)!important;
  --color-directory-secondary: var(--color-secondary)!important;
@ -131,4 +140,4 @@
 $color-212-4-50: hsl(212.7,4.3%,50%);
 $color-0-0-22: hsl(0,0%,22.7%);
 $color-203-87-19: hsl(203, 87.8%, 19.2%);
-$color-357-67-45: hsl(357,67.5%,45.9%);
+$color-357-67-45: hsl(357,67.5%,45.9%);
--- a/src/styles/base/form.scss
+++ b/src/styles/base/form.scss
@ -18,8 +18,23 @@
  .reversed,
  .button-secondary,
  .bordered;
-  margin-left: auto;
-  margin-top: 3.2rem;
+  height: auto;
+  position: fixed;
+  bottom: 1em;
+  left: 10%;
+  white-space: normal;
+  width: 80%;
+  z-index: 1;
+  
+  @include breakpoint(lg) {
+    height: 3rem;
+    left: 0;
+    margin: 0;
+    margin-left: auto;
+    margin-top: 109px;
+    position: relative;
+    width: auto;
+  }
 }

 .form-label {
@ -78,19 +93,20 @@

 textarea {
  height: 100px;
+  resize: vertical;
 }
    
 .content-box {
  
  &.with-form {

-    /*sib-set-default:not([name='user-thumb']) {
+    /*solid-set-default:not([name='user-thumb']) {
      clear: both;
 	    display: flex!important;
 			flex-wrap: wrap;
 			max-width: 100%;
 			
-			sib-form-label-text {
+			solid-form-label-text {
 				float: left;
 				width: 50%;
 			}
@ -98,7 +114,7 @@ textarea {
  }
 }

-/*sib-form[set-user-id-select] {
+/*solid-form[set-user-id-select] {

  input[type="submit"] {
    margin-left: 0;
@ -113,7 +129,7 @@ textarea {

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

-sib-form-auto-completion,
+solid-form-auto-completion,
 hubl-status {

  .ss-main {
@ -189,7 +205,7 @@ hubl-status {
 }
 /* End */

-sib-form-date {
+solid-form-date {
  input[type="date"] {
    background-image: url("/images/calendar.svg");
    background-position: right 12px top 50%;
@ -223,42 +239,61 @@ sib-form-date {
  }
 }

-sib-form-file {
-
-  label {
-    align-items: baseline;
-    clear: both;
+solid-form-file {
+  
+  div {
    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    max-width: 100%;
-
-    div {
-      width: 100%;
+    flex-direction: column-reverse;
+    align-items: center;
+    margin-top: 1.8rem;
+    
+    @include breakpoint(lg) {
+      flex-direction: row-reverse;
+      justify-content: flex-end;
    }
-
-    input[type='text'] {
-      box-sizing: border-box;
-      flex: 0 0 50%;
-    }
-
+  
    input[type='file'] {
-      box-sizing: border-box;
-      flex: 0 0 20%;
-      color: var(--color-input-text);
-      cursor: pointer;
-      padding-left: 3rem;
+      height: 0.1px;
+      opacity: 0;
+      overflow: hidden;
+      position: absolute;
+      width: 0.1px;
+      z-index: -1;
+    }
+      
+    input[type='text'] {
+      margin-bottom: 0.8rem;
+      width: 100%;
+
+      @include breakpoint(lg) {
+        width: auto;
+      }
+    }
+
+    label {
+      @extend .button,
+      .text-bold,
+      .text-uppercase,
+      .button-primary,
+      .bordered;
+      text-align: center;
+      width: 100%;
+      
+      @include breakpoint(lg) {
+        margin: auto 2.2rem;
+        width: auto;
+      }
    }
  }
 }

-/*sib-multiple-select {
+/*solid-multiple-select {

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

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

@ -342,7 +377,7 @@ hubl-member-form {
      margin-bottom: 1rem;
    }

-    sib-form-auto-completion {
+    solid-form-auto-completion {
      float: left;
    }

--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@ -40,7 +40,7 @@
  }

  /* To remove the place taken by this element */
-  sib-widget[name='hubl-user-avatar'] {
+  solid-widget[name='hubl-user-avatar'] {
    display: contents;
  }
 }
@ -176,7 +176,7 @@ sib-notifications {
        }
      }
      
-      sib-display-value[name='first_name'] {
+      solid-display-value[name='first_name'] {
        @include icon('arrow-down');
        align-items: center;
        display: none;
@ -224,7 +224,7 @@ sib-notifications {
        
        li {

-          sib-link {
+          solid-link {
            color: var(--color-grey-4);
            display: block;
            border-bottom: 1px solid var(--color-user-panel-list-border);
@ -259,7 +259,7 @@ sib-notifications {

      div {

-        sib-display-value[name='first_name'] {
+        solid-display-value[name='first_name'] {
          @include icon('close');

          &::before {
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@ -22,8 +22,8 @@
  }
 }

-/* Fix for sib-dashboard fixture */
-sib-dashboard section {
+/* Fix for solid-dashboard fixture */
+solid-dashboard section {
  padding: 1rem !important;

  @include breakpoint(lg) {
@ -322,14 +322,14 @@ h5 {
    }
  }

-  sib-display {
+  solid-display {
    @include breakpoint(sm) {
      float: left;
    }
  }

-  /* For sib-display on project, circle, or private message view */
-  sib-display {
+  /* For solid-display on project, circle, or private message view */
+  solid-display {
    width: calc(100% - 94px); /* 94px = width of .mobile-sidebar-button */

    div {
@ -394,7 +394,7 @@ h5 {
    max-width: 75%;
  }

-  sib-link {
+  solid-link {
    font-size: 2.7rem;
    position: absolute;
    right: 32px;
@ -430,8 +430,8 @@ h5 {
    }
  }

-  sib-ac-checker,
-  sib-link {
+  solid-ac-checker,
+  solid-link {
    width: 100%;

    @include breakpoint(lg) {
@ -516,9 +516,9 @@ h5 {
@import 'user-thumb';

 // Button global CSS
-sib-delete,
-sib-route,
-sib-link,
+solid-delete,
+solid-route,
+solid-link,
 button,
 input[type='submit'],
 a,
--- a/src/styles/base/menu-left.scss
+++ b/src/styles/base/menu-left.scss
@ -11,7 +11,7 @@
    font-weight: bolder;
  }

-  sib-router {
+  solid-router {
    .menu-wrapper {
      &.is-closed {
        .sub-menu {
@ -24,7 +24,7 @@
      }
    }

-    sib-link {
+    solid-link {
      width: 100%;
    }

@ -42,7 +42,7 @@
          background-color: var(--color-menu-icon-background-active);
        }

-        .menu-notification>sib-display>div:first-child {
+        .menu-notification>solid-display>div:first-child {
          background-color: var(--color-menu-badge-background);
        }
      }
@ -85,7 +85,7 @@
        width: 2em;
      }

-      >sib-display {
+      >solid-display {
        display: block;
      }
    }
@ -94,9 +94,9 @@

      /* Ellipsis for project tab */

-      .project-tab>div>sib-display>div:nth-child(1) {
+      .project-tab>div>solid-display>div:nth-child(1) {

-        sib-set-default[name='project'] {
+        solid-set-default[name='project'] {
          flex: 3;
          
          .project-customer,
@ -125,9 +125,9 @@

      /* Ellipsis for circle tab */

-      .circle-tab>div>sib-display>div {
+      .circle-tab>div>solid-display>div {

-        sib-display-div[name='name'] {
+        solid-display-div[name='name'] {
          flex: 3;

          >div[name='name'] {
@ -147,7 +147,7 @@

      /* Ellipsis for message tab */

-      .message-tab>div>sib-display>div>sib-display-div>div {
+      .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 */
        
@ -156,7 +156,7 @@
        }
      }

-      sib-display.nosub>sib-form[fields="name"]>hubl-search-users>input {
+      solid-display.nosub>solid-form[fields="name"]>hubl-search-users>input {
        margin-left: 30px;
        margin-bottom: 10px;
        width: calc(80vw - 71px);
@ -169,11 +169,12 @@

        @include breakpoint(lg) {
          margin: auto;
+          margin-bottom: 10px;
          width: auto;
        }
      }

-      sib-display.nosub>nav {
+      solid-display.nosub>nav {
        text-align: center;
        overflow: hidden;
        display: grid;
@ -209,18 +210,18 @@
        }
      }

-      >sib-display.nosub>div>sib-display>div {
+      >solid-display.nosub>div>solid-display>div {
        padding: 1rem 1rem 1rem 3rem;
      }

-      sib-display>div {
+      solid-display>div {

        .create {
          color: var(--color-white);
          margin: 1rem 1rem 2.2rem 3.2rem;
        }

-        &>sib-display {
+        &>solid-display {
          &:last-child>div {
            margin-bottom: 2.2rem;
          }
@ -229,8 +230,8 @@
            color: var(--color-grey-6);
            cursor: pointer;

-            >hubl-menu-fix-url-circle>sib-display>div,
-            >hubl-menu-fix-url-project>sib-display>div {
+            >hubl-menu-fix-url-circle>solid-display>div,
+            >hubl-menu-fix-url-project>solid-display>div {
              padding: 1rem 1rem 1rem 3rem;
            }
          }
@ -240,9 +241,9 @@
          }
        }

-        &>sib-display[active]>div,
-        &>sib-display>div>hubl-menu-fix-url-circle>sib-display[active]>div,
-        &>sib-display>div>hubl-menu-fix-url-project>sib-display[active]>div {
+        &>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;
@ -251,14 +252,14 @@

      &.menu-notification {

-        >sib-display>div>sib-display>div>hubl-menu-fix-url-circle,
-        >sib-display>div>sib-display>div>hubl-menu-fix-url-project {
+        >solid-display>div>solid-display>div>hubl-menu-fix-url-circle,
+        >solid-display>div>solid-display>div>hubl-menu-fix-url-project {
          flex: 1;
        }

-        >sib-display>div>sib-display>div,
-        >sib-display>div>sib-display>div>hubl-menu-fix-url-circle>sib-display>div,
-        >sib-display>div>sib-display>div>hubl-menu-fix-url-project>sib-display>div {
+        >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;
        }
@ -293,7 +294,7 @@
 }

 // Temporary fix for badges
-sib-fix-badge {
+solid-fix-badge {
  display: none;
  box-sizing: border-box;
  font-family: sans-serif;
--- a/src/styles/base/table.scss
+++ b/src/styles/base/table.scss
@ -4,6 +4,11 @@
  overflow: auto;
  position: relative;
  width: 100%;
+  margin-bottom: 6rem;
+
+  @include breakpoint(lg) {
+    margin-bottom: 0;
+  }

  .table {
    border-collapse: collapse;
@ -32,7 +37,7 @@
    &>div {
      display: contents;

-      &>sib-display {
+      &>solid-display {
        display: table-row;

        &>div {
@ -46,7 +51,7 @@
        }
      }

-      &>sib-multiple {
+      &>solid-multiple {
        display: contents;

        &>div {
@ -71,7 +76,6 @@
 /* Styles of the table and its elements */

 .table {
-  border-bottom: 1px solid var(--color-table-border);
  border-left: 1px solid var(--color-table-border);
  border-right: 1px solid var(--color-table-border);
 }
@ -113,20 +117,16 @@
    width: 280px;
  }

+  .w230 {
+    width: 230px;
+  }
+
  .w70 {
    width: 70px;
  }

-  .w262 {
-    width: 262px;
-  }
-
-  .W152 {
-    width: 152px;
-  }
-
-  .w355 {
-    width: 355px;
+  .w162 {
+    width: 162px;
  }

  .hashtag::before {
@ -183,7 +183,7 @@
  }
 }

-.table sib-ac-checker {
+.table solid-ac-checker {
  text-align: center;
 }

@ -209,8 +209,9 @@

 .circle-leave {
  position: relative;
-  width: 40%;
-  min-width: 40%;
+  width: 164px;
+  margin: 0 auto;
+  min-width: 164px;

  &>button {
    height: 29px;
--- a/src/styles/components/chat.scss
+++ b/src/styles/components/chat.scss
@ -8,7 +8,7 @@
    height: calc(100vh - 84px - 83px); /* Header's and subheader's height on mobile */
  }

-  > sib-chat {
+  > solid-xmpp-chat {
    position: absolute;
    top: 0;
    left: 0;
--- a/src/styles/components/comment.scss
+++ b/src/styles/components/comment.scss
@ -37,9 +37,9 @@
      }
    }

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

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

        [name='conversation-wrapper'] {
@ -67,14 +67,14 @@
          }
        }

-        >sib-display.conversation>div>sib-display:first-child {
+        >solid-display.conversation>div>solid-display:first-child {
          margin-bottom: 4.5rem;
        }

-        sib-ac-checker {
+        solid-ac-checker {
          border-top: 1px solid $color-210-17-91;

-          sib-form-textarea {
+          solid-form-textarea {

            >label div {
              color: $color-210-5-56;
@ -111,7 +111,7 @@
          }
        }

-        .conversation>div>sib-display,
+        .conversation>div>solid-display,
        .conversation-form {
          border: none;
          margin: 1rem 2.1rem;
--- a/src/styles/components/filters.scss
+++ b/src/styles/components/filters.scss
@ -41,19 +41,19 @@
    }
  }

-  sib-form-label-text {
+  solid-form-label-text {
    display: flex;
    flex-direction: column;
  }

-  sib-form-placeholder-dropdown[name="skills"] {
+  solid-form-placeholder-dropdown[name="skills"] {
    grid-column-end: 3;
    grid-column-start: 1;
  }
 }

 .job-board, #members-list {
-  sib-form[naked] {
+  solid-form[naked] {
    @extend %filters;
  }
 }*/
--- a/src/styles/components/sidebar.scss
+++ b/src/styles/components/sidebar.scss
@ -45,7 +45,7 @@
    transition: all 0.5s;
    width: 25rem;

-    >sib-router {
+    >solid-router {
      color: var(--color-right-menu-text);
      flex: 0 0 auto;
      font-weight: 600;
@ -79,7 +79,7 @@
          @include icon('arrow-right-circle');
        }

-        >sib-route {
+        >solid-route {

          &[name*='circle'],
          &[name*='project'] {
--- a/src/styles/components/skills.scss
+++ b/src/styles/components/skills.scss
@ -1,4 +1,4 @@
-sib-multiple[name*='skills'] {
+solid-multiple[name*='skills'] {
  display: flex;
  flex-wrap: wrap;
 }
--- a/src/styles/layout/dashboard/dashboard.scss
+++ b/src/styles/layout/dashboard/dashboard.scss
@ -2,6 +2,6 @@
  margin: 0 2px;
 }

-sib-dashboard .icon::before {
+solid-dashboard .icon::before {
  width: 41px;
 }
--- a/src/styles/layout/events/events.scss
+++ b/src/styles/layout/events/events.scss
@ -17,12 +17,12 @@
            font-weight: 700;
        }
        #listevents [name="name"],
-        sib-display-link-event .mdi::before {
+        solid-display-link-event .mdi::before {
            color:  $color-357-67-45;
        }
        .event-place-name,
        .nextevent-startdate,
-        sib-display-link-event {
+        solid-display-link-event {
            color: $color-0-0-22;
        }
        .sib-event {
@ -43,7 +43,7 @@
                padding: 5px 20px;
                color: $color-203-87-19;
            }
-            sib-form sib-form-dropdown{
+            solid-form solid-form-dropdown{
                label div {
                    height: 2.5rem;
                }
@ -72,7 +72,7 @@
                width: max-content;
                height: max-content;
            }
-            sib-display-location-events {
+            solid-display-location-events {
                padding: 5px;
            }
        }
@ -83,7 +83,7 @@
                line-height: 3.8rem;
                color: $color-203-87-19;
            }
-            sib-display div .event-type {
+            solid-display div .event-type {
                width: max-content;
                padding: 5px 20px; 
            }
@ -91,7 +91,7 @@
                font-size: 1.6rem;
                line-height: 2.6rem;
            }
-            sib-display-link-event a {
+            solid-display-link-event a {
                font-size: 1.6rem;
            }
        }
--- a/src/styles/layout/job-offers/job-offers.scss
+++ b/src/styles/layout/job-offers/job-offers.scss
@ -2,7 +2,7 @@
  @extend %grid-layer;
 }

-sib-job-board {
+solid-job-board {
  @extend %grid-layer-main;
  @extend %containerV;
 }
@ -37,7 +37,7 @@ sib-job-board {
  .job-board__list {
    @extend %grid-layer;

-    >sib-form {
+    >solid-form {
      grid-column-start: start;
      grid-column-end: middle;
      grid-row-start: start;
@ -54,7 +54,7 @@ sib-job-board {
        margin-top: 5rem;
      }

-      >sib-display {
+      >solid-display {
        @include window-style-modal();
        display: block;
        font-size: 1.5rem;
@ -71,7 +71,7 @@ sib-job-board {
            display: flex;
            margin: -0.25em;

-            >*:not(sib-action) {
+            >*:not(solid-action) {
              margin: 0.25em;
            }

@ -80,7 +80,7 @@ sib-job-board {
              font-weight: 600;
            }

-            sib-multiple[name$='groups'] {
+            solid-multiple[name$='groups'] {
              display: flex;

              label {
@ -147,7 +147,7 @@ sib-job-board {
            font-size: 1.3rem;
            float: right;

-            >sib-link {
+            >solid-link {
              cursor: pointer;
              @include icon('speech');

@ -180,7 +180,7 @@ sib-job-board {
          }
        }

-        .sib-conversation,
+        .solid-conversation,
        .conversation > div {
          display: flex;
          flex-direction: column-reverse;
@ -194,11 +194,11 @@ sib-job-board {
  }
 }

-sib-action[name='edit'] {
+solid-action[name='edit'] {
  margin-left: auto;
  color: $color-215-6-63;

-  &>sib-link {
+  &>solid-link {
    @include icon('pencil');
    font-size: 2rem;
  }
--- a/src/styles/layout/members/member-profile.scss
+++ b/src/styles/layout/members/member-profile.scss
@ -11,7 +11,7 @@

    .member-bio {

-      sib-set-default[name='member-profile__bio'] {
+      solid-set-default[name='member-profile__bio'] {
        display: grid;
        grid-gap: 1rem;
        grid-template-areas: "avatar name status"
@ -20,7 +20,7 @@
          "avatar list button";
        grid-template-columns: 1fr 2fr 1fr;

-        sib-set-default[name='member-img'] {
+        solid-set-default[name='member-img'] {
          grid-area: avatar;
          
          member-picture {
@ -56,23 +56,23 @@
          }
        }

-        sib-set-default[name='member-profile'] {
+        solid-set-default[name='member-profile'] {
          align-items: baseline;
          align-self: end;
          display: flex;
          grid-area: name;

-          >sib-multiple[name$='groups'] {
+          >solid-multiple[name$='groups'] {
            display: flex;
            padding-left: 1.4rem;
          }
        }

-        sib-display-value[name='profile.bio'] {
+        solid-display-value[name='profile.bio'] {
          grid-area: bio;
        }

-        sib-set-default[name='infos'] {
+        solid-set-default[name='infos'] {
          display: block;
          grid-area: list;

@ -115,7 +115,7 @@
          }
        }

-        sib-action[name='send'] {
+        solid-action[name='send'] {
          align-self: flex-end;
          grid-area: button;
          justify-self: flex-end;
--- a/src/styles/layout/members/members.scss
+++ b/src/styles/layout/members/members.scss
@ -1,8 +1,8 @@
 /*%member-info {

-  sib-multiple[name^='user.'],
+  solid-multiple[name^='user.'],
  >member-info>div,
-  >sib-display-value {
+  >solid-display-value {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
@ -70,7 +70,7 @@ member-info-groups {
      }
    }

-    &>sib-form {
+    &>solid-form {
      grid-column-start: start;
      grid-column-end: middle;
      grid-row-start: start;
@ -126,7 +126,7 @@ member-info-groups {
        grid-template-columns: repeat(3, 1.5fr);
      }

-      &>sib-display {
+      &>solid-display {
        background-color: white;
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
        color: $color-210-4-50;
@ -151,7 +151,7 @@ member-info-groups {
          display: none;
        }

-        sib-multiple[name$='groups'] {
+        solid-multiple[name$='groups'] {
          align-items: flex-start;
          display: flex;
          justify-content: flex-end;
@ -189,7 +189,7 @@ member-info-groups {
          }
        }

-        sib-set-default[name='bio'] {
+        solid-set-default[name='bio'] {
          align-items: center;
          border-bottom: 1px solid $color-210-25-95;
          display: flex;
@ -204,7 +204,7 @@ member-info-groups {
            margin-top: 0.6rem;
          }

-          sib-display-value[name$='bio'] {
+          solid-display-value[name$='bio'] {
            flex: 1;
            margin: 2.5rem 0;
            padding: 0 10px;
@ -228,11 +228,11 @@ member-info-groups {
          }
        }

-        sib-set-default[name='infos'] {
+        solid-set-default[name='infos'] {
          padding: 0.4rem 2rem 3.7rem;
          @extend %member-info;

-          sib-multiple[name='skills'] {
+          solid-multiple[name='skills'] {
            margin: 1.6rem 0;
          }
        }
--- a/src/styles/layout/user/user-profile.scss
+++ b/src/styles/layout/user/user-profile.scss
@ -30,7 +30,7 @@
        align-self: end;
        display: flex;

-        sib-multiple {
+        solid-multiple {
          display: flex;
          padding-left: 1.4rem;

--- a/src/templates/hubl-captain.pug
+++ b/src/templates/hubl-captain.pug
@ -1,8 +1,8 @@
 include hubl-user-avatar.pug

-sib-widget(name='hubl-captain')
+solid-widget(name='hubl-captain')
  template
-    sib-display.user-thumb(
+    solid-display.user-thumb(
      data-src="${await value}"
      fields='account.picture, sup(name), sub(is_lead)'

@ -11,5 +11,5 @@ sib-widget(name='hubl-captain')
      class-is_lead='user-thumb__lead'

      widget-account.picture='hubl-user-avatar'
-      value-is_lead='Project lead'
+      value-is_lead='Capitaine'
    )
--- a/src/templates/hubl-circle-team.pug
+++ b/src/templates/hubl-circle-team.pug
@ -1,8 +1,8 @@
 include hubl-user-avatar.pug

-sib-widget(name='hubl-circle-team-template')
+solid-widget(name='hubl-circle-team-template')
  template
-    sib-display.user-thumb.is-spaced(
+    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}'
@ -16,5 +16,5 @@ sib-widget(name='hubl-circle-team-template')
      widget-isadmin='hubl-circle-user-admin'
    )

-sib-widget(name='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,8 +1,8 @@
 include hubl-user-avatar.pug

-sib-widget(name='hubl-project-team')
+solid-widget(name='hubl-project-team')
  template
-    sib-display.user-thumb.is-spaced(
+    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}'
@ -18,5 +18,5 @@ sib-widget(name='hubl-project-team')
      widget-isadmin='hubl-project-user-admin'
    )

-sib-widget(name='hubl-project-user-admin')
+solid-widget(name='hubl-project-user-admin')
  template ${(await value) == "false" ? "" : "Administrateur"}
--- a/src/templates/hubl-user-avatar.pug
+++ b/src/templates/hubl-user-avatar.pug
@ -1,2 +1,2 @@
-sib-widget(name='hubl-user-avatar')
+solid-widget(name='hubl-user-avatar')
  template ${await value ? `<img src="${await value}" style="max-width:100%; max-height: 100%;" />` : `<object type="image/svg+xml" data="/images/alien.svg"></object>`}
--- a/src/views/admin/page-admin-circles-create.pug
+++ b/src/views/admin/page-admin-circles-create.pug
@ -1,9 +1,9 @@
 div.content-box__info.flex
-  sib-link(class="backlink right", next='admin-circle-list') Retour
+  solid-link(class="backlink right", next='admin-circle-list') Retour

  h1.centered Créer un canal

-  sib-form.form.button-register(
+  solid-form.form.button-register(
    data-src=`${endpoints.circles || endpoints.post.circles}`

    fields='status, name, description'
--- a/src/views/admin/page-admin-circles.pug
+++ b/src/views/admin/page-admin-circles.pug
@ -1,8 +1,8 @@
 .content-box.flex.full-width.with-form
-  sib-router(default-route='admin-circle-list', hidden)
-    sib-route(name='admin-circle-list')
-    sib-route(name='admin-circle-create')
-    sib-route(name='circle-left')
+  solid-router(default-route='admin-circle-list', hidden)
+    solid-route(name='admin-circle-list')
+    solid-route(name='admin-circle-create')
+    solid-route(name='circle-left')

  div.content-box__header.flex.space-between
    h1.without-margin Administration
@ -13,9 +13,9 @@
  #admin-circle-list.content-box__height(hidden)
    include ../../templates/hubl-user-avatar.pug

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

@ -33,7 +33,7 @@

        h3 Canaux

-        sib-link(
+        solid-link(
          class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
          next='admin-circle-create'
        ) Créer un canal
@ -46,15 +46,18 @@
            div.w280 Administrateurs
            div.w280 Rejoindre

-          sib-widget(name='hubl-admin-circle-leave-button')
+          solid-widget(name='hubl-admin-circle-leave-button')
            template
-              sib-delete(
+              solid-delete(
                class='circle-leave button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
                data-src="${src}"
                data-label='Quitter'
              )
+              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}')
+              hubl-reactivity(bind-user nested-field="circles" target-src='${src}')

-          sib-display(
+          solid-display(
            class='table-body'

            bind-user
@ -72,19 +75,22 @@
            order-by="circle.name"
          )

-          sib-widget(name='hubl-admin-circle-join-button')
+          solid-widget(name='hubl-admin-circle-join-button')
            template
-              sib-form.circle-join.button.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex(
+              solid-form.circle-join.button.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex(
                data-src='${value}'

                fields='user.username'
                value-user.username='hubl-workaround-493'
-                widget-user.username='sib-form-hidden'
+                widget-user.username='solid-form-hidden'

                submit-button='Rejoindre'
              )
+              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}')
+              hubl-reactivity(bind-user nested-field="circles" target-src='${value}')

-          sib-display(
+          solid-display(
            class='table-body'

            data-src=`${endpoints.circles || endpoints.get.circles}joinable/`
--- a/src/views/admin/page-admin-projects-create.pug
+++ b/src/views/admin/page-admin-projects-create.pug
@ -1,48 +1,50 @@
 div.content-box__info.flex
-  sib-link(class="backlink right" next='admin-project-list') Retour
+  solid-link(class="backlink right" next='admin-project-list') Retour

-  sib-widget(name="hubl-admin-project-add-user")
+  solid-widget(name="hubl-admin-project-add-user")
    template
-      sib-form(
+      solid-form(
        data-holder
        fields='user, project'
        range-user=`${endpoints.users || endpoints.get.users}`
        value-project='${src}'
-        widget-project='sib-form-hidden'
+        widget-project='solid-form-hidden'
        naked
      )

-  h1.centered Créer un projet
+  h1.centered Créer un nouveau projet

-  sib-form.form.button-register(
+  solid-form.form.button-register(
    data-src=`${endpoints.projects || endpoints.post.projects}`
    
-    fields='line-1(customer, name), line-2(project.description), line-3(businessProvider.name, businessProvider.fee), line-4(captain)'
+    fields='status, line-1(customer.name, name), description, line-2(captain), logo'

-		label-customer='Nom du client*'
-    class-customer='form-label is-light is-half-width'
-    range-customer=`${endpoints.customers || endpoints.get.customers}`
-    widget-customer='sib-form-auto-completion'
+    label-status='Statut du canal*'
+    widget-status='hubl-status'
+    class-status='form-label is-light is-full-width'
+
+    label-description='Description du projet'
+    class-description='form-label is-light is-full-width input-text-like'
+    widget-description='solid-form-textarea'
+
+		label-customer.name='Nom du client*'
+    class-customer.name='form-label is-light is-half-width input-text-like'

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

-		label-project.description='Description du projet'
-    class-project.description='form-label is-light is-full-width input-text-like'
-    widget-project.description='sib-form-textarea'
-
-		label-businessProvider.name='Apporteur d\'affaire*'
-    class-businessProvider.name='form-label is-light is-half-width input-text-like'
-
-		label-businessProvider.fee='Contribution'
-    class-businessProvider.fee='form-label is-light is-half-width input-text-like'
-
-    label-captain='Capitaine du projet'
+    label-captain='Capitaine du projet*'
    range-captain=`${endpoints.users || endpoints.get.users}`
    class-captain='form-label is-light is-half-width'
-    widget-captain='sib-form-auto-completion'
+    widget-captain='solid-form-auto-completion'
+
+    class='input-text-like'
+    widget-logo="solid-form-file"
+    label-logo="Télécharger un logo"
+    class-logo='select-add'
+    upload-url-logo=`${endpoints.uploads || endpoints.post.uploads}`

    next='admin-project-list'

-    submit-button='Enregistrer'
+    submit-button='Enregistrer et ajouter des membres'
  )
--- a/src/views/admin/page-admin-projects.pug
+++ b/src/views/admin/page-admin-projects.pug
@ -1,8 +1,8 @@
 .content-box.flex.full-width.with-form
-  sib-router(default-route='admin-project-list', hidden)
-    sib-route(name='admin-project-list')
-    sib-route(name='admin-project-create')
-    sib-route(name='project-left')
+  solid-router(default-route='admin-project-list', hidden)
+    solid-route(name='admin-project-list')
+    solid-route(name='admin-project-create')
+    solid-route(name='project-left')

  div.content-box__header.flex.space-between
    h1.without-margin Administration
@ -17,30 +17,33 @@
    div.content-box__info.flex
      div.admin-header.flex
        h3 Projets
-        sib-link(
+        solid-link(
          class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
          next='admin-project-create'
-        ) Créer un projet
+        ) Créer un nouveau projet

      .table-wrapper
        .table
          div.table-header.grey-color
-            div.w262 Nom
-            div.w262 Administrateurs
-            div.w262 Capitaines
-            div.w262 Accès
+            div.w280 Nom
+            div.w280 Administrateurs
+            div.w280 Capitaines
+            div.w230 Rejoindre

-          sib-widget(name="hubl-admin-project-leave-button")
+          solid-widget(name="hubl-admin-project-leave-button")
            template
-              sib-delete(
+              solid-delete(
                class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
                data-src="${src}"
                data-label='Quitter'
              )
+              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}')
+              hubl-reactivity(bind-user nested-field="projects" target-src='${src}')

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

@ -51,48 +54,81 @@
                widget-account.picture='hubl-user-avatar'
              )

-          sib-widget(name='hubl-project-admins')
+          solid-widget(name='hubl-project-admins')
            template
-              sib-display(
+              solid-display(
                data-src='${value}'
                fields='user'
                search-fields='is_admin'
                search-value-is_admin='true'
-                search-widget-is_admin='sib-form-hidden'
+                search-widget-is_admin='solid-form-hidden'
                widget-user='hubl-project-captain'
              )

-          sib-widget(name="hubl-admin-project-buttons")
+          solid-widget(name='hubl-admin-project-leave-button')
            template
-              sib-display(
-                data-src='${src}'
-                nested-field='members'
-                fields='relation'
-                action-relation='relation'
-                widget-relation='hubl-admin-project-leave-button'
-                search-fields='user'
-                search-widget-user='sib-form-hidden'
-                search-value-user="-"
-                hubl-inherit-user-id="search-value-user"
+              solid-delete(
+                class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
+                data-src="${src}"
+                data-label='Quitter'
              )

-          sib-display(
+          solid-display(
            class='table-body'

-            data-src=`${endpoints.projects || endpoints.get.projects}`
-            fields='name, members, captain, buttons'
+            bind-user
+            nested-field="projects"
+            fields='project.name, project.members, project.captain, leaveButton'

-            class-name='w262 border cell-with-name hashtag'
-            class-members='w262 border'
-            class-captain='w262 border cell-with-id-card'
-            class-buttons='w262 border cell-with-buttons'
+            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'

-            widget-buttons="admin-project-buttons"
-            action-buttons="buttons"
+            action-leaveButton="joinButton"
+            widget-leaveButton="hubl-admin-project-leave-button"
+
+            widget-project.captain='hubl-project-captain'
+            widget-project.members='hubl-project-admins'
+
+            order-by="project.name"
+          )
+
+          solid-widget(name='hubl-admin-project-join-button')
+            template
+              solid-form.button.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex(
+                data-src='${src}'
+                nested-field="members"
+
+                fields='user.username'
+                value-user.username='hubl-workaround-493'
+                widget-user.username='solid-form-hidden'
+
+                submit-button='Rejoindre'
+              )
+              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}')
+              hubl-reactivity(bind-user nested-field="projects" target-src='${src}')
+
+          solid-display(
+            class='table-body'
+
+            data-src=`${endpoints.projects || endpoints.get.projects}joinable/`
+            fields='name, members, captain, joinButton'
+
+            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'
+
+            action-joinButton="joinButton" # Workaround: I need members two times
+            widget-joinButton="hubl-admin-project-join-button"

            widget-captain='hubl-project-captain'
            widget-members='hubl-project-admins'
+
+            order-by="name"
          )

-  #admin-project-create.content-box__height(hidden)
+  #admin-project-create(hidden)
    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,9 +1,9 @@
 div.content-box__info.flex
-  sib-link(class='backlink right', next='admin-users-list') Retour
+  solid-link(class='backlink right', next='admin-users-list') Retour

  h1.centered Ajouter un utilisateur à la plateforme

-  sib-form.form.button-register(
+  solid-form.form.button-register(
    data-src=`${endpoints.users || endpoints.post.users}`

    fields='line-1(first_name, last_name), line-2(username, email), line-3(password)'
@ -19,7 +19,7 @@ div.content-box__info.flex
    label-email='E-mail *'

    value-password=''
-    widget-password='sib-form-hidden'
+    widget-password='solid-form-hidden'

    next='admin-users-list'

--- a/src/views/admin/page-admin-users-edit.pug
+++ b/src/views/admin/page-admin-users-edit.pug
@ -1,14 +1,14 @@
 div.content-box__info.flex
-  sib-link(class='backlink right', next='admin-users-list') Retour
+  solid-link(class='backlink right', next='admin-users-list') Retour

  h1.centered 
    span Modifier un utilisateur
-    sib-display(
+    solid-display(
      bind-resources=''
      fields='name'
    )  

-  sib-form.form.button-register(
+  solid-form.form.button-register(
    bind-resources=''

    fields='line-1(first_name, last_name), line-2(username, email)'
--- a/src/views/admin/page-admin-users.pug
+++ b/src/views/admin/page-admin-users.pug
@ -1,17 +1,17 @@
 .content-box.flex.full-width.with-form
-  sib-router(default-route='admin-users-list', hidden)
-    sib-route(name='admin-users-list')
-    sib-route(name='admin-users-create')
-    sib-route(name='admin-users-edit')
+  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
  
-  sib-widget(name='hubl-sib-action-custom')
+  solid-widget(name='hubl-solid-action-custom')
    template
-      sib-ac-checker(data-src="${src}", permission='acl:Write')
-        sib-link(
+      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}"
@ -22,8 +22,8 @@
    div.content-box__info.flex
      div.admin-header.flex
        h3 Utilisateurs
-        sib-ac-checker(data-src=`${endpoints.users || endpoints.post.users}`, permission='acl:Append')
-          sib-link(
+        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
@ -34,7 +34,7 @@
            div.w280 Nom
            div.w70
        
-          sib-display(
+          solid-display(
            class='table-body'
            data-src=`${endpoints.users || endpoints.get.users}`
            fields='cell-1(user-thumb(account.picture, sup(name), sub(username))), actions'
@ -48,7 +48,7 @@
            label-actions='Edit'
            action-actions='admin-users-edit'
            class-actions='w70 border cell-with-buttons'
-            widget-actions='hubl-sib-action-custom'
+            widget-actions='hubl-solid-action-custom'

            order-by='username'
          )
--- a/src/views/circle/page-circle-chat.pug
+++ b/src/views/circle/page-circle-chat.pug
@ -1,5 +1,5 @@
 .chat-view
-  sib-chat(
+  solid-xmpp-chat(
    data-authentication='login',
    data-auto-login='true',
    data-bosh-service-url=`${xmpp}`,
--- a/src/views/circle/page-circle-edit.pug
+++ b/src/views/circle/page-circle-edit.pug
@ -2,13 +2,13 @@ div.content-box__info

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

-  sib-widget(name='hubl-user-groups')
+  solid-widget(name='hubl-user-groups')
    template ${await value.name}

-  sib-widget(name='hubl-team-template-edit')
+  solid-widget(name='hubl-team-template-edit')
    template
-      sib-display.user-thumb.is-spaced(
-        class='w355 cell border cell-with-id-card user-thumb'
+      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)'

@ -23,30 +23,30 @@ div.content-box__info
        widget-groups='hubl-user-groups'
      )

-      sib-ac-checker(
-        class='W152 cell border'
+      solid-ac-checker(
+        class='w162 cell border'
        permission="acl:Delete"
        data-src="${value['@id']}"
      )
-        sib-delete(
+        solid-delete(
          class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
          data-src="${value['@id']}"
          data-label='Retirer'
        )

      //- Only to show the table grid
-      sib-ac-checker(
-        class='W152 cell border'
+      solid-ac-checker(
+        class='w162 cell border'
        no-permission="acl:Delete"
        data-src="${value['@id']}"
      )

-  sib-link(class="backlink right", bind-resources, next='circle-profile') Retour
+  solid-link(class="backlink right", bind-resources, next='circle-profile') Retour

-  sib-ac-checker(permission='acl:Write', bind-resources)
+  solid-ac-checker(permission='acl:Write', bind-resources)
    h1 Modifie ton canal

-    sib-form.form.button-register(
+    solid-form.form.button-register(
      bind-resources

      fields='status, line-1(name, owner), description'
@ -64,7 +64,7 @@ div.content-box__info
      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='sib-form-auto-completion'
+      widget-owner='solid-form-auto-completion'

      partial=''

@ -72,10 +72,10 @@ div.content-box__info
      next='circle-information'
    )

-  h2 Liste des membres:
+  h2 Liste des membres :

-  sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
-    sib-form.block.select-add(
+  solid-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
+    solid-form.block.select-add(
      bind-resources 
      nested-field='members'
      fields='user'
@ -83,7 +83,7 @@ div.content-box__info

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

      submit-button='Ajouter un membre'
    )
@ -91,11 +91,11 @@ div.content-box__info
  .table-wrapper
    .table
      div.table-header.grey-color
-        div.w355 Nom
-        div.W152 Accès
+        div.w280 Nom
+        div.w162 Accès

      //-class='table-body'
-      sib-display(
+      solid-display(
        class='table-body'
        bind-resources
        fields='members'
--- a/src/views/circle/page-circle-left.pug
+++ b/src/views/circle/page-circle-left.pug
@ -2,4 +2,4 @@
  div.content-box__info.flex(style="padding: 15px")

    p Tu as quitté ce canal.
-    p Pour le rejoindre à nouveau, rends-toi dans le panneau <sib-link next="admin-circle-list">administration</sib-link> ou contacte un administrateur.
+    p Pour le rejoindre à nouveau, rends-toi dans le panneau <solid-link next="admin-circle-list">administration</solid-link> ou contacte un administrateur.
--- a/src/views/circle/page-circle-profile.pug
+++ b/src/views/circle/page-circle-profile.pug
@ -1,13 +1,14 @@
-sib-router(default-route='circle-profile', hidden)
-  sib-route(name='circle-profile')
-  sib-route(name='circle-edit')
+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
-  .content-box__info
+  
+  .content-box__info.flex

    .flex.space-between.with-padding.mobile-vertical-align
-      sib-display.mobile-margin__bottom(
+      solid-display.mobile-margin__bottom(
        bind-resources
        fields='creationDateSet(title, creationDate)'

@ -15,53 +16,53 @@ sib-router(default-route='circle-profile', hidden)

        value-title='Date de création : '

-        widget-creationDate='sib-display-date'
+        widget-creationDate='solid-display-date'
      )
-      sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
-        sib-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-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
+        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


    div.flex.desktop-button__end
-      sib-ac-checker(permission='acl:Delete', bind-resources)
-        sib-delete(
+      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 canal'
        )

-      sib-widget(name='hubl-circle-leave-button')
+      solid-widget(name='hubl-circle-leave-button')
        template
-          sib-delete(
+          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 canal'
          )

-      sib-widget(name='hubl-circle-join-button')
+      solid-widget(name='hubl-circle-join-button')
        template
          button.button.desktop-btn-margin__left.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex
-            sib-form(
+            solid-form(
              data-src=''
              nested-field='members'

              fields='user.@id'
              label-user.@id=''
              value-user.@id=''
-              widget-user.@id='sib-form-hidden'
+              widget-user.@id='solid-form-hidden'

              hubl-inherit-bind-user2input="input[name='user.@id']"

              submit-button='Rejoindre le canal'
            )

-      sib-display(
+      solid-display(
        bind-resources
        nested-field='members'
        fields='relation'
        action-relation='relation'
        widget-relation='hubl-circle-leave-button'
        search-fields='user'
-        search-widget-user='sib-form-hidden'
+        search-widget-user='solid-form-hidden'
        search-value-user=""
        empty-widget='hubl-circle-join-button'
        hubl-inherit-bind-resources='hubl-circle-join-button'
@ -70,7 +71,7 @@ sib-router(default-route='circle-profile', hidden)

    h2 Membres :

-    sib-display.block(
+    solid-display.block(
      bind-resources
      fields='members'

--- a/src/views/job-offer/page-job-offer-create.pug
+++ b/src/views/job-offer/page-job-offer-create.pug
@ -1,7 +1,7 @@
 .content-box.with-padding.with-form
  h1 Post a new job offer
  
-  sib-form(
+  solid-form(
    data-src=`${endpoints.joboffers || endpoints.post.joboffers}`
    range-skills=`${endpoints.skills || endpoints.get.skills}`

@ -12,17 +12,16 @@
    
    class-description='field form-label is-light is-expanded'
    label-description='Description*'
-    widget-description='sib-form-textarea'
+    widget-description='solid-form-textarea'
    
    class-skills='form-label is-dark select-skills'
    label-skills='The required skills for this mission:*'
-    multiple-skills='sib-multiple-select'
-    widget-skills='sib-form-auto-completion'
+    multiple-skills='solid-multiple-select'
+    widget-skills='solid-form-auto-completion'

    class-closingDate='form-label is-dark'
    label-closingDate='Publication end date:*'
-    widget-closingDate='sib-form-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,7 +1,7 @@
 .content-box.with-padding.with-form
  h1 Edit your job offer
  
-  sib-form(
+  solid-form(
    bind-resources
    range-skills=`${endpoints.skills || endpoints.get.skills}`

@ -12,17 +12,16 @@
    
    class-description='field form-label is-light is-expanded'
    label-description='Description*'
-    widget-description='sib-form-textarea'
+    widget-description='solid-form-textarea'

    class-skills='form-label is-dark select-skills'
    label-skills='The required skills for this mission:*'
-    multiple-skills='sib-multiple-select'
-    widget-skills='sib-form-auto-completion'
+    multiple-skills='solid-multiple-select'
+    widget-skills='solid-form-auto-completion'
    
    class-closingDate='form-label is-dark'
    label-closingDate='Publication end date:*'
-    widget-closingDate='sib-form-date'
+    widget-closingDate='solid-form-date'

    next='job-offers'
  )
-
--- a/src/views/project/page-project-chat.pug
+++ b/src/views/project/page-project-chat.pug
@ -1,5 +1,5 @@
 .content-box.flex.full-width.chat-view
-  sib-chat(
+  solid-xmpp-chat(
    data-authentication='login',
    data-auto-login='true',
    data-bosh-service-url=`${xmpp}`,
--- a/src/views/project/page-project-edit.pug
+++ b/src/views/project/page-project-edit.pug
@ -2,36 +2,48 @@ div.content-box__info

  include ../../templates/hubl-user-avatar.pug
 			
-  sib-link(class='backlink right', bind-resources, next='project-profile') Retour
+  solid-link(class='backlink right', bind-resources, next='project-profile') Retour

  h1 Modifie ton projet

-  sib-form.form.button-register(
+  solid-form.form.button-register(
 	  bind-resources
 	
-	  fields='line-1(customer, name), description, line-2(businessProvider, businessProviderFee)'
+	  fields='status, line-1(customer.name, name), description'
+
+    label-status='Statut du canal*'
+    widget-status='hubl-status'
+    class-status='form-label is-light is-full-width member-select color'

-    class-customer='form-label is-light is-half-width'
-    widget-customer='sib-form-auto-completion'
-    class-name='form-label is-light is-half-width input-text-like'
-    class-description='form-label is-light is-full-width input-text-like'
-    label-customer='Client*'
-    range-customer=`${endpoints.customers || endpoints.get.customers}`
    label-name='Nom du projet*'
-    label-description='Description du projet'
-    widget-description='sib-form-textarea'
+    class-name='form-label is-light is-half-width input-text-like'

-    class-businessprovider='form-label is-light is-half-width input-text-like'
-    class-businessproviderfee='form-label is-light is-half-width input-text-like'
-    label-businessprovider='Apporteur d\'affaire'
-    label-businessproviderfee='Montant de la contribution'
+		label-customer.name='Nom du client*'
+    class-customer.name='form-label is-light is-half-width input-text-like'
+
+    label-description='Description du projet'
+    class-description='form-label is-light is-full-width input-text-like'
+    widget-description='solid-form-textarea'
+
+    partial=""

    submit-button='Enregistrer'
+    next='project-information'
+  )
+
+  h2 Photo du projet
+
+  solid-form.form-picture(
+	  bind-resources
+	  fields='customer.logo'
+    widget-customer.logo="hubl-user-avatar"
+    submit-button='Edit'
+    next='project-picture'
  )

  h2 Liste des membres :

-  sib-form.block.select-add.button-add(
+  solid-form.block.select-add(
    bind-resources 
    nested-field='members'
    fields='user'
@ -39,7 +51,7 @@ div.content-box__info

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

    submit-button='Ajouter un membre'
  )
@ -47,11 +59,11 @@ div.content-box__info
  .table-wrapper
    .table
      div.table-header.grey-color
-        div.w355 Nom
-        div.W152 Accès
+        div.w280 Nom
+        div.w162 Accès

      //-class='table-body'
-      sib-display(
+      solid-display(
        class='table-body'
        bind-resources
        fields='members'
--- a/src/views/project/page-project-left.pug
+++ b/src/views/project/page-project-left.pug
@ -2,4 +2,4 @@
  div.content-box__info.flex(style="padding: 15px")

    p Tu as quitté ce projet.
-    p Ceci est un groupe privé. Pour le rejoindre, rends-toi dans le panneau <sib-link next="admin-project-list">administration</sib-link> et demande une invitation.
+    p Ceci est un groupe privé. Pour le rejoindre, rends-toi dans le panneau <solid-link next="admin-project-list">administration</solid-link> et demande une invitation.
--- a/src/views/project/page-project-picture.pug
+++ b/src/views/project/page-project-picture.pug
@ -0,0 +1,15 @@
+div.content-box__info
+			
+  solid-link(class='backlink right', bind-resources, next='project-edit') Retour
+
+  h1 Modifier l'image du projet
+  
+  solid-picture(
+    bind-resources
+    upload-src=`${endpoints.uploads || endpoints.post.uploads}`
+    upload-id="solid-project-edit-picture"
+    nested-fields='customer'
+    fields='logo'
+    next='project-edit'
+    additional='name'
+  )
--- a/src/views/project/page-project-profile.pug
+++ b/src/views/project/page-project-profile.pug
@ -1,6 +1,6 @@
-sib-router(default-route='project-profile', hidden)
-  sib-route(name='project-profile')
-  sib-route(name='project-edit')
+solid-router(default-route='project-profile', hidden)
+  solid-route(name='project-profile')
+  solid-route(name='project-edit')

 #project-profile(hidden)
  include ../../templates/hubl-captain.pug
@ -10,7 +10,7 @@ sib-router(default-route='project-profile', hidden)
  .content-box__info.flex

    .flex.space-between.with-padding.mobile-vertical-align
-      sib-display.mobile-margin__bottom(
+      solid-display.mobile-margin__bottom(
        bind-resources
        fields='creationDateSet(title, creationDate)'

@ -18,14 +18,29 @@ sib-router(default-route='project-profile', hidden)

        value-title='Date de création : '

-        widget-creationDate='sib-display-date'
+        widget-creationDate='solid-display-date'
      )
-      sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
-        sib-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-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
+        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-display(
+        class='flex desktop-button__end'
+        bind-resources
+        nested-field='members'
+        fields='relation'

-    
-    .flex.space-between.with-padding
-      sib-display(
+        action-relation='relation'
+        widget-relation='hubl-project-leave-button'
+
+        search-fields='user'
+        search-widget-user='solid-form-hidden'
+        search-value-user=""
+
+        hubl-inherit-user-id="search-value-user"
+    )
+
+    .flex.space-between
+      solid-display(
        bind-resources
        fields='label-captain, captain'

@ -33,48 +48,32 @@ sib-router(default-route='project-profile', hidden)
        class-label-captain='h2-like'
        widget-captain='hubl-captain'
      )
-      sib-display(
+      solid-display(
        class='customer-logo'
        bind-resources
        fields='customer.logo'
        
-        widget-customer.logo='sib-display-img'
+        widget-customer.logo='solid-display-img'
      )

    h2 Equipe :

-    sib-display(
+    solid-display.block(
      bind-resources
      fields='members'

-      widget-members='hubl-project-team'
      multiple-members
+      widget-members='hubl-project-team'
    )

-    sib-widget(name='hubl-project-leave-button')
+
+    solid-widget(name='hubl-project-leave-button')
      template
-        sib-delete(
+        solid-delete(
          class='button desktop-btn-margin__left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
          data-src="${src}"
          data-label='Quitter le groupe'
        )

-    sib-display(
-      class='flex desktop-button__end'
-      bind-resources
-      nested-field='members'
-      fields='relation'
-
-      action-relation='relation'
-      widget-relation='hubl-project-leave-button'
-
-      search-fields='user'
-      search-widget-user='sib-form-hidden'
-      search-value-user=""
-
-      hubl-inherit-user-id="search-value-user"
-    )
-
-
 #project-edit.content-box__height(hidden)
  include page-project-edit.pug