Page MenuHomePhabricator
Files F3261457

D5321.id17433.diff
No OneTemporary
Actions

D5321.id17433.diff
View Options

diff --git a/web/components/button.react.js b/web/components/button.react.js
--- a/web/components/button.react.js
+++ b/web/components/button.react.js
@@ -5,17 +5,20 @@
import css from './button.css';
-export type ButtonVariant =
- | 'primary'
- | 'secondary'
+export type ButtonVariant = 'primary' | 'secondary' | 'round';
+export type ButtonColor =
| 'success'
| 'danger'
- | 'round';
+ | {
+ +backgroundColor: string,
+ +color?: string,
+ };
export type ButtonProps = {
+onClick: (event: SyntheticEvent<HTMLButtonElement>) => mixed,
+children: React.Node,
+variant?: ButtonVariant,
+ +color?: ButtonColor,
+type?: string,
+disabled?: boolean,
+className?: string,
@@ -26,11 +29,17 @@
onClick,
children,
variant = 'primary',
+ color,
type,
disabled = false,
className = '',
} = props;
- const btnCls = classnames(css.btn, css[variant]);
+
+ const btnCls = classnames(
+ css.btn,
+ css[variant],
+ typeof color === 'string' ? css[color] : null,
+ );
return (
<button
@@ -38,6 +47,7 @@
className={`${btnCls} ${className}`}
onClick={onClick}
disabled={disabled}
+ style={typeof color !== 'string' ? color : null}
>
{children}
</button>
diff --git a/web/modals/chat/sidebar-promote-modal.react.js b/web/modals/chat/sidebar-promote-modal.react.js
--- a/web/modals/chat/sidebar-promote-modal.react.js
+++ b/web/modals/chat/sidebar-promote-modal.react.js
@@ -37,7 +37,12 @@
<Button onClick={onClose} type="submit" variant="secondary">
Cancel
</Button>
- <Button onClick={handleConfirm} type="submit" variant="danger">
+ <Button
+ onClick={handleConfirm}
+ type="submit"
+ variant="primary"
+ color="danger"
+ >
Promote to channel
</Button>
</div>
diff --git a/web/modals/threads/confirm-leave-thread-modal.react.js b/web/modals/threads/confirm-leave-thread-modal.react.js
--- a/web/modals/threads/confirm-leave-thread-modal.react.js
+++ b/web/modals/threads/confirm-leave-thread-modal.react.js
@@ -35,7 +35,12 @@
<Button variant="secondary" onClick={onClose}>
Cancel
</Button>
- <Button variant="danger" onClick={onConfirm} type="submit">
+ <Button
+ variant="primary"
+ color="danger"
+ onClick={onConfirm}
+ type="submit"
+ >
Yes, leave chat
</Button>
</div>
diff --git a/web/modals/threads/settings/thread-settings-delete-tab.react.js b/web/modals/threads/settings/thread-settings-delete-tab.react.js
--- a/web/modals/threads/settings/thread-settings-delete-tab.react.js
+++ b/web/modals/threads/settings/thread-settings-delete-tab.react.js
@@ -118,7 +118,8 @@
<SubmitSection
errorMessage={errorMessage}
onClick={onDelete}
- variant="danger"
+ variant="primary"
+ color="danger"
disabled={
threadSettingsOperationInProgress || accountPassword.length === 0
}
diff --git a/web/modals/threads/settings/thread-settings-relationship-button.react.js b/web/modals/threads/settings/thread-settings-relationship-button.react.js
--- a/web/modals/threads/settings/thread-settings-relationship-button.react.js
+++ b/web/modals/threads/settings/thread-settings-relationship-button.react.js
@@ -51,21 +51,21 @@
const { username } = otherUserInfo;
invariant(username, 'Other username should be specified');
- let variant = 'primary';
+ let color;
if (relationshipButton === relationshipButtons.FRIEND) {
- variant = 'success';
+ color = 'success';
} else if (relationshipButton === relationshipButtons.UNFRIEND) {
- variant = 'danger';
+ color = 'danger';
} else if (relationshipButton === relationshipButtons.BLOCK) {
- variant = 'danger';
+ color = 'danger';
} else if (relationshipButton === relationshipButtons.UNBLOCK) {
- variant = 'success';
+ color = 'success';
} else if (relationshipButton === relationshipButtons.ACCEPT) {
- variant = 'success';
+ color = 'success';
} else if (relationshipButton === relationshipButtons.REJECT) {
- variant = 'danger';
+ color = 'danger';
} else if (relationshipButton === relationshipButtons.WITHDRAW) {
- variant = 'danger';
+ color = 'danger';
}
const { text, action } = React.useMemo(() => {
@@ -127,7 +127,12 @@
}, [dispatchActionPromise, updateRelationshipsActionPromise]);
return (
- <Button variant={variant} onClick={onClick} disabled={disabled}>
+ <Button
+ variant="primary"
+ color={color}
+ onClick={onClick}
+ disabled={disabled}
+ >
<div className={css.relationshipButtonContent}>
{icon}
<div className={css.relationshipButtonText}>{text}</div>
diff --git a/web/settings/account-delete-modal.react.js b/web/settings/account-delete-modal.react.js
--- a/web/settings/account-delete-modal.react.js
+++ b/web/settings/account-delete-modal.react.js
@@ -89,7 +89,8 @@
/>
<div className={css.form_footer}>
<Button
- variant="danger"
+ variant="primary"
+ color="danger"
type="submit"
onClick={this.onDelete}
disabled={inputDisabled}
diff --git a/web/settings/danger-zone.react.js b/web/settings/danger-zone.react.js
--- a/web/settings/danger-zone.react.js
+++ b/web/settings/danger-zone.react.js
@@ -20,7 +20,8 @@
<h5 className={css.subheading}>Delete Account</h5>
<Button
onClick={onDeleteAccountClick}
- variant="danger"
+ variant="primary"
+ color="danger"
className={css.button}
>
Delete Account
diff --git a/web/settings/relationship/add-users-list-modal.react.js b/web/settings/relationship/add-users-list-modal.react.js
--- a/web/settings/relationship/add-users-list-modal.react.js
+++ b/web/settings/relationship/add-users-list-modal.react.js
@@ -7,7 +7,7 @@
RelationshipAction,
} from 'lib/types/relationship-types.js';
-import type { ButtonVariant } from '../../components/button.react.js';
+import type { ButtonColor } from '../../components/button.react.js';
import SearchModal from '../../modals/search-modal.react';
import AddUsersList from './add-users-list.react.js';
@@ -16,7 +16,7 @@
+name: string,
+excludedStatuses: $ReadOnlySet<UserRelationshipStatus>,
+confirmButtonContent: React.Node,
- +confirmButtonVariant?: ButtonVariant,
+ +confirmButtonColor?: ButtonColor,
+relationshipAction: RelationshipAction,
};
@@ -26,7 +26,7 @@
name,
excludedStatuses,
confirmButtonContent,
- confirmButtonVariant = 'primary',
+ confirmButtonColor,
relationshipAction,
} = props;
@@ -36,7 +36,7 @@
searchText={searchText}
excludedStatuses={excludedStatuses}
confirmButtonContent={confirmButtonContent}
- confirmButtonVariant={confirmButtonVariant}
+ confirmButtonColor={confirmButtonColor}
relationshipAction={relationshipAction}
closeModal={closeModal}
/>
@@ -44,7 +44,7 @@
[
excludedStatuses,
confirmButtonContent,
- confirmButtonVariant,
+ confirmButtonColor,
relationshipAction,
closeModal,
],
diff --git a/web/settings/relationship/add-users-list.react.js b/web/settings/relationship/add-users-list.react.js
--- a/web/settings/relationship/add-users-list.react.js
+++ b/web/settings/relationship/add-users-list.react.js
@@ -20,7 +20,7 @@
} from 'lib/utils/action-utils.js';
import Button from '../../components/button.react.js';
-import type { ButtonVariant } from '../../components/button.react.js';
+import type { ButtonColor } from '../../components/button.react.js';
import Label from '../../components/label.react.js';
import LoadingIndicator from '../../loading-indicator.react.js';
import { useSelector } from '../../redux/redux-utils.js';
@@ -36,7 +36,7 @@
+excludedStatuses?: $ReadOnlySet<UserRelationshipStatus>,
+closeModal: () => void,
+confirmButtonContent: React.Node,
- +confirmButtonVariant: ButtonVariant,
+ +confirmButtonColor?: ButtonColor,
+relationshipAction: RelationshipAction,
};
@@ -46,7 +46,7 @@
excludedStatuses = new Set(),
closeModal,
confirmButtonContent,
- confirmButtonVariant,
+ confirmButtonColor,
relationshipAction,
} = props;
@@ -238,7 +238,8 @@
<Button
onClick={confirmSelection}
disabled={pendingUserIDs.size === 0 || loadingStatus === 'loading'}
- variant={confirmButtonVariant}
+ variant="primary"
+ color={confirmButtonColor}
>
<div className={css.confirmButtonContainer}>{buttonContent}</div>
</Button>
diff --git a/web/settings/relationship/block-users-modal.react.js b/web/settings/relationship/block-users-modal.react.js
--- a/web/settings/relationship/block-users-modal.react.js
+++ b/web/settings/relationship/block-users-modal.react.js
@@ -36,7 +36,7 @@
name="Block Users"
excludedStatuses={excludedStatuses}
confirmButtonContent={buttonContent}
- confirmButtonVariant="danger"
+ confirmButtonColor="danger"
relationshipAction={relationshipActions.BLOCK}
/>
);

File Metadata

Mime Type
text/plain
Expires
Sat, Nov 16, 11:03 PM (20 h, 5 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2506873
Default Alt Text
D5321.id17433.diff (9 KB)

Event Timeline