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

internal/parcel.js

@@ -69,7 +69,7 @@ const options = {
   const bundler = new Bundler('./src/index.pug', options);
   bundler.addAssetType('html', require.resolve('./assets.js'));
   if (process.env.NODE_ENV !== 'production') {
-    await bundler.serve();
+    await bundler.serve(process.env.PORT ? process.env.PORT : 1234);
   } else {
     await bundler.bundle();
   }

package-lock.json

@@ -1615,9 +1615,9 @@
       }
     },
     "@startinblox/hubl-styling-framework": {
-      "version": "1.8.24",
+      "version": "1.9.7",
-      "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.8.24.tgz",
+      "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.9.7.tgz",
-      "integrity": "sha512-eYrFaNG9iD3dskQcID7eEXabQZaE1u6QKuhJ8HTcnEKUFCo2DQhMe1F15zwYtxVeGE7KTrbGlGPGxfRQ2r8hig=="
+      "integrity": "sha512-h1cQ1rvdF2MYcLdFwJCQbGCp85YLoWJPWE5Vr6bE3x8b4bGzL4tuahxjf426cgtVXkRFOAASc+iOjc0rlbjWhw=="
     },
     "@types/q": {
       "version": "1.5.4",

package.json

@@ -57,7 +57,7 @@
     "clearDist": false
   },
   "dependencies": {
-    "@startinblox/hubl-styling-framework": "^1.8.24",
+    "@startinblox/hubl-styling-framework": "^1.9.7",
     "cross-env": "^7.0.3",
     "fs-extra": "^9.0.1",
     "normalize.css": "^8.0.1",

src/components/hubl-auto-login.js

@@ -1,6 +1,6 @@
 import {
   Sib
-} from 'https://cdn.skypack.dev/@startinblox/core@0.16';
+} from 'https://cdn.skypack.dev/@startinblox/core@0.17';
 
 export const HublAutoLogin = {
   name: 'hubl-auto-login',
@@ -12,7 +12,7 @@ export const HublAutoLogin = {
       window.dispatchEvent(
         new CustomEvent('requestNavigation', {
           detail: {
-            route: window.hubl.getRoute("dashboard", true)
+            route: window.hubl.getRoute((window.hubl.defaultRoute || "dashboard"), true)
           }
         }),
       );

src/components/hubl-reactivity.js

@@ -2,7 +2,7 @@ import {
   store,
   Sib,
   StoreMixin
-} from 'https://cdn.skypack.dev/@startinblox/core@0.16';
+} from 'https://cdn.skypack.dev/@startinblox/core@0.17';
 
 export const HublReactivity = {
   name: 'hubl-reactivity',

src/components/hubl-search-users.js

@@ -1,6 +1,6 @@
 import {
   widgetFactory
-} from 'https://cdn.skypack.dev/@startinblox/core@0.16';
+} from 'https://cdn.skypack.dev/@startinblox/core@0.17';
 
 const HublSearchUsers = widgetFactory(
   'hubl-search-users',

src/components/sw-toolbox.js

@@ -10,7 +10,7 @@ if ('serviceWorker' in navigator) {
     let registration;
 
     const showSkipWaitingPrompt = (event) => {
-      if(hubl.intl.t('serviceWorker.newUpdate') != undefined) {
+      if (hubl.intl.t('serviceWorker.newUpdate') != undefined) {
         Swal.fire({
           position: 'bottom-end',
           backdrop: false,

src/dependencies.pug

@@ -1,4 +1,4 @@
-script(type="module" src="https://cdn.skypack.dev/@startinblox/core@0.16" defer)
+script(type="module" src="https://cdn.skypack.dev/@startinblox/core@0.17" defer)
 //- script(type="module" src="/lib/sib-core/dist/index.js" defer)
 
 script(type="module" src="https://cdn.skypack.dev/@startinblox/router@0.11" defer)
@@ -13,47 +13,46 @@ script(type="module" src="https://cdn.skypack.dev/@startinblox/router@0.11" defe
   });
 
 if componentSet.has("autoLogin") || componentSet.has("registering")
-  script(type="module" src="https://cdn.skypack.dev/@startinblox/oidc@0.14" defer)
+  script(type="module" src="https://cdn.skypack.dev/@startinblox/oidc@0.15/dist/index.js" defer)
   //- script(type="module" src="/lib/sib-auth/index.js" defer)
 
 if componentSet.has("chat") || componentSet.has("circles") || componentSet.has("projects")
-  script(type="module" src="https://cdn.skypack.dev/@startinblox/component-chat@5.3" defer)
+  script(type="module" src="https://cdn.skypack.dev/@startinblox/component-chat@6.1" defer)
   //- script(type="module" src="/lib/solid-xmpp-chat/dist/index.js" defer)
 
 if componentSet.has("communities")
-  script(type="module" src="https://cdn.skypack.dev/@startinblox/core@0.16/dist/components/solid-map.js" defer)
+  script(type="module" src="https://cdn.skypack.dev/@startinblox/core@0.17/dist/components/solid-map.js" defer)
   //- script(type="module" src="/lib/sib-core/dist/components/solid-map.js" defer)
 
 if componentSet.has("dashboard")
-  script(type="module" src="https://cdn.skypack.dev/@startinblox/component-dashboard@4.0" defer)
+  script(type="module" src="https://cdn.skypack.dev/@startinblox/component-dashboard@5.0" defer)
   //- script(type="module" src="/lib/solid-dashboard/dist/index.js" defer)
 
 if componentSet.has("events")
-  script(type="module", src="https://cdn.skypack.dev/@startinblox/component-event@3.0", defer)
+  script(type="module", src="https://cdn.skypack.dev/@startinblox/component-event@4.0", defer)
   //- script(type="module", src="/lib/solid-event/solid-event.js", defer)
 
-//- Disabled - Not in core@0.16
 if componentSet.has("events") || componentSet.has("polls") || componentSet.has("resources")
-  script(type="module" src="https://cdn.skypack.dev/@startinblox/component-conversation@0.10" defer)
+  script(type="module" src="https://cdn.skypack.dev/@startinblox/component-conversation@0.11" defer)
 
 if componentSet.has("invoices")
   script(type="module" src="https://cdn.skypack.dev/@startinblox/component-invoicing@1.3" defer)
   //- script(type="module" src="/lib/solid-invoicing/solid-invoicing.js" defer)
 
 if componentSet.has("jobBoard")
-  script(type="module" src="https://cdn.skypack.dev/@startinblox/component-job-board@5.0" defer)
+  script(type="module" src="https://cdn.skypack.dev/@startinblox/component-job-board@6.0" defer)
   //- script(type="module" src="/lib/solid-job-board/dist/index.js" defer)
 
 if componentSet.has("notification")
-  script(type="module" src="https://cdn.skypack.dev/@startinblox/component-notifications@0.12" defer)
+  script(type="module" src="https://cdn.skypack.dev/@startinblox/component-notifications@0.13" defer)
   //- script(type="module" src="/lib/sib-notifications/index.js" defer)
 
 if componentSet.has("polls")
-  script(type="module" src="https://cdn.skypack.dev/@startinblox/component-poll@2.1" defer)
+  script(type="module" src="https://cdn.skypack.dev/@startinblox/component-poll@3.0" defer)
-  //script(type="module" src="/lib/solid-poll/index.js" defer)
+  //- script(type="module" src="/lib/solid-poll/index.js" defer)
 
 if componentSet.has("profileDirectory")
-  script(type="module" src="https://cdn.skypack.dev/@startinblox/component-directory@5.1" defer)
+  script(type="module" src="https://cdn.skypack.dev/@startinblox/component-directory@6.0" defer)
   //- script(type="module" src="/lib/solid-directory/dist/index.js" defer)
 
 if componentSet.has("resources")

src/locales/en.json

@@ -33,7 +33,7 @@
     "circlesBrowse": "Browse circles",
     "circleCreate": "Create circle",
     "messages": "Messages",
-    "search": "Search"
+    "search": "Search (ctrl+k)"
   },
   "about": {
     "title": "About",

src/locales/es.json

@@ -33,7 +33,7 @@
     "circlesBrowse": "Examinar los círculos",
     "circleCreate": "Crea un círculo.",
     "messages": "Mensajes",
-    "search": "Buscar"
+    "search": "Buscar (ctrl+k)"
   },
   "about": {
     "title": "Acerca de",

src/locales/fr.json

@@ -31,7 +31,7 @@
     "circlesBrowse": "Parcourir les cercles",
     "circleCreate": "Créer un cercle",
     "messages": "Messages",
-    "search": "Rechercher"
+    "search": "Rechercher (ctrl+k)"
   },
   "about": {
     "title": "A propos",

src/scripts/login-element-visibility.js

@@ -1,9 +1,13 @@
 window.requestLogin = false;
 document.addEventListener("DOMContentLoaded", function () {
   const sibAuth = document.querySelector("sib-auth");
+  const timeoutNoUser = setTimeout(() => {
+    sibAuth.login();
+  }, 15000);
   if (sibAuth) {
     sibAuth.getUser()
       .then(user => {
+        clearTimeout(timeoutNoUser);
         if (user !== null) {
           document
             .querySelectorAll(".notLoggedIn")

src/scripts/navigate-event.js

@@ -81,14 +81,18 @@ document.addEventListener("DOMContentLoaded", function () {
   // Workaround - No "navigate" event after the login on `/login`
   if (window.location.pathname == "/login") {
     const sibAuth = document.querySelector("sib-auth");
+    const timeoutNoUser = setTimeout(() => {
+      sibAuth.login();
+    }, 15000);
     if (sibAuth) {
       sibAuth.getUser()
         .then(user => {
+          clearTimeout(timeoutNoUser);
           if (user !== null) {
             window.dispatchEvent(
               new CustomEvent('requestNavigation', {
                 detail: {
-                  route: window.hubl.getRoute("dashboard", true)
+                  route: window.hubl.getRoute((window.hubl.defaultRoute || "dashboard"), true)
                 }
               }),
             );
@@ -124,14 +128,18 @@ document.addEventListener("DOMContentLoaded", function () {
     closeUserControls();
     if (e.detail.route.startsWith('login')) {
       const sibAuth = document.querySelector("sib-auth");
+      const timeoutNoUser2 = setTimeout(() => {
+        sibAuth.login();
+      }, 15000);
       if (sibAuth) {
         sibAuth.getUser()
           .then(user => {
+            clearTimeout(timeoutNoUser2);
             if (user !== null) {
               window.dispatchEvent(
                 new CustomEvent('requestNavigation', {
                   detail: {
-                    route: window.hubl.getRoute("dashboard", true)
+                    route: window.hubl.getRoute((window.hubl.defaultRoute || "dashboard"), true)
                   }
                 }),
               );

src/scripts/sw-broadcast.js

@@ -0,0 +1,21 @@
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.addEventListener('message', async (event) => {
+    if (event.data.meta === 'workbox-broadcast-update') {
+      const {
+        cacheName,
+        updatedURL
+      } = event.data.payload;
+
+      const cache = await caches.open(cacheName);
+      const updatedResponse = await cache.match(updatedURL);
+      try {
+        const updatedData = await updatedResponse.json();
+        if (sibStore && "setLocalData" in sibStore) {
+          sibStore.setLocalData(updatedData, updatedURL);
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  });
+}

src/service-worker.js

@@ -9,7 +9,13 @@ addEventListener('message', (event) => {
 });
 
 workbox.routing.registerRoute(
-  ({url}) => url.origin === 'https://fonts.gstatic.com',
+  ({
+    url
+  }) => [
+    'https://fonts.gstatic.com',
+    'https://fonts.googleapis.com',
+    'https://storage.googleapis.com'
+  ].includes(url.origin),
   new workbox.strategies.CacheFirst({
     cacheName: 'google-fonts-webfonts',
     plugins: [
@@ -25,21 +31,25 @@ workbox.routing.registerRoute(
 );
 
 workbox.routing.registerRoute(
-  ({url}) => [
+  ({
+    url
+  }) => [
     'https://cdn.jsdelivr.net',
     'https://unpkg.com',
     'https://cdn.skypack.dev',
     'https://jspm.dev',
     'https://fonts.googleapis.com',
     'https://cdn.startinblox.com'
-  ].includes(url.origin),
+  ].includes(url.origin) || /cdn/.test(url.origin),
   new workbox.strategies.StaleWhileRevalidate({
     cacheName: 'cdn',
   })
 );
 
 workbox.routing.registerRoute(
-  ({ request }) => request.destination === 'image',
+  ({
+    request
+  }) => request.destination === 'image',
   new workbox.strategies.CacheFirst({
     cacheName: 'images',
     plugins: [
@@ -55,9 +65,11 @@ workbox.routing.registerRoute(
 );
 
 workbox.routing.registerRoute(
-  ({ request }) =>
+  ({
-    request.destination === 'style' ||
+    request
-    request.destination === 'script',
+  }) =>
+  request.destination === 'style' ||
+  request.destination === 'script',
   new workbox.strategies.StaleWhileRevalidate({
     cacheName: 'assets',
     plugins: [
@@ -69,7 +81,9 @@ workbox.routing.registerRoute(
 );
 
 workbox.routing.registerRoute(
-  ({ request }) => request.mode === 'navigate',
+  ({
+    request
+  }) => request.mode === 'navigate',
   new workbox.strategies.NetworkFirst({
     cacheName: 'pages',
     plugins: [
@@ -79,3 +93,15 @@ workbox.routing.registerRoute(
     ],
   }),
 );
+
+workbox.routing.registerRoute(() => true,
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: 'apis',
+    plugins: [
+      new workbox.broadcastUpdate.BroadcastUpdatePlugin(),
+      new workbox.expiration.ExpirationPlugin({
+        maxAgeSeconds: 60 * 60 * 24 * 30,
+      }),
+    ],
+  })
+);

src/styles/admin-circles/_index.scss

@@ -6,7 +6,7 @@
   /* Styles on buttons and .children-link don't work because this input is inside too many elements. */
   /* And no I can't add that stupid icon because it'a an input. */
   /* But now, with 0.16, it's a button and you can :D */
-  .join-button {
+  /*.join-button {
 
     input,
     button {
@@ -55,37 +55,7 @@
         }
       }
     }
-  }
+  }*/
-
-  .form.search-button :not(.add-member)+button[type=submit] {
-    background-color: transparent;
-    border: 1px solid var(--color-secondary);
-    color: var(--color-secondary);
-
-    &:hover {
-      background-color: var(--color-secondary);
-      color: #fff;
-    }
-
-    &:before {
-      font-size: 15px;
-      margin-right: 6px;
-      content: "\e079";
-      font-family: simple-line-icons;
-      font-style: normal;
-      font-weight: 400;
-      speak: none;
-      display: inline-block;
-      text-decoration: inherit;
-      width: 1em;
-      text-align: center;
-      font-variant: normal;
-      text-transform: none;
-      line-height: 13px;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-    }
-  }
 
   .masonry>div:nth-child(1) {
     /* change from directory (nth-child(2))*/

src/styles/admin-projects/_index.scss

@@ -0,0 +1,3 @@
+#admin-projects hubl-admin-project-join-button>solid-form>form {
+  vertical-align: bottom;
+}

src/styles/communities/_index.scss

@@ -80,3 +80,11 @@
     float: initial !important;
   }
 }
+
+.communities-directory #communities-filter .search-button button {
+  background-color: transparent !important;
+
+  &:hover {
+    background-color: var(--color-secondary) !important;
+  }
+}

src/styles/forms/_index.scss

@@ -1,4 +1,4 @@
-.search-form {
+/*.search-form {
   [type="submit"] {
     margin-bottom: 20px;
     @media (min-width: 768.01px) {
@@ -7,4 +7,4 @@
       margin-top: 0 !important;
     }
   }
-}
+}*/

src/styles/index.scss

@@ -44,6 +44,7 @@ solid-display>div {
 @import 'communities';
 @import 'projects';
 @import 'admin-circles';
+@import 'admin-projects';
 
 nav#main__menu {
   @media (min-width: 768.01px) {
@@ -104,3 +105,60 @@ hubl-menu-empty+hubl-menu-empty {
     text-decoration: none;
   }
 }
+
+.submit-button {
+  float: right;
+
+  button {
+    line-height: 1;
+
+    @media (max-width: 768px) {
+      width: 100%;
+    }
+  }
+}
+
+.search-button {
+
+  button {
+
+    @media (max-width: 768px) {
+      margin-bottom: 20px;
+      width: 100%;
+    }
+  }
+}
+
+.add-member-button {
+
+  button[type='submit'] {
+
+    @media (max-width: 768px) {
+      width: 100%;
+    }
+  }
+}
+
+.children-button-icon {
+
+  button {
+    display: inline-flex;
+    justify-content: center;
+    line-height: 15px;
+
+    &::before {
+      vertical-align: middle;
+    }
+  }
+}
+
+.button-icon {
+
+  display: inline-flex;
+  justify-content: center;
+  line-height: 15px;
+
+  &::before {
+    vertical-align: middle;
+  }
+}

src/styles/left-nav/_index.scss

@@ -87,12 +87,12 @@ nav#main__menu {
       }
     }
 
-    button {
+    div>button {
       background: transparent;
       border: none;
       color: #D0D4DA;
       margin-top: 0 !important;
-      height: auto;
+      height: 100%;
 
       @media (max-width: 768px) {
         width: 20%;
@@ -256,9 +256,12 @@ nav#main__menu {
         left: calc(100% - 47px);
         padding-top: 5px;
 
-        button::before {
+        button {
-          font-size: 18px;
+        
-          color: white;
+          &::before {
+            font-size: 18px;
+            color: white;
+          }
         }
       }
     }

src/styles/projects/_index.scss

@@ -10,6 +10,10 @@
         font-size: 12px;
         line-height: 14px;
         border-radius: 16.5px;
+
+        @media (max-width: 768px) {
+            width: 100%;
+        }
     }
     button:hover {
         background-color: var(--color-secondary);
@@ -20,6 +24,7 @@
     display: table-row;    
     border-bottom: 1px solid #C9C8C8;
     border-right: 1px solid #C9C8C8;
+    text-align: center;
     .segment.table-cell {
         border-bottom: 1px solid #C9C8C8;
         border-right: 1px solid #C9C8C8;
@@ -27,15 +32,7 @@
         padding: 10px;
     }
     [type="submit"] {
-        float: none;
-        display: flex;
         margin: 19px auto;
-        color: var(--color-secondary);
-        background-color: white;
-    }
-    [type="submit"]:hover {
-        background-color: var(--color-secondary);
-        color: white;
     }
 }
 #projects-information .display-businessprovider {

src/views/partials/admin/page-admin-chat-create.pug

@@ -59,5 +59,7 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
 
     submit-button=''
     submit-widget="button"
+    class-submit-button="submit-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-rocket children-icon-small children-icon-margin-right-xsmall"
+    
     data-trans='label-user.first_name=user.create.labelFirstname;label-user.last_name=user.create.labelLastname;label-user.username=user.create.labelUsername;label-user.email=user.create.labelEmail;submit-button=user.create.buttonSubmit'
   )

src/views/partials/admin/page-admin-chat.pug

@@ -17,6 +17,7 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
     class-cell1="segment margin-bottom-medium third sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
     submit-button=""
     submit-widget="button"
+    class-submit-button="search-button segment sm-full text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-arrow-right-circle children-icon-small children-icon-margin-right-xsmall"
     data-trans='label-cell1=communities.searchBy;submit-button=goButton'
   )
 

src/views/partials/admin/page-admin-circles-create.pug

@@ -53,6 +53,7 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
 
     submit-button=''
     submit-widget="button"
+    class-submit-button="submit-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-rocket children-icon-small children-icon-margin-right-xsmall"
 
     data-trans='enum-status=hublStatus;label-status=circle.create.labelStatus;label-community.community=circle.create.labelCommunity;label-name=circle.create.labelName;label-description=circle.create.labelDescription;submit-button=circle.create.buttonSubmit;label-subtitle=circle.create.labelSubtitle;label-help=circle.create.descriptionHelp'
   )

src/views/partials/admin/page-admin-circles-join.pug

@@ -10,6 +10,7 @@ solid-widget(name=`hubl-admin-circle-join-button`)
 
       submit-button=''
       submit-widget="button"
+      class-submit-button="add-member-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-arrow-right-circle children-icon-small children-icon-margin-right-xsmall"
       data-trans='submit-button=circle.list.buttonJoin'
     )
     hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}` target-src='${value}')

src/views/partials/admin/page-admin-circles.pug

@@ -18,20 +18,21 @@ div.segment.full.padding-large.padding-top-medium.padding-bottom-xsmall.sm-paddi
     div.segment.half.sm-full.text-right
       solid-ac-checker(data-src=`${getComponent('circles').endpoints.post}`, permission='acl:Append')
         solid-link(
-          class='segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-plus'
+          class='segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered button-icon icon icon-margin-right-xsmall icon-plus'
           next=`admin-${getRoute('circles', true)}-create`
           data-trans='circle.list.buttonCreate'
         )
 
-  solid-form-search.form.search-form.search-button(
+  solid-form-search.form.search-form(
     id=`admin-circle-filter-${page}`
     fields='searchname'
     search-searchname='name, circle.name'
     label-searchname=''
     widget-searchname='solid-form-label-text'
-    class-searchname="segment margin-bottom-medium sm-margin-bottom-none third sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
+    class-searchname="segment margin-bottom-medium margin-bottom-medium third sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
     submit-button=""
     submit-widget="button"
+    class-submit-button="search-button segment sm-full text-xsmall children-button-icon children-link-button children-link-text-bold children-link-text-uppercase children-link-color-secondary bordered children-icon-arrow-right-circle children-icon-small children-icon-margin-right-xsmall"
     data-trans='label-searchname=circle.list.searchBy;submit-button=circle.list.searchButton'
   )
 

src/views/partials/admin/page-admin-projects-create.pug

@@ -54,6 +54,8 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
 
     submit-button=''
     submit-widget="button"
+    class-submit-button="submit-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-rocket children-icon-small children-icon-margin-right-xsmall"
+    
     next=getRoute('projects', true)
 
     data-trans='label-status=project.create.labelStatus;label-customer.name=project.create.labelCustomer;label-customer.address=project.create.labelCustomerAddress;label-businessprovider=project.create.labelBusinessprovider;multiple-businessprovider-add-label=project.create.labelBusinessproviderAdd;multiple-businessprovider-remove-label=project.create.labelBusinessproviderRemove;label-name=project.create.labelName;label-description=project.create.labelDescription;label-captain=project.create.labelCaptain;label-help=project.create.descriptionHelp;submit-button=project.create.buttonSubmit'

src/views/partials/admin/page-admin-projects.pug

@@ -12,7 +12,7 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
     div.segment.half.sm-full.text-right
       solid-ac-checker(data-src=`${getComponent('projects').endpoints.post}`, permission='acl:Append')
         solid-link(
-          class='segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-plus'
+          class='segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered button-icon icon icon-margin-right-xsmall icon-plus'
           next=`admin-${getRoute('projects', true)}-create`
           data-trans='project.list.buttonCreate'
         )
@@ -25,6 +25,7 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
     class-cell1="segment margin-bottom-medium third sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
     submit-button=""
     submit-widget="button"
+    class-submit-button="search-button segment sm-full text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-arrow-right-circle children-icon-small children-icon-margin-right-xsmall"
     data-trans='label-cell1=project.list.searchBy;submit-button=goButton'
   )
 
@@ -105,7 +106,7 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
       solid-widget(name=`hubl-admin-project-join-button`)
         template
           solid-form(
-            class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-arrow-right-circle'
+            class=''
             data-src='${src}'
             nested-field="members"
 
@@ -115,6 +116,7 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
 
             submit-button=''
             submit-widget="button"
+            class-submit-button="add-member-button segment margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-arrow-right-circle children-icon-small children-icon-margin-right-xsmall"
             data-trans='submit-button=project.list.buttonJoin'
           )
           hubl-reactivity(data-src=`${getComponent('projects').endpoints.get}` target-src='${value}')

src/views/partials/circle/page-circle-edit.pug

@@ -66,6 +66,7 @@ div.segment.full.padding-large.whitespace-normal
 
       submit-button=''
       submit-widget="button"
+      class-submit-button="submit-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-rocket children-icon-small children-icon-margin-right-xsmall"
       next=`${component.route}-information`
 
       data-trans='enum-status=hublStatus;label-status=circle.edit.labelStatus;label-community.community=circle.edit.labelCommunity;label-name=circle.edit.labelName;label-owner=circle.edit.labelOwner;label-description=circle.edit.labelDescription;submit-button=circle.edit.buttonSubmit;label-subtitle=circle.edit.labelSubtitle;label-help=circle.edit.descriptionHelp'
@@ -74,17 +75,18 @@ div.segment.full.padding-large.whitespace-normal
   h3.segment.full.padding-bottom-small.border-bottom.border-color-grey.text-color-heading.text-bold.text-letter-spacing-large(data-trans='circle.edit.subTitle')
 
   solid-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
-    solid-form.segment.block.margin-bottom-xlarge.form(
+    solid-form.segment.block.whitespace-normal.margin-bottom-xlarge.form(
       bind-resources 
       nested-field='members'
       fields='user'
       range-user=`${component.endpoints.users}`
 
-      class-user='add-member'
+      class-user='segment block margin-bottom'
       widget-user='solid-form-dropdown-autocompletion'
 
       submit-button=''
       submit-widget="button"
+      class-submit-button="add-member-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-color-secondary bordered"
       data-trans='submit-button=circle.edit.buttonAddMember'
     )
 

src/views/partials/circle/page-circle-profile.pug

@@ -44,16 +44,16 @@ div(
       .segment.half.sm-full.text-right.margin-bottom-medium.sm-margin-bottom-small
         solid-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
           solid-ac-checker(permission='acl:Delete', bind-resources)
-            solid-link(class='segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-pencil' next=`${component.route}-edit` bind-resources data-trans='circle.profile.buttonModify')
+            solid-link(class='segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered button-icon icon icon-pencil icon-margin-right-xsmall' next=`${component.route}-edit` bind-resources data-trans='circle.profile.buttonModify')
           solid-ac-checker(no-permission='acl:Delete', bind-resources)
-            solid-link(class='segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-pencil' next=`${component.route}-edit` bind-resources data-trans='circle.profile.buttonAdd')
+            solid-link(class='segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered button-icon icon icon-pencil icon-margin-right-xsmall' next=`${component.route}-edit` bind-resources data-trans='circle.profile.buttonAdd')
 
       solid-widget(name=`hubl-circle-leave-button-${component.uniq}`)
         template
           solid-ac-checker(permission='acl:Delete', data-src="${src}")
             solid-ac-checker(no-permission='acl:Delete', data-src="${src}", nested-field='circle')
               solid-delete(
-                class='button text-xsmall text-bold text-uppercase color-secondary bordered'
+                class='segment text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-color-secondary bordered'
                 data-src="${src}"
                 data-label=''
                 data-trans='data-label=circle.profile.buttonQuit'

src/views/partials/communities/page-community-directory.pug

@@ -3,14 +3,15 @@
 
   div.padding-top-xxsmall.margin-left-xsmall.margin-right-xsmall.sm-padding-none.sm-margin-none.sm-margin-right-xsmall.sm-margin-left-xsmall
     div.segment.quarter.sm-full
-      solid-form-search.form.search-form.search-button(
+      solid-form-search.form.search-form.sm-whitespace-normal(
         id=`communities-filter`
         fields='name'
         placeholder-name=''
         widget-name='solid-form-placeholder-text'
-        class-name="segment margin-bottom-medium sm-margin-bottom-none full sm-full padding-right-small sm-padding-none text-small input-bg-white children-shadow"
+        class-name="segment margin-bottom-medium full sm-full padding-right-small sm-padding-none text-small input-bg-white children-shadow"
         submit-button=""
         submit-widget="button"
+        class-submit-button="search-button segment sm-full text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-color-secondary bordered children-button-icon children-icon-arrow-right-circle children-icon-small children-icon-margin-right-xsmall"
         data-trans='placeholder-name=communities.list.searchBy;submit-button=communities.list.searchButton'
       )
     div.segment.sm-full.text-right(style='float:right')

src/views/partials/communities/page-community-edit.pug

@@ -58,6 +58,7 @@ div.bg-color-white
 
         submit-button=""
         submit-widget="button"
+        class-submit-button="submit-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-rocket children-icon-small children-icon-margin-right-xsmall"
 
         data-trans="label-logo=communities.edit.labelLogo;label-profile.shortDescription=communities.edit.labelShortDescription;label-profile.description=communities.edit.labelDescription;label-profile.phone=communities.edit.labelPhone;label-profile.tweeter=communities.edit.labelTwitter;label-profile.facebook=communities.edit.labelFacebook;label-profile.linkedin=communities.edit.labelLinkedin;label-profile.instagram=communities.edit.labelInstagram;submit-button=communities.edit.buttonSubmit"
       )
@@ -87,6 +88,7 @@ div.bg-color-white
 
         submit-button=""
         submit-widget="button"
+        class-submit-button="submit-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-rocket children-icon-small children-icon-margin-right-xsmall"
 
         data-trans="label-profile.picture1=communities.edit.labelPicture1;label-profile.picture2=communities.edit.labelPicture2;label-profile.picture3=communities.edit.labelPicture3;submit-button=communities.edit.buttonSubmit"
       )

src/views/partials/communities/page-community-map.pug

@@ -3,16 +3,17 @@
 
   div.mobile-map-search-field.padding-top-xxsmall.margin-left-xsmall.margin-right-xsmall.sm-padding-none.sm-margin-none.sm-margin-right-xsmall.sm-margin-left-xsmall
     div.segment.quarter.sm-full
-      solid-form-search.form.search-form.search-button(
+      solid-form-search.form.search-form.sm-whitespace-normal(
         id=`communities-filter-map`
         fields='filter'
         search-filter='community.name, address_line1, address_line2'
         placeholder-filter=''
         widget-filter='solid-form-placeholder-text'
-        class-filter="segment margin-bottom-medium sm-margin-bottom-none full sm-full padding-right-small sm-padding-none text-small input-bg-white children-shadow"
+        class-filter="segment margin-bottom-medium full sm-full padding-right-small sm-padding-none text-small input-bg-white children-shadow"
 
         submit-button=""
         submit-widget="button"
+        class-submit-button="search-button segment sm-full text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-arrow-right-circle children-icon-small children-icon-margin-right-xsmall"
         data-trans='placeholder-filter=communities.list.searchBy;submit-button=communities.list.searchButton'
       )
     div.segment.sm-full.text-right(style='float:right')

src/views/partials/menu-left.pug

@@ -1,4 +1,4 @@
-solid-form-search.icon.children-icon-magnifier(
+solid-form-search(
   id='general-search'
   class='segment block form menu-search'
   fields='name'
@@ -11,6 +11,7 @@ solid-form-search.icon.children-icon-magnifier(
 
   submit-button=""
   submit-widget="button"
+  class-submit-button="icon children-icon-magnifier"
 )
 div.divider
 solid-router#navbar-router(default-route=defaultRoute)

src/views/partials/project/page-project-edit.pug

@@ -59,6 +59,7 @@ div.segment.full.padding-large.whitespace-normal
 
       submit-button=''
       submit-widget="button"
+      class-submit-button="submit-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-rocket children-icon-small children-icon-margin-right-xsmall"
       next=`${component.route}-information`
 
       data-trans='label-name=project.edit.labelName;label-captain=project.edit.labelCaptain;label-customer.name=project.edit.labelCustomer;label-customer.address=project.edit.labelCustomerAddress;label-description=project.edit.labelDescription;label-help=project.edit.descriptionHelp;submit-button=project.edit.buttonSubmit'
@@ -117,6 +118,7 @@ div.segment.full.padding-large.whitespace-normal
 
               submit-button=''
               submit-widget="button"
+              class-submit-button="segment children text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-color-secondary bordered"
 
               data-trans='submit-button=project.edit.buttonAddBusinessProvider;placeholder-name=project.edit.businessTableHeader1;placeholder-fee=project.edit.businessTableHeader2'
             )
@@ -125,18 +127,19 @@ div.segment.full.padding-large.whitespace-normal
   h3.segment.full.padding-bottom-small.border-bottom.border-color-grey.text-color-heading.text-bold.text-letter-spacing-large(data-trans='project.edit.subTitle')
 
   solid-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
-    solid-form.segment.block.margin-bottom-xlarge.form(
+    solid-form.segment.block.margin-bottom-xlarge.sm-whitespace-normal.form(
       bind-resources 
       nested-field='members'
       fields='user'
       range-user=`${component.endpoints.users}`
 
-      class-user='add-member whitespace-normal'
+      class-user='add-member'
       label-user=''
       widget-user='solid-form-dropdown-autocompletion'
 
       submit-button=''
       submit-widget="button"
+      class-submit-button="add-member-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-color-secondary bordered"
       data-trans='submit-button=project.edit.buttonAddMember'
     )
 

src/views/partials/project/page-project-profile.pug

@@ -49,9 +49,9 @@ div(
 
       solid-ac-checker.segment.half.sm-full.text-right(permission='acl:Append', bind-resources, nested-field='members')
         solid-ac-checker(permission='acl:Delete', bind-resources)
-          solid-link(class='segment sm-full margin-bottom-large sm-margin-bottom-medium button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-pencil' next=`${component.route}-edit` bind-resources data-trans='project.profile.buttonModify')
+          solid-link(class='segment sm-full margin-bottom-large sm-margin-bottom-medium button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered button-icon icon icon-pencil icon-margin-right-xsmall' next=`${component.route}-edit` bind-resources data-trans='project.profile.buttonModify')
         solid-ac-checker(no-permission='acl:Delete', bind-resources)
-          solid-link(class='segment sm-full margin-bottom-large sm-margin-bottom-medium button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-pencil' next=`${component.route}-edit` bind-resources data-trans='project.profile.buttonAdd')
+          solid-link(class='segment sm-full margin-bottom-large sm-margin-bottom-medium button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered button-icon icon icon-pencil icon-margin-right-xsmall' next=`${component.route}-edit` bind-resources data-trans='project.profile.buttonAdd')
 
       solid-ac-checker.segment.full.text-right.margin-bottom-large.sm-margin-bottom-medium(permission='acl:Delete', bind-resources)
         solid-delete(
@@ -65,7 +65,7 @@ div(
       solid-widget(name=`hubl-project-leave-button-${component.uniq}`)
         template
           solid-delete(
-            class='button text-xsmall text-bold text-uppercase color-secondary bordered'
+            class='segment text-xsmall children-link-text-bold children-link-text-uppercase children-link-button children-link-color-secondary bordered'
             data-src="${src}"
             data-label=''
             data-trans='data-label=project.profile.buttonQuit'

src/views/partials/widgets/hubl-action-community.pug

@@ -3,7 +3,7 @@ if componentSet.has('admin') && componentSet.has('chat')
     template
       solid-ac-checker(data-src="${value}", nested-field="members", permission='acl:Append')
         solid-link(
-          class='button text-small text-bold text-uppercase reversed color-secondary bordered icon icon-plus'
+          class='button text-small text-bold text-uppercase reversed color-secondary bordered button-icon icon icon-margin-right-xsmall icon-plus'
           data-src="${value}"
           next=`admin-${getRoute("chat", true)}-create`
           data-trans='communities.linkInvite'

src/views/partials/widgets/hubl-communities-edit-button.pug

@@ -7,7 +7,7 @@ if componentSet.has('communities') && getRoute('communities')
         nested-field="profile"
       )
         solid-link(
-          class="segment margin-top-xxlarge sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered icon icon-pencil"
+          class="segment margin-top-xxlarge sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered button-icon icon icon-pencil icon-margin-right-xsmall"
           data-trans="communities.profile.edit"
           data-src="${src}"
           next=`${getRoute('communities', true)}-edit`