1 files changed, 32 insertions, 32 deletions

diff --git a/packages/ui/src/infobox/index.tsx b/packages/ui/src/infobox/index.tsx
index e4c2c5a3e..88cfdb620 100644
--- a/packages/ui/src/infobox/index.tsx
+++ b/packages/ui/src/infobox/index.tsx
@@ -1,10 +1,10 @@
 import { mdiClose } from '@mdi/js';
-import { Theme } from '@meetfranz/theme';
 import classnames from 'classnames';
 import React, { Component } from 'react';
 import injectStyle from 'react-jss';
 
-import { Icon } from '../';
+import { Icon } from '..';
+import { Theme } from '../../../theme';
 import { IWithStyle } from '../typings/generic';
 
 interface IProps extends IWithStyle {
@@ -27,7 +27,7 @@ interface IState {
 
 const buttonStyles = (theme: Theme) => {
   const styles = {};
-  Object.keys(theme.styleTypes).map((style) => {
+  Object.keys(theme.styleTypes).map(style => {
     Object.assign(styles, {
       [style]: {
         background: theme.styleTypes[style].accent,
@@ -44,6 +44,15 @@ const buttonStyles = (theme: Theme) => {
   return styles;
 };
 
+const infoBoxTransition: string = 'none';
+const ctaTransition: string = 'none';
+
+// TODO: Not sure why, but this location alone, the `dinwo` is not defined - and it throws an error thus aborting the startup sequence of ferdi
+// if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+//   infoBoxTransition = 'all 0.5s';
+//   ctaTransition = 'opacity 0.3s';
+// }
+
 const styles = (theme: Theme) => ({
   wrapper: {
     position: 'relative',
@@ -58,7 +67,7 @@ const styles = (theme: Theme) => ({
     height: 'auto',
     padding: '15px 20px',
     top: 0,
-    transition: 'all 0.5s',
+    transition: infoBoxTransition,
     opacity: 1,
   },
   dismissing: {
@@ -73,22 +82,25 @@ const styles = (theme: Theme) => ({
     marginRight: 10,
   },
   close: {
-    color: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast,
+    color: (props: IProps) =>
+      theme.styleTypes[props.type ? props.type : 'primary'].contrast,
     marginRight: -5,
     border: 0,
     background: 'none',
   },
   cta: {
-    borderColor: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast,
+    borderColor: (props: IProps) =>
+      theme.styleTypes[props.type ? props.type : 'primary'].contrast,
     borderRadius: theme.borderRadiusSmall,
     borderStyle: 'solid',
     borderWidth: 1,
     background: 'none',
-    color: (props: IProps) => theme.styleTypes[props.type ? props.type : 'primary'].contrast,
+    color: (props: IProps) =>
+      theme.styleTypes[props.type ? props.type : 'primary'].contrast,
     marginLeft: 15,
     padding: [4, 10],
     fontSize: theme.uiFontSize,
-    transition: 'opacity 0.3s',
+    transition: ctaTransition,
 
     '&:hover': {
       opacity: 0.6,
@@ -113,9 +125,7 @@ class InfoboxComponent extends Component<IProps, IState> {
   };
 
   dismiss() {
-    const {
-      onDismiss,
-    } = this.props;
+    const { onDismiss } = this.props;
 
     this.setState({
       isDismissing: true,
@@ -129,7 +139,7 @@ class InfoboxComponent extends Component<IProps, IState> {
       this.setState({
         dismissed: true,
       });
-    },         3000);
+    }, 3000);
   }
 
   componentWillUnmount(): void {
@@ -144,26 +154,24 @@ class InfoboxComponent extends Component<IProps, IState> {
       icon,
       type,
       ctaLabel,
-      ctaLoading,
       ctaOnClick,
       dismissable,
       className,
     } = this.props;
 
-    const {
-      isDismissing,
-      dismissed,
-    } = this.state;
+    const { isDismissing, dismissed } = this.state;
 
     if (dismissed) {
       return null;
     }
 
     return (
-      <div className={classnames({
-        [classes.wrapper]: true,
-        [`${className}`]: className,
-      })}>
+      <div
+        className={classnames({
+          [classes.wrapper]: true,
+          [`${className}`]: className,
+        })}
+      >
         <div
           className={classnames({
             [classes.infobox]: true,
@@ -172,18 +180,10 @@ class InfoboxComponent extends Component<IProps, IState> {
           })}
           data-type="franz-infobox"
         >
-          {icon && (
-            <Icon icon={icon} className={classes.icon} />
-          )}
-          <div className={classes.content}>
-            {children}
-          </div>
+          {icon && <Icon icon={icon} className={classes.icon} />}
+          <div className={classes.content}>{children}</div>
           {ctaLabel && (
-            <button
-              className={classes.cta}
-              onClick={ctaOnClick}
-              type="button"
-            >
+            <button className={classes.cta} onClick={ctaOnClick} type="button">
               {ctaLabel}
             </button>
           )}