I have a design that needs some adjustments. The material icon is too close to the description, and I attempted to create padding by adding the following CSS:
.location-secondary-info span:first-child {
padding-right: 5px;
}
However, this change did not have the desired effect.
Here is the code for the component:
renderLocation() {
const filteredLocations = this.props.locations.filter(location => {
return !location.name.match(/[A-Z0-9]+$/);
});
return filteredLocations.map(location => {
if (location.airport_code) {
return (
<div key={location.id}>
<div className="location">
<h1>
{location.name} ({location.airport_code})
</h1>
<div className="location-secondary-info">
<span>
<i className="material-icons">airplanemode_active</i>
{location.description}
</span>
</div>
</div>
</div>
);
} else {
return (
<div key={location.id}>
<div className="location">
<h1>{location.name}</h1>
<div className="location-secondary-info">
<span>
<i className="material-icons">location_city</i>
{location.description}
</span>
</div>
</div>
</div>
);
}
});
}