Add annotation to manage owners

src/components/layout/Heading/index.jsx

@@ -15,19 +15,20 @@ type Props = {
   tag: HeadingTag,
   truncate?: boolean,
   children: React.Node,
+  className?: string,
   testId?: string,
 }
 
-class Heading extends React.PureComponent<Props> {
+const Heading = (props: Props) => {
-  render() {
+  const {
-    const {
+    align, tag, truncate, margin, color, children, testId, className = '', ...rest
-      align, tag, truncate, margin, color, children, testId, ...props
+  } = props
-    } = this.props
 
-    const className = cx('heading', align, tag, margin ? capitalize(margin, 'margin') : undefined, color, { truncate })
+  const classes = cx(className, 'heading', align, tag, margin ? capitalize(margin, 'margin') : undefined, color, {
+    truncate,
+  })
 
-    return React.createElement(tag, { ...props, className, 'data-testid': testId || '' }, children)
+  return React.createElement(tag, { ...rest, className: classes, 'data-testid': testId || '' }, children)
-  }
 }
 
 export default Heading

src/routes/safe/components/Settings/ManageOwners/index.jsx

@@ -26,11 +26,12 @@ import {
   OWNERS_TABLE_ADDRESS_ID,
   type OwnerRow,
 } from './dataFetcher'
-import { lg, sm, boldFont } from '~/theme/variables'
+import { sm, boldFont } from '~/theme/variables'
 import { styles } from './style'
 import ReplaceOwnerIcon from './assets/icons/replace-owner.svg'
 import RenameOwnerIcon from './assets/icons/rename-owner.svg'
 import RemoveOwnerIcon from '../assets/icons/bin.svg'
+import Paragraph from '~/components/layout/Paragraph/index'
 
 export const RENAME_OWNER_BTN_TEST_ID = 'rename-owner-btn'
 export const REMOVE_OWNER_BTN_TEST_ID = 'remove-owner-btn'
@@ -48,10 +49,6 @@ const addOwnerButtonStyle = {
   fontWeight: boldFont,
 }
 
-const title = {
-  padding: lg,
-}
-
 type Props = {
   classes: Object,
   safeAddress: string,
@@ -141,9 +138,13 @@ class ManageOwners extends React.Component<Props, State> {
     return (
       <>
         <Block className={classes.formContainer}>
-          <Heading tag="h3" style={title}>
+          <Heading tag="h3" className={classes.title}>
             Manage Safe Owners
           </Heading>
+          <Paragraph className={classes.annotation} noMargin>
+            Add, remove and replace owners or rename existing owners. Owner names are only stored locally and never
+            shared with Gnosis or any third parties
+          </Paragraph>
           <Table
             label="Owners"
             defaultOrderBy={OWNERS_TABLE_NAME_ID}

src/routes/safe/components/Settings/ManageOwners/style.js

@@ -5,6 +5,13 @@ export const styles = () => ({
   formContainer: {
     minHeight: '369px',
   },
+  title: {
+    padding: lg,
+    paddingBottom: 0,
+  },
+  annotation: {
+    padding: lg,
+  },
   hide: {
     '&:hover': {
       backgroundColor: '#fff3e2',