Page MenuHomePhabricator
Files F3260376

D5321.id17582.diff
No OneTemporary
Actions

D5321.id17582.diff
View Options

diff --git a/web/components/button.css b/web/components/button.css
--- a/web/components/button.css
+++ b/web/components/button.css
@@ -2,10 +2,11 @@
display: flex;
align-items: center;
justify-content: center;
- background: var(--settings-btn-bg);
border: 1px solid transparent;
font-size: var(--m-font-16);
padding: 12px 24px;
+ background: var(--background-color);
+ color: var(--fg);
border-radius: 4px;
cursor: pointer;
}
@@ -13,64 +14,17 @@
.btn:hover {
transition-duration: 200ms;
transition-property: background, color;
+ background-color: var(--hover-background-color);
}
.btn:disabled {
cursor: not-allowed;
color: var(--btn-disabled-color);
+ background: var(--disabled-background-color);
}
-.primary {
- background: var(--btn-bg-primary);
- color: var(--fg);
-}
-
-.primary:hover {
- background: var(--btn-bg-primary-hover);
-}
-
-.primary:disabled {
- background: var(--btn-bg-primary-disabled);
-}
-
-.secondary {
- background: var(--btn-bg-secondary);
- color: var(--fg);
- border-color: var(--btn-secondary-border);
-}
-
-.secondary:hover {
- background: var(--btn-bg-secondary-hover);
-}
-
-.secondary:disabled {
- background: var(--btn-bg-secondary-disabled);
-}
-
-.success {
- background: var(--btn-bg-success);
- color: var(--fg);
-}
-
-.success:hover {
- background: var(--btn-bg-success-hover);
-}
-
-.success:disabled {
- background: var(--btn-bg-success-disabled);
-}
-
-.danger {
- background: var(--btn-bg-danger);
- color: var(--fg);
-}
-
-.danger:hover {
- background: var(--btn-bg-danger-hover);
-}
-
-.danger:disabled {
- background: var(--btn-bg-danger-disabled);
+.outline {
+ border: 1px solid var(--btn-outline-border);
}
.round {
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
@@ -2,20 +2,46 @@
import classnames from 'classnames';
import * as React from 'react';
+import tinycolor from 'tinycolor2';
import css from './button.css';
-export type ButtonVariant =
- | 'primary'
- | 'secondary'
- | 'success'
- | 'danger'
- | 'round';
+export type ButtonVariant = 'filled' | 'outline' | 'round';
+export type ButtonColor = {
+ +backgroundColor: string,
+ +color?: string,
+ +hoverColor?: string,
+ +disabledColor?: string,
+};
+
+export const buttonThemes = {
+ standard: ({
+ backgroundColor: 'var(--btn-bg-filled)',
+ hoverColor: 'var(--btn-bg-filled-hover)',
+ disabledColor: 'var(--btn-bg-filled-disabled)',
+ }: ButtonColor),
+ danger: ({
+ backgroundColor: 'var(--btn-bg-danger)',
+ hoverColor: 'var(--btn-bg-danger-hover)',
+ disabledColor: 'var(--btn-bg-danger-disabled)',
+ }: ButtonColor),
+ success: ({
+ backgroundColor: 'var(--btn-bg-success)',
+ hoverColor: 'var(--btn-bg-success-hover)',
+ disabledColor: 'var(--btn-bg-success-disabled)',
+ }: ButtonColor),
+ outline: ({
+ backgroundColor: 'var(--btn-bg-outline)',
+ hoverColor: 'var(--btn-bg-outline-hover)',
+ disabledColor: 'var(--btn-bg-outline-disabled)',
+ }: ButtonColor),
+};
export type ButtonProps = {
+onClick: (event: SyntheticEvent<HTMLButtonElement>) => mixed,
+children: React.Node,
+variant?: ButtonVariant,
+ +buttonColor?: ButtonColor,
+type?: string,
+disabled?: boolean,
+className?: string,
@@ -25,19 +51,53 @@
const {
onClick,
children,
- variant = 'primary',
+ variant = 'filled',
+ buttonColor,
type,
disabled = false,
className = '',
} = props;
+
const btnCls = classnames(css.btn, css[variant]);
+ const style = React.useMemo(() => {
+ let color;
+ if (buttonColor) {
+ color = buttonColor;
+ } else if (variant === 'outline') {
+ color = buttonThemes.outline;
+ } else {
+ color = buttonThemes.standard;
+ }
+
+ let hoverColor;
+ if (color.hoverColor) {
+ hoverColor = color.hoverColor;
+ } else {
+ const col = tinycolor(color.backgroundColor);
+ if (col.isValid()) {
+ hoverColor = col.darken();
+ } else {
+ hoverColor = color.backgroundColor;
+ }
+ }
+
+ return {
+ 'color': color.color,
+ '--background-color': color.backgroundColor,
+ '--hover-background-color': hoverColor,
+ '--disabled-background-color':
+ color.disabledColor ?? color.backgroundColor,
+ };
+ }, [buttonColor, variant]);
+
return (
<button
type={type}
className={`${btnCls} ${className}`}
onClick={onClick}
disabled={disabled}
+ style={style}
>
{children}
</button>
diff --git a/web/components/stepper.react.js b/web/components/stepper.react.js
--- a/web/components/stepper.react.js
+++ b/web/components/stepper.react.js
@@ -37,7 +37,7 @@
return (
<Button
className={css.button}
- variant={type === 'prev' ? 'secondary' : 'primary'}
+ variant={type === 'prev' ? 'outline' : 'filled'}
disabled={disabled || loading}
onClick={onClick}
>
diff --git a/web/modals/alert.react.js b/web/modals/alert.react.js
--- a/web/modals/alert.react.js
+++ b/web/modals/alert.react.js
@@ -22,7 +22,7 @@
<Button
onClick={popModal}
type="submit"
- variant="primary"
+ variant="filled"
className={css.ok_button}
>
OK
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
@@ -4,7 +4,7 @@
import type { ThreadInfo } from 'lib/types/thread-types';
-import Button from '../../components/button.react';
+import Button, { buttonThemes } from '../../components/button.react';
import Modal from '../modal.react';
import css from './sidebar-promote-modal.css';
@@ -34,10 +34,15 @@
<p>{`Are you sure you want to promote "${uiName}"?`}</p>
<p>Promoting a thread to a channel cannot be undone.</p>
<div className={css.buttonContainer}>
- <Button onClick={onClose} type="submit" variant="secondary">
+ <Button onClick={onClose} type="submit" variant="outline">
Cancel
</Button>
- <Button onClick={handleConfirm} type="submit" variant="danger">
+ <Button
+ onClick={handleConfirm}
+ type="submit"
+ variant="filled"
+ buttonColor={buttonThemes.danger}
+ >
Promote to channel
</Button>
</div>
diff --git a/web/modals/threads/cant-leave-thread-modal.react.js b/web/modals/threads/cant-leave-thread-modal.react.js
--- a/web/modals/threads/cant-leave-thread-modal.react.js
+++ b/web/modals/threads/cant-leave-thread-modal.react.js
@@ -20,7 +20,7 @@
<Button
onClick={props.onClose}
type="submit"
- variant="primary"
+ variant="filled"
className={css.ok_button}
>
OK
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
@@ -4,7 +4,7 @@
import { type ThreadInfo } from 'lib/types/thread-types';
-import Button from '../../components/button.react';
+import Button, { buttonThemes } from '../../components/button.react';
import Modal from '../modal.react';
import css from './confirm-leave-thread-modal.css';
@@ -32,10 +32,15 @@
{'"?'}
</p>
<div className={css.buttonContainer}>
- <Button variant="secondary" onClick={onClose}>
+ <Button variant="outline" onClick={onClose}>
Cancel
</Button>
- <Button variant="danger" onClick={onConfirm} type="submit">
+ <Button
+ variant="filled"
+ buttonColor={buttonThemes.danger}
+ onClick={onConfirm}
+ type="submit"
+ >
Yes, leave chat
</Button>
</div>
diff --git a/web/modals/threads/members/add-members-modal.react.js b/web/modals/threads/members/add-members-modal.react.js
--- a/web/modals/threads/members/add-members-modal.react.js
+++ b/web/modals/threads/members/add-members-modal.react.js
@@ -147,12 +147,12 @@
/>
</div>
<div className={css.addMembersFooter}>
- <Button onClick={onClose} variant="secondary">
+ <Button onClick={onClose} variant="outline">
Cancel
</Button>
<Button
disabled={!pendingUsersToAdd.size}
- variant="primary"
+ variant="filled"
onClick={addUsers}
>
Add selected members
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
@@ -13,6 +13,7 @@
useServerCall,
} from 'lib/utils/action-utils';
+import { buttonThemes } from '../../../components/button.react';
import SWMansionIcon from '../../../SWMansionIcon.react';
import Input from '../../input.react';
import { useModalContext } from '../../modal-provider.react';
@@ -118,7 +119,8 @@
<SubmitSection
errorMessage={errorMessage}
onClick={onDelete}
- variant="danger"
+ variant="filled"
+ buttonColor={buttonThemes.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
@@ -29,7 +29,7 @@
useServerCall,
} from 'lib/utils/action-utils';
-import Button from '../../../components/button.react';
+import Button, { buttonThemes } from '../../../components/button.react';
import { useSelector } from '../../../redux/redux-utils';
import css from './thread-settings-relationship-tab.css';
@@ -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 = buttonThemes.success;
} else if (relationshipButton === relationshipButtons.UNFRIEND) {
- variant = 'danger';
+ color = buttonThemes.danger;
} else if (relationshipButton === relationshipButtons.BLOCK) {
- variant = 'danger';
+ color = buttonThemes.danger;
} else if (relationshipButton === relationshipButtons.UNBLOCK) {
- variant = 'success';
+ color = buttonThemes.success;
} else if (relationshipButton === relationshipButtons.ACCEPT) {
- variant = 'success';
+ color = buttonThemes.success;
} else if (relationshipButton === relationshipButtons.REJECT) {
- variant = 'danger';
+ color = buttonThemes.danger;
} else if (relationshipButton === relationshipButtons.WITHDRAW) {
- variant = 'danger';
+ color = buttonThemes.danger;
}
const { text, action } = React.useMemo(() => {
@@ -127,7 +127,12 @@
}, [dispatchActionPromise, updateRelationshipsActionPromise]);
return (
- <Button variant={variant} onClick={onClick} disabled={disabled}>
+ <Button
+ variant="filled"
+ buttonColor={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
@@ -17,7 +17,7 @@
useServerCall,
} from 'lib/utils/action-utils';
-import Button from '../components/button.react';
+import Button, { buttonThemes } from '../components/button.react';
import Input from '../modals/input.react';
import { useModalContext } from '../modals/modal-provider.react';
import Modal from '../modals/modal.react';
@@ -89,7 +89,8 @@
/>
<div className={css.form_footer}>
<Button
- variant="danger"
+ variant="filled"
+ buttonColor={buttonThemes.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
@@ -2,7 +2,7 @@
import * as React from 'react';
-import Button from '../components/button.react.js';
+import Button, { buttonThemes } from '../components/button.react';
import { useModalContext } from '../modals/modal-provider.react.js';
import AccountDeleteModal from './account-delete-modal.react';
import css from './danger-zone.css';
@@ -20,7 +20,8 @@
<h5 className={css.subheading}>Delete Account</h5>
<Button
onClick={onDeleteAccountClick}
- variant="danger"
+ variant="filled"
+ buttonColor={buttonThemes.danger}
className={css.button}
>
Delete Account
diff --git a/web/settings/password-change-modal.js b/web/settings/password-change-modal.js
--- a/web/settings/password-change-modal.js
+++ b/web/settings/password-change-modal.js
@@ -113,7 +113,7 @@
<div className={css['form-footer']}>
<Button
type="submit"
- variant="primary"
+ variant="filled"
onClick={this.onSubmit}
disabled={inputDisabled}
>
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;
@@ -232,13 +232,14 @@
<div className={css.userRowsContainer}>{userRows}</div>
{errors}
<div className={css.buttons}>
- <Button variant="secondary" onClick={closeModal}>
+ <Button variant="outline" onClick={closeModal}>
Cancel
</Button>
<Button
onClick={confirmSelection}
disabled={pendingUserIDs.size === 0 || loadingStatus === 'loading'}
- variant={confirmButtonVariant}
+ variant="filled"
+ buttonColor={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
@@ -9,6 +9,7 @@
userRelationshipStatus,
} from 'lib/types/relationship-types.js';
+import { buttonThemes } from '../../components/button.react';
import AddUsersListModal from './add-users-list-modal.react.js';
const excludedStatuses = new Set([
@@ -36,7 +37,7 @@
name="Block Users"
excludedStatuses={excludedStatuses}
confirmButtonContent={buttonContent}
- confirmButtonVariant="danger"
+ confirmButtonColor={buttonThemes.danger}
relationshipAction={relationshipActions.BLOCK}
/>
);
diff --git a/web/settings/relationship/user-list-row.css b/web/settings/relationship/user-list-row.css
--- a/web/settings/relationship/user-list-row.css
+++ b/web/settings/relationship/user-list-row.css
@@ -23,7 +23,7 @@
.button {
font-size: var(--s-font-14);
line-height: var(--line-height-text);
- color: var(--btn-bg-primary);
+ color: var(--btn-bg-filled);
cursor: pointer;
background: none;
border: none;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -60,12 +60,12 @@
--success: var(--success-dark-50);
/* Color Theme */
- --btn-bg-primary: var(--violet-dark-100);
- --btn-bg-primary-hover: var(--violet-dark-80);
- --btn-bg-primary-disabled: var(--shades-black-80);
- --btn-bg-secondary: var(--shades-black-90);
- --btn-bg-secondary-hover: var(--shades-black-80);
- --btn-bg-secondary-disabled: var(--shades-black-90);
+ --btn-bg-filled: var(--violet-dark-100);
+ --btn-bg-filled-hover: var(--violet-dark-80);
+ --btn-bg-filled-disabled: var(--shades-black-80);
+ --btn-bg-outline: var(--shades-black-90);
+ --btn-bg-outline-hover: var(--shades-black-80);
+ --btn-bg-outline-disabled: var(--shades-black-90);
--btn-bg-success: var(--success-dark-50);
--btn-bg-success-hover: var(--success-dark-90);
--btn-bg-success-disabled: var(--shades-black-80);
@@ -96,7 +96,7 @@
--help-color: var(--shades-black-60);
--breadcrumb-color: var(--shades-white-60);
--breadcrumb-color-unread: var(--shades-white-60);
- --btn-secondary-border: var(--shades-black-60);
+ --btn-outline-border: var(--shades-black-60);
--thread-color-read: var(--shades-black-60);
--thread-from-color-read: var(--shades-black-80);
--thread-last-message-color-read: var(--shades-black-60);

File Metadata

Mime Type
text/plain
Expires
Sat, Nov 16, 10:36 PM (20 h, 3 s)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2506154
Default Alt Text
D5321.id17582.diff (19 KB)

Event Timeline