update: extract css from Badge component (#195)

src/components/Badges/EarlyBadge/index.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
+import clsx from 'clsx';
 import styles from './styles.module.css';
+import stylesGeneric from '../styles.module.css';
 
 export default function EarlyBadge(): JSX.Element {
-  return <span className={styles.badge}>Early availabilty</span>;
+  return (
+    <span className={clsx(stylesGeneric.badge, styles.badge)}>
+      Early availabilty
+    </span>
+  );
 }

src/components/Badges/EarlyBadge/styles.module.css

@@ -1,13 +1,6 @@
 .badge {
   background-color: var(--aiven-orange-5);
-  border-radius: var(--badge-radius);
   color: var(--aiven-grey-70);
-  font-weight: 400;
-  text-transform: uppercase;
-  margin: 0;
-  padding: 4px 8px;
-  font-size: 80%;
-  vertical-align: middle;
 }
 
 h1 .badge,

src/components/Badges/LimitedBadge/index.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
+import clsx from 'clsx';
 import styles from './styles.module.css';
+import stylesGeneric from '../styles.module.css';
 
 export default function LimitedBadge(): JSX.Element {
-  return <span className={styles.badge}>Limited availabilty</span>;
+  return (
+    <span className={clsx(stylesGeneric.badge, styles.badge)}>
+      Limited availabilty
+    </span>
+  );
 }

src/components/Badges/LimitedBadge/styles.module.css

@@ -1,13 +1,6 @@
 .badge {
   background-color: var(--aiven-primary-10);
-  border-radius: var(--badge-radius);
   color: var(--aiven-grey-70);
-  font-weight: 400;
-  text-transform: uppercase;
-  margin: 0;
-  padding: 4px 8px;
-  font-size: 80%;
-  vertical-align: middle;
 }
 
 h1 .badge,

src/components/Badges/ProBadge/index.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
+import clsx from 'clsx';
 import styles from './styles.module.css';
+import stylesGeneric from '../styles.module.css';
 
 export default function ProBadge(): JSX.Element {
-  return <span className={styles.badge}>pro</span>;
+  return <span className={clsx(stylesGeneric.badge, styles.badge)}>pro</span>;
 }

src/components/Badges/ProBadge/styles.module.css

@@ -1,13 +1,5 @@
 .badge {
   background-color: var(--aiven-primary-orange);
-  border-radius: var(--badge-radius);
-  color: white;
-  font-weight: 400;
-  text-transform: uppercase;
-  margin: 0;
-  padding: 4px 8px;
-  font-size: 80%;
-  vertical-align: middle;
 }
 
 h1 .badge,

src/components/Badges/styles.module.css

@@ -0,0 +1,15 @@
+.badge {
+  border-radius: var(--badge-radius);
+  font-weight: 400;
+  text-transform: uppercase;
+  margin: 0;
+  padding: 4px 8px;
+  font-size: 80%;
+  vertical-align: middle;
+}
+
+h1 .badge,
+h2 .badge,
+h3 .badge {
+  font-size: 43%;
+}