Security: update notice styles in backup section

1) Refactor header to use `Notice` component instead of custom styles:
  - Improves accessibility by following WCAG AA guidelines for contrast ratio.
  - Matches with other Calypso notifications, updated in #17796

2) Use `SectionHeader` component for positioning elements

client/my-sites/site-settings/jetpack-credentials/index.jsx

@@ -13,8 +13,9 @@ import { some } from 'lodash';
 import CompactCard from 'components/card/compact';
 import CredentialsSetupFlow from './credentials-setup-flow';
 import CredentialsConfigured from './credentials-configured';
-import Gridicon from 'gridicons';
+import Notice from 'components/notice';
 import QueryRewindState from 'components/data/query-rewind-state';
+import SectionHeader from 'components/section-header';
 import { getSelectedSiteId } from 'state/ui/selectors';
 import { getRewindState } from 'state/selectors';
 import { getSiteSlug } from 'state/sites/selectors';
@@ -28,19 +29,16 @@ class JetpackCredentials extends Component {
 		return (
 			<div className="jetpack-credentials">
 				<QueryRewindState siteId={ siteId } />
-				<CompactCard className="jetpack-credentials__header">
-					<span>{ translate( 'Backups and security scans' ) }</span>
+				<SectionHeader label={ translate( 'Backups and security scans' ) }>
 					{ hasAuthorized && (
-						<span className="jetpack-credentials__connected">
-							<Gridicon
-								icon="checkmark"
-								size={ 18 }
-								className="jetpack-credentials__connected-checkmark"
-							/>
-							{ translate( 'Connected' ) }
-						</span>
+						<Notice
+							icon="checkmark"
+							isCompact
+							status="is-success"
+							text={ translate( 'Connected' ) }
+						/>
 					) }
-				</CompactCard>
+				</SectionHeader>
 				{ hasCredentials ? (
 					<CredentialsConfigured siteId={ siteId } />
 				) : (

client/my-sites/site-settings/jetpack-credentials/style.scss

@@ -5,17 +5,3 @@
 .jetpack-credentials .foldable-card.card.is-expanded {
 	margin: 0;
 }
-
-.jetpack-credentials__connected {
-	float: right;
-	background: $alert-green;
-	padding: 4px 8px;
-	border-radius: 2px;
-	font-size: 12px;
-	color: $white;
-}
-
-.jetpack-credentials__connected-checkmark {
-	vertical-align: top;
-	margin-right: 4px;
-}