diff --git a/ui/component/common/input-radio-panel.jsx b/ui/component/common/input-radio-panel.jsx
deleted file mode 100644
index a64d0a084..000000000
--- a/ui/component/common/input-radio-panel.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-// @flow
-import React from 'react';
-import * as ICONS from 'constants/icons';
-import Button from 'component/button';
-import classnames from 'classnames';
-
-type Props = {
- onClick: (CommentServerDetails) => void,
- onRemove?: (CommentServerDetails) => void,
- active: boolean,
- serverDetails: CommentServerDetails,
-};
-
-const InputTogglePanel = (props: Props) => {
- const { onClick, active, serverDetails, onRemove } = props;
-
- return (
- <div
- onClick={() => onClick(serverDetails)}
- className={classnames('input-toggle-panel', { 'input-toggle-panel--active': active })}
- >
- <div className={'input-toggle-panel__details'}>
- <div className={'input-toggle-panel__name'}>{`${serverDetails.name}`}</div>
- <div className={'input-toggle-panel__url'}>{`${serverDetails.url}`}</div>
- </div>
- {onRemove && (
- <Button
- button="close"
- title={__('Remove custom comment server')}
- icon={ICONS.REMOVE}
- onClick={() => onRemove(serverDetails)}
- />
- )}
- {!onRemove && <div />}
- </div>
- );
-};
-
-export default InputTogglePanel;
diff --git a/ui/component/settingCommentsServer/internal/input-radio-panel-addCommentServer.jsx b/ui/component/settingCommentsServer/internal/input-radio-panel-addCommentServer.jsx
index e01ad140c..b484461d0 100644
--- a/ui/component/settingCommentsServer/internal/input-radio-panel-addCommentServer.jsx
+++ b/ui/component/settingCommentsServer/internal/input-radio-panel-addCommentServer.jsx
@@ -51,7 +51,7 @@ function ServerInputRow(props: Props) {
return (
<Form onSubmit={onSubmit}>
- <div className="input-toggle-panel--input">
+ <div className="setting-item-input">
<FormField
type="text"
label={__('Name')}
@@ -73,7 +73,7 @@ function ServerInputRow(props: Props) {
/>
</div>
</div>
- <div className="input-toggle-panel--input">
+ <div className="setting-item-input">
<FormField
label={'Use https'}
name="use_https"
@@ -83,9 +83,9 @@ function ServerInputRow(props: Props) {
/>
</div>
- <div className="section__actions">
+ <div className="section__actions setting-item-input">
<Button type="submit" button="primary" label={__('Add')} disabled={!validServerString || !nameString} />
- <Button type="button" button="link" onClick={() => onCancel(false)} label={__('Cancel')} />
+ <Button type="button" button="inverse" onClick={() => onCancel(false)} label={__('Cancel')} />
</div>
</Form>
);
diff --git a/ui/component/settingCommentsServer/view.jsx b/ui/component/settingCommentsServer/view.jsx
index 7ded7fee1..d17804d16 100644
--- a/ui/component/settingCommentsServer/view.jsx
+++ b/ui/component/settingCommentsServer/view.jsx
@@ -1,10 +1,10 @@
// @flow
-import { COMMENT_SERVER_API } from 'config'; // COMMENT_SERVER_NAME,
+import { COMMENT_SERVER_API, COMMENT_SERVER_NAME } from 'config';
import React from 'react';
import Comments from 'comments';
-import InputTogglePanel from 'component/common/input-radio-panel';
import ItemInputRow from './internal/input-radio-panel-addCommentServer';
import Button from 'component/button';
+import { FormField } from 'component/common/form-components/form-field';
type Props = {
customServerEnabled: boolean,
@@ -14,7 +14,7 @@ type Props = {
setCustomServers: (Array<CommentServerDetails>) => void,
customCommentServers: Array<CommentServerDetails>,
};
-const defaultServer = { name: 'Default', url: COMMENT_SERVER_API };
+const defaultServer = { name: COMMENT_SERVER_NAME, url: COMMENT_SERVER_API };
function SettingCommentsServer(props: Props) {
const {
customServerEnabled,
@@ -53,7 +53,7 @@ function SettingCommentsServer(props: Props) {
setAddServer(false);
};
- const handleRemoveServer = (serverItem) => {
+ const handleRemoveServer = (serverItem: CommentServerDetails) => {
handleSelectServer(defaultServer);
const newCustomServers = customCommentServers.slice().filter((server) => {
return server.url !== serverItem.url;
@@ -61,25 +61,36 @@ function SettingCommentsServer(props: Props) {
setCustomServers(newCustomServers);
};
+ const commentServerLabel = (serverDetails, onRemove) => (
+ <span className={'compound-label'}>
+ <span>{serverDetails.name}</span>
+ <span className="compound-label__details">{serverDetails.url}</span>
+ {onRemove && <Button button={'inverse'} label={__('Remove')} onClick={() => onRemove(serverDetails)} />}
+ </span>
+ );
+ const commentServerRadio = (customServerEnabled, customServerUrl, onClick, onRemove, serverDetails) => (
+ <FormField
+ type="radio"
+ checked={(!customServerEnabled && !onRemove) || (customServerEnabled && customServerUrl === serverDetails.url)}
+ onClick={() => onClick(serverDetails)}
+ label={commentServerLabel(serverDetails, onRemove)}
+ name={`${serverDetails.name}${serverDetails.url}`}
+ key={`${serverDetails.name}${serverDetails.url}`}
+ />
+ );
+
return (
<React.Fragment>
<div className={'fieldset-section'}>
- <InputTogglePanel onClick={handleSelectServer} active={!customServerEnabled} serverDetails={defaultServer} />
- {!!customCommentServers.length && <label>{__('Custom Servers')}</label>}
- {customCommentServers.map((server) => (
- <InputTogglePanel
- key={server.url}
- active={customServerEnabled && customServerUrl === server.url}
- onClick={handleSelectServer}
- serverDetails={server}
- onRemove={handleRemoveServer}
- />
- ))}
+ {commentServerRadio(customServerEnabled, customServerUrl, handleSelectServer, null, defaultServer)}
+ {customCommentServers.map((server) =>
+ commentServerRadio(customServerEnabled, customServerUrl, handleSelectServer, handleRemoveServer, server)
+ )}
</div>
<div className={'fieldset-section'}>
{!addServer && (
<div className="section__actions">
- <Button type="button" button="link" onClick={() => setAddServer(true)} label={__('Add A Server')} />
+ <Button type="button" button="inverse" onClick={() => setAddServer(true)} label={__('Add A Server')} />
</div>
)}
{addServer && <ItemInputRow update={handleAddServer} onCancel={setAddServer} />}
diff --git a/ui/scss/all.scss b/ui/scss/all.scss
index 6bd60d067..87257d350 100644
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@@ -68,4 +68,4 @@
@import 'component/wallet-tip-send';
@import 'component/swipe-list';
@import 'component/utils';
-@import 'component/input-radio-panel';
+@import 'component/settings';
diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss
index cddd06630..5183ea0c4 100644
--- a/ui/scss/component/_form-field.scss
+++ b/ui/scss/component/_form-field.scss
@@ -111,6 +111,21 @@ label {
.icon__lbc {
margin-bottom: 4px;
}
+
+ .compound-label {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: baseline;
+ *:not(:first-child) {
+ margin-left: var(--spacing-s);
+ }
+ .compount-label__strong {
+ }
+ .compound-label__details {
+ color: var(--color-text-subtitle);
+ }
+ }
}
input-submit {
diff --git a/ui/scss/component/_input-radio-panel.scss b/ui/scss/component/_input-radio-panel.scss
deleted file mode 100644
index 1c51e53c3..000000000
--- a/ui/scss/component/_input-radio-panel.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-.input-toggle-panel {
- padding: var(--spacing-m);
- margin-bottom: var(--spacing-m);
- width: 100%;
- background-color: var(--color-card-background);
- border-radius: var(--card-radius);
- overflow: hidden;
- border: 1px solid var(--color-border);
- display: flex;
- justify-content: space-between;
- .button--close {
- position: unset;
- }
- &:last-child {
- margin-bottom: 0;
- }
-}
-
-.input-toggle-panel__details {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- @media (max-width: $breakpoint-small) {
- flex-direction: column;
- }
-}
-.input-toggle-panel__name {
- min-width: 100px;
- width: 100px;
-}
-.input-toggle-panel__url {
- text-overflow: ellipsis;
-}
-
-.input-toggle-panel--active {
- color: var(--color-button-toggle-text);
- background-color: var(--color-button-toggle-bg);
-}
-
-.input-toggle-panel--input {
- min-height: var(--spacing-l);
- padding: 0 0 var(--spacing-s) 0;
- fieldset-section,
- .fieldset-group {
- margin-top: var(--spacing-m);
- }
- &.checkbox,
- .checkbox:only-child {
- height: var(--spacing-l);
- float: left;
- }
-}
diff --git a/ui/scss/component/_settings.scss b/ui/scss/component/_settings.scss
new file mode 100644
index 000000000..631e0e606
--- /dev/null
+++ b/ui/scss/component/_settings.scss
@@ -0,0 +1,20 @@
+.setting-item-input {
+ min-height: var(--spacing-l);
+ padding: 0 0 var(--spacing-s) 0;
+ fieldset-section,
+ .fieldset-group,
+ fieldset-group {
+ margin-top: 0;
+ &:not(first-child) {
+ margin-bottom: var(--spacing-m);
+ }
+ }
+ &.checkbox,
+ .checkbox:only-child {
+ height: var(--spacing-l);
+ float: left;
+ }
+ & {
+ margin-left: 2.2rem;
+ }
+}