Page MenuHomePhabricator
Files F3536902

D5324.id17709.diff
No OneTemporary
Actions

D5324.id17709.diff
View Options

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
@@ -4,30 +4,28 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import * as React from 'react';
+import Button, { type ButtonColor } from '../../components/button.react';
import css from './relationship-prompt.css';
type Props = {
+text: string,
+icon: IconDefinition,
- +color?: string,
- +textColor?: string,
+ +buttonColor: ButtonColor,
+onClick: () => void,
};
function RelationshipPromptButton(props: Props): React.Node {
- const { text, icon, color, textColor, onClick } = props;
- const buttonStyle = React.useMemo(
- () => ({
- backgroundColor: `var(${color ?? '--relationship-button-green'})`,
- color: `var(${textColor ?? '--relationship-button-text'})`,
- }),
- [color, textColor],
- );
+ const { text, icon, buttonColor, onClick } = props;
return (
- <button className={css.promptButton} onClick={onClick} style={buttonStyle}>
+ <Button
+ variant="filled"
+ buttonColor={buttonColor}
+ onClick={onClick}
+ className={css.promptButton}
+ >
<FontAwesomeIcon icon={icon} className={css.promptIcon} />
- {text}
- </button>
+ <p className={css.promptText}>{text}</p>
+ </Button>
);
}
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,19 +1,14 @@
div.promptButtonContainer {
display: flex;
}
+
button.promptButton {
- font-size: var(--m-font-16);
- font-weight: var(--semi-bold);
- cursor: pointer;
- margin: 0.5rem;
- padding: 1.2rem;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
flex: 1;
- border-radius: 0.4rem;
- border: none;
+ margin: 0.5rem;
+}
+
+p.promptText {
+ font-weight: var(--semi-bold);
}
svg.promptIcon {
diff --git a/web/chat/relationship-prompt/relationship-prompt.js b/web/chat/relationship-prompt/relationship-prompt.js
--- a/web/chat/relationship-prompt/relationship-prompt.js
+++ b/web/chat/relationship-prompt/relationship-prompt.js
@@ -12,6 +12,7 @@
import { userRelationshipStatus } from 'lib/types/relationship-types';
import type { ThreadInfo } from 'lib/types/thread-types';
+import { buttonThemes } from '../../components/button.react';
import RelationshipPromptButton from './relationship-prompt-button';
import RelationshipPromptButtonContainer from './relationship-prompt-button-container';
@@ -36,7 +37,7 @@
<RelationshipPromptButton
text="Block User"
icon={faUserShield}
- color="--relationship-button-red"
+ buttonColor={buttonThemes.danger}
onClick={blockUser}
/>
</RelationshipPromptButtonContainer>
@@ -50,7 +51,7 @@
<RelationshipPromptButton
text="Unblock User"
icon={faUserShield}
- color="--relationship-button-green"
+ buttonColor={buttonThemes.success}
onClick={unblockUser}
/>
</RelationshipPromptButtonContainer>
@@ -61,13 +62,13 @@
<RelationshipPromptButton
text="Accept Friend Request"
icon={faUserPlus}
- color="--relationship-button-green"
+ buttonColor={buttonThemes.success}
onClick={friendUser}
/>
<RelationshipPromptButton
text="Reject Friend Request"
icon={faUserSlash}
- color="--relationship-button-red"
+ buttonColor={buttonThemes.danger}
onClick={unfriendUser}
/>
</RelationshipPromptButtonContainer>
@@ -78,7 +79,7 @@
<RelationshipPromptButton
text="Withdraw Friend Request"
icon={faUserMinus}
- color="--relationship-button-red"
+ buttonColor={buttonThemes.danger}
onClick={unfriendUser}
/>
</RelationshipPromptButtonContainer>
@@ -89,13 +90,13 @@
<RelationshipPromptButton
text="Add Friend"
icon={faUserPlus}
- color="--relationship-button-green"
+ buttonColor={buttonThemes.success}
onClick={friendUser}
/>
<RelationshipPromptButton
text="Block User"
icon={faUserShield}
- color="--relationship-button-red"
+ buttonColor={buttonThemes.danger}
onClick={blockUser}
/>
</RelationshipPromptButtonContainer>

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 26, 7:27 PM (10 h, 36 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2704601
Default Alt Text
D5324.id17709.diff (4 KB)

Event Timeline