[PLT-6452] Remove edit button on mobile, and have the edit icon beside the value, and the value as a link (#6565)

* Remove edit button on mobile, and have the edit icon beside the value, and the value as a link

* update per review

1 files changed, 26 insertions, 7 deletions

diff --git a/webapp/components/setting_item_min.jsx b/webapp/components/setting_item_min.jsx
index f230f0198..b7752056d 100644
--- a/webapp/components/setting_item_min.jsx
+++ b/webapp/components/setting_item_min.jsx
@@ -10,7 +10,22 @@ import React from 'react';
 
 export default function SettingItemMin(props) {
     let editButton = null;
-    if (!props.disableOpen) {
+    let describeSection = null;
+    if (!props.disableOpen && Utils.isMobile()) {
+        editButton = (
+            <li className='col-xs-12 col-sm-3 section-edit'>
+                <a
+                    id={Utils.createSafeId(props.title) + 'Edit'}
+                    className='theme'
+                    href='#'
+                    onClick={props.updateSection}
+                >
+                    <i className='fa fa-pencil'/>
+                    {props.describe}
+                </a>
+            </li>
+        );
+    } else if (!props.disableOpen) {
         editButton = (
             <li className='col-xs-12 col-sm-3 section-edit'>
                 <a
@@ -27,6 +42,15 @@ export default function SettingItemMin(props) {
                 </a>
             </li>
         );
+
+        describeSection = (
+            <li
+                id={Utils.createSafeId(props.title) + 'Desc'}
+                className='col-xs-12 section-describe'
+            >
+                {props.describe}
+            </li>
+        );
     }
 
     return (
@@ -36,12 +60,7 @@ export default function SettingItemMin(props) {
         >
             <li className='col-xs-12 col-sm-9 section-title'>{props.title}</li>
             {editButton}
-            <li
-                id={Utils.createSafeId(props.title) + 'Desc'}
-                className='col-xs-12 section-describe'
-            >
-                {props.describe}
-            </li>
+            {describeSection}
         </ul>
     );
 }