Merge branch 'master' of https://github.com/meetfranz/franz into franz-5.3.0

8 files changed, 76 insertions, 26 deletions

diff --git a/packages/forms/package.json b/packages/forms/package.json
index d50f4c756..bb76462d8 100644
--- a/packages/forms/package.json
+++ b/packages/forms/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meetfranz/forms",
-  "version": "1.0.16",
+  "version": "1.1.0",
   "description": "React form components for Franz",
   "main": "lib/index.js",
   "scripts": {
@@ -35,5 +35,5 @@
     "react-dom": "16.7.0",
     "react-jss": "^8.6.1"
   },
-  "gitHead": "9f2ab40b7602bc3df26ebb093b484b9917768f69"
+  "gitHead": "e1e46986d902adc4c19ee009016290f9733a7d61"
 }
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx
index 3f129d0ff..b81154a43 100644
--- a/packages/forms/src/button/index.tsx
+++ b/packages/forms/src/button/index.tsx
@@ -1,4 +1,3 @@
-import * as mdiIcons from '@mdi/js';
 import Icon from '@mdi/react';
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
@@ -21,7 +20,7 @@ interface IProps extends IFormField, IWithStyle {
   stretch?: boolean;
   loaded?: boolean;
   busy?: boolean;
-  icon?: keyof typeof mdiIcons;
+  icon?: string;
   href?: string;
   target?: string;
 }
@@ -175,7 +174,7 @@ class ButtonComponent extends Component<IProps> {
       onClick,
       buttonType,
       loaded,
-      icon: iconName,
+      icon,
       busy: busyProp,
       href,
       target,
@@ -185,13 +184,6 @@ class ButtonComponent extends Component<IProps> {
       busy,
     } = this.state;
 
-    let icon = '';
-    if (iconName && mdiIcons[iconName]) {
-      icon = mdiIcons[iconName];
-    } else if (iconName && !mdiIcons[iconName]) {
-      console.warn(`Icon '${iconName}' was not found`);
-    }
-
     let showLoader = false;
     if (loaded) {
       showLoader = !loaded;
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index bd9f001e8..e94f54c55 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -11,6 +11,8 @@ export const colorBackgroundSubscriptionContainer = legacyStyles.themeBrandInfo;
 export const colorHeadline = legacyStyles.darkThemeTextColor;
 export const colorText = legacyStyles.darkThemeTextColor;
 
+export const defaultContentBorder = legacyStyles.themeGrayDark;
+
 // Loader
 export const colorFullscreenLoaderSpinner = '#FFF';
 export const colorWebviewLoaderBackground = color(legacyStyles.darkThemeGrayDarkest).alpha(0.5).rgb().string();
@@ -118,3 +120,28 @@ export const announcements = merge({}, defaultStyles.announcements, {
     background: legacyStyles.darkThemeGrayDark,
   },
 });
+
+// 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: {
+    borderLeftColor: legacyStyles.darkThemeGrayDarker,
+  },
+  toggleButton: {
+    background: defaultStyles.styleTypes.primary.accent,
+    textColor: defaultStyles.styleTypes.primary.contrast,
+    shadowColor: 'rgba(0, 0, 0, 0.2)',
+  },
+  dragIndicator: {
+    background: legacyStyles.themeGrayLight,
+  },
+});
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index 53f810f00..79a6d676f 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -28,6 +28,8 @@ export const colorHeadline = legacyStyles.themeGrayDark;
 
 export const colorText = legacyStyles.themeTextColor;
 
+export const defaultContentBorder = color(legacyStyles.themeGrayLighter).darken(0.1).rgb().string();
+
 // Subscription Container Component
 export const colorSubscriptionContainerBackground = 'none';
 export const colorSubscriptionContainerBorder = `1px solid ${brandPrimary}`;
@@ -207,3 +209,31 @@ export const announcements = {
     background: legacyStyles.themeGrayLightest,
   },
 };
