fix preview badge styles

openshift · Aug 24, 2020 · e2bf8d1 · e2bf8d1
1 parent d09a574
commit e2bf8d1
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 16 deletions.
diff --git a/frontend/packages/console-shared/src/components/badges/Badge.scss b/frontend/packages/console-shared/src/components/badges/Badge.scss
@@ -5,7 +5,9 @@
   }
 }
 
-.tech-preview {
+span.ocs-preview-badge {
+  background-color: #d93f00;
+  border-radius: var(--pf-global--BorderRadius--sm);
   .pf-c-label__content {
     color: var(--pf-global--Color--light-100);
   }

diff --git a/frontend/packages/console-shared/src/components/badges/DevPreviewBadge.tsx b/frontend/packages/console-shared/src/components/badges/DevPreviewBadge.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { Label } from '@patternfly/react-core';
+import './Badge.scss';
 
-const DevPreviewBadge: React.FC = () => (
-  <Label style={{ backgroundColor: '#D93F00' }}>Dev Preview</Label>
-);
+const DevPreviewBadge: React.FC = () => <Label className="ocs-preview-badge">Dev Preview</Label>;
 
 export default DevPreviewBadge;
diff --git a/frontend/packages/console-shared/src/components/badges/TechPreviewBadge.tsx b/frontend/packages/console-shared/src/components/badges/TechPreviewBadge.tsx
@@ -1,17 +1,7 @@
 import * as React from 'react';
 import { Label } from '@patternfly/react-core';
+import './Badge.scss';
 
-const TechPreviewBadge: React.FC = () => (
-  <Label
-    className="tech-preview"
-    style={{
-      backgroundColor: '#D93F00',
-      height: '100%',
-      borderRadius: 'var(--pf-global--BorderRadius--sm)',
-    }}
-  >
-    Tech Preview
-  </Label>
-);
+const TechPreviewBadge: React.FC = () => <Label className="ocs-preview-badge">Tech Preview</Label>;
 
 export default TechPreviewBadge;