Merge pull request #23 from epwinchell/user_msg

fix: user message styling update
patternfly · Jul 16, 2024 · 6ca5039 · 6ca5039
2 parents fdaa4b3 + a0e501a
commit 6ca5039
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 11 deletions.
diff --git a/...tent/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistant.md b/...tent/extensions/virtual-assistant/examples/VirtualAssistant/VirtualAssistant.md
@@ -112,7 +112,7 @@ This is an example of a message sent by assistant with follow-up options. Follow
 
 ### User Message
 
-This is an example of a message sent by user. Additionally, it allows for the use of a custom icon through the `icon` property.
+This is an example of a message sent by user. 
 
 ```js file="./UserMessage.tsx"
 

diff --git a/packages/module/src/UserMessageEntry/UserMessageEntry.tsx b/packages/module/src/UserMessageEntry/UserMessageEntry.tsx
@@ -1,6 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { Icon, Split, SplitItem, TextContent } from '@patternfly/react-core';
-import OutlinedUserIcon from '@patternfly/react-icons/dist/js/icons/outlined-user-icon';
+import { Split, SplitItem, TextContent } from '@patternfly/react-core';
 import { createUseStyles } from 'react-jss';
 import classnames from "clsx";
 
@@ -9,8 +8,9 @@ const useStyles = createUseStyles({
     margin: "0 0 12px 40px",
   },
   bubbleUser: {
-    border: "1px solid var(--pf-v5-global--BackgroundColor--dark-400)",
+    backgroundColor: "var(--pf-v5-global--danger-color--100)",
     borderRadius: "14px",
+    color: "#fff",
     padding: "var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--md) var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--md)",
     maxWidth: "100%",
     wordWrap: "break-word",
@@ -21,22 +21,17 @@ interface UserMessageEntryProps {
   icon?: React.ComponentType;
 }
 
-const UserMessageEntry = ({ children, icon: IconComponent = OutlinedUserIcon }: PropsWithChildren<UserMessageEntryProps>) => {
+const UserMessageEntry = ({ children }: PropsWithChildren<UserMessageEntryProps>) => {
   const classes = useStyles();
 
   return (
     <>
       <Split className={classnames(classes.user,"pf-v5-u-mb-md pf-v5-u-align-items-flex-start pf-v5-u-justify-content-flex-end")}>
         <SplitItem className={classes.bubbleUser}>
-          <TextContent className="pf-v5-u-color-300 pf-v5-u-font-size-sm">
+          <TextContent className="pf-v5-u-color-light-100 pf-v5-u-font-size-sm">
             {children}
           </TextContent>
         </SplitItem>
-        <SplitItem>
-          <Icon size="lg" className="pf-v5-u-ml-sm pf-v5-u-pt-xs">
-            <IconComponent />
-          </Icon>
-        </SplitItem>
       </Split>
     </>
   );