rename commentserver files

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

@@ -18,14 +18,17 @@ type Props = {
   [ https://myserver.com:50001 x (selected)]
  */
 
-const ItemPanel = (props: Props) => {
+const InputTogglePanel = (props: Props) => {
   const { onClick, active, serverDetails, onRemove } = props;
 
   return (
-    <div onClick={() => onClick(serverDetails)} className={classnames('itemPanel', { 'itemPanel--active': active })}>
+    <div
-      <div className={'itemPanel__details'}>
+      onClick={() => onClick(serverDetails)}
-        <div className={'itemPanel__name'}>{`${serverDetails.name}`}</div>
+      className={classnames('input-toggle-panel', { 'input-toggle-panel--active': active })}
-        <div className={'itemPanel__url'}>{`${serverDetails.url}`}</div>
+    >
+      <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
@@ -40,4 +43,4 @@ const ItemPanel = (props: Props) => {
   );
 };
 
-export default ItemPanel;
+export default InputTogglePanel;

ui/component/settingCommentsServer/internal/input-radio-panel-addCommentServer.jsx

@@ -21,11 +21,9 @@ const isValidServerString = (serverString) => {
   const si = serverString.indexOf('/');
   const pi = serverString.indexOf(':');
   const path = si === -1 ? '' : serverString.slice(si);
-  console.log('path', path);
   const hostMaybePort = si === -1 ? serverString : serverString.slice(0, si);
   const host = pi === -1 ? hostMaybePort : hostMaybePort.slice(0, pi);
   const port = pi === -1 ? '' : hostMaybePort.slice(pi + 1);
-  console.log('port', port);
   const portInt = parseInt(port);
 
   return (
@@ -61,7 +59,7 @@ function ServerInputRow(props: Props) {
 
   return (
     <Form onSubmit={onSubmit}>
-      <div className="itemPanel--input">
+      <div className="input-toggle-panel--input">
         <FormField
           type="text"
           label={__('Name')}
@@ -83,7 +81,7 @@ function ServerInputRow(props: Props) {
           />
         </div>
       </div>
-      <div className="itemPanel--input">
+      <div className="input-toggle-panel--input">
         <FormField
           label={'Use https'}
           name="use_https"

ui/component/settingCommentsServer/view.jsx

@@ -2,8 +2,8 @@
 import { COMMENT_SERVER_API } from 'config'; // COMMENT_SERVER_NAME,
 import React from 'react';
 import Comments from 'comments';
-import ItemPanel from 'component/common/item-panel';
+import InputTogglePanel from 'component/common/input-radio-panel';
-import ItemInputRow from 'component/common/item-panel-input-row';
+import ItemInputRow from './internal/input-radio-panel-addCommentServer';
 import Button from 'component/button';
 
 type Props = {
@@ -64,10 +64,10 @@ function SettingCommentsServer(props: Props) {
   return (
     <React.Fragment>
       <div className={'fieldset-section'}>
-        <ItemPanel onClick={handleSelectServer} active={!customServerEnabled} serverDetails={defaultServer} />
+        <InputTogglePanel onClick={handleSelectServer} active={!customServerEnabled} serverDetails={defaultServer} />
         {!!customCommentServers.length && <label>{__('Custom Servers')}</label>}
         {customCommentServers.map((server) => (
-          <ItemPanel
+          <InputTogglePanel
             key={server.url}
             active={customServerEnabled && customServerUrl === server.url}
             onClick={handleSelectServer}

ui/scss/all.scss

@@ -68,4 +68,4 @@
 @import 'component/wallet-tip-send';
 @import 'component/swipe-list';
 @import 'component/utils';
-@import 'component/item-panel';
+@import 'component/input-radio-panel';

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

@@ -1,4 +1,4 @@
-.itemPanel {
+.input-toggle-panel {
   padding: var(--spacing-m);
   margin-bottom: var(--spacing-m);
   width: 100%;
@@ -16,7 +16,7 @@
   }
 }
 
-.itemPanel__details {
+.input-toggle-panel__details {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -24,20 +24,20 @@
     flex-direction: column;
   }
 }
-.itemPanel__name {
+.input-toggle-panel__name {
   min-width: 100px;
   width: 100px;
 }
-.itemPanel__url {
+.input-toggle-panel__url {
   text-overflow: ellipsis;
 }
 
-.itemPanel--active {
+.input-toggle-panel--active {
   color: var(--color-button-toggle-text);
   background-color: var(--color-button-toggle-bg);
 }
 
-.itemPanel--input {
+.input-toggle-panel--input {
   min-height: var(--spacing-l);
   padding: 0 0 var(--spacing-s) 0;
   fieldset-section,