ui: ui updates to Database page

This commit introduces ui fixes on the Database page (and other
child pages of it):
Partially addresses #77982

- Auto Stats circle is no longer cut off

- Added the link style to the link on Auto Stats tooltip

- Updated tooltip message on reset index stats to add
`from the time the index was created or had its stats reset`

- Updated the reset stats link when hover to use the correct blue
and add underline

- Adjusted alignment of summary cards inside Table details

Release note: None

pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.module.scss

@@ -22,6 +22,10 @@
   }
 }
 
+.tab-pane {
+  margin-left: 1px;
+}
+
 .summary-card {
   h4 {
     @include text--body-strong;
@@ -69,6 +73,7 @@
   &__summary-card {
     width: fit-content;
     padding: 0;
+    margin-left: 9px;
   }
 
   &__header {
@@ -91,6 +96,11 @@
 
   &__reset-btn {
     color: $colors--primary-blue-3;
+
+    &:hover {
+      color: $colors--primary-blue-3;
+      text-decoration: underline;
+    }
   }
 
   &-table {

pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx

@@ -352,7 +352,7 @@ export class DatabaseTablePage extends React.Component<
             onChange={this.onTabChange}
             activeKey={this.state.tab}
           >
-            <TabPane tab="Overview" key="overview">
+            <TabPane tab="Overview" key="overview" className={cx("tab-pane")}>
               <Row gutter={18}>
                 <Col className="gutter-row" span={18}>
                   <SqlBox value={this.props.details.createStatement} />
@@ -436,7 +436,7 @@ export class DatabaseTablePage extends React.Component<
                     <div className={cx("index-stats__reset-info")}>
                       <Tooltip
                         placement="bottom"
-                        title="Index stats accumulate from the time they were last cleared. Clicking ‘Reset all index stats’ will reset index stats for the entire cluster."
+                        title="Index stats accumulate from the time the index was created or had its stats reset. Clicking ‘Reset all index stats’ will reset index stats for the entire cluster."
                       >
                         <div
                           className={cx("index-stats__last-reset", "underline")}
@@ -474,7 +474,7 @@ export class DatabaseTablePage extends React.Component<
                 </SummaryCard>
               </Row>
             </TabPane>
-            <TabPane tab="Grants" key="grants">
+            <TabPane tab="Grants" key="grants" className={cx("tab-pane")}>
               <DatabaseTableGrantsTable
                 data={this.props.details.grants}
                 columns={this.grantsColumns}

pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.tsx

@@ -157,7 +157,7 @@ export class IndexDetailsPage extends React.Component<
             <div className={cx("reset-info")}>
               <Tooltip
                 placement="bottom"
-                title="Index stats accumulate from the time they were last cleared. Clicking ‘Reset all index stats’ will reset index stats for the entire cluster."
+                title="Index stats accumulate from the time the index was created or had its stats reset.. Clicking ‘Reset all index stats’ will reset index stats for the entire cluster."
               >
                 <div className={cx("last-reset", "underline")}>
                   Last reset:{" "}

pkg/ui/workspaces/cluster-ui/src/settings/booleanSetting.module.scss

@@ -2,6 +2,7 @@
 
 .crl-hover-text {
   font-size: 12px;
+  color: white;
 
   &__dashed-underline {
     color: inherit;
@@ -12,8 +13,16 @@
   }
 
   &__link-text {
-  color: inherit;
-  font-size: inherit;
+    color: inherit;
+    font-size: inherit;
+    font-weight: 600;
+    text-decoration: underline;
+
+    &:hover {
+      color: inherit;
+      opacity: 0.7;
+      text-decoration: underline;
+    }
   }
 }
 
@@ -22,15 +31,15 @@
   &__enabled {
     fill: $colors--success;
     margin-right: 8px;
-    height: 8px;
-    width: 8px;
+    height: 10px;
+    width: 10px;
   }
 
   &__disabled {
     fill: $colors--disabled;
     margin-right: 8px;
-    height: 8px;
-    width: 8px;
+    height: 10px;
+    width: 10px;
   }
 }