From 2decf90b6b2f9ebb62b35b34292e6b5c44fbdb0c Mon Sep 17 00:00:00 2001 From: elweyn Date: Thu, 20 Jul 2023 13:40:29 +0200 Subject: [PATCH 1/6] Change the background color of my messages to the same color as the one in side menu. --- webapp/constants/chat.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/constants/chat.js b/webapp/constants/chat.js index 181d88e0e..082d018f3 100644 --- a/webapp/constants/chat.js +++ b/webapp/constants/chat.js @@ -58,7 +58,7 @@ const STYLE = { message: { background: styleData.chatMessageBgOthers, - backgroundMe: styleData.chatMessageBgMe, + backgroundMe: styleData.colorPrimaryLight, color: styleData.chatMessageColor, colorStarted: '#9ca6af', backgroundDeleted: '#dadfe2', From db3c625dfb0100c7c5b294d22c23e1bf0ad1e7e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= Date: Thu, 20 Jul 2023 15:39:11 +0200 Subject: [PATCH 2/6] Revert general change of PR --- webapp/constants/chat.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/constants/chat.js b/webapp/constants/chat.js index 082d018f3..181d88e0e 100644 --- a/webapp/constants/chat.js +++ b/webapp/constants/chat.js @@ -58,7 +58,7 @@ const STYLE = { message: { background: styleData.chatMessageBgOthers, - backgroundMe: styleData.colorPrimaryLight, + backgroundMe: styleData.chatMessageBgMe, color: styleData.chatMessageColor, colorStarted: '#9ca6af', backgroundDeleted: '#dadfe2', From 65e5545c9a2396340699632b8ba755160e938acd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= Date: Thu, 20 Jul 2023 15:40:21 +0200 Subject: [PATCH 3/6] Test branding --- webapp/assets/styles/imports/_branding.scss | 127 +++++++++++++++++++- 1 file changed, 126 insertions(+), 1 deletion(-) diff --git a/webapp/assets/styles/imports/_branding.scss b/webapp/assets/styles/imports/_branding.scss index 75058595d..1bb4291af 100644 --- a/webapp/assets/styles/imports/_branding.scss +++ b/webapp/assets/styles/imports/_branding.scss @@ -2,4 +2,129 @@ * * Here, all SCSS variables and classes can be adapted to your custom design. * -*/ \ No newline at end of file +*/ + +$color-primary: rgb(110, 139, 135); +$color-primary-light: rgb(161, 179, 177); +$color-primary-dark: rgb(81, 99, 97); +$color-primary-active: rgb(123, 160, 149); +$color-primary-inverse: rgb(241, 248, 243); + +$color-secondary: rgb(166, 255, 0); +$color-secondary-active: rgb(188, 255, 130); +$color-secondary-inverse: rgb(241, 255, 225); + +$font-family-heading: 'Overpass', Helvetica, Arial, Lucida, sans-serif; +$font-family-text: 'Overpass', Helvetica, Arial, Lucida, sans-serif; + +$color-header-background: $color-primary; +$color-footer-background: $color-secondary; + +$color-locale-menu: $color-secondary; + +$color-donation-bar: $color-secondary; + +$color-toast-blue: rgb(0, 142, 230); +$color-toast-green: $color-primary; + +$chat-message-bg-me: $color-primary-light; +// $chat-message-color: $text-color-base; +// $chat-message-bg-others: $color-neutral-80; +// $chat-sidemenu-bg: $color-secondary-active; +// $chat-new-message-color: $color-secondary-active; +// $chat-message-timestamp: $text-color-soft; +$chat-message-checkmark-seen: $color-secondary; +$chat-message-checkmark: $text-color-inverse; + + +.main-navigation a { + color: #fff; + text-transform: uppercase; + font-size: 16px; + font-weight: 500; +} + +.main-navigation a:hover { + color: hsla(0, 0%, 100%, .8); +} + +.main-navigation .router-link-exact-active { + color: #A6FF00 !important; +} + +.main-navigation .locale-menu { + color: #fff; +} + +.main-navigation .base-button { + color: #fff; +} + +#nav-search-box .hc-hashtag a { + color: #17b53f; +} + +#footer { + background-color: $color-secondary; +} + +#footer a { + color: $color-primary; +} + +.avatar-menu .profile-avatar { + color: $color-primary; +} + +.profile-avatar .initials { + color: $color-primary; +} + +.branding-menu .ds-text { + font-family: 'Overpass', Helvetica, Arial, Lucida, sans-serif; + font-weight: 500; + text-transform: uppercase; + font-size: 16px; +} + +/* avoid uppercase for user slug */ +span.slug { + text-transform: none; +} + +.ds-footer { + font-family: 'Overpass', Helvetica, Arial, Lucida, sans-serif; + text-transform: uppercase; + font-size: 16px; + font-weight: 300; +} + +/* chips on group teaser */ +a.group-teaser footer .ds-chip-primary { + background-color: $color-primary; +} + +/* chips on group profile */ +.group-profile .ds-chip-primary { + background-color: $color-primary; +} + +/* number count color */ +div.ds-number>p.ds-number-count { + color: $color-primary; +} + +/* active tab border bottom color */ +div.tab-navigation li.Tabs__tab { + border-bottom-color: $color-primary; +} + +/* submit button color group form */ +form.group-form button.ds-button-primary { + background-color: $color-primary; +} + +/* color of active filter tags in post teaser */ +span.category-tag.filterActive { + background-color: $color-primary; +} \ No newline at end of file From 39eef13a51a561b3a015e8502ea6cc1bb80ce174 Mon Sep 17 00:00:00 2001 From: elweyn Date: Thu, 20 Jul 2023 16:45:44 +0200 Subject: [PATCH 4/6] Change the ocelot chat room badge color --- webapp/assets/_new/styles/export.scss | 3 +++ webapp/assets/_new/styles/tokens.scss | 2 ++ webapp/assets/styles/imports/_branding.scss | 7 ++----- webapp/constants/chat.js | 4 ++-- 4 files changed, 9 insertions(+), 7 deletions(-) diff --git a/webapp/assets/_new/styles/export.scss b/webapp/assets/_new/styles/export.scss index 5b866d6b7..e29c014e2 100644 --- a/webapp/assets/_new/styles/export.scss +++ b/webapp/assets/_new/styles/export.scss @@ -31,4 +31,7 @@ chatMessageTimestamp: $chat-message-timestamp; chatMessageCheckmarkSeen: $chat-message-checkmark-seen; chatMessageCheckmark: $chat-message-checkmark; + + chatRoomBackgroundCounterBadge: $chat-room-background-counter-badge; + chatRoomColorCounterBadge: $chat-room-color-counter-badge; } \ No newline at end of file diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss index ef5086240..3e189abf2 100644 --- a/webapp/assets/_new/styles/tokens.scss +++ b/webapp/assets/_new/styles/tokens.scss @@ -420,3 +420,5 @@ $chat-new-message-color: $color-secondary-active; $chat-message-timestamp: $text-color-soft; $chat-message-checkmark-seen: $text-color-secondary; $chat-message-checkmark: $text-color-soft; +$chat-room-color-counter-badge: $color-primary; +$chat-room-background-counter-badge: $color-secondary; diff --git a/webapp/assets/styles/imports/_branding.scss b/webapp/assets/styles/imports/_branding.scss index 1bb4291af..733f2856c 100644 --- a/webapp/assets/styles/imports/_branding.scss +++ b/webapp/assets/styles/imports/_branding.scss @@ -28,13 +28,10 @@ $color-toast-blue: rgb(0, 142, 230); $color-toast-green: $color-primary; $chat-message-bg-me: $color-primary-light; -// $chat-message-color: $text-color-base; -// $chat-message-bg-others: $color-neutral-80; -// $chat-sidemenu-bg: $color-secondary-active; -// $chat-new-message-color: $color-secondary-active; -// $chat-message-timestamp: $text-color-soft; $chat-message-checkmark-seen: $color-secondary; $chat-message-checkmark: $text-color-inverse; +$chat-room-color-counter-badge: $color-primary; +$chat-room-background-counter-badge: $color-secondary; .main-navigation a { diff --git a/webapp/constants/chat.js b/webapp/constants/chat.js index 181d88e0e..de391707d 100644 --- a/webapp/constants/chat.js +++ b/webapp/constants/chat.js @@ -109,8 +109,8 @@ const STYLE = { colorTimestamp: '#a2aeb8', colorStateOnline: '#4caf50', colorStateOffline: '#9ca6af', - backgroundCounterBadge: '#0696c7', - colorCounterBadge: '#fff', + backgroundCounterBadge: styleData.chatRoomBackgroundCounterBadge, + colorCounterBadge: styleData.chatRoomColorCounterBadge, }, emoji: { From 69394d800b6766e87a39c6a065359d90746cdf91 Mon Sep 17 00:00:00 2001 From: elweyn Date: Thu, 20 Jul 2023 16:53:10 +0200 Subject: [PATCH 5/6] Change default ocelot badge color to text-color-inverted. --- webapp/assets/_new/styles/tokens.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss index 3e189abf2..dd3a042d1 100644 --- a/webapp/assets/_new/styles/tokens.scss +++ b/webapp/assets/_new/styles/tokens.scss @@ -420,5 +420,5 @@ $chat-new-message-color: $color-secondary-active; $chat-message-timestamp: $text-color-soft; $chat-message-checkmark-seen: $text-color-secondary; $chat-message-checkmark: $text-color-soft; -$chat-room-color-counter-badge: $color-primary; +$chat-room-color-counter-badge: $text-color-inverse; $chat-room-background-counter-badge: $color-secondary; From fa9b8390812a7f89648719876f351b1d8110df56 Mon Sep 17 00:00:00 2001 From: elweyn Date: Thu, 20 Jul 2023 16:56:33 +0200 Subject: [PATCH 6/6] Remove client customizing. --- webapp/assets/styles/imports/_branding.scss | 124 +------------------- 1 file changed, 1 insertion(+), 123 deletions(-) diff --git a/webapp/assets/styles/imports/_branding.scss b/webapp/assets/styles/imports/_branding.scss index 733f2856c..75058595d 100644 --- a/webapp/assets/styles/imports/_branding.scss +++ b/webapp/assets/styles/imports/_branding.scss @@ -2,126 +2,4 @@ * * Here, all SCSS variables and classes can be adapted to your custom design. * -*/ - -$color-primary: rgb(110, 139, 135); -$color-primary-light: rgb(161, 179, 177); -$color-primary-dark: rgb(81, 99, 97); -$color-primary-active: rgb(123, 160, 149); -$color-primary-inverse: rgb(241, 248, 243); - -$color-secondary: rgb(166, 255, 0); -$color-secondary-active: rgb(188, 255, 130); -$color-secondary-inverse: rgb(241, 255, 225); - -$font-family-heading: 'Overpass', Helvetica, Arial, Lucida, sans-serif; -$font-family-text: 'Overpass', Helvetica, Arial, Lucida, sans-serif; - -$color-header-background: $color-primary; -$color-footer-background: $color-secondary; - -$color-locale-menu: $color-secondary; - -$color-donation-bar: $color-secondary; - -$color-toast-blue: rgb(0, 142, 230); -$color-toast-green: $color-primary; - -$chat-message-bg-me: $color-primary-light; -$chat-message-checkmark-seen: $color-secondary; -$chat-message-checkmark: $text-color-inverse; -$chat-room-color-counter-badge: $color-primary; -$chat-room-background-counter-badge: $color-secondary; - - -.main-navigation a { - color: #fff; - text-transform: uppercase; - font-size: 16px; - font-weight: 500; -} - -.main-navigation a:hover { - color: hsla(0, 0%, 100%, .8); -} - -.main-navigation .router-link-exact-active { - color: #A6FF00 !important; -} - -.main-navigation .locale-menu { - color: #fff; -} - -.main-navigation .base-button { - color: #fff; -} - -#nav-search-box .hc-hashtag a { - color: #17b53f; -} - -#footer { - background-color: $color-secondary; -} - -#footer a { - color: $color-primary; -} - -.avatar-menu .profile-avatar { - color: $color-primary; -} - -.profile-avatar .initials { - color: $color-primary; -} - -.branding-menu .ds-text { - font-family: 'Overpass', Helvetica, Arial, Lucida, sans-serif; - font-weight: 500; - text-transform: uppercase; - font-size: 16px; -} - -/* avoid uppercase for user slug */ -span.slug { - text-transform: none; -} - -.ds-footer { - font-family: 'Overpass', Helvetica, Arial, Lucida, sans-serif; - text-transform: uppercase; - font-size: 16px; - font-weight: 300; -} - -/* chips on group teaser */ -a.group-teaser footer .ds-chip-primary { - background-color: $color-primary; -} - -/* chips on group profile */ -.group-profile .ds-chip-primary { - background-color: $color-primary; -} - -/* number count color */ -div.ds-number>p.ds-number-count { - color: $color-primary; -} - -/* active tab border bottom color */ -div.tab-navigation li.Tabs__tab { - border-bottom-color: $color-primary; -} - -/* submit button color group form */ -form.group-form button.ds-button-primary { - background-color: $color-primary; -} - -/* color of active filter tags in post teaser */ -span.category-tag.filterActive { - background-color: $color-primary; -} \ No newline at end of file +*/ \ No newline at end of file