Page MenuHomePhabricator
Files F3537021

D5324.id17493.diff
No OneTemporary
Actions

D5324.id17493.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,36 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import * as React from 'react';
+import Button from '../../components/button.react';
import css from './relationship-prompt.css';
type Props = {
+text: string,
+icon: IconDefinition,
- +color?: string,
- +textColor?: string,
+ +backgroundColor: string,
+onClick: () => void,
};
function RelationshipPromptButton(props: Props): React.Node {
- const { text, icon, color, textColor, onClick } = props;
- const buttonStyle = React.useMemo(
+ const { text, icon, backgroundColor, onClick } = props;
+
+ const buttonColor = React.useMemo(
() => ({
- backgroundColor: `var(${color ?? '--relationship-button-green'})`,
- color: `var(${textColor ?? '--relationship-button-text'})`,
+ backgroundColor: `var(${backgroundColor})`,
+ color: 'var(--relationship-button-text)',
}),
- [color, textColor],
+ [backgroundColor],
);
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,18 @@
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;
+}
+
+button.promptButton:hover {
+ transition-property: none;
+}
+
+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
@@ -36,7 +36,7 @@
<RelationshipPromptButton
text="Block User"
icon={faUserShield}
- color="--relationship-button-red"
+ backgroundColor="--relationship-button-red"
onClick={blockUser}
/>
</RelationshipPromptButtonContainer>
@@ -50,7 +50,7 @@
<RelationshipPromptButton
text="Unblock User"
icon={faUserShield}
- color="--relationship-button-green"
+ backgroundColor="--relationship-button-green"
onClick={unblockUser}
/>
</RelationshipPromptButtonContainer>
@@ -61,13 +61,13 @@
<RelationshipPromptButton
text="Accept Friend Request"
icon={faUserPlus}
- color="--relationship-button-green"
+ backgroundColor="--relationship-button-green"
onClick={friendUser}
/>
<RelationshipPromptButton
text="Reject Friend Request"
icon={faUserSlash}
- color="--relationship-button-red"
+ backgroundColor="--relationship-button-red"
onClick={unfriendUser}
/>
</RelationshipPromptButtonContainer>
@@ -78,7 +78,7 @@
<RelationshipPromptButton
text="Withdraw Friend Request"
icon={faUserMinus}
- color="--relationship-button-red"
+ backgroundColor="--relationship-button-red"
onClick={unfriendUser}
/>
</RelationshipPromptButtonContainer>
@@ -89,13 +89,13 @@
<RelationshipPromptButton
text="Add Friend"
icon={faUserPlus}
- color="--relationship-button-green"
+ backgroundColor="--relationship-button-green"
onClick={friendUser}
/>
<RelationshipPromptButton
text="Block User"
icon={faUserShield}
- color="--relationship-button-red"
+ backgroundColor="--relationship-button-red"
onClick={blockUser}
/>
</RelationshipPromptButtonContainer>

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 26, 7:50 PM (11 h, 32 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2708327
Default Alt Text
D5324.id17493.diff (4 KB)

Event Timeline