feat: clarify labels and syncing (#670)

src/components/ExpandableListItemInput.tsx

@@ -2,14 +2,14 @@ import { Box, Grid, IconButton, InputBase, ListItem, Typography } from '@materia
 import Collapse from '@material-ui/core/Collapse'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { ChangeEvent, ReactElement, useState } from 'react'
+import type { RemixiconReactIconProps } from 'remixicon-react'
 import Check from 'remixicon-react/CheckLineIcon'
+import X from 'remixicon-react/CloseLineIcon'
 import Edit from 'remixicon-react/PencilLineIcon'
 import Minus from 'remixicon-react/SubtractLineIcon'
-import X from 'remixicon-react/CloseLineIcon'
 import ExpandableListItemActions from './ExpandableListItemActions'
 import ExpandableListItemNote from './ExpandableListItemNote'
 import { SwarmButton } from './SwarmButton'
-import type { RemixiconReactIconProps } from 'remixicon-react'
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -108,12 +108,8 @@ export default function ExpandableListItemKey({
               <div>
                 {!open && value}
                 {!expandedOnly && !locked && (
-                  <IconButton size="small" className={classes.copyValue}>
-                    {open ? (
-                      <Minus onClick={toggleOpen} strokeWidth={1} />
-                    ) : (
-                      <Edit onClick={toggleOpen} strokeWidth={1} />
-                    )}
+                  <IconButton size="small" className={classes.copyValue} onClick={toggleOpen}>
+                    {open ? <Minus strokeWidth={1} /> : <Edit strokeWidth={1} />}
                   </IconButton>
                 )}
               </div>

src/components/ExpandableListItemKey.tsx

@@ -77,20 +77,18 @@ export default function ExpandableListItemKey({ label, value, expanded }: Props)
         <Grid container direction="row" justifyContent="space-between" alignItems="center">
           {label && <Typography variant="body1">{label}</Typography>}
           <Typography variant="body2">
-            <div>
-              {!open && (
-                <span className={classes.copyValue}>
-                  <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
-                    <CopyToClipboard text={value}>
-                      <span onClick={tooltipClickHandler}>{value ? spanText : ''}</span>
-                    </CopyToClipboard>
-                  </Tooltip>
-                </span>
-              )}
-              <IconButton size="small" className={classes.copyValue}>
-                {open ? <Minus onClick={toggleOpen} strokeWidth={1} /> : <Eye onClick={toggleOpen} strokeWidth={1} />}
-              </IconButton>
-            </div>
+            {!open && (
+              <span className={classes.copyValue}>
+                <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
+                  <CopyToClipboard text={value}>
+                    <span onClick={tooltipClickHandler}>{value ? spanText : ''}</span>
+                  </CopyToClipboard>
+                </Tooltip>
+              </span>
+            )}
+            <IconButton size="small" className={classes.copyValue} onClick={toggleOpen}>
+              {open ? <Minus strokeWidth={1} /> : <Eye strokeWidth={1} />}
+            </IconButton>
           </Typography>
         </Grid>
         <Collapse in={open} timeout="auto" unmountOnExit>

src/components/ExpandableListItemLink.tsx

@@ -82,22 +82,20 @@ export default function ExpandableListItemLink({
         <Grid container direction="row" justifyContent="space-between" alignItems="center">
           {label && <Typography variant="body1">{label}</Typography>}
           <Typography variant="body2">
-            <div>
-              {allowClipboard && (
-                <span className={classes.copyValue}>
-                  <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
-                    <CopyToClipboard text={value}>
-                      <span onClick={tooltipClickHandler}>{displayValue}</span>
-                    </CopyToClipboard>
-                  </Tooltip>
-                </span>
-              )}
-              {!allowClipboard && <span onClick={onNavigation}>{displayValue}</span>}
-              <IconButton size="small" className={classes.openLinkIcon}>
-                {navigationType === 'NEW_WINDOW' && <OpenInNewSharp onClick={onNavigation} strokeWidth={1} />}
-                {navigationType === 'HISTORY_PUSH' && <ArrowForward onClick={onNavigation} strokeWidth={1} />}
-              </IconButton>
-            </div>
+            {allowClipboard && (
+              <span className={classes.copyValue}>
+                <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
+                  <CopyToClipboard text={value}>
+                    <span onClick={tooltipClickHandler}>{displayValue}</span>
+                  </CopyToClipboard>
+                </Tooltip>
+              </span>
+            )}
+            {!allowClipboard && <span onClick={onNavigation}>{displayValue}</span>}
+            <IconButton size="small" className={classes.openLinkIcon} onClick={onNavigation}>
+              {navigationType === 'NEW_WINDOW' && <OpenInNewSharp strokeWidth={1} />}
+              {navigationType === 'HISTORY_PUSH' && <ArrowForward strokeWidth={1} />}
+            </IconButton>
           </Typography>
         </Grid>
       </Grid>