diff --git a/web/chat/relationship-prompt/relationship-prompt-button.js b/web/chat/relationship-prompt/relationship-prompt-button.js
--- a/web/chat/relationship-prompt/relationship-prompt-button.js
+++ b/web/chat/relationship-prompt/relationship-prompt-button.js
@@ -2,6 +2,7 @@
import { type IconDefinition } from '@fortawesome/fontawesome-common-types';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classnames from 'classnames';
import * as React from 'react';
import css from './relationship-prompt.css';
@@ -12,21 +13,29 @@
+icon: IconDefinition,
+buttonColor: ButtonColor,
+onClick: () => void,
+ +className?: string,
};
function RelationshipPromptButton(props: Props): React.Node {
- const { text, icon, buttonColor, onClick } = props;
+ const { text, icon, buttonColor, onClick, className } = props;
- return (
-
+ const buttonClassName = classnames(css.promptButton, className);
+
+ const relationshipPromptButton = React.useMemo(
+ () => (
+
+ ),
+ [buttonClassName, buttonColor, icon, onClick, text],
);
+
+ return relationshipPromptButton;
}
export default RelationshipPromptButton;
diff --git a/web/chat/relationship-prompt/relationship-prompt.css b/web/chat/relationship-prompt/relationship-prompt.css
--- a/web/chat/relationship-prompt/relationship-prompt.css
+++ b/web/chat/relationship-prompt/relationship-prompt.css
@@ -1,16 +1,14 @@
div.promptButtonContainer {
display: flex;
+ padding: 0.5rem;
+ column-gap: 1rem;
}
button.promptButton {
flex: 1;
- margin: 0.5rem;
+ column-gap: 8px;
}
p.promptText {
font-weight: var(--semi-bold);
}
-
-svg.promptIcon {
- padding: 0.5rem;
-}