From aa830a0e583e8851710160012e09b5f4e1ae5148 Mon Sep 17 00:00:00 2001
From: Richard Wei <54336863+WaysonWei@users.noreply.github.com>
Date: Thu, 28 Jul 2022 09:53:19 +1200
Subject: [PATCH] fix(ui): fix docker images page error on pageheader EE-3668
 (#7212)

* fix docker images page error with link on page-header
---
 .../components/PageHeader/Breadcrumbs/Breadcrumbs.tsx  |  6 +++++-
 app/react/components/PageHeader/PageHeader.tsx         |  6 +++---
 app/react/components/buttons/Button.css                | 10 ++++++++++
 app/react/components/buttons/Button.tsx                |  4 +++-
 4 files changed, 21 insertions(+), 5 deletions(-)
 create mode 100644 app/react/components/buttons/Button.css

diff --git a/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.tsx b/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.tsx
index fcde1c6c9..3a7b32f1c 100644
--- a/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.tsx
+++ b/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.tsx
@@ -41,7 +41,11 @@ function renderCrumb(crumb: Crumb | string) {
 
   if (crumb.link) {
     return (
-      <Link to={crumb.link} params={crumb.linkParams}>
+      <Link
+        to={crumb.link}
+        params={crumb.linkParams}
+        className="text-blue-9 hover:underline"
+      >
         {crumb.label}
       </Link>
     );
diff --git a/app/react/components/PageHeader/PageHeader.tsx b/app/react/components/PageHeader/PageHeader.tsx
index b99b6162c..ee5e1e755 100644
--- a/app/react/components/PageHeader/PageHeader.tsx
+++ b/app/react/components/PageHeader/PageHeader.tsx
@@ -39,13 +39,13 @@ export function PageHeader({
       <HeaderTitle title={title}>
         {reload && (
           <Button
-            color="link"
-            size="medium"
+            color="none"
+            size="large"
             onClick={onClickedRefresh}
             className={styles.reloadButton}
             disabled={loading}
           >
-            <RefreshCw className="feather icon-sm" />
+            <RefreshCw className="icon" />
           </Button>
         )}
       </HeaderTitle>
diff --git a/app/react/components/buttons/Button.css b/app/react/components/buttons/Button.css
new file mode 100644
index 000000000..49edbbf3c
--- /dev/null
+++ b/app/react/components/buttons/Button.css
@@ -0,0 +1,10 @@
+.btn-none {
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  width: 1em;
+}
+
+.btn-none:focus {
+  outline: none;
+}
diff --git a/app/react/components/buttons/Button.tsx b/app/react/components/buttons/Button.tsx
index 8e631af37..7e210d8e8 100644
--- a/app/react/components/buttons/Button.tsx
+++ b/app/react/components/buttons/Button.tsx
@@ -10,6 +10,7 @@ import clsx from 'clsx';
 import { AutomationTestingProps } from '@/types';
 
 import { Icon } from '@@/Icon';
+import './Button.css';
 
 type Type = 'submit' | 'button' | 'reset';
 type Color =
@@ -21,7 +22,8 @@ type Color =
   | 'danger'
   | 'link'
   | 'light'
-  | 'dangerlight';
+  | 'dangerlight'
+  | 'none';
 type Size = 'xsmall' | 'small' | 'medium' | 'large';
 
 export interface Props extends AriaAttributes, AutomationTestingProps {