use radio buttons for comment server selection

ui/component/common/input-radio-panel.jsx

@@ -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;

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>
   );

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} />}

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';

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 {

ui/scss/component/_input-radio-panel.scss

@@ -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;
-  }
-}

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;
+  }
+}