From 713c37eeaab4349c6d427335a32a6453ecdbc736 Mon Sep 17 00:00:00 2001 From: fermarinsanchez Date: Wed, 7 Feb 2024 13:09:44 +0100 Subject: [PATCH] fix(ScoreFrontStage): refactor styles and colors --- .../src/feedback/ScoreFronstage/Item/Item.js | 2 +- .../src/feedback/ScoreFronstage/Item/Item.styles.js | 6 +++--- .../src/feedback/ScoreFronstage/ScoreFronstage.js | 2 ++ .../feedback/ScoreFronstage/ScoreFronstage.styles.js | 6 ++++-- .../src/informative/Avatar/Avatar.constants.js | 2 ++ packages/components/src/informative/Avatar/Avatar.js | 10 +++++++++- .../components/src/informative/Avatar/Avatar.styles.js | 6 +++--- 7 files changed, 24 insertions(+), 10 deletions(-) diff --git a/packages/components/src/feedback/ScoreFronstage/Item/Item.js b/packages/components/src/feedback/ScoreFronstage/Item/Item.js index 698c6f105..c737e05da 100644 --- a/packages/components/src/feedback/ScoreFronstage/Item/Item.js +++ b/packages/components/src/feedback/ScoreFronstage/Item/Item.js @@ -1,8 +1,8 @@ import React from 'react'; +import { isDate, isFunction } from 'lodash'; import { ItemStyles } from './Item.styles'; import { ITEM_DEFAULT_PROPS, ITEM_PROP_TYPES } from './Item.constants'; import { Box } from '../../../layout'; -import { isDate, isFunction } from 'lodash'; import { Badge } from '../Badge'; const Item = ({ diff --git a/packages/components/src/feedback/ScoreFronstage/Item/Item.styles.js b/packages/components/src/feedback/ScoreFronstage/Item/Item.styles.js index 147303af8..d9945e6ae 100644 --- a/packages/components/src/feedback/ScoreFronstage/Item/Item.styles.js +++ b/packages/components/src/feedback/ScoreFronstage/Item/Item.styles.js @@ -1,12 +1,10 @@ import { createStyles } from '@mantine/styles'; -import { pxToRem, getPaddings, getFontExpressive, getFontProductive } from '../../../theme.mixins'; -export const ItemStyles = createStyles((theme, {}) => { +const ItemStyles = createStyles((theme, {}) => { const scoreTheme = theme.other.score; return { root: { borderTop: `${scoreTheme.border.width} solid ${scoreTheme.border.color.neutral.emphasis}`, - backgroundColor: scoreTheme.background.color.neutral.subtle, padding: scoreTheme.spacing.padding.md, '&:hover': { backgroundColor: scoreTheme.background.color.neutral.hover, @@ -41,3 +39,5 @@ export const ItemStyles = createStyles((theme, {}) => { }, }; }); + +export { ItemStyles }; diff --git a/packages/components/src/feedback/ScoreFronstage/ScoreFronstage.js b/packages/components/src/feedback/ScoreFronstage/ScoreFronstage.js index b536bc4d1..2e8d2e7b7 100644 --- a/packages/components/src/feedback/ScoreFronstage/ScoreFronstage.js +++ b/packages/components/src/feedback/ScoreFronstage/ScoreFronstage.js @@ -22,6 +22,7 @@ const ScoreFronstage = ({ maxGrade, values, locale, + subjectColor, ...props }) => { const { classes } = ScoreFronstageStyles({}, { name: 'ScoreFronstage' }); @@ -34,6 +35,7 @@ const ScoreFronstage = ({ size="lg" icon={icon ? : null} showIconAndImage + subjectColor={subjectColor} /> diff --git a/packages/components/src/feedback/ScoreFronstage/ScoreFronstage.styles.js b/packages/components/src/feedback/ScoreFronstage/ScoreFronstage.styles.js index 99ef3ce87..37d49ed89 100644 --- a/packages/components/src/feedback/ScoreFronstage/ScoreFronstage.styles.js +++ b/packages/components/src/feedback/ScoreFronstage/ScoreFronstage.styles.js @@ -1,6 +1,6 @@ import { createStyles } from '@mantine/styles'; -export const ScoreFronstageStyles = createStyles((theme, {}) => { +const ScoreFronstageStyles = createStyles((theme, {}) => { const scoreTheme = theme.other.score; const paddingLg = scoreTheme.spacing.padding.lg; return { @@ -18,7 +18,7 @@ export const ScoreFronstageStyles = createStyles((theme, {}) => { }, header: { padding: `56px ${paddingLg} ${paddingLg} ${paddingLg}`, - backgroundColor: scoreTheme.background.color.neutral.subtle, + // backgroundColor: scoreTheme.background.color.neutral.subtle, display: 'flex', flexDirection: 'column', alignItems: 'center', @@ -42,3 +42,5 @@ export const ScoreFronstageStyles = createStyles((theme, {}) => { }, }; }); + +export { ScoreFronstageStyles }; diff --git a/packages/components/src/informative/Avatar/Avatar.constants.js b/packages/components/src/informative/Avatar/Avatar.constants.js index c83639463..c81ca56a9 100644 --- a/packages/components/src/informative/Avatar/Avatar.constants.js +++ b/packages/components/src/informative/Avatar/Avatar.constants.js @@ -20,6 +20,7 @@ export const AVATAR_DEFAULT_PROPS = { size: 'md', state: 'normal', showIconAndImage: false, + subjectColor: '#96D47F', }; export const AVATAR_PROP_TYPES = { image: PropTypes.string, @@ -32,4 +33,5 @@ export const AVATAR_PROP_TYPES = { fullName: PropTypes.string, icon: PropTypes.any, alt: PropTypes.string, + subjectColor: PropTypes.string, }; diff --git a/packages/components/src/informative/Avatar/Avatar.js b/packages/components/src/informative/Avatar/Avatar.js index e2972a9ee..88ab90c11 100644 --- a/packages/components/src/informative/Avatar/Avatar.js +++ b/packages/components/src/informative/Avatar/Avatar.js @@ -16,6 +16,7 @@ const Avatar = forwardRef( image, icon, color, + subjectColor, initials, fullName, radius = true, @@ -43,7 +44,14 @@ const Avatar = forwardRef( } } - const { classes, theme } = AvatarStyles({ radius, color, size, state, activityStatus }); + const { classes, theme } = AvatarStyles({ + radius, + color, + size, + state, + activityStatus, + subjectColor, + }); return ( diff --git a/packages/components/src/informative/Avatar/Avatar.styles.js b/packages/components/src/informative/Avatar/Avatar.styles.js index de03a3e0f..e865c9d38 100644 --- a/packages/components/src/informative/Avatar/Avatar.styles.js +++ b/packages/components/src/informative/Avatar/Avatar.styles.js @@ -64,7 +64,7 @@ const getIconWrapperStyles = (size, theme, badgeTheme) => { }; export const AvatarStyles = createStyles( - (theme, { size, radius, color, state, activityStatus }) => { + (theme, { size, radius, color, state, activityStatus, subjectColor }) => { const avatarTheme = theme.other.avatar; const badgeTheme = theme.other.badge; @@ -89,7 +89,7 @@ export const AvatarStyles = createStyles( iconWrapper: { display: size === 'sm' && 'none', boxSizing: 'content-box', - backgroundColor: badgeTheme.background.color.primary.default, + backgroundColor: subjectColor, borderRadius: radius ? badgeTheme.border.radius : 0, position: 'absolute', ...getIconWrapperStyles(size, theme, badgeTheme), @@ -100,5 +100,5 @@ export const AvatarStyles = createStyles( }, }, }; - } + }, );