fix(ScoreFrontStage): refactor styles and colors

leemonade · Feb 7, 2024 · 713c37e · 713c37e
1 parent 6b0c4fb
commit 713c37e
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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 ? <ImageLoader src={icon} height={'100%'} forceImage /> : null}
           showIconAndImage
+          subjectColor={subjectColor}
         />
       </Box>
       <Box className={classes.header}>

diff --git 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
@@ -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
@@ -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 (
       <Box className={classes.avatarWrapper}>

diff --git 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(
         },
       },
     };
-  }
+  },
 );