Merge #70948

70948: ui: update styles for stmt, txn and sessions pages r=maryliag a=maryliag Updates styling for Statement, Statement Details, Transactions, Transaction Details and Sessions. Partially addresses #70783 Fixed: - Icon alignment for clear stats - Filter input colors (text and border) - Color of link on Transaction page - Tighten spaces for details titles on Statements, Transactions, Session and Jobs details pages - Update color and font size of session duration - Update color of SQL black boxes - Update color of Plan black boxes - Update title size of tables inside Statement Details Execution Stats - Update color of labels on Session details - Unavailable message on Transactions Details Release note (ui change): Update color, fonts and spaces on Statements, Statements Details, Transaction, Transactions Details and Session pages Co-authored-by: Marylia Gutierrez <[email protected]>
cockroachdb · Oct 1, 2021 · 3bf6227 · 3bf6227
2 parents 42730df + ad7381c
commit 3bf6227
Show file tree

Hide file tree

Showing 20 changed files with 130 additions and 49 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/button/button.module.scss b/pkg/ui/workspaces/cluster-ui/src/button/button.module.scss
@@ -141,6 +141,7 @@
 .crl-button__content {
   display: flex;
   flex: 1;
+  font-weight: normal;
 }
 
 
@@ -158,3 +159,7 @@
   order: 1;
   margin-left: $spacing-base;
 }
+
+.small-margin {
+  margin-bottom: 10px;
+}
diff --git a/pkg/ui/workspaces/cluster-ui/src/multiSelectCheckbox/multiSelectCheckbox.tsx b/pkg/ui/workspaces/cluster-ui/src/multiSelectCheckbox/multiSelectCheckbox.tsx
@@ -58,6 +58,10 @@ const customStyles = {
     border: "none",
     height: "fit-content",
   }),
