ui: ux improvements

This commit adds UX improvements, such as:
- Add spacing on Table Details page
- Add spacing on Index Details page and change
the sql box size
- Rename `Statement Execution and Planning Time` chart
on Statement Details page to `Statement Times`

Epic: None

Release note (ui change): Rename chart on Statement Details
page from `Statement Execution and Planning Time` to
`Statement Times`.

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

@@ -76,7 +76,7 @@
     padding-right: 9px;
     padding-left: 9px;
     margin-right: -9px;
-    margin-left: -9px;
+    margin-left: 9px;
   }
 
   &__header {
@@ -157,3 +157,7 @@
   font-weight: $font-weight--extra-bold;
   color: $colors--neutral-8;
 }
+
+.row-spaced {
+  margin-top: 20px;
+}

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

@@ -621,7 +621,7 @@ export class DatabaseTablePage extends React.Component<
                         </SummaryCard>
                       </Col>
                     </Row>
-                    <Row gutter={18}>
+                    <Row gutter={18} className={cx("row-spaced")}>
                       <SummaryCard
                         className={cx(
                           "summary-card",

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

@@ -73,6 +73,7 @@
   &--row {
     background-color: $adminui-white;
     letter-spacing: 0.33px;
+    margin-left: 1px;
   }
   &--label {
     font-family: $font-family--semi-bold;
@@ -136,3 +137,8 @@
     text-decoration: underline;
   }
 }
+
+.row-spaced {
+  margin-top: 20px;
+}
+

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

@@ -17,7 +17,7 @@ import { baseHeadingClasses } from "src/transactionsPage/transactionsPageClasses
 import { CaretRight } from "../icon/caretRight";
 import { BreadcrumbItem, Breadcrumbs } from "../breadcrumbs";
 import { Caution, Search as IndexIcon } from "@cockroachlabs/icons";
-import { SqlBox } from "src/sql";
+import { SqlBox, SqlBoxSize } from "src/sql";
 import { Col, Row, Tooltip } from "antd";
 import "antd/lib/col/style";
 import "antd/lib/row/style";
@@ -257,7 +257,10 @@ export class IndexDetailsPage extends React.Component<
           <section className={baseHeadingClasses.wrapper}>
             <Row gutter={18}>
               <Col className="gutter-row" span={18}>
-                <SqlBox value={this.props.details.createStatement} />
+                <SqlBox
+                  value={this.props.details.createStatement}
+                  size={SqlBoxSize.custom}
+                />
               </Col>
             </Row>
             <Row gutter={18}>
@@ -306,7 +309,7 @@ export class IndexDetailsPage extends React.Component<
                 </SummaryCard>
               </Col>
             </Row>
-            <Row gutter={18}>
+            <Row gutter={18} className={cx("row-spaced")}>
               <Col className="gutter-row" span={18}>
                 <SummaryCard className={cx("summary-card--row")}>
                   <Heading type="h5">Index recommendations</Heading>

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

@@ -689,7 +689,7 @@ export class StatementDetails extends React.Component<
           <Row gutter={24}>
             <Col className="gutter-row" span={12}>
               <BarGraphTimeSeries
-                title="Statement Execution and Planning Time"
+                title="Statement Times"
                 alignedData={executionAndPlanningTimeseries}
                 uPlotOptions={executionAndPlanningOps}
                 yAxisUnits={AxisUnits.Duration}