Page MenuHomePhorge
Files F33464949

D5322.1769033597.diff
No OneTemporary
Actions

Size
7 KB
Referenced Files
None
Subscribers
None

D5322.1769033597.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,18 +47,20 @@
flex-direction: column;
overflow: auto;
padding: 0 12px 8px;
+ list-style-type: none;
}
-li.searchResultsItem {
+.searchResultsItem {
display: flex;
- flex-direction: row;
- align-items: center;
+}
+
+.searchResultsButton {
justify-content: space-between;
+ flex: 1;
padding: 8px 12px;
- cursor: pointer;
}
-li.searchResultsItem:hover {
+.searchResultsButton:hover {
background-color: var(--thread-creation-search-item-bg-hover);
}
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,24 @@
}
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={{
+ backgroundColor: 'transparent',
+ 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
@@ -1,12 +1,12 @@
.btn {
display: flex;
+ flex-direction: row;
align-items: center;
justify-content: center;
- background: var(--settings-btn-bg);
- border: 1px solid transparent;
+ border: none;
+ border-radius: 4px;
font-size: var(--m-font-16);
padding: 12px 24px;
- border-radius: 4px;
cursor: pointer;
}
@@ -37,6 +37,7 @@
background: var(--btn-bg-outline);
color: var(--fg);
border-color: var(--btn-outline-border);
+ border: 1px solid var(--btn-secondary-border);
}
.outline:hover {
@@ -74,8 +75,15 @@
}
.round {
+ background: var(--settings-btn-bg);
width: 30px;
height: 30px;
border-radius: 50%;
padding: 0;
}
+
+.text {
+ background: transparent;
+ white-space: nowrap;
+ padding: 0;
+}
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 =
| 'success'
| 'danger'
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
@@ -9,6 +9,7 @@
useServerCall,
} from 'lib/utils/action-utils';
+import Button from '../components/button.react';
import { useModalContext } from '../modals/modal-provider.react';
import { useSelector } from '../redux/redux-utils';
import SWMansionIcon from '../SWMansionIcon.react';
@@ -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>

File Metadata

Mime Type
text/plain
Expires
Wed, Jan 21, 10:13 PM (17 h, 52 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5972002
Default Alt Text
D5322.1769033597.diff (7 KB)

Event Timeline