Rebranding: animated transition logo

public/index.html

@@ -9,10 +9,8 @@
     <link rel="icon" type="image/png" sizes="32x32" href="./resources/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="./resources/favicon-16x16.png">
     <link rel="manifest" href="./resources/site.webmanifest">
-    <link rel="mask-icon" href="./resources/safari-pinned-tab.svg" color="#5bbad5">
+    <link rel="mask-icon" href="./resources/safari-pinned-tab.svg" color="#000000">
 
-    <meta name="msapplication-TileColor" content="#da532c">
-    <meta name="theme-color" content="#ffffff">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
     <base href="%PUBLIC_URL%/" />
     <title>Safe</title>

public/resources/site.webmanifest

@@ -13,7 +13,5 @@
       "type": "image/png"
     }
   ],
-  "theme_color": "#ffffff",
-  "background_color": "#ffffff",
   "display": "standalone"
 }

src/components/AppLayout/Header/components/AnimatedLogo.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useState, ReactElement } from 'react'
+import Img from 'src/components/layout/Img'
+import SafeLogo from '../assets/transition-logo.gif'
+
+const useInterval = (delay: number): number => {
+  const [count, setCount] = useState<number>(0)
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setCount((prev) => prev + 1)
+    }, delay)
+
+    return () => clearInterval(id)
+  }, [delay])
+
+  return count
+}
+
+const AnimatedLogo = (): ReactElement => {
+  const RESTART_DELAY = 2 * 60e3 // 2 minutes
+  const restartKey = useInterval(RESTART_DELAY)
+
+  return <Img alt="Safe" src={`${SafeLogo}?${restartKey}`} id="safe-logo" height={36} />
+}
+
+export default AnimatedLogo

src/components/AppLayout/Header/components/Layout.tsx

@@ -8,11 +8,9 @@ import Provider from './Provider'
 import NetworkSelector from './NetworkSelector'
 import Spacer from 'src/components/Spacer'
 import Col from 'src/components/layout/Col'
-import Img from 'src/components/layout/Img'
 import Row from 'src/components/layout/Row'
 import { headerHeight, md, screenSm, sm } from 'src/theme/variables'
 import { useStateHandler } from 'src/logic/hooks/useStateHandler'
-import SafeLogo from '../assets/safe-logo.svg'
 import { ROOT_ROUTE } from 'src/routes/routes'
 import WalletSwitch from 'src/components/WalletSwitch'
 import Divider from 'src/components/layout/Divider'
@@ -21,6 +19,7 @@ import { useSelector } from 'react-redux'
 import { OVERVIEW_EVENTS } from 'src/utils/events/overview'
 import Track from 'src/components/Track'
 import Notifications from 'src/components/AppLayout/Header/components/Notifications'
+import AnimatedLogo from 'src/components/AppLayout/Header/components/AnimatedLogo'
 
 const styles = () => ({
   root: {
@@ -41,17 +40,16 @@ const styles = () => ({
     zIndex: 1301,
   },
   logo: {
-    flexBasis: '140px',
-    flexShrink: '0',
-    flexGrow: '0',
-    maxWidth: '55px',
-    padding: sm,
-    marginTop: '4px',
     [`@media (min-width: ${screenSm}px)`]: {
       maxWidth: 'none',
       paddingLeft: md,
       paddingRight: md,
     },
+    '& a': {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+    },
   },
   wallet: {
     paddingRight: md,
@@ -101,7 +99,7 @@ const Layout = ({ classes, providerDetails, providerInfo }) => {
       <Col className={classes.logo} middle="xs" start="xs">
         <Track {...OVERVIEW_EVENTS.HOME}>
           <Link to={ROOT_ROUTE}>
-            <Img alt="Safe" src={SafeLogo} id="safe-logo" />
+            <AnimatedLogo />
           </Link>
         </Track>
       </Col>