Page MenuHomePhabricator
Files F3323227

D10436.diff
No OneTemporary
Actions

D10436.diff
View Options

diff --git a/web/components/add-button.css b/web/components/add-button.css
new file mode 100644
--- /dev/null
+++ b/web/components/add-button.css
@@ -0,0 +1,14 @@
+.container {
+ display: flex;
+}
+
+.addButton {
+ background-color: var(--button-background-secondary-default);
+ border-radius: 4px;
+ color: var(--button-label-secondary-default);
+}
+
+.addButton:hover {
+ cursor: pointer;
+ background-color: var(--button-background-secondary-hover);
+}
diff --git a/web/components/add-button.react.js b/web/components/add-button.react.js
new file mode 100644
--- /dev/null
+++ b/web/components/add-button.react.js
@@ -0,0 +1,23 @@
+// @flow
+
+import * as React from 'react';
+
+import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
+
+import css from './add-button.css';
+
+type Props = {
+ +onClick: () => mixed,
+};
+
+function AddButton(props: Props): React.Node {
+ const { onClick } = props;
+
+ return (
+ <div onClick={onClick} className={css.container}>
+ <SWMansionIcon icon="plus-small" size={24} className={css.addButton} />
+ </div>
+ );
+}
+
+export default AddButton;
diff --git a/web/settings/keyserver-selection-list.css b/web/settings/keyserver-selection-list.css
--- a/web/settings/keyserver-selection-list.css
+++ b/web/settings/keyserver-selection-list.css
@@ -18,14 +18,3 @@
font-weight: var(--semi-bold);
line-height: var(--line-height-display);
}
-
-.addButton {
- background-color: var(--button-background-secondary-default);
- border-radius: 4px;
- color: var(--button-label-secondary-default);
-}
-
-.addButton:hover {
- cursor: pointer;
- background-color: var(--button-background-secondary-hover);
-}
diff --git a/web/settings/keyserver-selection-list.react.js b/web/settings/keyserver-selection-list.react.js
--- a/web/settings/keyserver-selection-list.react.js
+++ b/web/settings/keyserver-selection-list.react.js
@@ -3,12 +3,12 @@
import * as React from 'react';
import { useModalContext } from 'lib/components/modal-provider.react.js';
-import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import { selectedKeyserversSelector } from 'lib/selectors/keyserver-selectors.js';
import type { SelectedKeyserverInfo } from 'lib/types/keyserver-types.js';
import KeyserverSelectionListItem from './keyserver-selection-list-item.react.js';
import css from './keyserver-selection-list.css';
+import AddButton from '../components/add-button.react.js';
import AddKeyserverModal from '../modals/keyserver-selection/add-keyserver-modal.react.js';
import { useSelector } from '../redux/redux-utils.js';
@@ -42,13 +42,7 @@
<div className={css.container}>
<div className={css.headerContainer}>
<h4 className={css.header}>Keyservers</h4>
- <div onClick={onClickAddKeyserver}>
- <SWMansionIcon
- icon="plus-small"
- size={26}
- className={css.addButton}
- />
- </div>
+ <AddButton onClick={onClickAddKeyserver} />
</div>
{selectedKeyservers}
</div>

File Metadata

Mime Type
text/plain
Expires
Thu, Nov 21, 3:24 AM (22 h, 4 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2552379
Default Alt Text
D10436.diff (3 KB)

Event Timeline