fix: adjust component name and css classes and fix padding

dhis2 · Sep 17, 2020 · 3f329ae · 3f329ae
1 parent a140b9d
commit 3f329ae
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 28 deletions.
diff --git a/src/aboutPage/AboutSection.component.js b/src/aboutPage/AboutSection.component.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Card, CardText } from 'material-ui/Card';
 
-import InfoItem from '../layout/InfoItem.component';
+import InfoRow from '../layout/InfoRow.component';
 import InfoHeader from '../layout/InfoHeader.component';
 
 const styles = {
@@ -20,7 +20,7 @@ const AboutSection = ({ header, attributes }) => (
             <CardText>
                 <table className="info-content">
                     {attributes.map(({ label, value }) => (
-                        <InfoItem
+                        <InfoRow
                             key={label}
                             label={label}
                             value={

diff --git a/src/layout/InfoCard.component.js b/src/layout/InfoCard.component.js
@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Card, CardText } from 'material-ui/Card';
 
-import InfoItem from './InfoItem.component';
+import InfoRow from './InfoRow.component';
 import InfoHeader from './InfoHeader.component';
 
 import settingsKeyMapping from '../userSettingsMapping';
@@ -88,7 +88,7 @@ class InfoCard extends Component {
         const translatedLabelName = this.getTranslatedLabelName(mapping.label);
         const labelValue = this.getLabelValue(labelName, mapping.type);
         return (
-            <InfoItem
+            <InfoRow
                 key={translatedLabelName}
                 label={translatedLabelName}
                 value={labelValue}

diff --git a/src/layout/InfoItem.component.js b/src/layout/InfoItem.component.js
diff --git a/src/layout/InfoRow.component.js b/src/layout/InfoRow.component.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const InfoRow = ({ label, value, labelStyle }) => (
+    <tr className="info-row">
+        <td className="info-cell-name" style={labelStyle}>{label}</td>
+        <td className="info-cell-value">{value}</td>
+    </tr>
+);
+
+InfoRow.propTypes = {
+    label: PropTypes.string.isRequired,
+    value: PropTypes.node.isRequired,
+    labelStyle: PropTypes.object,
+};
+
+InfoRow.defaultProps = {
+    labelStyle: {},
+};
+
+export default InfoRow;
diff --git a/src/layout/app.css b/src/layout/app.css
@@ -25,16 +25,17 @@ html, body {
   margin: 0;
 }
 
-.label-name {
+.info-cell-name {
   color: #777;
   font-size: 12pt;
   width: 110px;
-  padding-right: 20px;
   white-space: nowrap;
   vertical-align: top;
+  padding: 4px 20px 4px 0;
 }
 
-.label-value {
+.info-cell-value {
   font-size: 12pt;
   max-width: 510px;
+  padding: 4px 0;
 }