refactor new tab page to use brave-ui

close brave/brave-browser#633
brave · Jan 14, 2019 · 2c8b25d · 2c8b25d
1 parent d342239
commit 2c8b25d
Show file tree

Hide file tree

Showing 14 changed files with 164 additions and 255 deletions.
diff --git a/components/brave_new_tab_ui/BUILD.gn b/components/brave_new_tab_ui/BUILD.gn
@@ -6,7 +6,7 @@ transpile_web_ui("brave_new_tab_ui") {
     "components/newTab/block.tsx",
     "components/newTab/footerInfo.tsx",
     "components/newTab/index.tsx",
-    "components/newTab/siteRemovalNotification.tsx",
+    "components/newTab/notification.tsx",
     "components/newTab/stats.tsx",
     "components/privateTab/index.tsx",
     "components/privateTab/privateTab.tsx",
@@ -17,7 +17,6 @@ transpile_web_ui("brave_new_tab_ui") {
     "components/app.tsx",
     "constants/backgrounds.ts",
     "constants/new_tab_types.ts",
-    "constants/theme.ts",
     "reducers/index.ts",
     "reducers/new_tab_reducer.tsx",
     "api.ts",

diff --git a/components/brave_new_tab_ui/actions/new_tab_actions.ts b/components/brave_new_tab_ui/actions/new_tab_actions.ts
@@ -11,8 +11,6 @@ export const topSitesDataUpdated = (topSites: NewTab.Site[]) => action(types.NEW
   topSites
 })
 
-export const backgroundImageLoadFailed = () => action(types.NEW_TAB_BACKGROUND_IMAGE_LOAD_FAILED)
-
 export const bookmarkAdded = (url: string) => action(types.BOOKMARK_ADDED, {
   url
 })

diff --git a/components/brave_new_tab_ui/brave_new_tab.tsx b/components/brave_new_tab_ui/brave_new_tab.tsx
@@ -21,9 +21,6 @@ import * as newTabActions from './actions/new_tab_actions'
 import '../fonts/poppins.css'
 import '../fonts/muli.css'
 
-// TODO: remove
-import '../styles/newtab.less'
-
 window.cr.define('brave_new_tab', function () {
   'use strict'
 

diff --git a/components/brave_new_tab_ui/components/newTab/block.tsx b/components/brave_new_tab_ui/components/newTab/block.tsx
@@ -16,8 +16,11 @@ import {
   DropTargetSpec
 } from 'react-dnd'
 
-// Utils
-import { cx } from '../../../common/classSet'
+// Feature-specific components
+import { Tile, TileActionsContainer, TileAction, TileFavicon } from 'brave-ui/features/newTab/default'
+
+// Icons
+import { PinIcon, BookmarkOIcon, BookmarkIcon, CloseStrokeIcon } from 'brave-ui/components/icons'
 
 const Types = {
   BLOCK: 'block'
@@ -120,54 +123,33 @@ class Block extends React.Component<Props, {}> {
       style,
       favicon
     } = this.props
-    const starIcon = isBookmarked ? 'bookmark' : 'bookmark-o'
-    const pinIcon = isPinned ? 'pin' : 'pin-o'
+    const starIcon = isBookmarked ? <BookmarkOIcon /> : <BookmarkIcon />
+    const pinIcon = <PinIcon />
 
     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} />
+        <div>
+          <Tile title={title} style={style}>
+            <TileActionsContainer>
+              <TileAction onClick={onPinnedTopSite}>
+                {pinIcon}
+              </TileAction>
+              <TileAction onClick={onToggleBookmark}>
+                {starIcon}
+              </TileAction>
+              <TileAction onClick={onIgnoredTopSite}>
+                <CloseStrokeIcon />
+              </TileAction>
+            </TileActionsContainer>
+            {
+              isPinned
+              ? <TileAction onClick={onPinnedTopSite} standalone={true}><PinIcon /></TileAction>
+              : null
+            }
+            <a href={href}>
+              <TileFavicon src={favicon} />
             </a>
-          </div>
+          </Tile>
         </div>
       )
     )

diff --git a/components/brave_new_tab_ui/components/newTab/footerInfo.tsx b/components/brave_new_tab_ui/components/newTab/footerInfo.tsx
@@ -3,57 +3,50 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import * as React from 'react'
+
+// Feature-specific components
+import { Link, Navigation, IconLink, PhotoName } from 'brave-ui/features/newTab/default'
+
+// Icons
+import { SettingsAdvancedIcon, BookmarkBook, HistoryIcon } from 'brave-ui/components/icons'
+
+// Helpers
 import { getLocale } from '../../../common/locale'
 
 interface Props {
-  backgroundImage?: NewTab.Image
+  backgroundImageInfo: NewTab.Image | undefined
 }
 
 export default class FooterInfo extends React.Component<Props, {}> {
   render () {
-    const bgImage: NewTab.Image | undefined = this.props.backgroundImage
+    const { backgroundImageInfo } = this.props
+
+    if (!backgroundImageInfo) {
+      return null
+    }
 
     return (
-      <footer className='footerContainer'>
-        <div className='copyrightNotice'>
-          {bgImage && bgImage.name ? (
-            <div>
-              <div className='copyrightCredits'>
-                <span className='photoBy'>{getLocale('photoBy')} </span>
-                <a
-                  className='copyrightOwner'
-                  href={bgImage.link}
-                  rel='noopener'
-                  target='_blank'
-                >
-                  {' '}
-                  {bgImage.author}
-                </a>
-              </div>
-            </div>
-          ) : 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>
-        </nav>
-      </footer>
+      <>
+      <div>
+        <PhotoName>
+          {`${getLocale('photoBy')} `}
+          <Link href={backgroundImageInfo.link} rel='noreferrer noopener' target='_blank'>
+          {backgroundImageInfo.author}
+          </Link>
+        </PhotoName>
+      </div>
+        <Navigation>
+          <IconLink title={getLocale('preferencesPageTitle')} href='chrome://settings'>
+            <SettingsAdvancedIcon />
+          </IconLink>
+          <IconLink title={getLocale('bookmarksPageTitle')} href='chrome://bookmarks'>
+            <BookmarkBook />
+          </IconLink>
+          <IconLink title={getLocale('historyPageTitle')} href='chrome://history'>
+            <HistoryIcon />
+          </IconLink>
+        </Navigation>
+      </>
     )
   }
 }