Revert "Merge pull request brave#485 from brave/toggle-background-img"

This reverts commit dbc5cda1cc182fca4813b129176a629c37d8d679, reversing changes made to 0139aa32246af6d4e4ec0daea79945966dd79999.
petemill · Jul 3, 2019 · a87d3c7 · a87d3c7
1 parent 472a5d5
commit a87d3c7
Show file tree

Hide file tree

Showing 10 changed files with 37 additions and 359 deletions.
diff --git a/src/features/newTab/default/index.ts b/src/features/newTab/default/index.ts
@@ -4,9 +4,8 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { StatsContainer, StatsItem } from './stats'
-import { Page, DynamicBackground, Link, Navigation, IconLink, PhotoName } from './page'
+import { Page, DynamicBackground, Gradient, Link, Navigation, IconLink, PhotoName } from './page'
 import { Header, Main, Footer } from './grid'
-import { SettingsMenu, SettingsRow, SettingsText, SettingsTitle } from './settings'
 import { List, Tile, TileActionsContainer, TileAction, TileFavicon } from './topSites'
 import { SiteRemovalNotification, SiteRemovalText, SiteRemovalAction } from './notification'
 import { Clock } from './clock'
@@ -16,6 +15,7 @@ export {
   StatsItem,
   Page,
   DynamicBackground,
+  Gradient,
   Link,
   Navigation,
   IconLink,
@@ -31,9 +31,5 @@ export {
   SiteRemovalNotification,
   SiteRemovalText,
   SiteRemovalAction,
-  Clock,
-  SettingsMenu,
-  SettingsRow,
-  SettingsText,
-  SettingsTitle
+  Clock
 }
diff --git a/src/features/newTab/default/page/index.ts b/src/features/newTab/default/page/index.ts
@@ -30,30 +30,35 @@ export const Page = styled<{}, 'div'>('div')`
 
 interface DynamicBackgroundProps {
   background: string
-  showBackgroundImage: boolean
 }
 
 export const DynamicBackground = styled<DynamicBackgroundProps, 'div'>('div')`
   box-sizing: border-box;
   background-position: top center;
   background-repeat: no-repeat;
   background-size: cover;
-  ${(p) => p.showBackgroundImage
-  ? ` background-image: url(${p.background});`
-  : ` background: linear-gradient(
-        to bottom right,
-        #4D54D1,
-        #A51C7B 50%,
-        #EE4A37 100%);
-    `
-  }
+  background-image: url(${(p) => p.background});
   display: flex;
   flex: 1;
   opacity: 0;
   animation: ${fadeIn} 300ms;
   animation-fill-mode: forwards;
 `
 
+export const Gradient = styled<{}, 'div'>('div')`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: linear-gradient(
+    rgba(0, 0, 0, 0.8),
+    rgba(0, 0, 0, 0) 35%,
+    rgba(0, 0, 0, 0) 80%,
+    rgba(0, 0, 0, 0.6) 100%
+  );
+  height: 100vh;
+`
+
 export const Link = styled<{}, 'a'>('a')`
   text-decoration: none;
   transition: color 0.15s ease, filter 0.15s ease;
@@ -76,12 +81,7 @@ export const Navigation = styled<{}, 'nav'>('nav')`
   display: flex;
 `
 
-interface IconLinkProps {
-  disabled?: boolean
-}
-
-export const IconLink = styled<IconLinkProps, 'a'>('a')`
-  pointer-events: ${p => p.disabled && 'none'};
+export const IconLink = styled<{}, 'a'>('a')`
   display: flex;
   width: 24px;
   height: 24px;

diff --git a/src/features/newTab/default/settings/index.ts b/src/features/newTab/default/settings/index.ts
diff --git a/src/features/newTab/toggle/index.tsx b/src/features/newTab/toggle/index.tsx
diff --git a/src/features/newTab/toggle/style.ts b/src/features/newTab/toggle/style.ts
diff --git a/stories/features/newTab/default.tsx b/stories/features/newTab/default.tsx
@@ -4,11 +4,13 @@
 
 import * as React from 'react'
 import { storiesOf } from '@storybook/react'
+// import { withKnobs } from '@storybook/addon-knobs'
 
 // Components
 import NewTabPage from './default/index'
 
 storiesOf('Feature Components/New Tab/Default', module)
+  // .addDecorator(withKnobs)
   .add('Page', () => {
     return (
       <NewTabPage />

diff --git a/stories/features/newTab/default/footerInfo.tsx b/stories/features/newTab/default/footerInfo.tsx
@@ -8,40 +8,29 @@ import * as React from 'react'
 import { Link, Navigation, IconLink, PhotoName } from '../../../../src/features/newTab/default'
 
 // Icons
-import { SettingsAdvancedIcon, BookmarkBook, HistoryIcon, SettingsIcon } from '../../../../src/components/icons'
+import { SettingsAdvancedIcon, BookmarkBook, HistoryIcon } from '../../../../src/components/icons'
 
 // Helpers
 import { getLocale } from '../fakeLocale'
 
 interface Props {
   backgroundImageInfo: any
-  onClickSettings: () => void
-  isSettingsMenuOpen: boolean
-  showPhotoInfo: boolean
 }
 
 export default class FooterInfo extends React.PureComponent<Props, {}> {
   render () {
-    const {
-      backgroundImageInfo,
-      onClickSettings,
-      isSettingsMenuOpen,
-      showPhotoInfo
-    } = this.props
-
+    const { backgroundImageInfo } = this.props
     return (
       <>
-        <div>
-          {showPhotoInfo &&
-          <PhotoName>
-            {`${getLocale('photoBy')} `}
-            <Link href={backgroundImageInfo.link} rel='noopener' target='_blank'>
-              {backgroundImageInfo.author}
-            </Link>
-          </PhotoName>}
-        </div>
+      <div>
+        <PhotoName>
+          {`${getLocale('photoBy')} `}
+          <Link href={backgroundImageInfo.link} rel='noopener' target='_blank'>
+            {backgroundImageInfo.author}
+          </Link>
+        </PhotoName>
+      </div>
         <Navigation>
-          <IconLink onClick={onClickSettings} disabled={isSettingsMenuOpen}><SettingsIcon /></IconLink>
           <IconLink><SettingsAdvancedIcon /></IconLink>
           <IconLink><BookmarkBook /></IconLink>
           <IconLink><HistoryIcon /></IconLink>