IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(webapp): refactor branding of post ribbons and chat etc. (#8395)

Browse Source 
* Refactor branding of post ribbons

* Refactor chat to be more brandable

* Refine avatar menu logout item to have danger color

* Change login menu item color to '$text-color-link'
This commit is contained in:
Wolfgang Huß 2025-04-17 17:48:59 +02:00 committed by GitHub
parent d9c8e3571c
commit a31274c793
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 43 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
webapp/assets/_new/styles/export.scss
View File

@ -20,6 +20,10 @@
backgroundColorPrimary: $background-color-primary;
colorNeutral30: $color-neutral-30;
chatSidemenuBg: $chat-sidemenu-bg;
chatSidemenuBackgroundOver: $chat-sidemenu-background-over;
chatSidemenuBackgroundActive: $chat-sidemenu-background-active;
chatMessageColor: $chat-message-color;
@ -34,4 +38,8 @@
chatRoomBackgroundCounterBadge: $chat-room-background-counter-badge;
chatRoomColorCounterBadge: $chat-room-color-counter-badge;
chatIconAdd: $chat-icon-add;
chatIconSend: $chat-icon-send;
chatIconEmoji: $chat-icon-emoji;
}

17
webapp/assets/_new/styles/tokens.scss
View File

@ -403,10 +403,12 @@ $color-toast-green: $color-success;
* @tokens Ribbon Color
*/
$color-ribbon-event: $background-color-third;
$color-ribbon-event-active: $background-color-third-active;
$color-ribbon-article: $background-color-secondary;
$color-ribbon-article-active: $background-color-secondary-active;
$color-ribbon-announcement: $background-color-warning;
$color-ribbon-announcement-shadow: color.adjust($color-ribbon-announcement, $lightness: -20%,);
$color-ribbon-article: $background-color-secondary-active;
$color-ribbon-article-shadow: color.adjust($color-ribbon-article, $lightness: -20%);
$color-ribbon-event: $background-color-third-active;
$color-ribbon-event-shadow: color.adjust($color-ribbon-event, $lightness: -20%);
/**
* @tokens Chat Color
@ -415,10 +417,15 @@ $color-ribbon-article-active: $background-color-secondary-active;
$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-sidemenu-bg: white;
$chat-sidemenu-background-over: '#f6f6f6';
$chat-sidemenu-background-active: $color-primary-light;
$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: $text-color-inverse;
$chat-room-background-counter-badge: $color-secondary;
$chat-icon-add: $color-primary;
$chat-icon-send: $color-primary;
$chat-icon-emoji: $color-primary;

4
webapp/assets/_new/styles/uses.scss Normal file
View File

@ -0,0 +1,4 @@
// we can not use the command '@use' in 'tokens.scss' because of the compiler error 'SassError: @use rules must be written before any other rules.'
// therefore we integrate this file at first in 'nuxt.config.js'
@use 'sass:color';

4
webapp/components/AvatarMenu/AvatarMenu.vue
View File

@ -168,10 +168,10 @@ export default {
background-color: $color-neutral-90;
}
.logout-link {
color: $text-color-base;
color: $text-color-danger;
padding-top: $space-xx-small;
&:hover {
color: $text-color-link-active;
color: color.adjust($text-color-danger, $lightness: -10%);
}
}
}

2
webapp/components/LoginButton/LoginButton.vue
View File

@ -40,7 +40,7 @@ export default {
background-color: $color-neutral-90;
}
.login-link {
color: $text-color-base;
color: $text-color-link;
padding-top: $space-xx-small;
&:hover {
color: $text-color-link-active;

13
webapp/components/Ribbon/index.vue
View File

@ -25,7 +25,7 @@ export default {
padding: $size-ribbon $size-ribbon;
border-radius: $border-radius-small 0 0 $border-radius-small;
color: $color-neutral-100;
background-color: $color-ribbon-article-active;
background-color: $color-ribbon-article;
font-size: $font-size-x-small;
font-weight: $font-weight-bold;
@ -36,22 +36,23 @@ export default {
bottom: -$size-ribbon;
border-width: $border-size-large 4px $border-size-large $border-size-large;
border-style: solid;
border-color: $color-ribbon-article transparent transparent $color-ribbon-article;
border-color: $color-ribbon-article-shadow transparent transparent $color-ribbon-article-shadow;
}
&.--pinned {
background-color: $color-warning;
background-color: $color-ribbon-announcement;
&::before {
border-color: $color-warning transparent transparent $color-warning;
border-color: $color-ribbon-announcement-shadow transparent transparent
$color-ribbon-announcement-shadow;
}
}
}
.eventBg {
background-color: $color-ribbon-event-active;
background-color: $color-ribbon-event;
&::before {
border-color: $color-ribbon-event transparent transparent $color-ribbon-event;
border-color: $color-ribbon-event-shadow transparent transparent $color-ribbon-event-shadow;
}
}
</style>

2
webapp/components/_new/generic/BaseCard/BaseCard.vue
View File

@ -64,7 +64,7 @@ export default {
}
&.--highlight {
border: $border-size-base solid $color-warning;
border: $border-size-base solid $color-ribbon-announcement;
}
&.--wide-content {

14
webapp/constants/chat.js
View File

@ -44,9 +44,9 @@ const STYLE = {
},
sidemenu: {
background: '#fff',
backgroundHover: '#f6f6f6',
backgroundActive: styleData.colorPrimaryLight,
background: styleData.chatSidemenuBg,
backgroundHover: styleData.chatSidemenuBackgroundOver,
backgroundActive: styleData.chatSidemenuBackgroundActive,
colorActive: '#1976d2',
borderColorSearch: '#e1e5e8',
},
@ -114,12 +114,12 @@ const STYLE = {
},
emoji: {
background: '#fff',
background: 'white',
},
icons: {
search: '#9ca6af',
add: styleData.colorPrimary,
add: styleData.chatIconAdd,
toggle: styleData.colorNeutral30,
menu: styleData.colorNeutral30,
close: '#9ca6af',
@ -128,9 +128,9 @@ const STYLE = {
paperclip: styleData.colorPrimary,
closeOutline: '#000',
closePreview: '#fff',
send: styleData.colorPrimary,
send: styleData.chatIconSend,
sendDisabled: '#9ca6af',
emoji: styleData.colorPrimary,
emoji: styleData.chatIconEmoji,
emojiReaction: 'rgba(0, 0, 0, 0.3)',
document: styleData.colorPrimary,
pencil: '#9e9e9e',

1
webapp/nuxt.config.js
View File

@ -102,6 +102,7 @@ export default {
*/
styleResources: {
scss: [
'~assets/_new/styles/uses.scss',
styleguideStyles,
'~assets/_new/styles/tokens.scss',
'~assets/styles/imports/_branding.scss',