4 files changed, 26 insertions, 3 deletions

diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index d29345298..93c18efde 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -119,6 +119,16 @@ export const announcements = merge({}, defaultStyles.announcements, {
   },
 });
 
+// Signup
+export const signup = merge({}, defaultStyles.signup, {
+  pricing: {
+    feature: {
+      background: legacyStyles.darkThemeGrayLight,
+      border: color(legacyStyles.darkThemeGrayLight).lighten(0.2).hex(),
+    },
+  },
+});
+
 // Todos
 export const todos = merge({}, defaultStyles.todos, {
   todosLayer: {
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index 9f9c39f9a..7edf8331f 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -208,6 +208,16 @@ export const announcements = {
   },
 };
 
+// Signup
+export const signup = {
+  pricing: {
+    feature: {
+      background: legacyStyles.themeGrayLightest,
+      border: legacyStyles.themeGrayLighter,
+    },
+  },
+};
+
 // Todos
 export const todos = {
   todosLayer: {
@@ -223,5 +233,5 @@ export const todos = {
   },
   resizeHandler: {
     backgroundHover: styleTypes.primary.accent,
-  }
+  },
 };
diff --git a/packages/ui/src/badge/ProBadge.tsx b/packages/ui/src/badge/ProBadge.tsx
index c18cb4a0c..5cc41f5b2 100644
--- a/packages/ui/src/badge/ProBadge.tsx
+++ b/packages/ui/src/badge/ProBadge.tsx
@@ -4,13 +4,14 @@ import classnames from 'classnames';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
-import { Icon, Badge } from '../';
+import { Badge, Icon } from '../';
 import { IWithStyle } from '../typings/generic';
 
 interface IProps extends IWithStyle {
   badgeClasses?: string;
   iconClasses?: string;
   inverted?: boolean;
+  className?: string;
 }
 
 const styles = (theme: Theme) => ({
@@ -38,6 +39,7 @@ class ProBadgeComponent extends Component<IProps> {
       badgeClasses,
       iconClasses,
       inverted,
+      className,
     } = this.props;
 
     return (
@@ -47,6 +49,7 @@ class ProBadgeComponent extends Component<IProps> {
           classes.badge,
           inverted && classes.invertedBadge,
           badgeClasses,
+          className,
         ])}
       >
         <Icon
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx
index 5070ee7ef..e4c2c5a3e 100644
--- a/packages/ui/src/infobox/index.tsx
+++ b/packages/ui/src/infobox/index.tsx
@@ -49,13 +49,13 @@ const styles = (theme: Theme) => ({
     position: 'relative',
     overflow: 'hidden',
     height: 'auto',
+    marginBottom: 30,
   },
   infobox: {
     alignItems: 'center',
     borderRadius: theme.borderRadiusSmall,
     display: 'flex',
     height: 'auto',
-    marginBottom: 30,
     padding: '15px 20px',
     top: 0,
     transition: 'all 0.5s',