fix(MessageView & MessageItem): update to latest design specs (#5298)

Author: Lukas742

packages/base/src/styling/CssSizeVariables.ts

@@ -18,6 +18,7 @@ export enum CssSizeVariablesNames {
   ui5WcrFormGroupTitleHeight = '--_ui5wcr-FormGroupTitleHeight',
   ui5WcrMessageViewListItemHeightSingle = '--_ui5wcr-MessageViewListItemHeightSingle',
   ui5WcrMessageViewListItemHeightByLine = '--_ui5wcr-MessageViewListItemHeightByLine',
+  ui5WcrMessageItemTitleFontSize = '--_ui5wcr-MessageItemTitleFontSize',
   ui5WcrSplitterSize = '--_ui5wcr-SplitterSize',
   ui5WcrDialogHeaderHeight = '--_ui5wcr-DialogHeaderHeight',
   ui5WcrDialogSubHeaderHeight = '--_ui5wcr-DialogSubHeaderHeight',
@@ -51,6 +52,7 @@ export const CozySizes = {
   [CssSizeVariablesNames.ui5WcrFormGroupTitleHeight]: `2.75rem`,
   [CssSizeVariablesNames.ui5WcrMessageViewListItemHeightSingle]: `2.75rem`,
   [CssSizeVariablesNames.ui5WcrMessageViewListItemHeightByLine]: `3.325rem`,
+  [CssSizeVariablesNames.ui5WcrMessageItemTitleFontSize]: ThemingParameters.sapFontHeader5Size,
   [CssSizeVariablesNames.ui5WcrSplitterSize]: `1rem`,
   [CssSizeVariablesNames.ui5WcrDialogHeaderHeight]: '2.75rem',
   [CssSizeVariablesNames.ui5WcrDialogSubHeaderHeight]: '3rem',
@@ -75,6 +77,7 @@ export const CompactSizes = {
   [CssSizeVariablesNames.ui5WcrFormGroupTitleHeight]: `2rem`,
   [CssSizeVariablesNames.ui5WcrMessageViewListItemHeightSingle]: `2rem`,
   [CssSizeVariablesNames.ui5WcrMessageViewListItemHeightByLine]: `3.25rem`,
+  [CssSizeVariablesNames.ui5WcrMessageItemTitleFontSize]: ThemingParameters.sapFontHeader6Size,
   [CssSizeVariablesNames.ui5WcrDialogHeaderHeight]: '2.5rem',
   [CssSizeVariablesNames.ui5WcrDialogSubHeaderHeight]: '2.25rem',
   [CssSizeVariablesNames.ui5WcrElementHeight]: ThemingParameters.sapElement_Compact_Height

packages/main/src/components/MessageView/MessageItem.tsx

@@ -62,14 +62,14 @@ const useStyles = createUseStyles(
       width: '100%',
       maxWidth: '100%',
       overflow: 'hidden',
-      paddingRight: '1rem',
+      paddingInlineEnd: '1rem',
       boxSizing: 'border-box'
     },
     withSubtitle: {
       height: CssSizeVariables.ui5WcrMessageViewListItemHeightByLine
     },
     withChildren: {
-      paddingRight: '0rem'
+      paddingInlineEnd: '0rem'
     },
     iconContainer: {
       width: '3rem',
@@ -85,15 +85,15 @@ const useStyles = createUseStyles(
     },
     title: {
       fontFamily: ThemingParameters.sapFontHeaderFamily,
-      fontSize: ThemingParameters.sapFontHeader6Size,
+      fontSize: CssSizeVariables.ui5WcrMessageItemTitleFontSize,
       color: ThemingParameters.sapGroup_TitleTextColor,
       maxWidth: '100%',
       whiteSpace: 'nowrap',
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       flex: '1 1 auto',
       '& + $subtitle': {
-        marginTop: '0.25rem',
+        marginBlockStart: '0.25rem',
         cursor: 'inherit'
       }
     },
@@ -102,7 +102,7 @@ const useStyles = createUseStyles(
       color: ThemingParameters.sapContent_MarkerTextColor,
       fontFamily: ThemingParameters.sapFontFamily,
       fontSize: ThemingParameters.sapFontSize,
-      paddingLeft: '1rem',
+      paddingInlineStart: '1rem',
       flex: 'none'
     },
     navigation: {

packages/main/src/components/MessageView/index.tsx

@@ -113,7 +113,7 @@ const useStyles = createUseStyles(
       '&[data-key="Error"]:not([pressed])': { color: ThemingParameters.sapNegativeElementColor },
       '&[data-key="Warning"]:not([pressed])': { color: ThemingParameters.sapCriticalElementColor },
       '&[data-key="Success"]:not([pressed])': { color: ThemingParameters.sapPositiveElementColor },
-      '&[data-key="Information"]:not([pressed])': { color: ThemingParameters.sapNeutralElementColor }
+      '&[data-key="Information"]:not([pressed])': { color: ThemingParameters.sapInformativeElementColor }
     },
     detailsContainer: {
       padding: '1rem'
@@ -124,18 +124,18 @@ const useStyles = createUseStyles(
       '&[data-type="Error"]': { color: ThemingParameters.sapNegativeElementColor },
       '&[data-type="Warning"]': { color: ThemingParameters.sapCriticalElementColor },
       '&[data-type="Success"]': { color: ThemingParameters.sapPositiveElementColor },
-      '&[data-type="Information"],&[data-type="None"]': { color: ThemingParameters.sapNeutralElementColor }
+      '&[data-type="Information"],&[data-type="None"]': { color: ThemingParameters.sapInformativeElementColor }
     },
     detailsTextContainer: { overflow: 'hidden' },
     detailsTitle: {
-      marginBottom: '1rem'
+      marginBlockEnd: '1rem'
     },
     detailsText: {
       fontFamily: ThemingParameters.sapFontFamily,
       fontSize: ThemingParameters.sapFontSize,
       lineHeight: 1.4,
       color: ThemingParameters.sapTextColor,
-      marginBottom: '1rem'
+      marginBlockEnd: '1rem'
     }
   },
   { name: 'MessageView' }