Remove pf-c-content CSS class from status page

This is an old PF3 CSS rule which seems to conflict with some of the
PF4 rules. As a result, the styles for the h3 headings (used for the
pipeline names) are styled differently than the other headings used
in zuul-web. Especially the margin is set to 0 which makes the headings
look a little "broken" and the containers for the different pipelines
are crushed together.

This is the only occurrence of this rule, so I just removed it and
adapted the "broken" heading to a PF4 Title. Those are small changes,
but the overall result should look much cleaner and more PF4-like.

Change-Id: I226149588f2f3b6ee5d09aa43e1b8c085390ece1

1 files changed, 4 insertions, 4 deletions

diff --git a/web/src/containers/status/Pipeline.jsx b/web/src/containers/status/Pipeline.jsx
index ab18e8809..f19b35c6c 100644
--- a/web/src/containers/status/Pipeline.jsx
+++ b/web/src/containers/status/Pipeline.jsx
@@ -15,7 +15,7 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import { Badge } from 'patternfly-react'
-import { Tooltip } from '@patternfly/react-core'
+import { Title, Tooltip } from '@patternfly/react-core'
 
 import ChangeQueue from './ChangeQueue'
 
@@ -117,11 +117,11 @@ class Pipeline extends React.Component {
     const { pipeline, filter, expanded } = this.props
     const count = this.createTree(pipeline)
     return (
-      <div className="pf-c-content zuul-pipeline col-sm-6 col-md-4">
+      <div className="zuul-pipeline col-sm-6 col-md-4">
         <div className="zuul-pipeline-header">
-          <h3>
+          <Title headingLevel="h3">
             {pipeline.name} <Badge>{count}</Badge>
-          </h3>
+          </Title>
           {pipeline.description ? (
             <small>
               <p>{pipeline.description.split(/\r?\n\r?\n/)}</p>