SONAR-7402 apply feedback

2 files changed, 32 insertions, 21 deletions

diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/AllMeasuresDomain.js b/server/sonar-web/src/main/js/apps/component-measures/components/AllMeasuresDomain.js
index ba5c86459bf..25d2861d25e 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/AllMeasuresDomain.js
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/AllMeasuresDomain.js
@@ -39,23 +39,25 @@ export default function AllMeasuresDomain ({ domain, component, displayLeakHeade
         <ul className="domain-measures">
           {domain.measures.map(measure => (
               <li key={measure.metric.key}>
-                <div className="domain-measures-name">
-                  {measure.metric.name}
-                </div>
-                <div className="domain-measures-value">
-                  {measure.value != null && (
-                      <Link to={{ pathname: measure.metric.key, query: { id: component.key } }}>
-                        {formatMeasure(measure.value, measure.metric.type)}
-                      </Link>
-                  )}
-                </div>
-                <div className="domain-measures-value domain-measures-leak">
-                  {measure.leak != null && (
-                      <Link to={{ pathname: measure.metric.key, query: { id: component.key } }}>
-                        {formatLeak(measure.leak, measure.metric)}
-                      </Link>
-                  )}
-                </div>
+                <Link to={{ pathname: measure.metric.key, query: { id: component.key } }}>
+                  <div className="domain-measures-name">
+                    <span>{measure.metric.name}</span>
+                  </div>
+                  <div className="domain-measures-value">
+                    {measure.value != null && (
+                        <span>
+                          {formatMeasure(measure.value, measure.metric.type)}
+                        </span>
+                    )}
+                  </div>
+                  <div className="domain-measures-value domain-measures-leak">
+                    {measure.leak != null && (
+                        <span>
+                          {formatLeak(measure.leak, measure.metric)}
+                        </span>
+                    )}
+                  </div>
+                </Link>
               </li>
           ))}
         </ul>
diff --git a/server/sonar-web/src/main/js/apps/component-measures/styles.css b/server/sonar-web/src/main/js/apps/component-measures/styles.css
index 040ac570462..18cc9b14459 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/styles.css
+++ b/server/sonar-web/src/main/js/apps/component-measures/styles.css
@@ -1,6 +1,7 @@
 .measures-domains {
-  width: 600px;
-  margin: 20px auto;
+  margin: 20px;
+  column-count: 2;
+  column-gap: 60px;
 }
 
 .measures-domains > li + li {
@@ -15,11 +16,13 @@
   background-color: #fbf3d5;
 }
 
-.domain-measures > li {
+
+.domain-measures > li > a {
   display: flex;
+  border: none;
 }
 
-.domain-measures > li:nth-child(odd) {
+.domain-measures > li:nth-child(odd) > a {
   background-color: #f8f8f8;
 }
 
@@ -33,13 +36,19 @@
   width: calc(100% - 160px);
 }
 
+.domain-measures-name > span {
+  border-bottom: 1px solid #cae3f2;
+}
+
 .domain-measures-value {
   width: 80px;
+  color: #444;
   text-align: right;
 }
 
 .domain-measures-leak {
   background-color: #fbf3d5;
+  transition: background-color 0.3s ease;
 }
 
 .domain-measures > li:nth-child(odd) .domain-measures-leak {