feat: add santa hat to unicorn logo for the holidays 🎅🏼 (#3027)

* add santa hat to logo

* make generic component

* add 24th to christmas

* oops

src/components/Header/HolidayOrnament.tsx

@@ -0,0 +1,26 @@
+import { ReactElement } from 'react'
+import styled from 'styled-components/macro'
+
+import SantaHat from '../../assets/images/santa-hat.png'
+
+const SantaHatImage = styled.img`
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  height: 18px;
+`
+
+const Christmas = <SantaHatImage src={SantaHat} alt="Santa hat" />
+
+const DATE_TO_ORNAMENT: { [date: string]: ReactElement } = {
+  '12-24': Christmas,
+  '12-25': Christmas,
+}
+
+const HolidayOrnament = () => {
+  // months in javascript are 0 indexed...
+  const today = `${new Date().getMonth() + 1}-${new Date().getDate()}`
+  return DATE_TO_ORNAMENT[today] || null
+}
+
+export default HolidayOrnament

src/components/Header/index.tsx

@@ -21,6 +21,7 @@ import Menu from '../Menu'
 import Row from '../Row'
 import { Dots } from '../swap/styleds'
 import Web3Status from '../Web3Status'
+import HolidayOrnament from './HolidayOrnament'
 import NetworkSelector from './NetworkSelector'
 
 const HeaderFrame = styled.div<{ showBackground: boolean }>`
@@ -178,6 +179,8 @@ const UniIcon = styled.div`
   :hover {
     transform: rotate(-5deg);
   }
+
+  position: relative;
 `
 
 const activeClassName = 'ACTIVE'
@@ -270,6 +273,7 @@ export default function Header() {
       <Title href=".">
         <UniIcon>
           <Logo fill={darkMode ? white : black} width="24px" height="100%" title="logo" />
+          <HolidayOrnament />
         </UniIcon>
       </Title>
       <HeaderLinks>