Page MenuHomePhorge
Files F33059387

D5324.1768432147.diff
No OneTemporary
Actions

Size
4 KB
Referenced Files
None
Subscribers
None

D5324.1768432147.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,29 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import * as React from 'react';
+import Button from '../../components/button.react';
+import type { ButtonColor } from '../../components/button.react';
import css from './relationship-prompt.css';
type Props = {
+text: string,
+icon: IconDefinition,
- +color?: string,
- +textColor?: string,
+ +color: 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, color, onClick } = props;
return (
- <button className={css.promptButton} onClick={onClick} style={buttonStyle}>
+ <Button
+ variant="primary"
+ color={color}
+ 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
@@ -36,7 +36,7 @@
<RelationshipPromptButton
text="Block User"
icon={faUserShield}
- color="--relationship-button-red"
+ color="danger"
onClick={blockUser}
/>
</RelationshipPromptButtonContainer>
@@ -50,7 +50,7 @@
<RelationshipPromptButton
text="Unblock User"
icon={faUserShield}
- color="--relationship-button-green"
+ color="success"
onClick={unblockUser}
/>
</RelationshipPromptButtonContainer>
@@ -61,13 +61,13 @@
<RelationshipPromptButton
text="Accept Friend Request"
icon={faUserPlus}
- color="--relationship-button-green"
+ color="success"
onClick={friendUser}
/>
<RelationshipPromptButton
text="Reject Friend Request"
icon={faUserSlash}
- color="--relationship-button-red"
+ color="danger"
onClick={unfriendUser}
/>
</RelationshipPromptButtonContainer>
@@ -78,7 +78,7 @@
<RelationshipPromptButton
text="Withdraw Friend Request"
icon={faUserMinus}
- color="--relationship-button-red"
+ color="danger"
onClick={unfriendUser}
/>
</RelationshipPromptButtonContainer>
@@ -89,13 +89,13 @@
<RelationshipPromptButton
text="Add Friend"
icon={faUserPlus}
- color="--relationship-button-green"
+ color="success"
onClick={friendUser}
/>
<RelationshipPromptButton
text="Block User"
icon={faUserShield}
- color="--relationship-button-red"
+ color="danger"
onClick={blockUser}
/>
</RelationshipPromptButtonContainer>

File Metadata

Mime Type
text/plain
Expires
Wed, Jan 14, 11:09 PM (7 h, 25 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5934504
Default Alt Text
D5324.1768432147.diff (4 KB)

Event Timeline