Page MenuHomePhabricator
Files F3529633

D5343.diff
No OneTemporary
Actions

D5343.diff
View Options

diff --git a/web/apps/app-listing.react.js b/web/apps/app-listing.react.js
--- a/web/apps/app-listing.react.js
+++ b/web/apps/app-listing.react.js
@@ -13,6 +13,7 @@
} from 'lib/reducers/enabled-apps-reducer';
import type { SupportedApps } from 'lib/types/enabled-apps';
+import Button from '../components/button.react';
import SWMansionIcon from '../SWMansionIcon.react';
import css from './apps.css';
@@ -52,18 +53,15 @@
</div>
);
}
- const iconClasses = classnames(
- css.appListingIcon,
- css.appListingIconState,
- {
- [css.iconEnabled]: enabled,
- [css.iconDisabled]: !enabled,
- },
- );
+ const iconClasses = classnames({
+ [css.appListingIconState]: true,
+ [css.iconEnabled]: enabled,
+ [css.iconDisabled]: !enabled,
+ });
return (
- <div className={iconClasses} onClick={switchAppState}>
+ <Button className={iconClasses} onClick={switchAppState}>
<FontAwesomeIcon icon={enabled ? faCheckCircle : faPlusCircle} />
- </div>
+ </Button>
);
}, [enabled, readOnly, switchAppState]);
return (
diff --git a/web/apps/apps.css b/web/apps/apps.css
--- a/web/apps/apps.css
+++ b/web/apps/apps.css
@@ -46,7 +46,8 @@
align-items: center;
}
-div.appListingIconState {
+.appListingIconState {
+ padding: 0 20px;
font-size: var(--xl-font-20);
}
@@ -54,10 +55,10 @@
color: var(--app-list-icon-read-only-color);
}
-div.iconEnabled {
+.iconEnabled {
color: var(--app-list-icon-enabled-color);
}
-div.iconDisabled {
+.iconDisabled {
color: var(--app-list-icon-disabled-color);
}
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
@@ -34,10 +34,7 @@
flex-grow: 1;
}
-div.closeSearch {
- cursor: pointer;
- display: flex;
- align-items: center;
+.closeSearch {
color: var(--thread-creation-close-search-color);
margin: 0 8px;
}
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
@@ -174,9 +174,9 @@
placeholder="Select users for chat"
/>
</div>
- <div className={css.closeSearch} onClick={onCloseSearch}>
+ <Button className={css.closeSearch} onClick={onCloseSearch}>
<SWMansionIcon size={25} icon="cross" />
- </div>
+ </Button>
</div>
{tagsList}
{userSearchResultList}
diff --git a/web/chat/chat-thread-list-item-menu.react.js b/web/chat/chat-thread-list-item-menu.react.js
--- a/web/chat/chat-thread-list-item-menu.react.js
+++ b/web/chat/chat-thread-list-item-menu.react.js
@@ -6,6 +6,7 @@
import useToggleUnreadStatus from 'lib/hooks/toggle-unread-status';
import type { ThreadInfo } from 'lib/types/thread-types';
+import Button from '../components/button.react';
import { useThreadIsActive } from '../selectors/nav-selectors';
import SWMansionIcon from '../SWMansionIcon.react';
import css from './chat-thread-list-item-menu.css';
@@ -59,14 +60,14 @@
});
return (
<div className={menuCls} onMouseLeave={hideMenu}>
- <button onClick={toggleMenu}>
+ <Button onClick={toggleMenu}>
<SWMansionIcon icon="menu-vertical" size={menuIconSize} />
- </button>
+ </Button>
<div>
- <button className={btnCls} onClick={onToggleUnreadStatusClicked}>
+ <Button className={btnCls} onClick={onToggleUnreadStatusClicked}>
<SWMansionIcon className={css.mailIcon} icon="mail" size={18} />
{toggleUnreadStatusButtonText}
- </button>
+ </Button>
</div>
</div>
);
diff --git a/web/components/clear-search-button.react.js b/web/components/clear-search-button.react.js
--- a/web/components/clear-search-button.react.js
+++ b/web/components/clear-search-button.react.js
@@ -4,6 +4,7 @@
import * as React from 'react';
import SWMansionIcon from '../SWMansionIcon.react';
+import Button from './button.react';
import css from './search.css';
type ClearSearchButtonProps = {
@@ -17,9 +18,9 @@
[css.clearSearchDisabled]: !active,
});
return (
- <button className={searchClassNames} onClick={onClick}>
+ <Button className={searchClassNames} onClick={onClick}>
<SWMansionIcon icon="cross" size={12} />
- </button>
+ </Button>
);
}
diff --git a/web/components/label.css b/web/components/label.css
--- a/web/components/label.css
+++ b/web/components/label.css
@@ -7,10 +7,6 @@
}
button.close {
- display: flex;
- align-items: center;
margin-left: 4px;
- background: transparent;
- border: none;
color: inherit;
}
diff --git a/web/components/label.react.js b/web/components/label.react.js
--- a/web/components/label.react.js
+++ b/web/components/label.react.js
@@ -3,6 +3,7 @@
import * as React from 'react';
import SWMansionIcon from '../SWMansionIcon.react';
+import Button from './button.react';
import css from './label.css';
type Props = {
@@ -36,9 +37,9 @@
return null;
}
return (
- <button className={css.close} onClick={onClose}>
+ <Button className={css.close} onClick={onClose}>
<SWMansionIcon icon="cross" size={size} />
- </button>
+ </Button>
);
}, [onClose, size]);
diff --git a/web/components/menu-item.react.js b/web/components/menu-item.react.js
--- a/web/components/menu-item.react.js
+++ b/web/components/menu-item.react.js
@@ -4,6 +4,7 @@
import * as React from 'react';
import SWMansionIcon, { type Icon } from '../SWMansionIcon.react';
+import Button from './button.react';
import css from './menu.css';
type MenuItemProps = {
@@ -19,13 +20,14 @@
const itemClasses = classNames(css.menuAction, {
[css.menuActionDangerous]: dangerous,
});
+
return (
- <button className={itemClasses} onClick={onClick}>
+ <Button className={itemClasses} onClick={onClick}>
<div className={css.menuActionIcon}>
<SWMansionIcon size="100%" icon={icon} />
</div>
<div>{text}</div>
- </button>
+ </Button>
);
}
diff --git a/web/components/menu.css b/web/components/menu.css
--- a/web/components/menu.css
+++ b/web/components/menu.css
@@ -35,14 +35,10 @@
button.menuAction {
color: inherit;
z-index: 1;
- background-color: transparent;
padding: 12px 16px;
line-height: 1.5;
- border: none;
- cursor: pointer;
- display: flex;
- align-items: center;
font-size: inherit;
+ justify-content: start;
}
button.menuAction:hover {
diff --git a/web/components/search.css b/web/components/search.css
--- a/web/components/search.css
+++ b/web/components/search.css
@@ -30,10 +30,8 @@
button.clearSearch {
color: var(--search-clear-color);
transition: ease-in-out 0.15s;
- border: none;
background: var(--search-clear-bg);
border-radius: 50%;
- display: flex;
padding: 6px;
}
diff --git a/web/components/tabs-header.js b/web/components/tabs-header.js
--- a/web/components/tabs-header.js
+++ b/web/components/tabs-header.js
@@ -3,10 +3,11 @@
import classnames from 'classnames';
import * as React from 'react';
+import Button from './button.react';
import css from './tabs.css';
type Props<T: string> = {
- +children?: React.Node,
+ +children: React.Node,
+isActive: boolean,
+setTab: T => mixed,
+id: T,
@@ -19,9 +20,9 @@
});
const onClickSetTab = React.useCallback(() => setTab(id), [setTab, id]);
return (
- <div className={headerClasses} onClick={onClickSetTab}>
+ <Button className={headerClasses} onClick={onClickSetTab}>
{children}
- </div>
+ </Button>
);
}
diff --git a/web/components/tabs.css b/web/components/tabs.css
--- a/web/components/tabs.css
+++ b/web/components/tabs.css
@@ -6,26 +6,25 @@
max-height: 100%;
flex: 1;
}
+
div.tabsHeaderContainer {
display: flex;
}
-div.tabHeader {
+.tabHeader {
flex: 1;
padding: 16px;
- display: flex;
- justify-content: center;
+ font-size: var(--m-font-16);
color: var(--tabs-header-active-color);
border-bottom: 2px solid var(--tabs-header-active-border);
}
-div.backgroundTabHeader {
- cursor: pointer;
+.backgroundTabHeader {
color: var(--tabs-header-background-color);
border-bottom-color: var(--tabs-header-background-border);
}
-div.backgroundTabHeader:hover {
+.backgroundTabHeader:hover {
color: var(--tabs-header-background-color-hover);
border-bottom-color: var(--tabs-header-background-border-hover);
}
diff --git a/web/media/media.css b/web/media/media.css
--- a/web/media/media.css
+++ b/web/media/media.css
@@ -9,22 +9,18 @@
position: relative;
vertical-align: top;
}
-span.multimedia > span.multimediaImage {
- display: inline-flex;
- align-items: center;
- justify-content: center;
+span.multimedia > .multimediaImage {
position: relative;
min-height: 50px;
min-width: 50px;
}
-span.multimedia > span.multimediaImage > img {
+span.multimedia > .multimediaImage > img {
max-height: 200px;
max-width: 100%;
}
-span.multimedia > span.multimediaImage > svg.removeUpload {
+span.multimedia > .multimediaImage svg.removeUpload {
display: none;
position: absolute;
- cursor: pointer;
top: 3px;
right: 3px;
color: white;
@@ -32,7 +28,7 @@
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
background-color: rgba(34, 34, 34, 0.67);
}
-span.multimedia:hover > span.multimediaImage > svg.removeUpload {
+span.multimedia:hover > .multimediaImage svg.removeUpload {
display: inherit;
}
span.multimedia > svg.uploadError {
diff --git a/web/media/multimedia.react.js b/web/media/multimedia.react.js
--- a/web/media/multimedia.react.js
+++ b/web/media/multimedia.react.js
@@ -12,6 +12,7 @@
import { useModalContext } from 'lib/components/modal-provider.react';
+import Button from '../components/button.react';
import { type PendingMultimediaUpload } from '../input/input-state';
import css from './media.css';
import MultimediaModal from './multimedia-modal.react';
@@ -71,7 +72,9 @@
if (remove) {
removeButton = (
- <XCircleIcon onClick={this.remove} className={css.removeUpload} />
+ <Button onClick={this.remove}>
+ <XCircleIcon className={css.removeUpload} />
+ </Button>
);
}
}
@@ -85,13 +88,13 @@
const containerClasses = [css.multimedia, this.props.multimediaCSSClass];
return (
<span className={classNames(containerClasses)}>
- <span
+ <Button
className={classNames(imageContainerClasses)}
onClick={this.onClick}
>
<img src={this.props.uri} />
{removeButton}
- </span>
+ </Button>
{progressIndicator}
{errorIndicator}
</span>
@@ -109,9 +112,7 @@
remove(pendingUpload.localID);
};
- onClick: (event: SyntheticEvent<HTMLSpanElement>) => void = event => {
- event.stopPropagation();
-
+ onClick: () => void = () => {
const { pushModal, uri } = this.props;
pushModal(<MultimediaModal uri={uri} />);
};
diff --git a/web/modals/components/add-members-item.react.js b/web/modals/components/add-members-item.react.js
--- a/web/modals/components/add-members-item.react.js
+++ b/web/modals/components/add-members-item.react.js
@@ -4,6 +4,7 @@
import type { UserListItem } from 'lib/types/user-types';
+import Button from '../../components/button.react';
import css from './add-members.css';
type AddMembersItemProps = {
@@ -36,14 +37,14 @@
}, [canBeAdded, userAdded, userInfo.alertTitle]);
return (
- <button
+ <Button
className={css.addMemberItem}
onClick={onClickCallback}
disabled={!canBeAdded}
>
<div className={css.label}>{userInfo.username}</div>
<div className={css.label}>{action}</div>
- </button>
+ </Button>
);
}
diff --git a/web/modals/components/add-members.css b/web/modals/components/add-members.css
--- a/web/modals/components/add-members.css
+++ b/web/modals/components/add-members.css
@@ -5,14 +5,9 @@
}
button.addMemberItem {
- display: flex;
- flex-direction: row;
justify-content: space-between;
- align-items: center;
color: var(--add-members-item-color);
font-size: var(--l-font-18);
- background-color: transparent;
- border: none;
width: 100%;
}
diff --git a/web/modals/modal.css b/web/modals/modal.css
--- a/web/modals/modal.css
+++ b/web/modals/modal.css
@@ -15,13 +15,11 @@
width: 500px;
}
-span.modalClose {
- display: flex;
+.modalClose {
color: var(--modal-close-color);
}
-span.modalClose:hover {
- cursor: pointer;
+.modalClose:hover {
color: var(--modal-close-color-hover);
}
diff --git a/web/modals/modal.react.js b/web/modals/modal.react.js
--- a/web/modals/modal.react.js
+++ b/web/modals/modal.react.js
@@ -5,6 +5,7 @@
import ModalOverlay from 'lib/components/modal-overlay.react';
+import Button from '../components/button.react';
import SWMansionIcon, { type Icon } from '../SWMansionIcon.react';
import css from './modal.css';
@@ -47,9 +48,9 @@
return null;
}
return (
- <span className={css.modalClose} onClick={onClose}>
+ <Button className={css.modalClose} onClick={onClose}>
<SWMansionIcon size={24} icon="cross" />
- </span>
+ </Button>
);
}, [onClose, withCloseButton]);
diff --git a/web/modals/threads/color-selector-button.css b/web/modals/threads/color-selector-button.css
--- a/web/modals/threads/color-selector-button.css
+++ b/web/modals/threads/color-selector-button.css
@@ -1,15 +1,11 @@
-div.container {
+.container {
height: 48px;
width: 48px;
border-radius: 24px;
- cursor: pointer;
- align-items: center;
- justify-content: center;
- display: flex;
}
-div.active,
-div.container:hover {
+.active,
+.container:hover {
background-color: var(--color-selector-active-bg);
}
diff --git a/web/modals/threads/color-selector-button.react.js b/web/modals/threads/color-selector-button.react.js
--- a/web/modals/threads/color-selector-button.react.js
+++ b/web/modals/threads/color-selector-button.react.js
@@ -4,6 +4,7 @@
import * as React from 'react';
import tinycolor from 'tinycolor2';
+import Button from '../../components/button.react';
import css from './color-selector-button.css';
type ColorSelectorButtonProps = {
@@ -31,9 +32,9 @@
}, [onColorSelection, color]);
return (
- <div onClick={onColorSplotchClicked} className={containerClassName}>
+ <Button onClick={onColorSplotchClicked} className={containerClassName}>
<div className={css.colorSplotch} style={colorSplotchStyle} />
- </div>
+ </Button>
);
}
diff --git a/web/modals/threads/sidebars/sidebar.react.js b/web/modals/threads/sidebars/sidebar.react.js
--- a/web/modals/threads/sidebars/sidebar.react.js
+++ b/web/modals/threads/sidebars/sidebar.react.js
@@ -7,6 +7,7 @@
import { getMessagePreview } from 'lib/shared/message-utils';
import { shortAbsoluteDate } from 'lib/utils/date-utils';
+import Button from '../../../components/button.react';
import { getDefaultTextMessageRules } from '../../../markdown/rules.react';
import { useSelector } from '../../../redux/redux-utils';
import { useOnClickThread } from '../../../selectors/nav-selectors';
@@ -58,7 +59,7 @@
}, [lastActivity, mostRecentMessageInfo, threadInfo]);
return (
- <button className={css.sidebarContainer} onClick={onClickThread}>
+ <Button className={css.sidebarContainer} onClick={onClickThread}>
<img
className={css.sidebarArrow}
src={
@@ -72,7 +73,7 @@
<div className={css.longTextEllipsis}>{threadInfo.uiName}</div>
<div className={css.lastMessage}>{lastMessage}</div>
</div>
- </button>
+ </Button>
);
}
diff --git a/web/modals/threads/sidebars/sidebars-modal.css b/web/modals/threads/sidebars/sidebars-modal.css
--- a/web/modals/threads/sidebars/sidebars-modal.css
+++ b/web/modals/threads/sidebars/sidebars-modal.css
@@ -18,13 +18,10 @@
}
button.sidebarContainer {
- cursor: pointer;
- display: flex;
padding: 0 16px;
column-gap: 8px;
align-items: flex-start;
width: 100%;
- border: none;
font-size: inherit;
text-align: inherit;
line-height: inherit;
diff --git a/web/modals/threads/subchannels/subchannel.react.js b/web/modals/threads/subchannels/subchannel.react.js
--- a/web/modals/threads/subchannels/subchannel.react.js
+++ b/web/modals/threads/subchannels/subchannel.react.js
@@ -7,6 +7,7 @@
import { getMessagePreview } from 'lib/shared/message-utils';
import { shortAbsoluteDate } from 'lib/utils/date-utils';
+import Button from '../../../components/button.react';
import { getDefaultTextMessageRules } from '../../../markdown/rules.react';
import { useSelector } from '../../../redux/redux-utils';
import { useOnClickThread } from '../../../selectors/nav-selectors';
@@ -62,13 +63,13 @@
}, [lastActivity, mostRecentMessageInfo, threadInfo]);
return (
- <div className={css.subchannelContainer} onClick={onClickThread}>
+ <Button className={css.subchannelContainer} onClick={onClickThread}>
<SWMansionIcon icon="message-square" size={22} />
<div className={css.subchannelInfo}>
<div className={css.longTextEllipsis}>{threadInfo.uiName}</div>
<div className={css.lastMessage}>{lastMessage}</div>
</div>
- </div>
+ </Button>
);
}
diff --git a/web/modals/threads/subchannels/subchannels-modal.css b/web/modals/threads/subchannels/subchannels-modal.css
--- a/web/modals/threads/subchannels/subchannels-modal.css
+++ b/web/modals/threads/subchannels/subchannels-modal.css
@@ -2,8 +2,6 @@
display: flex;
flex-direction: column;
overflow: auto;
- line-height: var(--line-height-text);
- color: var(--subchannels-modal-color);
row-gap: 8px;
width: 383px;
height: 458px;
@@ -13,14 +11,16 @@
text-align: center;
}
-div.subchannelContainer {
- cursor: pointer;
- display: flex;
+.subchannelContainer {
+ align-items: flex-start;
+ font-size: var(--m-font-18);
+ line-height: var(--line-height-text);
+ color: var(--subchannels-modal-color);
padding: 8px 16px;
column-gap: 8px;
}
-div.subchannelContainer:hover {
+.subchannelContainer:hover {
color: var(--subchannels-modal-color-hover);
}
@@ -33,6 +33,7 @@
}
div.longTextEllipsis {
+ align-self: flex-start;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
diff --git a/web/modals/threads/thread-picker-modal.css b/web/modals/threads/thread-picker-modal.css
--- a/web/modals/threads/thread-picker-modal.css
+++ b/web/modals/threads/thread-picker-modal.css
@@ -12,12 +12,16 @@
div.threadPickerOptionContainer {
display: flex;
- align-items: center;
+}
+
+.threadPickerOptionButton {
+ flex: 1;
+ justify-content: left;
padding: 12px 16px;
- cursor: pointer;
+ font-size: var(--m-font-16);
}
-div.threadPickerOptionContainer:hover {
+.threadPickerOptionButton:hover {
background-color: var(--thread-hover-bg);
border-radius: 8px;
}
diff --git a/web/modals/threads/thread-picker-modal.react.js b/web/modals/threads/thread-picker-modal.react.js
--- a/web/modals/threads/thread-picker-modal.react.js
+++ b/web/modals/threads/thread-picker-modal.react.js
@@ -8,6 +8,7 @@
import { onScreenEntryEditableThreadInfos } from 'lib/selectors/thread-selectors';
import type { ThreadInfo } from 'lib/types/thread-types';
+import Button from '../../components/button.react';
import Search from '../../components/search.react';
import { useSelector } from '../../redux/redux-utils';
import Modal, { type ModalOverridableProps } from '../modal.react';
@@ -35,13 +36,14 @@
);
return (
- <div
- key={threadInfo.id}
- className={css.threadPickerOptionContainer}
- onClick={onClickThreadOption}
- >
- <div style={splotchColorStyle} className={css.threadSplotch} />
- <div className={css.threadNameText}>{threadInfo.uiName}</div>
+ <div key={threadInfo.id} className={css.threadPickerOptionContainer}>
+ <Button
+ className={css.threadPickerOptionButton}
+ onClick={onClickThreadOption}
+ >
+ <div style={splotchColorStyle} className={css.threadSplotch} />
+ <div className={css.threadNameText}>{threadInfo.uiName}</div>
+ </Button>
</div>
);
}
diff --git a/web/settings/relationship/add-users-list-item.react.js b/web/settings/relationship/add-users-list-item.react.js
--- a/web/settings/relationship/add-users-list-item.react.js
+++ b/web/settings/relationship/add-users-list-item.react.js
@@ -4,6 +4,7 @@
import type { AccountUserInfo } from 'lib/types/user-types.js';
+import Button from '../../components/button.react';
import css from './add-users-list.css';
type Props = {
@@ -18,10 +19,10 @@
userInfo.id,
]);
return (
- <button className={css.addUserButton} onClick={addUser}>
+ <Button className={css.addUserButton} onClick={addUser}>
<div className={css.addUserButtonUsername}>{userInfo.username}</div>
Add
- </button>
+ </Button>
);
}
diff --git a/web/settings/relationship/add-users-list.css b/web/settings/relationship/add-users-list.css
--- a/web/settings/relationship/add-users-list.css
+++ b/web/settings/relationship/add-users-list.css
@@ -20,15 +20,11 @@
}
.addUserButton {
- display: flex;
- flex-direction: row;
justify-content: space-between;
padding: 16px;
color: var(--relationship-modal-color);
font-size: var(--l-font-18);
line-height: var(--line-height-display);
- background: transparent;
- border: none;
}
.addUserButtonUsername {

File Metadata

Mime Type
text/plain
Expires
Wed, Dec 25, 8:30 PM (12 h, 54 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2703098
Default Alt Text
D5343.diff (21 KB)

Event Timeline