Cleanup: Simplify CSS/HTML, Correct typos

* Checkbox message: Use CSS class instead of hardcoded tags * Generalize CSS class name * Use same HTML for both messages * Adjust "no results" message phrasing * Correct whitespace typos (line 325) Signed-off-by: Erica Bugden <erica.bugden@gmail.com>
eclipse-cdt-cloud · Jan 19, 2022 · 82fa544 · 82fa544
1 parent 06da4f0
commit 82fa544
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/packages/react-components/src/components/xy-output-component.tsx b/packages/react-components/src/components/xy-output-component.tsx
@@ -315,20 +315,18 @@ export class XYOutputComponent extends AbstractTreeOutputComponent<AbstractOutpu
         // width={this.props.style.chartWidth}
         if (this.state.outputStatus === ResponseStatus.COMPLETED && this.state.xyTree.length === 0) {
             return <React.Fragment>
-                <div className='no-data'>
-                    Trace analysis completed.
+                <div className='chart-message'>
+                    Trace analysis complete.
                     <br />
                     No results: Trace missing required events.
                 </div>
             </React.Fragment>;
         }
-        if (this.state.outputStatus === ResponseStatus.COMPLETED && this.state.xyData?.datasets?.length===0 ) {
+        if (this.state.outputStatus === ResponseStatus.COMPLETED && this.state.xyData?.datasets?.length === 0) {
             return <React.Fragment>
-                {
-                    <p className='no-data' style={{fontSize: 20, marginRight: '5px', marginLeft: '5px', justifyContent:'center', alignItems:'center'}}>
-                        Select a checkbox to see analysis results
-                    </p>
-                }
+                <div className='chart-message'>
+                    Select a checkbox to see analysis results
+                </div>
             </React.Fragment>;
         }
         return <React.Fragment>

diff --git a/packages/react-components/style/output-components-style.css b/packages/react-components/style/output-components-style.css
@@ -101,8 +101,8 @@ canvas {
     margin: auto;
 }
 
-.no-data {
-    font-size: 24px;
+.chart-message {
+    font-size: 20px;
     text-align: center;
     position: relative;
     transform: translate(0, -50%);