Removed wildcard styles. Fixed lines

README.md

@@ -9,7 +9,7 @@ Code coverage HTML reporter with Azure DevOps limitations in mind.
 
 Based on istanbuljs `html` built-in [reporter](https://github.com/istanbuljs/istanbuljs/tree/master/packages/istanbul-reports/lib/html).
 
-![Screenshot](assets/reporter.jpg)
+![image](https://user-images.githubusercontent.com/562658/53685980-5f66bc80-3d2a-11e9-9081-603e32b956a0.png)
 
 ## License
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "istanbul-azure-reporter",
-    "version": "0.1.1",
+    "version": "0.1.2",
     "description": "Code coverage HTML reporter with Azure DevOps limitations in mind",
     "main": "dist/index.js",
     "scripts": {
@@ -20,6 +20,9 @@
     ],
     "author": "Martynas Žilinskas <[email protected]> (https://github.com/MartynasZilinskas)",
     "license": "MIT",
+    "bugs": "https://github.com/ReactWay/istanbul-azure-reporter/issues",
+    "repository": "reactway/istanbul-azure-reporter",
+    "homepage": "https://github.com/ReactWay/istanbul-azure-reporter",
     "devDependencies": {
         "@types/classnames": "^2.2.7",
         "@types/istanbul-lib-report": "^1.1.0",

src/components/details/details-code-view.tsx

@@ -128,7 +128,7 @@ export function DetailsCodeView(props: Props): JSX.Element {
     let hitCountLines: JSX.Element[] = [];
     for (let line = 1; line <= linesCount; line++) {
         lines.push(
-            <div key={`line-${line}`} className="code-line" id={`L${line}`}>
+            <div key={`line-${line}`} className="line" id={`L${line}`}>
                 <a href={`#L${line}`}>{line}</a>
             </div>
         );

src/components/layout.tsx

@@ -26,19 +26,23 @@ function BreadCrumbs(props: { breadcrumbs: Link[] }): JSX.Element {
             .map(breadcrumb => {
                 if (breadcrumb.url != null) {
                     return (
-                        <a key={`link-${breadcrumb.url}`} href={breadcrumb.url}>
+                        <a key={`link-${breadcrumb.url}`} href={breadcrumb.url} className="item">
                             {breadcrumb.name}
                         </a>
                     );
                 } else {
-                    return <span key={`link-${breadcrumb.url}`}>{breadcrumb.name}</span>;
+                    return (
+                        <span key={`link-${breadcrumb.url}`} className="item">
+                            {breadcrumb.name}
+                        </span>
+                    );
                 }
             })
             .reduce<JSX.Element[]>((arr, item, currentIndex) => {
                 if (currentIndex != props.breadcrumbs.length - 1) {
                     return arr.concat(
                         item,
-                        <span key={`sep-${currentIndex}`} className="sep">
+                        <span key={`sep-${currentIndex}`} className="item sep">
                             /
                         </span>
                     );
@@ -50,7 +54,7 @@ function BreadCrumbs(props: { breadcrumbs: Link[] }): JSX.Element {
         links = <span key="root">All files</span>;
     }
 
-    return <h4 className="breadcrumbs">{links}</h4>;
+    return <h5 className="breadcrumbs">{links}</h5>;
 }
 
 interface Props {

styles/details.scss

@@ -1,3 +1,7 @@
+$line-color-covered: #e6f5d0;
+$line-color-not-covered: #fccccc;
+$line-color-dark-not-covered: #fcdfdf;
+
 .coverage {
     display: flex;
     flex-flow: row;
@@ -15,11 +19,11 @@
 
         > tr {
             .code-lines-container {
-                .code-line {
+                .line {
                     text-align: right;
 
                     > a {
-                        color: rgb(0, 116, 217);
+                        color: #0074d9;
                         width: 100%;
                         text-decoration: none;
 
@@ -30,28 +34,42 @@
                 }
             }
 
-            .code-hit-counter > * {
-                text-align: right;
-                background-color: lightgrey;
-                padding: 0 0.25rem;
+            .code-hit-counter {
+                .line {
+                    text-align: right;
+                    background-color: lightgrey;
+                    padding: 0 0.25rem;
+
+                    &.covered {
+                        background-color: $line-color-covered;
+                    }
+
+                    &.not-covered {
+                        background-color: $line-color-not-covered;
+                    }
+                }
             }
 
             .code-container {
-                white-space: pre;
+                display: flex;
+                flex-flow: column;
                 padding-left: 0;
-            }
 
-            // Highlighting for lines.
-            .not-covered {
-                background-color: #fccccc;
-            }
+                .line {
+                    white-space: pre;
+
+                    &.not-covered {
+                        background-color: $line-color-not-covered;
+                    }
 
-            .line.not-covered {
-                background-color: #fcdfdf;
+                    .not-covered {
+                        background-color: $line-color-dark-not-covered;
+                    }
+                }
             }
 
-            .covered {
-                background-color: rgb(230, 245, 208);
+            .line {
+                height: 19px;
             }
         }
     }

styles/layout.scss

@@ -16,7 +16,7 @@
         padding: 1rem;
 
         .breadcrumbs {
-            > *:not(:last-child) {
+            > .item:not(:last-child) {
                 padding-right: 0.5rem;
             }
         }
@@ -40,7 +40,7 @@
                     color: #7f7f7f;
                 }
 
-                > *:not(:last-child) {
+                > span:not(:last-child) {
                     margin-right: 0.25rem;
                 }
             }