From 55e13e4c8b3d3c671d7c3083a7637631e78f5643 Mon Sep 17 00:00:00 2001
From: Marylia Gutierrez <marylia@cockroachlabs.com>
Date: Fri, 10 Sep 2021 12:39:48 -0400
Subject: [PATCH] ui: update clear sql stats link

Update "clear SQL stats" on Statements and Transactions
page to match remaining action links (all lower case and
right blue tone"

Release justification: Category 4
Release note (ui change): Update 'clear SQL stats' color and
change to lower case on Transaction and Statements page
---
 .../src/tableStatistics/tableStatistics.module.scss    | 10 ++++++++++
 .../cluster-ui/src/tableStatistics/tableStatistics.tsx |  6 ++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/pkg/ui/workspaces/cluster-ui/src/tableStatistics/tableStatistics.module.scss b/pkg/ui/workspaces/cluster-ui/src/tableStatistics/tableStatistics.module.scss
index 0b15463d0d4d..683d665867b8 100644
--- a/pkg/ui/workspaces/cluster-ui/src/tableStatistics/tableStatistics.module.scss
+++ b/pkg/ui/workspaces/cluster-ui/src/tableStatistics/tableStatistics.module.scss
@@ -1,3 +1,5 @@
+@import "src/core/index.module";
+
 .flex-display {
   display: flex;
 }
@@ -6,3 +8,11 @@
   padding-top: 3px;
   padding-right: 10px;
 }
+
+.action {
+  color: $colors--link;
+  &:hover {
+  color: $colors--link;
+    text-decoration: underline;
+  }
+}
diff --git a/pkg/ui/workspaces/cluster-ui/src/tableStatistics/tableStatistics.tsx b/pkg/ui/workspaces/cluster-ui/src/tableStatistics/tableStatistics.tsx
index 8e411bb2c73c..55f4ffad0f68 100644
--- a/pkg/ui/workspaces/cluster-ui/src/tableStatistics/tableStatistics.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/tableStatistics/tableStatistics.tsx
@@ -73,7 +73,7 @@ export const TableStatistics: React.FC<TableStatistics> = ({
   );
 
   let toolTipText = ` history is cleared once an hour by default, which can be configured with 
-  the cluster setting diagnostics.sql_stat_reset.interval. Clicking ‘Clear SQL stats’ will reset SQL stats 
+  the cluster setting diagnostics.sql_stat_reset.interval. Clicking ‘clear SQL stats’ will reset SQL stats 
   on the statements and transactions pages.`;
 
   switch (tooltipType) {
@@ -104,7 +104,9 @@ export const TableStatistics: React.FC<TableStatistics> = ({
         <div className={lastCleared}>
           {renderLastCleared(lastReset)}
           {"  "}-{"  "}
-          <a onClick={resetSQLStats}>Clear SQL Stats</a>
+          <a className={cxStats("action")} onClick={resetSQLStats}>
+            clear SQL stats
+          </a>
         </div>
       </div>
     </div>