Merge branch 'release/project' of git.startinblox.com:applications/sib-app into fix/project

client.sample.happy-dev.css

@@ -112,21 +112,30 @@
   --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) */
@@ -202,17 +211,36 @@
 
 /* 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>sib-display>div>sib-action.button.button-primary.bordered,
+button#sib-picture-browse.button.button-primary,
+button#sib-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 sib-action.button.button-primary>sib-link,
+button#sib-picture-browse.button.button-primary,
+button#sib-picture-remove.button.button-primary {
+  color: var(--color-directory-complementary) !important;
+}
+
+#member-profile>div.profile-card>div.user-profile>div>sib-display>div>sib-action.button.button-primary.bordered>sib-link::before {
+  background-color: var(--color-directory-complementary) !important;
+}
+
+/* Hover */
+#member-profile sib-action.button.button-primary:hover,
+#member-profile sib-action.button.button-primary:hover>sib-link,
+button#sib-picture-browse.button.button-primary:hover,
+button#sib-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>sib-display>div>sib-action.button.button-primary.bordered:hover>sib-link::before {
+  background-color: var(--color-directory-white) !important;
+}
+
+#members-list .send-display sib-link::before {
+    background-color: var(--color-directory-complementary)!important;
 }

src/dependencies.pug

@@ -24,8 +24,8 @@ if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
     //- script(type="module" src="/lib/sib-conversation/sib-conversation.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.4" defer)
+    //- script(type="module" src="/lib/sib-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)

src/styles/abstracts/_variables.scss

@@ -131,4 +131,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%);

src/styles/base/about.scss

@@ -44,7 +44,7 @@
     cursor: pointer;
     font-weight: bold;
     text-transform: uppercase;
-    width: 25%;
+    width: 50%;
     font-size: 1.1rem;
     align-self: center;
     padding: 0.5rem 1.5rem;