From 57c1ed5d6efe05e2f10cf79f1356b7e30b0a9f0a Mon Sep 17 00:00:00 2001
From: Robert Sese <734194+rsese@users.noreply.github.com>
Date: Tue, 13 Sep 2022 11:19:53 -0500
Subject: [PATCH] Update permissions statement design (#30703)

---
 components/article/ArticlePage.tsx | 10 ++++------
 data/ui.yml                        |  1 +
 stylesheets/extended-markdown.scss |  4 ++++
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/components/article/ArticlePage.tsx b/components/article/ArticlePage.tsx
index 608f017780..a1228edcc8 100644
--- a/components/article/ArticlePage.tsx
+++ b/components/article/ArticlePage.tsx
@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router'
 
-import { ZapIcon, InfoIcon, ShieldLockIcon } from '@primer/octicons-react'
+import { ZapIcon, InfoIcon } from '@primer/octicons-react'
 import { Callout } from 'components/ui/Callout'
 
 import { Link } from 'components/Link'
@@ -82,11 +82,9 @@ export const ArticlePage = () => {
               )}
 
               {permissions && (
-                <div className="permissions-statement d-table">
-                  <div className="d-table-cell pr-2">
-                    <ShieldLockIcon size={16} />
-                  </div>
-                  <div className="d-table-cell" dangerouslySetInnerHTML={{ __html: permissions }} />
+                <div className="permissions-statement pl-3 my-4">
+                  <div className="text-bold pr-2">{t('permissions_statement')}</div>
+                  <div dangerouslySetInnerHTML={{ __html: permissions }} />
                 </div>
               )}
 
diff --git a/data/ui.yml b/data/ui.yml
index 62e2fc52ec..bc42b1be1f 100644
--- a/data/ui.yml
+++ b/data/ui.yml
@@ -56,6 +56,7 @@ pages:
   contributor_callout: This article is contributed and maintained by
   all_enterprise_releases: All Enterprise Server releases
   about_versions: About versions
+  permissions_statement: Who can use this feature
 errors:
   oops: Ooops!
   something_went_wrong: It looks like something went wrong.
diff --git a/stylesheets/extended-markdown.scss b/stylesheets/extended-markdown.scss
index 067e47f67f..ece27f2679 100644
--- a/stylesheets/extended-markdown.scss
+++ b/stylesheets/extended-markdown.scss
@@ -37,3 +37,7 @@
 .warning {
   font-weight: normal;
 }
+
+.permissions-statement {
+  border-left: 5px solid var(--color-border-muted);
+}