diff --git a/cypress/component/VirtualAssistant.cy.tsx b/cypress/component/VirtualAssistant.cy.tsx index 0ec9221f..2d644ddf 100644 --- a/cypress/component/VirtualAssistant.cy.tsx +++ b/cypress/component/VirtualAssistant.cy.tsx @@ -6,7 +6,7 @@ describe('VirtualAssistant', () => { cy.mount(); cy.get('[data-test-id="assistant-title"]').first().should('contain', 'Virtual Assistant'); - cy.get('[data-test-id="assistant-text-input"]').first().should('have.attr', 'placeholder', 'Type a message...'); + cy.get('[data-test-id="assistant-text-input"]').first().should('have.attr', 'placeholder', 'Send a message...'); cy.get('[data-test-id="assistant-send-button"]').first().should('not.be.disabled'); }) diff --git a/packages/module/src/VirtualAssistant/VirtualAssistant.tsx b/packages/module/src/VirtualAssistant/VirtualAssistant.tsx index 32feee32..19b48e58 100644 --- a/packages/module/src/VirtualAssistant/VirtualAssistant.tsx +++ b/packages/module/src/VirtualAssistant/VirtualAssistant.tsx @@ -5,10 +5,9 @@ import { CardBody, CardFooter, CardHeader, - Icon, - InputGroup, - InputGroupText, + Divider, Flex, + Icon, TextArea } from '@patternfly/react-core'; import { createUseStyles } from 'react-jss'; @@ -50,7 +49,7 @@ const useStyles = createUseStyles({ cardTitle: { alignSelf: "center", color: "var(--pf-v5-global--Color--light-100)", - fontSize: "18px", + fontSize: "var(--pf-v5-global--FontSize--lg)", fontWeight: "400", lineHeight: "27px", paddingLeft: "var(--pf-v5-global--spacer--sm)", @@ -59,14 +58,14 @@ const useStyles = createUseStyles({ marginLeft: "5px", marginTop: "4px", fontSize: "28px", - color: "#C9190B", + color: "var(--pf-v5-global--danger-color--100)", }, titleIconWrapper: { display: "block", float: "left", width: "38px", height: "38px", - background: "#fff", + background: "var(--pf-v5-global--BackgroundColor--100)", borderRadius: "20px", marginRight: "7px", }, @@ -79,14 +78,40 @@ const useStyles = createUseStyles({ "&::-webkit-scrollbar": "display: none", }, cardFooter: { - padding: "0", - }, - inputGroup: { - height: "60px", + padding: "10px", + paddingBottom: "16px", + "& :focus-visible": { + outline: "none", + }, + "& .pf-v5-c-button.pf-m-disabled": { + color: "transparent !important", + }, + "& .pf-v5-c-button.pf-m-plain": { + "--pf-v5-c-button--disabled--Color": "transparent", + color: "var(--pf-v5-global--danger-color--100)", + }, + "& .pf-v5-c-form-control": { + "--pf-v5-c-form-control--after--BorderBottomWidth": "0", + }, + "& .pf-v5-svg": { + width: "27px", + height: "27px", + } }, textArea: { resize: "none", - } + backgroundColor: "var(--pf-v5-global--BackgroundColor--200)", + borderRadius: "50px 50px 50px 50px", + color: "var(--pf-v5-global--Color--light-100)", + paddingRight: "50px", + paddingLeft: "20px", + + }, + sendButton: { + position: "absolute", + bottom: "22px", + right: "14px", + }, }) export interface VirtualAssistantProps { @@ -115,7 +140,7 @@ export interface VirtualAssistantProps { export const VirtualAssistant: React.FunctionComponent = ({ children, title = 'Virtual Assistant', - inputPlaceholder = 'Type a message...', + inputPlaceholder = 'Send a message...', message = '', actions, onChangeMessage, @@ -158,26 +183,24 @@ export const VirtualAssistant: React.FunctionComponent = {children} - - + ); diff --git a/packages/module/src/VirtualAssistant/__snapshots__/VirtualAssistant.test.tsx.snap b/packages/module/src/VirtualAssistant/__snapshots__/VirtualAssistant.test.tsx.snap index f31a1ffe..5132e232 100644 --- a/packages/module/src/VirtualAssistant/__snapshots__/VirtualAssistant.test.tsx.snap +++ b/packages/module/src/VirtualAssistant/__snapshots__/VirtualAssistant.test.tsx.snap @@ -58,53 +58,44 @@ exports[`VirtualAssistant should render assistant 1`] = `