Page MenuHomePhabricator
Files F3536896

D5322.id17707.diff
No OneTemporary
Actions

D5322.id17707.diff
View Options

diff --git a/web/chat/chat-message-list.css b/web/chat/chat-message-list.css
--- a/web/chat/chat-message-list.css
+++ b/web/chat/chat-message-list.css
@@ -141,21 +141,23 @@
}
div.failedSend {
- text-transform: uppercase;
display: flex;
justify-content: flex-end;
flex-shrink: 0;
- font-size: 14px;
margin-right: 30px;
padding-bottom: 6px;
}
-span.deliveryFailed {
+
+.deliveryFailed {
+ text-transform: uppercase;
+ font-size: 14px;
padding: 0 3px;
- color: #555555;
+ color: var(--fg);
}
-a.retrySend {
- padding: 0 3px;
- cursor: pointer;
+
+.retryButtonText {
+ text-transform: uppercase;
+ font-size: 14px;
}
div.messageBox > div.imageGrid {
diff --git a/web/chat/chat-thread-composer.css b/web/chat/chat-thread-composer.css
--- a/web/chat/chat-thread-composer.css
+++ b/web/chat/chat-thread-composer.css
@@ -47,21 +47,23 @@
flex-direction: column;
overflow: auto;
padding: 0 12px 8px;
+ list-style-type: none;
}
-li.searchResultsItem {
+.searchResultsItem {
display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- padding: 8px 12px;
- cursor: pointer;
}
-li.searchResultsItem:hover {
+.searchResultsItem:hover {
background-color: var(--thread-creation-search-item-bg-hover);
}
+.searchResultsButton {
+ justify-content: space-between;
+ flex: 1;
+ padding: 8px 12px;
+}
+
div.userName {
color: var(--fg);
}
diff --git a/web/chat/chat-thread-composer.react.js b/web/chat/chat-thread-composer.react.js
--- a/web/chat/chat-thread-composer.react.js
+++ b/web/chat/chat-thread-composer.react.js
@@ -8,6 +8,7 @@
import { threadIsPending } from 'lib/shared/thread-utils';
import type { AccountUserInfo, UserListItem } from 'lib/types/user-types';
+import Button from '../components/button.react';
import Label from '../components/label.react';
import Search from '../components/search.react';
import type { InputState } from '../input/input-state';
@@ -92,13 +93,15 @@
return (
<ul className={css.searchResultsContainer}>
{userListItems.map((userSearchResult: UserListItem) => (
- <li
- className={css.searchResultsItem}
- key={userSearchResult.id}
- onClick={() => onSelectUserFromSearch(userSearchResult.id)}
- >
- <div className={css.userName}>{userSearchResult.username}</div>
- <div className={css.userInfo}>{userSearchResult.alertTitle}</div>
+ <li key={userSearchResult.id} className={css.searchResultsItem}>
+ <Button
+ variant="text"
+ onClick={() => onSelectUserFromSearch(userSearchResult.id)}
+ className={css.searchResultsButton}
+ >
+ <div className={css.userName}>{userSearchResult.username}</div>
+ <div className={css.userInfo}>{userSearchResult.alertTitle}</div>
+ </Button>
</li>
))}
</ul>
diff --git a/web/chat/failed-send.react.js b/web/chat/failed-send.react.js
--- a/web/chat/failed-send.react.js
+++ b/web/chat/failed-send.react.js
@@ -12,6 +12,7 @@
} from 'lib/types/message-types';
import { type ThreadInfo } from 'lib/types/thread-types';
+import Button from '../components/button.react';
import { type InputState, InputStateContext } from '../input/input-state';
import { useSelector } from '../redux/redux-utils';
import css from './chat-message-list.css';
@@ -79,28 +80,23 @@
}
render() {
- const threadColor = {
- color: `#${this.props.threadInfo.color}`,
- };
return (
<div className={css.failedSend}>
- <span>Delivery failed.</span>
- <a
- onClick={this.retrySend}
- className={{
- ...css.retrySend,
- ...threadColor,
+ <span className={css.deliveryFailed}>Delivery failed.</span>
+ <Button
+ variant="text"
+ buttonColor={{
+ color: `#${this.props.threadInfo.color}`,
}}
+ onClick={this.retrySend}
>
- {'Retry?'}
- </a>
+ <span className={css.retryButtonText}>Retry?</span>
+ </Button>
</div>
);
}
- retrySend = (event: SyntheticEvent<HTMLAnchorElement>) => {
- event.stopPropagation();
-
+ retrySend = () => {
const { inputState } = this.props;
invariant(inputState, 'inputState should be set in FailedSend');
diff --git a/web/components/button.css b/web/components/button.css
--- a/web/components/button.css
+++ b/web/components/button.css
@@ -4,6 +4,7 @@
position: relative;
display: flex;
+ flex-direction: row;
align-items: center;
justify-content: center;
border: var(--border-width) solid transparent;
@@ -64,8 +65,16 @@
}
.round {
+ background: var(--settings-btn-bg);
width: 30px;
height: 30px;
border-radius: 50%;
padding: 0;
}
+
+.text {
+ background: transparent;
+ white-space: nowrap;
+ padding: 0;
+ border: none;
+}
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,7 +5,7 @@
import css from './button.css';
-export type ButtonVariant = 'filled' | 'outline' | 'round';
+export type ButtonVariant = 'filled' | 'outline' | 'round' | 'text';
export type ButtonColor = {
+backgroundColor?: string,
+color?: string,
@@ -49,12 +49,12 @@
const btnCls = classnames(css.btn, css[variant]);
- let style;
+ let style = {};
if (buttonColor) {
style = buttonColor;
} else if (variant === 'outline') {
style = buttonThemes.outline;
- } else {
+ } else if (variant === 'filled' || variant === 'round') {
style = buttonThemes.standard;
}
diff --git a/web/settings/account-settings.css b/web/settings/account-settings.css
--- a/web/settings/account-settings.css
+++ b/web/settings/account-settings.css
@@ -41,14 +41,9 @@
color: var(--fg);
}
-.button {
+.buttonText {
color: var(--account-button-color);
- background-color: transparent;
- font-size: var(--m-font-16);
- border: none;
- cursor: pointer;
line-height: var(--line-height-text);
- white-space: nowrap;
}
.passwordContainer {
diff --git a/web/settings/account-settings.react.js b/web/settings/account-settings.react.js
--- a/web/settings/account-settings.react.js
+++ b/web/settings/account-settings.react.js
@@ -10,6 +10,7 @@
useServerCall,
} from 'lib/utils/action-utils';
+import Button from '../components/button.react';
import { useSelector } from '../redux/redux-utils';
import SWMansionIcon from '../SWMansionIcon.react';
import css from './account-settings.css';
@@ -62,9 +63,9 @@
<span className={css.logoutLabel}>{'Logged in as '}</span>
<span className={css.username}>{username}</span>
</p>
- <button className={css.button} onClick={logOutUser}>
- Log out
- </button>
+ <Button variant="text" onClick={logOutUser}>
+ <p className={css.buttonText}>Log out</p>
+ </Button>
</li>
<li>
<span>Password</span>
@@ -80,15 +81,15 @@
</li>
<li>
<span>Friend List</span>
- <button className={css.button} onClick={openFriendList}>
- See List
- </button>
+ <Button variant="text" onClick={openFriendList}>
+ <p className={css.buttonText}>See List</p>
+ </Button>
</li>
<li>
<span>Block List</span>
- <button className={css.button} onClick={openBlockList}>
- See List
- </button>
+ <Button variant="text" onClick={openBlockList}>
+ <p className={css.buttonText}>See List</p>
+ </Button>
</li>
</ul>
</div>
diff --git a/web/settings/relationship/friend-list-row.react.js b/web/settings/relationship/friend-list-row.react.js
--- a/web/settings/relationship/friend-list-row.react.js
+++ b/web/settings/relationship/friend-list-row.react.js
@@ -1,17 +1,21 @@
// @flow
-import classnames from 'classnames';
import * as React from 'react';
import { useRelationshipCallbacks } from 'lib/hooks/relationship-prompt';
import { userRelationshipStatus } from 'lib/types/relationship-types';
+import Button from '../../components/button.react';
import MenuItem from '../../components/menu-item.react';
import Menu from '../../components/menu.react';
import SWMansionIcon from '../../SWMansionIcon.react';
import css from './user-list-row.css';
import type { UserRowProps } from './user-list.react';
+const dangerButtonColor = {
+ color: 'var(--btn-bg-danger)',
+};
+
function FriendListRow(props: UserRowProps): React.Node {
const { userInfo, onMenuVisibilityChange } = props;
@@ -19,12 +23,14 @@
const buttons = React.useMemo(() => {
if (userInfo.relationshipStatus === userRelationshipStatus.REQUEST_SENT) {
return (
- <button
- className={classnames([css.button, css.destructive])}
+ <Button
+ variant="text"
+ className={css.button}
+ buttonColor={dangerButtonColor}
onClick={unfriendUser}
>
Cancel request
- </button>
+ </Button>
);
}
if (
@@ -32,15 +38,17 @@
) {
return (
<>
- <button className={css.button} onClick={friendUser}>
+ <Button variant="text" className={css.button} onClick={friendUser}>
Accept
- </button>
- <button
- className={classnames([css.button, css.destructive])}
+ </Button>
+ <Button
+ variant="text"
+ className={css.button}
+ buttonColor={dangerButtonColor}
onClick={unfriendUser}
>
Reject
- </button>
+ </Button>
</>
);
}
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
@@ -24,14 +24,6 @@
font-size: var(--s-font-14);
line-height: var(--line-height-text);
color: var(--btn-bg-filled);
- cursor: pointer;
- background: none;
- border: none;
- white-space: nowrap;
-}
-
-.destructive {
- color: var(--btn-bg-danger);
}
.edit_menu {

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 26, 7:24 PM (12 h, 4 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2708253
Default Alt Text
D5322.id17707.diff (10 KB)

Event Timeline