From f13c8406ae10e3dca1ef7b60e5acfd22d21a1e14 Mon Sep 17 00:00:00 2001
From: Peter Xu <peterxura@gmail.com>
Date: Tue, 13 Aug 2019 17:49:46 -0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20NTP:=20Enhance=20NTP=20widgets=20wi?=
 =?UTF-8?q?th=20hover=20state,=20custom=20menu,=20and=20removal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../containers/newTab/index.tsx               | 71 +++++++++++--------
 1 file changed, 42 insertions(+), 29 deletions(-)

diff --git a/components/brave_new_tab_ui/containers/newTab/index.tsx b/components/brave_new_tab_ui/containers/newTab/index.tsx
index 30dc803f8fe1..c3fdbf031997 100644
--- a/components/brave_new_tab_ui/containers/newTab/index.tsx
+++ b/components/brave_new_tab_ui/containers/newTab/index.tsx
@@ -9,7 +9,6 @@ import {
   Page,
   Header,
   ClockWidget as Clock,
-  Main,
   ListWidget as List,
   Footer,
   App,
@@ -162,36 +161,50 @@ class NewTabPage extends React.Component<Props, State> {
         }
         <Page>
           <Header>
-            <Stats stats={newTabData.stats} showWidget={newTabData.showStats}/>
-            <Clock showWidget={newTabData.showClock} />
-            <Main>
-              <List showWidget={newTabData.showTopSites}>
-                {
-                  this.props.newTabData.gridSites.map((site: NewTab.Site) =>
-                    <Block
-                      key={site.url}
-                      id={site.url}
-                      title={site.title}
-                      href={site.url}
-                      favicon={site.favicon}
-                      style={{ backgroundColor: site.themeColor || site.computedThemeColor }}
-                      onToggleBookmark={this.onToggleBookmark.bind(this, site)}
-                      onPinnedTopSite={this.onTogglePinnedTopSite.bind(this, site)}
-                      onIgnoredTopSite={this.onIgnoredTopSite.bind(this, site)}
-                      onDraggedSite={this.onDraggedSite}
-                      onDragEnd={this.onDragEnd}
-                      isPinned={site.pinned}
-                      isBookmarked={site.bookmarked !== undefined}
-                    />
-                  )
-                }
-              </List>
+            <Stats
+              textDirection={newTabData.textDirection}
+              stats={newTabData.stats}
+              showWidget={newTabData.showStats}
+              hideWidget={this.toggleShowStats}
+              menuPosition={'right'}
+            />
+            <Clock
+              textDirection={newTabData.textDirection}
+              showWidget={newTabData.showClock}
+              hideWidget={this.toggleShowClock}
+              menuPosition={'left'}
+            />
+            <List
+              textDirection={newTabData.textDirection}
+              showWidget={newTabData.showTopSites}
+              menuPosition={'right'}
+              hideWidget={this.toggleShowTopSites}
+            >
               {
-                this.props.newTabData.showSiteRemovalNotification
-                ? <SiteRemovalNotification actions={actions} />
-                : null
+                this.props.newTabData.gridSites.map((site: NewTab.Site) =>
+                  <Block
+                    key={site.url}
+                    id={site.url}
+                    title={site.title}
+                    href={site.url}
+                    favicon={site.favicon}
+                    style={{ backgroundColor: site.themeColor || site.computedThemeColor }}
+                    onToggleBookmark={this.onToggleBookmark.bind(this, site)}
+                    onPinnedTopSite={this.onTogglePinnedTopSite.bind(this, site)}
+                    onIgnoredTopSite={this.onIgnoredTopSite.bind(this, site)}
+                    onDraggedSite={this.onDraggedSite}
+                    onDragEnd={this.onDragEnd}
+                    isPinned={site.pinned}
+                    isBookmarked={site.bookmarked !== undefined}
+                  />
+                )
               }
-            </Main>
+            </List>
+            {
+              this.props.newTabData.showSiteRemovalNotification
+              ? <SiteRemovalNotification actions={actions} />
+              : null
+            }
           </Header>
           <Footer>
             <FooterInfo