Update dashboard styles (#352)

kubevirt · Apr 15, 2019 · 9b70da1 · 9b70da1
1 parent 512559c
commit 9b70da1
Show file tree

Hide file tree

Showing 44 changed files with 547 additions and 533 deletions.
diff --git a/sass/components/ClusterOverview/cluster-overview.scss b/sass/components/ClusterOverview/cluster-overview.scss
@@ -1,5 +1,4 @@
 .kubevirt-cluster-overview__body {
-  padding: 1em;
   background-color: gray;
 }
 
@@ -12,3 +11,7 @@
   justify-content: space-between;
   align-items: center;
 }
+
+.kubevirt-cluster-overview__card--top-border {
+  border-top: 1px solid #d1d1d1;
+}
diff --git a/sass/components/ClusterOverview/health.scss b/sass/components/ClusterOverview/health.scss
@@ -1,16 +1,10 @@
-.kubevirt-health__body {
-  text-align: center;
-  max-height: 130px;
+/* stylelint-disable plugin/selector-bem-pattern */
+.kubevirt-dashboard__health-grid.pf-l-grid {
+  grid-gap: 0;
 }
 
-.kubevirt-health__icon--error {
-  font-size: 67.2px;
-  color: red;
-  line-height: 67.2px;
-}
-
-.kubevirt-health__icon--ok {
-  font-size: 67.2px;
-  color: yellowgreen;
-  line-height: 67.2px;
+.kubevirt-compliance__body {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
 }
diff --git a/sass/components/Dashboard/dashboard.scss b/sass/components/Dashboard/dashboard.scss
@@ -1,10 +1,18 @@
 .kubevirt-dashboard__body {
-  padding: 1em;
-  background-color: whitesmoke;
+  background-color: #ededed;
+  padding: 1rem;
+
+  .pf-l-grid {
+    grid-gap: 1rem;
+  }
 }
 
 .kubevirt-dashboard__card {
-  margin: 1em;
+  margin: 0;
+}
+
+.kubevirt-dashboard__card-title {
+  font-size: 1rem;
 }
 
 .kubevirt-dashboard__card-heading {
@@ -13,16 +21,10 @@
   align-items: center;
 }
 
-.kubevirt-dashboard__health-grid {
-  margin: 1em;
-
-  /* stylelint-disable plugin/selector-bem-pattern */
-  .kubevirt-dashboard__card {
-    margin: 0;
-  }
-  /* stylelint-enable */
-}
-
 .kubevirt-dashboard__card--top-border {
   border-top: 1px solid #d1d1d1;
 }
+
+.kubevirt-dashboard__icon-sm {
+  font-size: 1.125rem;
+}
diff --git a/sass/components/Dashboard/detail.scss b/sass/components/Dashboard/detail.scss
@@ -1,10 +1,14 @@
+.kubevirt-detail__card {
+  margin-bottom: 1rem;
+}
+
 .kubevirt-detail__item-title {
   float: left;
   clear: left;
-  width: 150px;
+  // width: 150px;
   margin-bottom: 5px;
-  font-weight: 600;
   font-size: 14px;
+  text-transform: capitalize;
 }
 
 .kubevirt-detail__item-value {

diff --git a/sass/components/Dashboard/health.scss b/sass/components/Dashboard/health.scss
@@ -1,27 +1,22 @@
 .kubevirt-health__body {
-  max-height: 100px;
-}
-
-.kubevirt-health__icon {
-  font-size: 1.333em;
-  line-height: 1.333em;
-  display: inline-flex;
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
 }
 
-.kubevirt-health__icon--ok {
-  color: yellowgreen;
+.kubevirt-health__text {
+  font-size: 0.875rem;
+  margin-left: 1rem;
 }
 
-.kubevirt-health__icon--warning {
-  color: goldenrod;
+.kubevirt-health__icon {
+  font-size: 1.5rem;
 }
 
 .kubevirt-health__icon--error {
-  color: red;
+  color: #c9190b;
 }
 
-.kubevirt-health__row-status-item-text {
-  margin-left: 1em;
-  font-size: 1em;
+.kubevirt-health__icon--ok {
+  color: #92d400;
 }
diff --git a/sass/components/Dashboard/inventory.scss b/sass/components/Dashboard/inventory.scss
@@ -1,7 +1,7 @@
 .kubevirt-inventory__row {
   display: flex;
   border-bottom: 1px solid #ededed;
-  font-size: 1.333em;
+  font-size: 1rem;
   padding: 1em 0;
   justify-content: space-between;
   align-items: center;
@@ -33,21 +33,13 @@
 }
 
 .kubevirt-inventory__row-status-item-icon--ok {
-  color: yellowgreen;
+  color: #92d400;
 }
 
 .kubevirt-inventory__row-status-item-icon--error {
-  color: red;
+  color: #c9190b;
 }
 
 .kubevirt-inventory__row-status-item-icon--warn {
-  color: goldenrod;
-}
-
-.kubevirt-inventory__row-status-item-icon--off {
-  font-size: 1.7em;
-}
-
-.kubevirt-inventory__row-status-item-icon--in-progress {
-  font-size: 1.6em;
+  color: #f0ab00;
 }
diff --git a/src/components/ClusterOverview/Alerts/tests/__snapshots__/Alerts.test.js.snap b/src/components/ClusterOverview/Alerts/tests/__snapshots__/Alerts.test.js.snap
@@ -7,7 +7,9 @@ exports[`<Alerts /> renders correctly 1`] = `
   <DashboardCardHeader
     className={null}
   >
-    <DashboardCardTitle>
+    <DashboardCardTitle
+      className={null}
+    >
       Alerts
     </DashboardCardTitle>
   </DashboardCardHeader>

diff --git a/src/components/ClusterOverview/Capacity/tests/__snapshots__/Capacity.test.js.snap b/src/components/ClusterOverview/Capacity/tests/__snapshots__/Capacity.test.js.snap
@@ -8,7 +8,7 @@ exports[`<Capacity /> renders correctly 1`] = `
     class="card-pf-heading kubevirt-dashboard__card-heading"
   >
     <h2
-      class="card-pf-title"
+      class="card-pf-title kubevirt-dashboard__card-title"
     >
       Cluster Capacity
     </h2>
@@ -100,7 +100,7 @@ exports[`<Capacity /> renders correctly in Loading state 1`] = `
     class="card-pf-heading kubevirt-dashboard__card-heading"
   >
     <h2
-      class="card-pf-title"
+      class="card-pf-title kubevirt-dashboard__card-title"
     >
       Cluster Capacity
     </h2>

diff --git a/src/components/ClusterOverview/ClusterOverview.js b/src/components/ClusterOverview/ClusterOverview.js
@@ -20,15 +20,15 @@ const MainCards = () => (
   <GridItem lg={6} md={12} sm={12}>
     <Grid>
       <GridItem span={12}>
-        <Grid className="kubevirt-dashbord__health-grid">
-          <GridItem span={6}>
+        <Grid className="kubevirt-dashboard__health-grid">
+          <GridItem lg={6} md={12} sm={12}>
             <HealthConnected />
           </GridItem>
-          <GridItem span={6}>
+          <GridItem lg={6} md={12} sm={12}>
             <ComplianceConnected />
           </GridItem>
           <GridItem span={12}>
-            <AlertsConnected className="kubevirt-dashbord__card--top-border" />
+            <AlertsConnected className="kubevirt-dashboard__card--top-border" />
           </GridItem>
         </Grid>
       </GridItem>
@@ -44,14 +44,8 @@ const MainCards = () => (
 
 const LeftCards = () => (
   <GridItem key="left" lg={3} md={12} sm={12}>
-    <Grid>
-      <GridItem lg={12} md={6} sm={12}>
-        <DetailsConnected />
-      </GridItem>
-      <GridItem lg={12} md={6} sm={12}>
-        <InventoryConnected />
-      </GridItem>
-    </Grid>
+    <DetailsConnected className="kubevirt-detail__card" />
+    <InventoryConnected />
   </GridItem>
 );
 

diff --git a/src/components/ClusterOverview/Compliance/tests/__snapshots__/Compliance.test.js.snap b/src/components/ClusterOverview/Compliance/tests/__snapshots__/Compliance.test.js.snap
@@ -8,7 +8,7 @@ exports[`<Compliance /> renders correctly 1`] = `
     class="card-pf-heading kubevirt-dashboard__card-heading"
   >
     <h2
-      class="card-pf-title"
+      class="card-pf-title kubevirt-dashboard__card-title"
     >
       Cluster Compliance
     </h2>
@@ -17,7 +17,7 @@ exports[`<Compliance /> renders correctly 1`] = `
     class="card-pf-body kubevirt-compliance__body"
   >
     <div
-      class="kubevirt-health__icon--ok"
+      class="kubevirt-health__icon--ok kubevirt-health__icon"
     >
       <span
         aria-hidden="true"

diff --git a/src/components/ClusterOverview/Details/Details.js b/src/components/ClusterOverview/Details/Details.js
@@ -13,8 +13,8 @@ import { getClusterName, getInfrastructurePlatform, getOpenshiftVersion } from '
 import { DetailItem } from '../../Dashboard/Details/DetailItem';
 import { DetailsBody } from '../../Dashboard/Details/DetailsBody';
 
-export const Details = ({ infrastructure, openshiftClusterVersions, LoadingComponent }) => (
-  <DashboardCard>
+export const Details = ({ infrastructure, openshiftClusterVersions, LoadingComponent, className }) => (
+  <DashboardCard className={className}>
     <DashboardCardHeader>
       <DashboardCardTitle>Details</DashboardCardTitle>
     </DashboardCardHeader>
@@ -50,14 +50,26 @@ Details.defaultProps = {
   infrastructure: null,
   openshiftClusterVersions: null,
   LoadingComponent: InlineLoading,
+  className: null,
 };
 
 Details.propTypes = {
   infrastructure: PropTypes.object,
   openshiftClusterVersions: PropTypes.array,
   LoadingComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  className: PropTypes.string,
 };
 
-export const DetailsConnected = () => (
-  <ClusterOverviewContext.Consumer>{props => <Details {...props} />}</ClusterOverviewContext.Consumer>
+export const DetailsConnected = ({ className }) => (
+  <ClusterOverviewContext.Consumer>
+    {props => <Details className={className} {...props} />}
+  </ClusterOverviewContext.Consumer>
 );
+
+DetailsConnected.defaultProps = {
+  className: null,
+};
+
+DetailsConnected.propTypes = {
+  className: PropTypes.string,
+};
diff --git a/src/components/ClusterOverview/Details/tests/__snapshots__/Details.test.js.snap b/src/components/ClusterOverview/Details/tests/__snapshots__/Details.test.js.snap
@@ -8,7 +8,7 @@ exports[`<Details /> renders correctly 1`] = `
     class="card-pf-heading kubevirt-dashboard__card-heading"
   >
     <h2
-      class="card-pf-title"
+      class="card-pf-title kubevirt-dashboard__card-title"
     >
       Details
     </h2>

diff --git a/src/components/ClusterOverview/Events/tests/__snapshots__/Events.test.js.snap b/src/components/ClusterOverview/Events/tests/__snapshots__/Events.test.js.snap
@@ -8,7 +8,7 @@ exports[`<Events /> renders correctly 1`] = `
     class="card-pf-heading kubevirt-dashboard__card-heading kubevirt-events__card-header"
   >
     <h2
-      class="card-pf-title"
+      class="card-pf-title kubevirt-dashboard__card-title"
     >
       Cluster Events
     </h2>
@@ -18,7 +18,7 @@ exports[`<Events /> renders correctly 1`] = `
     >
       <span
         aria-hidden="true"
-        class="fa fa-info-circle fa-2x"
+        class="fa fa-info-circle kubevirt-dashboard__icon-sm"
       />
     </button>
   </div>

diff --git a/src/components/ClusterOverview/Health/HealthBody.js b/src/components/ClusterOverview/Health/HealthBody.js
@@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
 import { Icon } from 'patternfly-react';
 
 const healtyIcon = (
-  <div className="kubevirt-health__icon--ok">
+  <div className="kubevirt-health__icon--ok kubevirt-health__icon">
     <Icon type="fa" name="check-circle" />
   </div>
 );
 
 const errorIcon = (
-  <div className="kubevirt-health__icon--error">
+  <div className="kubevirt-health__icon--error kubevirt-health__icon">
     <Icon type="fa" name="exclamation-circle" />
   </div>
 );

diff --git a/src/components/ClusterOverview/Health/tests/__snapshots__/Health.test.js.snap b/src/components/ClusterOverview/Health/tests/__snapshots__/Health.test.js.snap
@@ -8,7 +8,7 @@ exports[`<Health /> renders correctly 1`] = `
     class="card-pf-heading kubevirt-dashboard__card-heading"
   >
     <h2
-      class="card-pf-title"
+      class="card-pf-title kubevirt-dashboard__card-title"
     >
       Cluster Health
     </h2>
@@ -17,7 +17,7 @@ exports[`<Health /> renders correctly 1`] = `
     class="card-pf-body kubevirt-health__body"
   >
     <div
-      class="kubevirt-health__icon--error"
+      class="kubevirt-health__icon--error kubevirt-health__icon"
     >
       <span
         aria-hidden="true"

diff --git a/src/components/ClusterOverview/Health/tests/__snapshots__/HealthBody.test.js.snap b/src/components/ClusterOverview/Health/tests/__snapshots__/HealthBody.test.js.snap
@@ -8,7 +8,7 @@ exports[`<Health /> renders correctly 1`] = `
     class="card-pf-heading kubevirt-dashboard__card-heading"
   >
     <h2
-      class="card-pf-title"
+      class="card-pf-title kubevirt-dashboard__card-title"
     >
       Cluster Health
     </h2>
@@ -17,7 +17,7 @@ exports[`<Health /> renders correctly 1`] = `
     class="card-pf-body kubevirt-health__body"
   >
     <div
-      class="kubevirt-health__icon--error"
+      class="kubevirt-health__icon--error kubevirt-health__icon"
     >
       <span
         aria-hidden="true"