From b94631c84a504f64961b26b82b08a462a38aad94 Mon Sep 17 00:00:00 2001
From: Piotr Janosz <janosz128@gmail.com>
Date: Fri, 5 Jul 2019 19:40:31 +0200
Subject: [PATCH] Refactored help callout

---
 .../ts/components/docs/help_callout.tsx       | 50 +++++++------------
 1 file changed, 18 insertions(+), 32 deletions(-)

diff --git a/packages/website/ts/components/docs/help_callout.tsx b/packages/website/ts/components/docs/help_callout.tsx
index 10358645fb..5de52f2829 100644
--- a/packages/website/ts/components/docs/help_callout.tsx
+++ b/packages/website/ts/components/docs/help_callout.tsx
@@ -1,42 +1,28 @@
-import { Link } from '@0x/react-shared';
-import * as _ from 'lodash';
-import * as React from 'react';
-import styled, { withTheme } from 'styled-components';
+import React from 'react';
+import styled from 'styled-components';
 
-import { Button } from 'ts/components/button';
-import { SearchInput } from 'ts/components/docs/search_input';
 import { Icon } from 'ts/components/icon';
-import { Column, FlexWrap, WrapGrid } from 'ts/components/newLayout';
-import { ThemeValuesInterface } from 'ts/components/siteWrap';
 import { Heading, Paragraph } from 'ts/components/text';
 import { colors } from 'ts/style/colors';
-import { WebsitePaths } from 'ts/types';
-import { constants } from 'ts/utils/constants';
 
-export interface HelpCalloutProps {
+export interface IHelpCalloutProps {
     heading?: string;
     description?: string;
     url?: string;
 }
 
-interface WrapperProps {
-    isHome?: boolean;
-}
-
-export const HelpCallout: React.FunctionComponent<HelpCalloutProps> = (props: HelpCalloutProps) => (
-    <>
-        <Wrapper href={props.url}>
-            <Icon color={colors.brandLight} name="help" size={38} margin={[0, 30, 0, 0]} />
-            <div>
-                <Heading size="small" marginBottom="8px">
-                    {props.heading}
-                </Heading>
-                <Paragraph size="default" marginBottom="0">
-                    {props.description}
-                </Paragraph>
-            </div>
-        </Wrapper>
-    </>
+export const HelpCallout: React.FC<IHelpCalloutProps> = props => (
+    <HelpCalloutWrapper href={props.url}>
+        <Icon color={colors.brandLight} name="help" size={38} margin={[0, 30, 0, 0]} />
+        <div>
+            <Heading size="small" marginBottom="8px">
+                {props.heading}
+            </Heading>
+            <Paragraph size="default" marginBottom="0">
+                {props.description}
+            </Paragraph>
+        </div>
+    </HelpCalloutWrapper>
 );
 
 HelpCallout.defaultProps = {
@@ -45,12 +31,12 @@ HelpCallout.defaultProps = {
     url: 'https://discordapp.com/invite/d3FTX3M',
 };
 
-const Wrapper = styled.a.attrs<WrapperProps>({
+const HelpCalloutWrapper = styled.a.attrs({
     target: '_blank',
 })`
-    background-color: ${colors.backgroundLight};
-    padding: 25px 30px;
     display: flex;
     align-items: center;
+    padding: 25px 30px;
     margin-bottom: 1.875rem;
+    background-color: ${colors.backgroundLight};
 `;