Add halloween elements (#1731)

* Add halloween elements

* Cow flying

* Remove flying cow

* Cleanup.

* Hide on mobile.

src/custom/components/Header/index.tsx

@@ -18,7 +18,7 @@ import HeaderMod, {
 } from './HeaderMod'
 import Menu from 'components/Menu'
 import { Moon, Sun } from 'react-feather'
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
 import { useActiveWeb3React } from 'hooks/web3'
 import { useETHBalances } from 'state/wallet/hooks'
 import { AMOUNT_PRECISION } from 'constants/index'
@@ -34,6 +34,9 @@ import { formatSmart } from 'utils/format'
 import NetworkCard, { NetworkInfo } from './NetworkCard'
 import SVG from 'react-inlinesvg'
 
+// Halloween temporary
+import SpiderRag from 'assets/cow-swap/halloween-spider.svg'
+
 export const NETWORK_LABELS: { [chainId in ChainId]?: string } = {
   [ChainId.RINKEBY]: 'Rinkeby',
   // [ChainId.ROPSTEN]: 'Ropsten',
@@ -83,8 +86,30 @@ const HeaderControls = styled(HeaderControlsUni)`
   `};
 `
 
-export const Wrapper = styled.div`
+export const Wrapper = styled.div<{ isDarkMode: boolean }>`
   width: 100%;
+  position: relative;
+
+  // Halloween temporary start
+  ${({ isDarkMode }) =>
+    isDarkMode &&
+    css`
+      &::after {
+        content: '';
+        display: block;
+        background: url(${SpiderRag}) no-repeat center/contain;
+        height: 200px;
+        width: 200px;
+        position: absolute;
+        right: -42px;
+        top: 90px;
+
+        ${({ theme }) => theme.mediaWidth.upToSmall`
+          display: none;
+          content: none;
+        `};
+      }
+    `}
 
   ${HeaderFrame} {
     padding: 16px;
@@ -210,7 +235,7 @@ export default function Header() {
   }, [isOrdersPanelOpen, isMenuOpen])
 
   return (
-    <Wrapper>
+    <Wrapper isDarkMode={darkMode}>
       <HeaderModWrapper>
         <HeaderRow marginRight="0">
           <Title href=".">