From d4d80ed8f70592bc80a2b5f098d856b49d1e9787 Mon Sep 17 00:00:00 2001
From: Richard Wei <54336863+WaysonWei@users.noreply.github.com>
Date: Mon, 1 Aug 2022 10:08:45 +1200
Subject: [PATCH] feat(ui): ui change for create access token EE-3541 (#7366)

* ui change for create access token
---
 .../buttons/CopyButton/CopyButton.tsx          |  6 ++++--
 .../CreateAccessToken.tsx                      | 18 ++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/react/components/buttons/CopyButton/CopyButton.tsx b/app/react/components/buttons/CopyButton/CopyButton.tsx
index c8699eb29..34af24f5b 100644
--- a/app/react/components/buttons/CopyButton/CopyButton.tsx
+++ b/app/react/components/buttons/CopyButton/CopyButton.tsx
@@ -1,6 +1,8 @@
 import { PropsWithChildren } from 'react';
 import clsx from 'clsx';
 
+import { Icon } from '@@/Icon';
+
 import { Button } from '../Button';
 
 import styles from './CopyButton.module.css';
@@ -31,7 +33,7 @@ export function CopyButton({
         title="Copy Value"
         type="button"
       >
-        <i className="fa fa-copy space-right" aria-hidden="true" /> {children}
+        <Icon icon="copy" feather /> {children}
       </Button>
 
       <span
@@ -41,7 +43,7 @@ export function CopyButton({
           'space-left'
         )}
       >
-        <i className="fa fa-check" aria-hidden="true" />
+        <Icon icon="check" feather />
         {displayText && <span className="space-left">{displayText}</span>}
       </span>
     </div>
diff --git a/app/react/portainer/account/CreateAccessTokenView/CreateAccessToken.tsx b/app/react/portainer/account/CreateAccessTokenView/CreateAccessToken.tsx
index 48341348f..f99cae8a1 100644
--- a/app/react/portainer/account/CreateAccessTokenView/CreateAccessToken.tsx
+++ b/app/react/portainer/account/CreateAccessTokenView/CreateAccessToken.tsx
@@ -74,18 +74,16 @@ export function CreateAccessToken({
             />
           </FormControl>
           <div className="row mt-5">
-            <div className="col-sm-12">
-              <Button
-                disabled={!!errorText || !!accessToken}
-                onClick={() => generateAccessToken()}
-              >
-                {t('Add access token')}
-              </Button>
-            </div>
+            <Button
+              disabled={!!errorText || !!accessToken}
+              onClick={() => generateAccessToken()}
+            >
+              {t('Add access token')}
+            </Button>
           </div>
         </div>
         {accessToken && (
-          <>
+          <div className="mt-5">
             <FormSectionTitle>
               <Trans ns={translationNS}>New access token</Trans>
             </FormSectionTitle>
@@ -106,7 +104,7 @@ export function CreateAccessToken({
             >
               <Trans ns={translationNS}>Done</Trans>
             </Button>
-          </>
+          </div>
         )}
       </WidgetBody>
     </Widget>