Merge pull request #1091 from brave/ntp-update

NTP Refinement
brave · Jan 17, 2019 · 7f000a5 · 7f000a5
1 parent 47a378f
commit 7f000a5
Show file tree

Hide file tree

Showing 60 changed files with 586 additions and 795 deletions.
diff --git a/browser/ui/webui/brave_webui_source.cc b/browser/ui/webui/brave_webui_source.cc
@@ -50,28 +50,23 @@ void CustomizeWebUIHTMLSource(const std::string &name, content::WebUIDataSource*
         { "fd85070af5114d6ac462c466e78448e4.svg", IDR_BRAVE_NEW_TAB_IMG1 },
         { "314e7529efec41c8867019815f4d8dad.svg", IDR_BRAVE_NEW_TAB_IMG4 },
         { "6c337c63662ee0ba4e57f6f8156d69ce.svg", IDR_BRAVE_NEW_TAB_IMG2 },
-        { "50cc52a4f1743ea74a21da996fe44272.jpg", IDR_BRAVE_NEW_TAB_IMG14 },
         // New tab Backgrounds
-        { "dksfoto1.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND1 },
-        { "dksfoto2.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND2 },
-        { "dksfoto3.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND3 },
-        { "dksfoto4.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND4 },
-        { "dksfoto5.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND5 },
-        { "dksfoto6.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND6 },
-        { "dksfoto7.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND7 },
-        { "dksfoto8.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND8 },
-        { "dksfoto9.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND9 },
-        { "dksfoto10.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND10 },
-        { "dksfoto11.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND11 },
-        { "Phoyoserge_Corsica.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND12 },
-        { "Phoyoserge_Corsica2.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND13 },
-        { "Phoyoserge_DowntownGriffith.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND14 },
-        { "Phoyoserge_ElmatadorBeach.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND15 },
-        { "Phoyoserge_ParisConciergeri.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND16 },
-        { "Phoyoserge_Theroofparis.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND17 },
-        { "Phoyoserge_TheSeantParis.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND18 },
-        { "Phoyoserge_VeniseSunset.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND19 },
-        { "Phoyoserge_Yosemite.jpg", IDR_BRAVE_NEW_TAB_BACKGROUND20 },
+        { "ntp-1.webp", IDR_BRAVE_NEW_TAB_BACKGROUND1 },
+        { "ntp-2.webp", IDR_BRAVE_NEW_TAB_BACKGROUND2 },
+        { "ntp-3.webp", IDR_BRAVE_NEW_TAB_BACKGROUND3 },
+        { "ntp-4.webp", IDR_BRAVE_NEW_TAB_BACKGROUND4 },
+        { "ntp-5.webp", IDR_BRAVE_NEW_TAB_BACKGROUND5 },
+        { "ntp-6.webp", IDR_BRAVE_NEW_TAB_BACKGROUND6 },
+        { "ntp-7.webp", IDR_BRAVE_NEW_TAB_BACKGROUND7 },
+        { "ntp-8.webp", IDR_BRAVE_NEW_TAB_BACKGROUND8 },
+        { "ntp-9.webp", IDR_BRAVE_NEW_TAB_BACKGROUND9 },
+        { "ntp-10.webp", IDR_BRAVE_NEW_TAB_BACKGROUND10 },
+        { "ntp-11.webp", IDR_BRAVE_NEW_TAB_BACKGROUND11 },
+        { "ntp-12.webp", IDR_BRAVE_NEW_TAB_BACKGROUND12 },
+        { "ntp-13.webp", IDR_BRAVE_NEW_TAB_BACKGROUND13 },
+        { "ntp-14.webp", IDR_BRAVE_NEW_TAB_BACKGROUND14 },
+        { "ntp-15.webp", IDR_BRAVE_NEW_TAB_BACKGROUND15 },
+        { "ntp-16.webp", IDR_BRAVE_NEW_TAB_BACKGROUND16 },
 
         // private tab
         { "c168145d6bf1abf2c0322636366f7dbe.svg", IDR_BRAVE_PRIVATE_TAB_TOR_IMG },

diff --git a/components/brave_new_tab_ui/components/app.tsx b/components/brave_new_tab_ui/components/app.tsx
@@ -7,7 +7,6 @@ import { DragDropContext } from 'react-dnd'
 import { bindActionCreators, Dispatch } from 'redux'
 import { connect } from 'react-redux'
 import HTML5Backend from 'react-dnd-html5-backend'
-import { Grid, Column } from 'brave-ui/components'
 import { Clock } from 'brave-ui/old'
 
 // Components
@@ -25,7 +24,6 @@ import * as newTabActions from '../actions/new_tab_actions'
 
 // Assets
 require('../../styles/newtab.less')
-require('font-awesome/css/font-awesome.css')
 require('../../fonts/poppins.css')
 require('../../fonts/muli.css')
 
@@ -149,15 +147,13 @@ class NewTabPage extends React.Component<Props, {}> {
         <div data-test-id={this.showImages ? 'bgGradient' : 'gradient'} className={gradientClassName} />
         <div className='content'>
           <main style={theme.newTab}>
-            <div style={theme.newTabStats}>
-              <Grid columns={3}>
-                <Column size={2}>
-                  <Stats stats={newTabData.stats}/>
-                </Column>
-                <Column size={1} customStyle={theme.clockContainer}>
-                  <Clock customStyle={theme.clock} />
-                </Column>
-              </Grid>
+            <div className='newTabStats'>
+              <div className='statsContainer'>
+                <Stats stats={newTabData.stats}/>
+              </div>
+              <div className='clockContainer'>
+                <Clock customStyle={theme.clock} />
+              </div>
             </div>
             <div className='topSitesContainer'>
               <nav className='topSitesGrid'>

diff --git a/components/brave_new_tab_ui/components/block.tsx b/components/brave_new_tab_ui/components/block.tsx
@@ -4,12 +4,16 @@
 
 import * as React from 'react'
 import {
-  DragSource, DragSourceCollector,
+  DragSource,
+  DragSourceCollector,
   DragSourceConnector,
-  DragSourceMonitor, DragSourceSpec,
-  DropTarget, DropTargetCollector,
+  DragSourceMonitor,
+  DragSourceSpec,
+  DropTarget,
+  DropTargetCollector,
   DropTargetConnector,
-  DropTargetMonitor, DropTargetSpec
+  DropTargetMonitor,
+  DropTargetSpec
 } from 'react-dnd'
 
 // Utils
@@ -48,7 +52,9 @@ const blockTarget: DropTargetSpec<Props> = {
     const item: Props = monitor.getItem() as Props
     const draggedId = item.id
     if (draggedId !== props.id) {
-      const dragRight = monitor.getClientOffset().x - monitor.getInitialSourceClientOffset().x > 0
+      const dragRight =
+        monitor.getClientOffset().x - monitor.getInitialSourceClientOffset().x >
+        0
       props.onDraggedSite(draggedId, props.id, dragRight)
     }
   }
@@ -63,7 +69,10 @@ const blockTarget: DropTargetSpec<Props> = {
  * @see http://gaearon.github.io/react-dnd/docs-drop-target.html#the-collecting-function
  */
 
-const sourceCollect: DragSourceCollector = (connect: DragSourceConnector, monitor: DragSourceMonitor) => {
+const sourceCollect: DragSourceCollector = (
+  connect: DragSourceConnector,
+  monitor: DragSourceMonitor
+) => {
   return {
     connectDragSource: connect.dragSource(),
     isDragging: monitor.isDragging()
@@ -111,51 +120,57 @@ class Block extends React.Component<Props, {}> {
       style,
       favicon
     } = this.props
-    const starIcon = isBookmarked ? 'fa-star' : 'fa-star-o'
-    const pinIcon = isPinned ? 'fa-minus' : 'fa-thumb-tack'
+    const starIcon = isBookmarked ? 'bookmark' : 'bookmark-o'
+    const pinIcon = isPinned ? 'pin' : 'pin-o'
 
-    return connectDragSource(connectDropTarget(
-      <div className='topSiteSquareSpace'>
-        <div
-          className='topSitesElement'
-        >
-          <div className='topSitesActionContainer'>
-            <button
-              className={cx({
-                topSitesActionBtn: true,
-                fa: true,
-                [pinIcon]: true
-              })}
-              onClick={onPinnedTopSite}
-              data-l10n-id={isPinned ? 'pinTopSiteButton' : 'unpinTopSiteButton'}
-            />
-            <button
-              className={cx({
-                topSitesActionBtn: true,
-                fa: true,
-                [starIcon]: true
-              })}
-              onClick={onToggleBookmark}
-              data-l10n-id={isBookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
-            />
-            <button
-              className='topSitesActionBtn fa fa-close'
-              onClick={onIgnoredTopSite}
-              data-l10n-id='removeTopSiteButton'
-            />
+    return connectDragSource(
+      connectDropTarget(
+        <div className='topSiteSquareSpace'>
+          <div className='topSitesElement'>
+            <div className='topSitesActionContainer'>
+              <button
+                className={cx({
+                  topSitesActionBtn: true,
+                  [pinIcon]: true
+                })}
+                onClick={onPinnedTopSite}
+                data-l10n-id={
+                  isPinned ? 'pinTopSiteButton' : 'unpinTopSiteButton'
+                }
+              />
+              <button
+                className={cx({
+                  topSitesActionBtn: true,
+                  [starIcon]: true
+                })}
+                onClick={onToggleBookmark}
+                data-l10n-id={
+                  isBookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'
+                }
+              />
+              <button
+                className='topSitesActionBtn close'
+                onClick={onIgnoredTopSite}
+                data-l10n-id='removeTopSiteButton'
+              />
+            </div>
+            <a
+              className='topSitesElementFavicon'
+              title={title}
+              href={href}
+              style={style}
+            >
+              {isPinned ? (
+                <div className='pinnedTopSite'>
+                  <span className='icon-container pin' />
+                </div>
+              ) : null}
+              <img src={favicon} />
+            </a>
           </div>
-          <a
-            className='topSitesElementFavicon'
-            title={title}
-            href={href}
-            style={style}
-          >
-            {isPinned ? <div className='pinnedTopSite'><span className='pin fa fa-thumb-tack' /></div> : null}
-            <img src={favicon} />
-          </a>
         </div>
-      </div>
-    ))
+      )
+    )
   }
 }
 
@@ -166,7 +181,9 @@ class Block extends React.Component<Props, {}> {
  *
  * @see http://gaearon.github.io/react-dnd/docs-drag-source.html
  */
-const source = DragSource<Props>(Types.BLOCK, blockSource, sourceCollect)(Block)
+const source = DragSource<Props>(Types.BLOCK, blockSource, sourceCollect)(
+  Block
+)
 
 // Notice that we're exporting the DropTarget and not Block Class.
 /**
@@ -175,4 +192,6 @@ const source = DragSource<Props>(Types.BLOCK, blockSource, sourceCollect)(Block)
  *
  * @see http://gaearon.github.io/react-dnd/docs-drop-target.html
  */
-export default DropTarget<Props>(Types.BLOCK, blockTarget, targetCollect)(source)
+export default DropTarget<Props>(Types.BLOCK, blockTarget, targetCollect)(
+  source
+)
diff --git a/components/brave_new_tab_ui/components/footerInfo.tsx b/components/brave_new_tab_ui/components/footerInfo.tsx
@@ -16,24 +16,42 @@ export default class FooterInfo extends React.Component<Props, {}> {
     return (
       <footer className='footerContainer'>
         <div className='copyrightNotice'>
-          {
-            bgImage && bgImage.name
-            ? <div>
+          {bgImage && bgImage.name ? (
+            <div>
               <div className='copyrightCredits'>
                 <span className='photoBy'>{getLocale('photoBy')} </span>
-                <a className='copyrightOwner' href={bgImage.link} rel='noopener' target='_blank'>
+                <a
+                  className='copyrightOwner'
+                  href={bgImage.link}
+                  rel='noopener'
+                  target='_blank'
+                >
+                  {' '}
                   {bgImage.author}
                 </a>
               </div>
-              <span className='photoName'>{bgImage.name}</span>
             </div>
-            : null
-          }
+          ) : null}
         </div>
         <nav className='shortcutsContainer'>
-          <a href='chrome://settings'><span className='shortcutIcon settingsIcon' title={getLocale('preferencesPageTitle')} /></a>
-          <a href='chrome://bookmarks'><span className='shortcutIcon bookmarksIcon' title={getLocale('bookmarksPageTitle')} /></a>
-          <a href='chrome://history'><span className='shortcutIcon historyIcon' title={getLocale('historyPageTitle')} /></a>
+          <a href='chrome://settings'>
+            <span
+              className='shortcutIcon settingsIcon'
+              title={getLocale('preferencesPageTitle')}
+            />
+          </a>
+          <a href='chrome://bookmarks'>
+            <span
+              className='shortcutIcon bookmarksIcon'
+              title={getLocale('bookmarksPageTitle')}
+            />
+          </a>
+          <a href='chrome://history'>
+            <span
+              className='shortcutIcon historyIcon'
+              title={getLocale('historyPageTitle')}
+            />
+          </a>
         </nav>
       </footer>
     )

diff --git a/components/brave_new_tab_ui/components/siteRemovalNotification.tsx b/components/brave_new_tab_ui/components/siteRemovalNotification.tsx
@@ -25,7 +25,7 @@ export default class SiteRemovalNotification extends React.Component<Props, {}>
         <span className='notification' i18n-content='thumbRemoved' />
         <span className='siteRemovalAction' onClick={onUndoIgnoredTopSite} i18n-content='undoRemoved' />
         <span className='siteRemovalAction' onClick={onRestoreAll} i18n-content='restoreAll' />
-        <button className='fa fa-close' onClick={onCloseNotification} i18n-content='close' />
+        <button className='icon-container close' onClick={onCloseNotification} i18n-content='close' />
       </div>
     )
   }