From 753e46a24382277d6b29905e4c9ebe1e427d2c1b Mon Sep 17 00:00:00 2001
From: Mikhail Mikheev <mmvsha73@gmail.com>
Date: Wed, 4 Sep 2019 17:16:18 +0400
Subject: [PATCH] Add annotation to manage owners

---
 src/components/layout/Heading/index.jsx         | 17 +++++++++--------
 .../components/Settings/ManageOwners/index.jsx  | 13 +++++++------
 .../components/Settings/ManageOwners/style.js   |  7 +++++++
 3 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/components/layout/Heading/index.jsx b/src/components/layout/Heading/index.jsx
index aa24c044..51d8a1da 100644
--- a/src/components/layout/Heading/index.jsx
+++ b/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> {
-  render() {
-    const {
-      align, tag, truncate, margin, color, children, testId, ...props
-    } = this.props
+const Heading = (props: Props) => {
+  const {
+    align, tag, truncate, margin, color, children, testId, className = '', ...rest
+  } = 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
diff --git a/src/routes/safe/components/Settings/ManageOwners/index.jsx b/src/routes/safe/components/Settings/ManageOwners/index.jsx
index 11b3f69a..f3793f0f 100644
--- a/src/routes/safe/components/Settings/ManageOwners/index.jsx
+++ b/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}
diff --git a/src/routes/safe/components/Settings/ManageOwners/style.js b/src/routes/safe/components/Settings/ManageOwners/style.js
index 161d71f9..72701300 100644
--- a/src/routes/safe/components/Settings/ManageOwners/style.js
+++ b/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',