Homepage fixes. (codesandbox#781)

Author: lbogdan

packages/homepage/src/components/Button.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled, { css } from 'styled-components';
 
 const getGradient = color => css`linear-gradient(
@@ -29,4 +30,6 @@ export default styled.a`
     `};
 
   text-decoration: none;
-`;
+`.withComponent(({ color, secondary, children, ...rest }) => (
+  <a {...rest}>{children}</a>
+));

packages/homepage/src/components/Cube.js

@@ -37,7 +37,7 @@ const Sides = styled.div`
     background-color: ${({ color }) => color.clearer(0.2)};
     border: ${({ size }) => size / 70}px solid rgba(255, 255, 255, 0.4);
   }
-`;
+`.withComponent(({ noAnimation, color, ...rest }) => <div {...rest} />);
 
 const Side = styled.div`
   transform-origin: 50% 50%;

packages/homepage/src/screens/home/CycleFeature/Cube.js

@@ -22,7 +22,7 @@ const Sides = styled.div`
     background-color: ${({ color }) => color.clearer(0.2)};
     border: ${({ size }) => size / 70}px solid rgba(255, 255, 255, 0.4);
   }
-`;
+`.withComponent(({ color, size, ...rest }) => <div {...rest} />);
 
 const Side = styled.div`
   transform-origin: 50% 50%;
@@ -32,7 +32,6 @@ const Side = styled.div`
 type Props = {
   size: number,
   className: string,
-  noAnimation: ?boolean,
   speed: number,
   color: string,
   offset: number,
@@ -45,20 +44,13 @@ export default class GlowCube extends React.Component<Props> {
       color = 'rgba(242,119,119,0.5)',
       speed = 1,
       offset = 0,
-      noAnimation,
       className,
       ref,
       id,
     } = this.props;
     return (
       <Cube id={id} innerRef={ref} className={className} size={size}>
-        <Sides
-          color={color}
-          offset={offset}
-          speed={speed}
-          noAnimation={noAnimation}
-          size={size}
-        >
+        <Sides color={color} offset={offset} speed={speed} size={size}>
           <Side
             style={{ boxShadow: `0px 0px 100px ${color.clearer(0.3)()}` }}
             rotate="rotateX(90deg)"

packages/homepage/src/screens/home/Frameworks/index.js

@@ -52,7 +52,9 @@ const Container = styled.div`
     margin-top: 1rem;
     height: 340px;
   `};
-`;
+`.withComponent(({ color, children, ...rest }) => (
+  <div {...rest}>{children}</div>
+));
 
 const Pane = styled(MaxWidth)`
   color: rgba(255, 255, 255, 0.8);
@@ -313,7 +315,7 @@ export default class Frameworks extends React.Component {
               }}
               updateCheck={template}
             >
-              <TemplateName color={template.color}>
+              <TemplateName>
                 <TemplateIcon width={96} height={96} />
                 <h4>{template.niceName}</h4>
               </TemplateName>
@@ -339,7 +341,7 @@ export default class Frameworks extends React.Component {
               </div>
 
               <HeaderTitle>Supported Loaders</HeaderTitle>
-              <TemplateIcons color={template.color}>
+              <TemplateIcons>
                 {TEMPLATE_SUPPORT[template.name].loaders.map((data, i) => (
                   <FileType
                     key={template.name + data.title}