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

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;
+  }
+}

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>