+
+// Signup
+export const signup = {
+  pricing: {
+    feature: {
+      background: legacyStyles.themeGrayLightest,
+      border: legacyStyles.themeGrayLighter,
+    },
+  },
+};
+
+// Todos
+export const todos = {
+  todosLayer: {
+    borderLeftColor: legacyStyles.themeGrayLighter,
+  },
+  toggleButton: {
+    background: styleTypes.primary.accent,
+    textColor: styleTypes.primary.contrast,
+    shadowColor: 'rgba(0, 0, 0, 0.2)',
+  },
+  dragIndicator: {
+    background: legacyStyles.themeGrayLight,
+  },
+  resizeHandler: {
+    backgroundHover: styleTypes.primary.accent,
+  },
+};
diff --git a/packages/ui/package.json b/packages/ui/package.json
index a851ed9cf..4f42b21b5 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meetfranz/ui",
-  "version": "0.0.9",
+  "version": "1.0.0",
   "description": "React UI components for Franz",
   "main": "lib/index.js",
   "scripts": {
@@ -34,5 +34,5 @@
     "react-dom": "16.7.0",
     "react-jss": "^8.6.1"
   },
-  "gitHead": "9f2ab40b7602bc3df26ebb093b484b9917768f69"
+  "gitHead": "e1e46986d902adc4c19ee009016290f9733a7d61"
 }
diff --git a/packages/ui/src/badge/ProBadge.tsx b/packages/ui/src/badge/ProBadge.tsx
index 612e23210..5cc41f5b2 100644
--- a/packages/ui/src/badge/ProBadge.tsx
+++ b/packages/ui/src/badge/ProBadge.tsx
@@ -1,15 +1,17 @@
+import { mdiStar } from '@mdi/js';
 import { Theme } from '@meetfranz/theme';
 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) => ({
@@ -37,6 +39,7 @@ class ProBadgeComponent extends Component<IProps> {
       badgeClasses,
       iconClasses,
       inverted,
+      className,
     } = this.props;
 
     return (
@@ -46,10 +49,11 @@ class ProBadgeComponent extends Component<IProps> {
           classes.badge,
           inverted && classes.invertedBadge,
           badgeClasses,
+          className,
         ])}
       >
         <Icon
-          icon="mdiStar"
+          icon={mdiStar}
           className={classnames([
             classes.icon,
             inverted && classes.invertedIcon,
diff --git a/packages/ui/src/icon/index.tsx b/packages/ui/src/icon/index.tsx
index e30d3396d..af467c085 100644
--- a/packages/ui/src/icon/index.tsx
+++ b/packages/ui/src/icon/index.tsx
@@ -1,4 +1,3 @@
-import * as mdiIcons from '@mdi/js';
 import MdiIcon from '@mdi/react';
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
@@ -8,7 +7,7 @@ import injectStyle from 'react-jss';
 import { IWithStyle } from '../typings/generic';
 
 interface IProps extends IWithStyle {
-  icon: keyof typeof mdiIcons;
+  icon: string;
   size?: number;
   className?: string;
 }
@@ -27,16 +26,13 @@ class IconComponent extends Component<IProps> {
   render() {
     const {
       classes,
-      icon: iconName,
+      icon,
       size,
       className,
     } = this.props;
 
-    let icon = '';
-    if (iconName && mdiIcons[iconName]) {
-      icon = mdiIcons[iconName];
-    } else if (iconName && !mdiIcons[iconName]) {
-      console.warn(`Icon '${iconName}' was not found`);
+    if (!icon) {
+      console.warn('No Icon specified');
     }
 
     return (
diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx
index 9066a623e..e4c2c5a3e 100644
--- a/packages/ui/src/infobox/index.tsx
+++ b/packages/ui/src/infobox/index.tsx
@@ -1,3 +1,4 @@
+import { mdiClose } from '@mdi/js';
 import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
 import React, { Component } from 'react';
@@ -48,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',
@@ -192,7 +193,7 @@ class InfoboxComponent extends Component<IProps, IState> {
               onClick={this.dismiss.bind(this)}
               className={classes.close}
             >
-              <Icon icon="mdiClose" />
+              <Icon icon={mdiClose} />
             </button>
           )}
         </div>