From c07412a992284b2f3045be1c620ea2e0a351139a Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 2 Oct 2018 20:10:59 +0100
Subject: Use new Link UI component everywhere, and add complementary ALink
 type

---
 .../website/ts/components/ui/custom_menu_item.tsx  | 51 ++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 packages/website/ts/components/ui/custom_menu_item.tsx

(limited to 'packages/website/ts/components/ui/custom_menu_item.tsx')

diff --git a/packages/website/ts/components/ui/custom_menu_item.tsx b/packages/website/ts/components/ui/custom_menu_item.tsx
new file mode 100644
index 000000000..c51095709
--- /dev/null
+++ b/packages/website/ts/components/ui/custom_menu_item.tsx
@@ -0,0 +1,51 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Link } from 'ts/components/ui/link';
+
+interface CustomMenuItemProps {
+    to: string;
+    style?: React.CSSProperties;
+    onClick?: () => void;
+    className?: string;
+}
+
+interface CustomMenuItemState {
+    isHovering: boolean;
+}
+
+export class CustomMenuItem extends React.Component<CustomMenuItemProps, CustomMenuItemState> {
+    public static defaultProps: Partial<CustomMenuItemProps> = {
+        onClick: _.noop.bind(_),
+        className: '',
+    };
+    public constructor(props: CustomMenuItemProps) {
+        super(props);
+        this.state = {
+            isHovering: false,
+        };
+    }
+    public render(): React.ReactNode {
+        const menuItemStyles = {
+            cursor: 'pointer',
+            opacity: this.state.isHovering ? 0.5 : 1,
+        };
+        return (
+            <Link to={this.props.to} style={this.props.style}>
+                <div
+                    onClick={this.props.onClick.bind(this)}
+                    className={`mx-auto ${this.props.className}`}
+                    style={menuItemStyles}
+                    onMouseEnter={this._onToggleHover.bind(this, true)}
+                    onMouseLeave={this._onToggleHover.bind(this, false)}
+                >
+                    {this.props.children}
+                </div>
+            </Link>
+        );
+    }
+    private _onToggleHover(isHovering: boolean): void {
+        this.setState({
+            isHovering,
+        });
+    }
+}
-- 
cgit v1.2.3


From 437612f8b8c28fb384698c5c2b331e173cee8767 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Wed, 3 Oct 2018 16:37:59 +0100
Subject: Use same Link UI component for react-scroll links

---
 packages/website/ts/components/ui/custom_menu_item.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/components/ui/custom_menu_item.tsx')

diff --git a/packages/website/ts/components/ui/custom_menu_item.tsx b/packages/website/ts/components/ui/custom_menu_item.tsx
index c51095709..11f61b336 100644
--- a/packages/website/ts/components/ui/custom_menu_item.tsx
+++ b/packages/website/ts/components/ui/custom_menu_item.tsx
@@ -1,6 +1,6 @@
+import { Link } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
-import { Link } from 'ts/components/ui/link';
 
 interface CustomMenuItemProps {
     to: string;
-- 
cgit v1.2.3


From 5f2cd33da07a7acc65f2e05acb35755f74af75a4 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Fri, 5 Oct 2018 13:54:37 +0100
Subject: Remove style prop from Link

---
 packages/website/ts/components/ui/custom_menu_item.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'packages/website/ts/components/ui/custom_menu_item.tsx')

diff --git a/packages/website/ts/components/ui/custom_menu_item.tsx b/packages/website/ts/components/ui/custom_menu_item.tsx
index 11f61b336..c25da6be6 100644
--- a/packages/website/ts/components/ui/custom_menu_item.tsx
+++ b/packages/website/ts/components/ui/custom_menu_item.tsx
@@ -4,7 +4,6 @@ import * as React from 'react';
 
 interface CustomMenuItemProps {
     to: string;
-    style?: React.CSSProperties;
     onClick?: () => void;
     className?: string;
 }
@@ -30,7 +29,7 @@ export class CustomMenuItem extends React.Component<CustomMenuItemProps, CustomM
             opacity: this.state.isHovering ? 0.5 : 1,
         };
         return (
-            <Link to={this.props.to} style={this.props.style}>
+            <Link to={this.props.to}>
                 <div
                     onClick={this.props.onClick.bind(this)}
                     className={`mx-auto ${this.props.className}`}
-- 
cgit v1.2.3