From 9a084d5cae85233fdcf9e0f17d87dfa99ee8b00b Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Mon, 15 Jun 2020 10:15:19 +0200 Subject: [PATCH 1/6] fix: colors for directory with hubl colors --- src/styles/abstracts/_variables.scss | 55 +++++++++++++++++++++++++++- 1 file changed, 54 insertions(+), 1 deletion(-) diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss index 13c0135..eff3b70 100644 --- a/src/styles/abstracts/_variables.scss +++ b/src/styles/abstracts/_variables.scss @@ -124,9 +124,62 @@ --color-directory-complementary: var(--color-complementary)!important; --color-directory-complementary-darken: var(--color-complementary-darken)!important; --color-directory-white: var(--color-white)!important; - --color-directory-black: var(--color-black)!important; + --color-directory-black: var(--color-black) !important; + + --color-directory-h1: var(--color-directory-complementary-darken) !important; + --color-directory-text: var(--color-grey-5) !important; + --color-directory-avatar-background: var(--color-avatar-background) !important; + --color-directory-send-border: var(--color-directory-complementary) !important; + --color-directory-list-icon: var(--color-directory-primary) !important; + --color-directory-back-link: var(--color-grey-1) !important; + --color-directory-border: #DAE2F3 !important; + --color-directory-content-header-border: #DAE2F3 !important; + + --color-directory-counter-background: #F0F3F6 !important; + --color-directory-counter-border: #9BA0A7 !important; + --color-directory-counter-text: var(--color-grey-3) !important; + + --color-directory-paginate: var(--color-grey-1) !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-directory-complementary) !important; + --color-directory-form-select-icon: var(--color-directory-complementary) !important; } + +/* 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; +} + +#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); +} + +/* 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); +} + + /* Variables for event */ $color-212-4-50: hsl(212.7,4.3%,50%); $color-0-0-22: hsl(0,0%,22.7%); From f5884e0d8afdbde5474d7e6641a843d07e141745 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Mon, 15 Jun 2020 12:36:47 +0000 Subject: [PATCH 2/6] fix dependencies --- src/dependencies.pug | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/dependencies.pug b/src/dependencies.pug index 9bd04d4..7aa93ee 100644 --- a/src/dependencies.pug +++ b/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) From 4e0f307a83bdfd832e25d38ea1b43783f1fbdfef Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Mon, 15 Jun 2020 16:32:47 +0200 Subject: [PATCH 3/6] fix: colors moved to client.sample.happy-dev.css --- client.sample.happy-dev.css | 46 ++++++++++++++++++------ src/styles/abstracts/_variables.scss | 53 ---------------------------- 2 files changed, 35 insertions(+), 64 deletions(-) diff --git a/client.sample.happy-dev.css b/client.sample.happy-dev.css index 8642cc0..786b931 100644 --- a/client.sample.happy-dev.css +++ b/client.sample.happy-dev.css @@ -123,6 +123,15 @@ --color-directory-list-icon: var(--color-primary); --color-directory-text: var(--color-directory-grey-4); + --color-directory-send-border: var(--color-complementary); + --color-directory-list-icon: var(--color-primary); + --color-directory-counter-background: var(--color-directory-grey-5); + --color-directory-counter-border: #9BA0A7; + --color-directory-counter-text: #4A4A4A; + + --color-directory-paginate: #36383B; + --color-directory-paginate-disabled: #9BA0A7; + --color-directory-form-input: #EDF1FA; --color-directory-form-input-text: var(--color-directory-grey-4); --color-directory-form-input-active: var(--color-complementary); @@ -202,17 +211,32 @@ /* 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); } -#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); +} + +#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); +} + +/* 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); + background-color: var(--color-directory-complementary); +} + +#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); } diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss index eff3b70..09c290a 100644 --- a/src/styles/abstracts/_variables.scss +++ b/src/styles/abstracts/_variables.scss @@ -125,61 +125,8 @@ --color-directory-complementary-darken: var(--color-complementary-darken)!important; --color-directory-white: var(--color-white)!important; --color-directory-black: var(--color-black) !important; - - --color-directory-h1: var(--color-directory-complementary-darken) !important; - --color-directory-text: var(--color-grey-5) !important; - --color-directory-avatar-background: var(--color-avatar-background) !important; - --color-directory-send-border: var(--color-directory-complementary) !important; - --color-directory-list-icon: var(--color-directory-primary) !important; - --color-directory-back-link: var(--color-grey-1) !important; - --color-directory-border: #DAE2F3 !important; - --color-directory-content-header-border: #DAE2F3 !important; - - --color-directory-counter-background: #F0F3F6 !important; - --color-directory-counter-border: #9BA0A7 !important; - --color-directory-counter-text: var(--color-grey-3) !important; - - --color-directory-paginate: var(--color-grey-1) !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-directory-complementary) !important; - --color-directory-form-select-icon: var(--color-directory-complementary) !important; } - -/* 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; -} - -#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); -} - -/* 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); -} - - /* Variables for event */ $color-212-4-50: hsl(212.7,4.3%,50%); $color-0-0-22: hsl(0,0%,22.7%); From c263beb6b446c2c2817fce90c12008695a0a57bc Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Mon, 15 Jun 2020 17:18:03 +0200 Subject: [PATCH 4/6] fix: important added --- client.sample.happy-dev.css | 48 ++++++++++++++-------------- src/styles/abstracts/_variables.scss | 4 +-- 2 files changed, 26 insertions(+), 26 deletions(-) diff --git a/client.sample.happy-dev.css b/client.sample.happy-dev.css index 786b931..0840970 100644 --- a/client.sample.happy-dev.css +++ b/client.sample.happy-dev.css @@ -112,30 +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-send-border: var(--color-complementary); - --color-directory-list-icon: var(--color-primary); - --color-directory-counter-background: var(--color-directory-grey-5); - --color-directory-counter-border: #9BA0A7; - --color-directory-counter-text: #4A4A4A; + --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; - --color-directory-paginate-disabled: #9BA0A7; + --color-directory-paginate: #36383B !important; + --color-directory-paginate-disabled: #9BA0A7 !important; - --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-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) */ @@ -215,17 +215,17 @@ #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); + border: 1px solid var(--color-directory-complementary) !important; } #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); + 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); + background-color: var(--color-directory-complementary) !important; } /* Hover */ @@ -233,10 +233,10 @@ button#sib-picture-remove.button.button-primary { #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); - background-color: var(--color-directory-complementary); + 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); -} + background-color: var(--color-directory-white) !important; +} \ No newline at end of file diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss index 09c290a..93a91d4 100644 --- a/src/styles/abstracts/_variables.scss +++ b/src/styles/abstracts/_variables.scss @@ -124,11 +124,11 @@ --color-directory-complementary: var(--color-complementary)!important; --color-directory-complementary-darken: var(--color-complementary-darken)!important; --color-directory-white: var(--color-white)!important; - --color-directory-black: var(--color-black) !important; + --color-directory-black: var(--color-black)!important; } /* Variables for event */ $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%); \ No newline at end of file +$color-357-67-45: hsl(357,67.5%,45.9%); From 70de29a517269f2ec18060c2d7f8ece164c7c4ff Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Mon, 15 Jun 2020 17:59:05 +0200 Subject: [PATCH 5/6] fix: contact width on about page --- src/styles/base/about.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/base/about.scss b/src/styles/base/about.scss index c7b6230..ead128a 100644 --- a/src/styles/base/about.scss +++ b/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; From 30c015be91982d23b8bd96f8c1c3a2ca73596b82 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Mon, 15 Jun 2020 18:50:10 +0200 Subject: [PATCH 6/6] happy dev sample button color --- client.sample.happy-dev.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/client.sample.happy-dev.css b/client.sample.happy-dev.css index 8642cc0..0565062 100644 --- a/client.sample.happy-dev.css +++ b/client.sample.happy-dev.css @@ -216,3 +216,7 @@ border: 1px solid var(--color-complementary); color: var(--color-white); } + +#members-list .send-display sib-link::before { + background-color: var(--color-directory-complementary)!important; +}