+  dropdownIndicator: (provided: any) => ({
+    ...provided,
+    color: "#C0C6D9",
+  }),
   option: (provided: any, state: any) => ({
     ...provided,
     backgroundColor: state.isSelected ? "#DEEBFF" : provided.backgroundColor,
@@ -66,12 +70,17 @@ const customStyles = {
   control: (provided: any) => ({
     ...provided,
     width: "100%",
+    borderColor: "#C0C6D9",
   }),
   multiValue: (provided: any) => ({
     ...provided,
     backgroundColor: "#E7ECF3",
     borderRadius: "3px",
   }),
+  placeholder: (provided: any) => ({
+    ...provided,
+    color: "#475872",
+  }),
 };
 
 /**

diff --git a/pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.tsx b/pkg/ui/workspaces/cluster-ui/src/queryFilter/filter.tsx
@@ -258,10 +258,15 @@ export class Filter extends React.Component<QueryFilter, FilterState> {
       control: (provided: any) => ({
         ...provided,
         width: "100%",
+        borderColor: "#C0C6D9",
+      }),
+      dropdownIndicator: (provided: any) => ({
+        ...provided,
+        color: "#C0C6D9",
       }),
       singleValue: (provided: any) => ({
         ...provided,
-        color: "hsl(0, 0%, 50%)",
+        color: "#475872",
       }),
     };
     const customStylesSmall = { ...customStyles };

diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionDetails.tsx
@@ -153,6 +153,7 @@ export class SessionDetails extends React.Component<SessionDetailsProps> {
             size="small"
             icon={<ArrowLeft fontSize={"10px"} />}
             iconPosition="left"
+            className="small-margin"
           >
             Sessions
           </Button>

diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsTable.module.scss b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsTable.module.scss
@@ -31,10 +31,8 @@
 
   & a {
     all: initial;
-    font-family: $font-family--semi-bold;
-    font-weight: $font-weight--bold;
-    line-height: 1.83;
-    color: $colors--link;
+    font-family: $font-family--base;
+    font-size: $font-size--medium;
     text-decoration: none;
     cursor: pointer;
     @include line-clamp(2);
@@ -45,6 +43,11 @@
   }
 }
 
+.code {
+  font-family: $font-family--monospace;
+  font-size: $font-size--small;
+}
+
 .session-action--dropdown {
   align-items: flex-end;
 }
diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsTable.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsTable.tsx
@@ -159,7 +159,7 @@ export function makeSessionsColumns(
     {
       name: "statement",
       title: SessionTableTitle.statement,
-      className: cx("cl-table__col-session"),
+      className: cx("cl-table__col-session", "code"),
       cell: session => {
         if (!(session.session.active_queries?.length > 0)) {
           return "N/A";

diff --git a/pkg/ui/workspaces/cluster-ui/src/sql/sqlhighlight.module.scss b/pkg/ui/workspaces/cluster-ui/src/sql/sqlhighlight.module.scss
@@ -30,6 +30,11 @@
     white-space: pre-line;
     word-wrap: break-word;
 
+    span {
+      font-family: SFMono-Semibold;
+      color: $colors--neutral-2;
+    }
+
     :global(.hljs-label) {
       padding-left: 8px;
     }

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/planView/planView.module.scss b/pkg/ui/workspaces/cluster-ui/src/statementDetails/planView/planView.module.scss
@@ -90,6 +90,11 @@
     overflow: hidden;
     padding: 24px 32px;
 
+    span {
+      font-family: RobotoMono-Regular;
+      color: $colors--neutral-2;
+    }
+
     .plan-view-container-scroll {
       max-height: 400px;
       overflow-y: scroll;

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.module.scss b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.module.scss
@@ -172,3 +172,7 @@ h3.base-heading {
 .tooltip-info {
   border-bottom: 1px dashed $colors--neutral-5;
 }
+
+.no-margin-bottom {
+  margin-bottom: 0px;
+}
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
@@ -401,10 +401,11 @@ export class StatementDetails extends React.Component<
             size="small"
             icon={<ArrowLeft fontSize={"10px"} />}
             iconPosition="left"
+            className="small-margin"
           >
             Statements
           </Button>
-          <h3 className={cx("base-heading", "page--header__title")}>
+          <h3 className={cx("base-heading", "no-margin-bottom")}>
             Statement Details
           </h3>
         </div>
@@ -793,7 +794,7 @@ export class StatementDetails extends React.Component<
           className={cx("fit-content-width")}
         >
           <SummaryCard>
-            <h2
+            <h3
               className={classNames(
                 cx("base-heading"),
                 summaryCardStylesCx("summary--card__title"),
@@ -811,7 +812,7 @@ export class StatementDetails extends React.Component<
                   </div>
                 </Tooltip>
               </div>
-            </h2>
+            </h3>
             <NumericStatTable
               title="Phase"
               measure="Latency"
@@ -836,14 +837,14 @@ export class StatementDetails extends React.Component<
             />
           </SummaryCard>
           <SummaryCard>
-            <h2
+            <h3
               className={classNames(
                 cx("base-heading"),
                 summaryCardStylesCx("summary--card__title"),
               )}
             >
               Other Execution Statistics
-            </h2>
+            </h3>
             <NumericStatTable
               title="Stat"
               measure="Quantity"
@@ -892,7 +893,7 @@ export class StatementDetails extends React.Component<
           </SummaryCard>
           {!isTenant && (
             <SummaryCard className={cx("fit-content-width")}>
-              <h2
+              <h3
                 className={classNames(
                   cx("base-heading"),
                   summaryCardStylesCx("summary--card__title"),
@@ -910,7 +911,7 @@ export class StatementDetails extends React.Component<
                     </div>
                   </Tooltip>
                 </div>
-              </h2>
+              </h3>
               <StatementsSortedTable
                 className={cx("statements-table")}
                 data={statsByNode}

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.module.scss b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.module.scss
@@ -58,6 +58,10 @@ h3.base-heading {
   padding-bottom: 12px;
 }
 
+.no-margin-bottom {
+  margin-bottom: 0px;
+}
+
 .root {
   flex-grow: 0;
   width: 100%;

diff --git a/pkg/ui/workspaces/cluster-ui/src/summaryCard/summaryCard.module.scss b/pkg/ui/workspaces/cluster-ui/src/summaryCard/summaryCard.module.scss
@@ -51,16 +51,17 @@
     &--label {
       font-family: $font-family--base;
       font-size: 14px;
+      font-weight: $font-weight--bold;
       line-height: 1.57;
       letter-spacing: 0.1px;
-      color: $secondary-text-color;
+      color: $colors--neutral-6;
       margin-right: 5px;
       margin-bottom: 0;
     }
     &--value {
       font-family: $font-family--base;
       font-size: 14px;
-      font-weight: 600;
+      font-weight: $font-weight--bold;
       line-height: 1.71;
       letter-spacing: 0.1px;
       color: $popover-color;

diff --git a/pkg/ui/workspaces/cluster-ui/src/tableStatistics/tableStatistics.module.scss b/pkg/ui/workspaces/cluster-ui/src/tableStatistics/tableStatistics.module.scss
@@ -11,6 +11,7 @@
 
 .action {
   color: $colors--link;
+  line-height: 24px;
   &:hover {
   color: $colors--link;
     text-decoration: underline;

diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionDetails/transactionDetails.modules.scss b/pkg/ui/workspaces/cluster-ui/src/transactionDetails/transactionDetails.modules.scss
@@ -5,4 +5,8 @@
 }
 .summary-card {
   margin-bottom: 0;
-}
+}
+
+.tooltip-info {
+  border-bottom: 1px dashed $colors--neutral-5;
+}