report: dark theme adjustments (#1000)

testingisdocumenting · Sep 8, 2021 · 4e22440 · 4e22440
1 parent 7e38918
commit 4e22440
Show file tree

Hide file tree

Showing 16 changed files with 67 additions and 49 deletions.
diff --git a/webtau-reactjs/src/report/WebTauReport.css b/webtau-reactjs/src/report/WebTauReport.css
@@ -23,7 +23,9 @@
     --webtau-spacing-tripple: calc(var(--webtau-spacing-half-as-number) * 6px);
     --webtau-spacing-quadruple: calc(var(--webtau-spacing-half-as-number) * 8px);
 
-    --webtau-text-color: #bbbbbb;
+    --webtau-text-color: #bbb;
+    --webtau-text-light-color: #888;
+    --webtau-inversed-text-color: #333;
     --webtau-background-color: #1e2529;
     --webtau-selection-background-color: #272f33;
 
@@ -40,10 +42,10 @@
     --webtau-tabs-selected-text-color: #aaa;
 
     --webtau-card-background-color: var(--webtau-selection-background-color);
-    /*--webtau-card-background-color: #283740;*/
     --webtau-card-border-color: none;
-    --webtau-card-list-border-color: #293c49;
+    --webtau-card-list-border-color: var(--webtau-background-color);
     --webtau-card-shadow: 0 0 0 1px rgba(16, 22, 26, 0.4), 0 0 0 rgba(16, 22, 26, 0), 0 0 0 rgba(16, 22, 26, 0);
+    --webtau-card-warning-background-color: #dcbe5a;
     --webtau-card-warning-shadow: 0 1px 2px 0 rgba(252, 164, 0, 0.05);
     --webtau-card-time-color: #a5a5a5;
     --webtau-card-date-color: #909090;
@@ -65,7 +67,8 @@
     --webtau-code-font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
     --webtau-source-code-background-color: #181e21;
 
-    --webtau-match-color: rgba(57, 215, 40, 0.2);
+    --webtau-match-color: #eee;
+    --webtau-match-background-color: rgba(57, 215, 40, 0.2);
     --webtau-table-row-problem-background-color: rgba(219, 17, 23, 0.2);
 
     --webtau-property-key-color: #673871;

diff --git a/webtau-reactjs/src/report/details/TestSummary.css b/webtau-reactjs/src/report/details/TestSummary.css
@@ -15,16 +15,16 @@
  * limitations under the License.
  */
 
-.test-summary {
+.webtau-test-summary {
     display: grid;
-    grid-template-columns: 1fr;
+    grid-template-columns: auto;
     grid-row-gap: var(--webtau-spacing);
 }
 
-.test-summary-http-dashboard {
+.webtau-test-summary-cards {
     display: grid;
-    grid-template-columns: repeat(auto-fill, 172px);
-    grid-gap: var(--webtau-spacing);
+    grid-template-columns: 1fr;
+    grid-row-gap: var(--webtau-spacing);
 }
 
 .card-pre-message {

diff --git a/webtau-reactjs/src/report/details/TestSummary.tsx b/webtau-reactjs/src/report/details/TestSummary.tsx
@@ -45,29 +45,31 @@ export function TestSummary({ test }: TestProps) {
   const numberOfHttpCalls = test.httpCalls ? test.httpCalls.length : 0;
 
   return (
-    <div className="test-summary">
-      <CardList label={<TestName test={test} />}>
-        <CardWithTime label="Start Time (Local)" time={test.startTime} />
+    <div className="webtau-test-summary">
+      <div className="webtau-test-summary-cards">
+        <CardList label={<TestName test={test} />}>
+          <CardWithTime label="Start Time (Local)" time={test.startTime} />
 
-        <CardWithTime label="Start Time (UTC)" utc={true} time={test.startTime} />
+          <CardWithTime label="Start Time (UTC)" utc={true} time={test.startTime} />
 
-        <CardWithElapsedTime label="Execution time" millis={test.elapsedTime} />
-      </CardList>
+          <CardWithElapsedTime label="Execution time" millis={test.elapsedTime} />
+        </CardList>
 
-      <HttpCallsWarning test={test} />
+        <HttpCallsWarning test={test} />
 
-      <TestMetadata metadata={test.metadata} />
+        <TestMetadata metadata={test.metadata} />
 
-      {numberOfHttpCalls > 0 ? (
-        <div className="test-summary-http-dashboard">
-          <NumberOfHttpCalls number={numberOfHttpCalls} />
-          <AverageHttpCallsTime test={test} />
-          <OverallHttpCallsTime test={test} />
-        </div>
-      ) : null}
+        {numberOfHttpCalls > 0 ? (
+          <CardList label="HTTP Summary">
+            <NumberOfHttpCalls number={numberOfHttpCalls} />
+            <AverageHttpCallsTime test={test} />
+            <OverallHttpCallsTime test={test} />
+          </CardList>
+        ) : null}
 
-      <OptionalPreBlock className="context-description" message={test.contextDescription} />
-      <CardPreMessage message={test.exceptionMessage} />
+        <OptionalPreBlock className="context-description" message={test.contextDescription} />
+        <CardPreMessage message={test.exceptionMessage} />
+      </div>
 
       {test.failedCodeSnippets && test.failedCodeSnippets.map((cs, idx) => <SourceCode key={idx} {...cs} />)}
     </div>

diff --git a/webtau-reactjs/src/report/details/cli/CliOutputCard.css b/webtau-reactjs/src/report/details/cli/CliOutputCard.css
@@ -25,7 +25,8 @@
 }
 
 .cli-output-line.matched {
-    background-color: var(--webtau-match-color);
+    color: var(--webtau-match-color);
+    background-color: var(--webtau-match-background-color);
 }
 
 .cli-output-label {

diff --git a/webtau-reactjs/src/report/details/http-header/HttpHeader.css b/webtau-reactjs/src/report/details/http-header/HttpHeader.css
@@ -1,4 +1,5 @@
 /*
+ * Copyright 2021 webtau maintainers
  * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -39,6 +40,6 @@
 }
 
 .empty-http-header {
-    color: #333;
+    color: var(--webtau-text-light-color);
     text-transform: uppercase;
 }
diff --git a/webtau-reactjs/src/report/details/http/JsonPayload.css b/webtau-reactjs/src/report/details/http/JsonPayload.css
@@ -1,4 +1,5 @@
 /*
+ * Copyright 2021 webtau maintainers
  * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -21,8 +22,8 @@
 }
 
 .json-value-highlight.passed {
-    background-color: var(--webtau-match-color);
-    color: #444;
+    color: var(--webtau-match-color);
+    background-color: var(--webtau-match-background-color);
 }
 
 .json-value-highlight.failed {

diff --git a/webtau-reactjs/src/report/details/http/TestHttpCalls.css b/webtau-reactjs/src/report/details/http/TestHttpCalls.css
@@ -1,4 +1,5 @@
 /*
+ * Copyright 2021 webtau maintainers
  * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -41,7 +42,7 @@
 }
 
 .test-http-call > .method {
-    color: #858585;
+    color: var(--webtau-text-light-color);
     min-width: 50px;
     text-align: right;
     margin-right: 15px;

diff --git a/webtau-reactjs/src/report/details/steps/Step.css b/webtau-reactjs/src/report/details/steps/Step.css
@@ -32,7 +32,7 @@
 }
 
 .step > .message-parts > .show-children {
-    background-color: #eee;
+    background-color: var(--webtau-background-color);
     margin-left: var(--webtau-spacing-double);
     padding: 0 var(--webtau-spacing-half);
 

diff --git a/webtau-reactjs/src/report/details/steps/StepToken.css b/webtau-reactjs/src/report/details/steps/StepToken.css
@@ -20,12 +20,12 @@
 }
 
 .step-token.id {
-    color: #333;
+    color: var(--webtau-text-color);
     font-weight: bold;
 }
 
 .step-token.action {
-    color: #5d76e8;
+    color: #4a9aff;
 }
 
 .step-token.matcher {
@@ -59,4 +59,8 @@
 
 .step-token.selectorValue {
     color: #ab68ae;
+}
+
+.step-token.url {
+    color: #6297d5;
 }
diff --git a/webtau-reactjs/src/report/summary/OverallSummary.css b/webtau-reactjs/src/report/summary/OverallSummary.css
@@ -26,8 +26,7 @@
     padding: var(--webtau-spacing);
 }
 
-.overall-number-of-http-calls,
-.overall-number-of-skipped {
+.overall-number-of-http-calls {
     cursor: pointer;
 }
 

diff --git a/webtau-reactjs/src/report/summary/overal-info/HttpOperationCoverageSummary.js b/webtau-reactjs/src/report/summary/overal-info/HttpOperationCoverageSummary.js
@@ -31,13 +31,11 @@ export default function HttpOperationCoverageSummary({ report, onSwitchToSkipped
       <CardLabelAndNumber label="Operations coverage" number={operationCoveragePercentage} />
       <CardLabelAndNumber label="Covered operations" number={report.numberOfOpenApiCoveredOperations()} />
 
-      <div className="overall-number-of-skipped" onClick={onSwitchToSkippedHttpCalls}>
-        <CardLabelAndNumber
-          label="Skipped operations"
-          number={report.numberOfOpenApiSkippedOperations()}
-          onClick={onSwitchToSkippedHttpCalls}
-        />
-      </div>
+      <CardLabelAndNumber
+        label="Skipped operations"
+        number={report.numberOfOpenApiSkippedOperations()}
+        onClick={onSwitchToSkippedHttpCalls}
+      />
     </CardList>
   );
 }
diff --git a/webtau-reactjs/src/report/widgets/Card.css b/webtau-reactjs/src/report/widgets/Card.css
@@ -22,6 +22,11 @@
 }
 
 .webtau-card.warning {
+    color: var(--webtau-inversed-text-color);
+    background-color: var(--webtau-card-warning-background-color);
     box-shadow: var(--webtau-card-warning-shadow);
-    background-color: #ffffd0;
+}
+
+.webtau-card.clickable {
+    cursor: pointer;
 }
diff --git a/webtau-reactjs/src/report/widgets/Card.tsx b/webtau-reactjs/src/report/widgets/Card.tsx
@@ -28,7 +28,8 @@ interface Pros {
 }
 
 export function Card({ className, onClick, width, children, warning }: Pros) {
-  const fullClassName = 'webtau-card' + (className ? ' ' + className : '') + (warning ? ' warning' : '');
+  const fullClassName =
+    'webtau-card' + (className ? ' ' + className : '') + (warning ? ' warning' : '') + (onClick ? ' clickable' : '');
   return (
     <div className={fullClassName} onClick={onClick} style={{ width }}>
       {children}

diff --git a/webtau-reactjs/src/report/widgets/CardLabelAndNumber.tsx b/webtau-reactjs/src/report/widgets/CardLabelAndNumber.tsx
@@ -26,11 +26,12 @@ interface Props {
   secondaryLabel?: string;
   number: string;
   unit?: string;
+  onClick?: () => void;
 }
 
-export function CardLabelAndNumber({ label, secondaryLabel, number, unit }: Props) {
+export function CardLabelAndNumber({ label, onClick, secondaryLabel, number, unit }: Props) {
   return (
-    <Card className="card-label-and-number">
+    <Card className="card-label-and-number" onClick={onClick}>
       <div className="card-number">
         {number} {unit}
       </div>

diff --git a/webtau-reactjs/src/report/widgets/CardList.css b/webtau-reactjs/src/report/widgets/CardList.css
@@ -28,7 +28,7 @@
     border-right: 1px solid var(--webtau-card-list-border-color);
 }
 
-.webtau-card-list .webtau-card:last-child {
+.webtau-card-list .list > *:last-child {
     border-right: none;
 }
 

diff --git a/webtau-reactjs/src/report/widgets/ElapsedTime.css b/webtau-reactjs/src/report/widgets/ElapsedTime.css
@@ -1,4 +1,5 @@
 /*
+ * Copyright 2021 webtau maintainers
  * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -15,6 +16,6 @@
  */
 
 .http-call-elapsed-time {
-    color: #3e474b;
+    color: var(--webtau-text-color);
     padding-right: 30px;
 }