Reorganize images

src/components/framework/fine-print.js

@@ -9,8 +9,7 @@ import Flex from "./flex";
 import { version } from "../../version";
 import { publications } from "../download/downloadModal";
 import { hasExtension, getExtension } from "../../util/extensions";
-
-const logoPNG = require("../../images/favicon.png");
+import nextstrainLogo from "./nextstrain-logo-64.png";
 
 const MarkdownDisplay = lazy(() => import("../markdownDisplay"));
 
@@ -121,7 +120,7 @@ export function getCitation() {
   return (
     <Flex className='finePrint'>
       <a className='logoContainer' href="https://nextstrain.org">
-        <img alt="nextstrain.org" className='logo' width="24px" src={logoPNG}/>
+        <img alt="nextstrain.org" className='logo' width="24px" src={nextstrainLogo}/>
       </a>
       {"Powered by Nextstrain ("}
       <a href={publications.nextstrain.href} target="_blank" rel="noopener noreferrer">

src/components/framework/footer-descriptions.js

@@ -1,8 +1,9 @@
-/* eslint-disable global-require */
 import React from "react";
 import { applyFilter } from "../../actions/tree";
 import { changeColorBy } from "../../actions/colors";
 import { encodeColorByGenotype } from "../../util/getGenotype";
+import gisaidLogo from "./gisaid-logo.png";
+import gisrsLogo from "./gisrs-logo.jpg";
 
 const INRB = () => {
   return (
@@ -194,11 +195,11 @@ const Flu = () => {
       <div style={{display: "flex", justifyContent: "space-between"}}>
         <div style={{flex: 5}}/>
         <a key={5} href="https://gisaid.org" target="_blank" rel="noreferrer noopener" style={{display: "flex", flexDirection: "column", justifyContent: "center"}}>
-          <img alt="gisaid-logo" width="120" src={require("../../images/gisaid-logo.png")}/>
+          <img alt="gisaid-logo" width="120" src={gisaidLogo}/>
         </a>
         <div style={{flex: 1}}/>
         <a key={6} href="http://www.who.int/influenza/gisrs_laboratory/en/" target="_blank" rel="noreferrer noopener">
-          <img alt="gisrs-logo" width="120" src={require("../../images/gisrs-logo.jpg")}/>
+          <img alt="gisrs-logo" width="120" src={gisrsLogo}/>
         </a>
         <div style={{flex: 5}}/>
       </div>

src/components/framework/spinner.js

@@ -1,7 +1,6 @@
 import React from "react";
 import Card from "./card";
-
-const nextstrainLogo = require("../../images/nextstrain-logo-small.png");
+import nextstrainLogo from "./nextstrain-logo-143.png";
 
 const Spinner = ({availableHeight=false}) => {
   if (!availableHeight) {

src/components/navBar/content.js

@@ -1,7 +1,6 @@
 import React from "react";
 import styled from 'styled-components';
-
-const logoPNG = require("../../images/logo-light.svg");
+import logo from  "../auspice-logo.svg";
 
 const AuspiceNavBarContainer = styled.div`
   display: flex;
@@ -58,7 +57,7 @@ export const AuspiceNavBar = ({narrativeTitle, sidebar, width}) => {
     <AuspiceNavBarContainer>
       <div style={{flex: 1}}/>
       <LogoLink href="/">
-        <img alt="splashPage" width="40px" src={logoPNG}/>
+        <img alt="splashPage" width="40px" src={logo}/>
       </LogoLink>
       <div style={{flex: 1}}/>
       {renderTitle(narrativeTitle, width)}

src/components/splash/splash.js

@@ -4,6 +4,7 @@ import NavBar from "../navBar";
 import Flex from "../../components/framework/flex";
 import { CenterContent } from "./centerContent";
 import { FinePrintStyles, getCitation, getCustomFinePrint } from "../../components/framework/fine-print";
+import logo from  "../auspice-logo.svg";
 
 const getNumColumns = (width) => width > 1000 ? 3 : width > 750 ? 2 : 1;
 
@@ -45,9 +46,7 @@ const SplashContent = ({available, browserDimensions, dispatch, errorMessage, ch
         <img
           alt="logo"
           width="102"
-          src={
-            require("../../images/logo-light.svg")
-          }
+          src={logo}
         />
       </Flex>
     </>