Merge pull request #300 from brave/site-banner-icon

Site banner icon update
brave · Dec 3, 2018 · 10f07c0 · 10f07c0
2 parents 9064f12 + da3cc4b
commit 10f07c0
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 6 deletions.
diff --git a/src/components/icons/close-shadow.tsx b/src/components/icons/close-shadow.tsx
@@ -0,0 +1,27 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+* License. v. 2.0. If a copy of the MPL was not distributed with this file.
+* You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react'
+import GenerateComponentForGraphic from './template'
+
+// Direct access to SVG
+export const Graphic = (
+<svg width='32' height='32' xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>
+    <defs>
+        <path d='M28.704 27.28L17.41 15.996 28.704 4.709a1.004 1.004 0 0 0-1.419-1.42L16 14.587 4.715 3.29a1.004 1.004 0 1 0-1.42 1.42l11.296 11.285L3.296 27.281a1 1 0 0 0 0 1.42 1 1 0 0 0 1.419 0L16 17.404 27.285 28.7a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z' id='b' />
+        <filter x='-17.3%' y='-17.3%' width='134.6%' height='134.6%' filterUnits='objectBoundingBox' id='a'>
+            <feOffset in='SourceAlpha' result='shadowOffsetOuter1' />
+            <feGaussianBlur stdDeviation='1.5' in='shadowOffsetOuter1' result='shadowBlurOuter1' />
+            <feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0' in='shadowBlurOuter1' />
+        </filter>
+    </defs>
+    <g fill='none' fillRule='evenodd'>
+        <use fill='#000' filter='url(#a)' xlinkHref='#b' />
+        <use fill='#FFF' xlinkHref='#b' />
+    </g>
+</svg>
+)
+
+// Styled Component for SVG
+export default GenerateComponentForGraphic(Graphic)
diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx
@@ -29,6 +29,7 @@ export { default as CheckIcon } from './check'
 export { default as ClipboardIcon } from './clipboard'
 export { default as CloseCircleIcon } from './close-circle'
 export { default as CloseStrokeIcon } from './close'
+export { default as CloseStrokeShadowIcon } from './close-shadow'
 export { default as DownloadIcon } from './download'
 export { default as EmoteSadIcon } from './emote-sad'
 export { default as EmoteSmileIcon } from './emote-smile'

diff --git a/src/features/rewards/siteBanner/__snapshots__/spec.tsx.snap b/src/features/rewards/siteBanner/__snapshots__/spec.tsx.snap
@@ -379,9 +379,48 @@ exports[`List tests basic tests matches the snapshot 1`] = `
         focusable="false"
         viewBox="0 0 32 32"
       >
-        <path
-          d="M28.71 27.29L17.41 16l11.3-11.29a1 1 0 1 0-1.42-1.42L16 14.59 4.71 3.29a1 1 0 0 0-1.42 1.42L14.59 16 3.29 27.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0L16 17.41l11.29 11.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"
-        />
+        <defs>
+          <path
+            d="M28.704 27.28L17.41 15.996 28.704 4.709a1.004 1.004 0 0 0-1.419-1.42L16 14.587 4.715 3.29a1.004 1.004 0 1 0-1.42 1.42l11.296 11.285L3.296 27.281a1 1 0 0 0 0 1.42 1 1 0 0 0 1.419 0L16 17.404 27.285 28.7a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"
+            id="b"
+          />
+          <filter
+            filterUnits="objectBoundingBox"
+            height="134.6%"
+            id="a"
+            width="134.6%"
+            x="-17.3%"
+            y="-17.3%"
+          >
+            <feOffset
+              in="SourceAlpha"
+              result="shadowOffsetOuter1"
+            />
+            <feGaussianBlur
+              in="shadowOffsetOuter1"
+              result="shadowBlurOuter1"
+              stdDeviation="1.5"
+            />
+            <feColorMatrix
+              in="shadowBlurOuter1"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"
+            />
+          </filter>
+        </defs>
+        <g
+          fill="none"
+          fillRule="evenodd"
+        >
+          <use
+            fill="#000"
+            filter="url(#a)"
+            xlinkHref="#b"
+          />
+          <use
+            fill="#FFF"
+            xlinkHref="#b"
+          />
+        </g>
       </svg>
     </button>
     <div

diff --git a/src/features/rewards/siteBanner/index.tsx b/src/features/rewards/siteBanner/index.tsx
@@ -34,7 +34,7 @@ import Donate from '../donate/index'
 import Checkbox from '../../../components/formControls/checkbox/index'
 import { getLocale } from '../../../helpers'
 import {
-  CloseStrokeIcon,
+  CloseStrokeShadowIcon,
   TwitterColorIcon,
   YoutubeColorIcon,
   TwitchColorIcon
@@ -208,7 +208,7 @@ export default class SiteBanner extends React.PureComponent<Props, State> {
       >
         <StyledBanner isMobile={isMobile}>
           <StyledClose onClick={onClose}>
-            <CloseStrokeIcon />
+            <CloseStrokeShadowIcon />
           </StyledClose>
           <StyledBannerImage bgImage={bgImage}>
             {

diff --git a/src/features/rewards/walletSummary/__snapshots__/spec.tsx.snap b/src/features/rewards/walletSummary/__snapshots__/spec.tsx.snap
@@ -185,7 +185,7 @@ exports[`WalletSummary tests basic tests matches the snapshot 1`] = `
     <div
       className="c3"
     >
-      MISSING: monthNov
+      MISSING: monthDec
        
       2018
     </div>