Add debranding to main build (chanzuckerberg#216)

* Pack layout (#30) * Experiment with a proper pack layout instead of the scatterplot * Replace clade selector with static caption * Replace slider with "go up" buttons * Formatting tweaks - footer * ts ignore * Set min size for epi curve * Swap in the pack layout for the scatterplot * Remove unrooted tree view for now * More footer tweaks * Remove incongruous location colorby in epi curve * footer * Color and shape per samples of interest and distance from mrca * cleanup * Add a legend * Update banner * Update main page footer * Logo links to landing page * remove feedback soliciation * update little footer * update tooltip * alignment * Update issue templates * Update banner * Update main page footer * Logo links to landing page * remove feedback soliciation * update little footer * update tooltip * alignment
chanzuckerberg · Nov 7, 2024 · 6eaeab2 · 6eaeab2
1 parent 0592d34
commit 6eaeab2
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 128 deletions.
diff --git a/src/components/bigFoot.tsx b/src/components/bigFoot.tsx
@@ -4,151 +4,133 @@ import { ROUTES } from "src/routes";
 
 const BigFoot = () => {
   return (
-    <div
+    <div // entire footer
       style={{
         position: "relative",
         bottom: 0,
         left: 0,
         backgroundColor: "#333",
         color: "#FFF",
-        height: 50,
+        // height: 50,
         display: "flex",
-        flexDirection: "row",
+        flexDirection: "column",
         justifyContent: "space-between",
-        padding: 20,
+        padding: "5px 15px 20px 20px",
         margin: 0,
-        borderRadius: 5,
+        borderTopLeftRadius: "5px",
+        borderTopRightRadius: "5px",
       }}
     >
-      <div // content on the left
+      <div // top row
         style={{
           display: "flex",
-          flexDirection: "column",
-          justifyContent: "space-around",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "baseline",
         }}
       >
-        <div // first row on left
+        <div // top left
           style={{
             display: "flex",
-            flexDirection: "row",
+            flexDirection: "column",
+            justifyContent: "space-between",
+            alignItems: "baseline",
           }}
         >
-          <img
-            src="https://github.com/chanzuckerberg/galago/raw/main/src/images/czge-logo.svg"
-            style={{ width: 20, marginRight: 10 }}
-          />
-          <Divider
-            orientation="vertical"
-            variant="middle"
-            flexItem
-            sx={{
-              bgcolor: "secondary.light",
-              height: 20,
-              position: "relative",
-              top: 15,
+          <span
+            style={{
+              color: "white",
+              fontFamily: "Noto Sans",
+              fontWeight: "bold",
+              fontSize: 20,
+              paddingRight: 3,
             }}
-          />
-
-          <h2 style={{ color: "white", marginLeft: 10 }}>Galago</h2>
+          >
+            Galago
+          </span>
         </div>
-        <div // second row on left
-          style={{
-            color: "white",
-            fontSize: 12,
-            width: 400,
-            position: "relative",
-            top: -10,
-          }}
-        >
-          a little tree explorer made with &hearts; by the CZ GEN EPI team
-        </div>
-      </div>
-      <div // content on the right
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "space-around",
-          color: "white",
-        }}
-      >
-        <div // first row on the right
+        <div // top right
           style={{
             display: "flex",
             flexDirection: "row",
-            justifyContent: "space-evenly",
-            width: 700,
-            maxWidth: 700,
-            position: "relative",
-            top: 12,
+            justifyContent: "right",
+            width: 300,
+            height: 35,
+            alignItems: "flex-end",
           }}
         >
           <Link
             target="_blank"
             rel="noreferrer noopener"
-            style={{ color: "white", textDecoration: "none" }}
+            style={{
+              color: "white",
+              textDecoration: "none",
+              padding: "0px 12px",
+            }}
             to={ROUTES.FAQ}
           >
             FAQs
           </Link>
           <Link
             target="_blank"
             rel="noreferrer noopener"
-            style={{ color: "white", textDecoration: "none" }}
+            style={{
+              color: "white",
+              textDecoration: "none",
+              padding: "0px 12px",
+            }}
             to={ROUTES.METHODS}
           >
             Methods
           </Link>
           <a
             target="_blank"
             rel="noreferrer noopener"
-            href="https://help.czgenepi.org/hc/en-us/categories/6217716150804-Genomic-Epidemiology-Learning-Center"
-            style={{ color: "white", textDecoration: "none" }}
-          >
-            Learning Center
-          </a>
-          <a
-            target="_blank"
-            rel="noreferrer noopener"
-            href="https://github.com/chanzuckerberg/galago/discussions"
-            style={{ color: "white", textDecoration: "none" }}
-          >
-            Discussion Board
-          </a>
-          <a
-            target="_blank"
-            rel="noreferrer noopener"
-            href="mailto:[email protected]"
-            style={{ color: "white", textDecoration: "none" }}
+            href="mailto:[email protected]"
+            style={{
+              color: "white",
+              textDecoration: "none",
+              padding: "0px 12px",
+            }}
           >
-            Contact Us
+            Contact
           </a>
           <a
             target="_blank"
             rel="noreferrer noopener"
             href="https://github.com/chanzuckerberg/galago"
-            style={{ color: "white", textDecoration: "none" }}
+            style={{ color: "white", textDecoration: "none", paddingLeft: 12 }}
           >
             Github
           </a>
-          <a
-            target="_blank"
-            rel="noreferrer noopener"
-            href="https://czgenepi.org/"
+        </div>
+      </div>
+      <div //bottom left
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "baseline",
+        }}
+      >
+        <div>
+          <span
+            style={{
+              color: "white",
+              fontSize: 12,
+              width: 400,
+            }}
           >
-            <img
-              src="https://github.com/chanzuckerberg/czgenepi/raw/trunk/src/frontend/src/common/images/logo_complete_white.svg"
-              style={{ width: 100 }}
-            />
-          </a>
+            a little tree explorer made with &hearts; by Sidney Bell & Colin
+            Megill
+          </span>
         </div>
-        <div
+        <div // bottom right
           style={{
             fontSize: 12,
             display: "flex",
             flexDirection: "row",
             justifyContent: "right",
-            paddingRight: 16,
-            paddingTop: 20,
           }}
         >
           License: MIT (code) & CC0 (content)

diff --git a/src/components/header/betaBanner.tsx b/src/components/header/betaBanner.tsx
@@ -1,14 +1,16 @@
 import { Collapse, Alert, AlertTitle } from "@mui/material";
 import { useState } from "react";
 import { Theme } from "../../theme";
+import { Link } from "react-router-dom";
+import { ROUTES } from "../../routes";
 
 export const BetaBanner = () => {
   const [showAlert, setShowAlert] = useState<boolean>(true);
 
   return (
     <Collapse in={showAlert}>
       <Alert
-        severity="info"
+        severity="warning"
         style={{
           width: 450,
           height: 75,
@@ -23,18 +25,19 @@ export const BetaBanner = () => {
         sx={{ backgroundColor: Theme.palette.secondary.lighter }}
       >
         <AlertTitle>
-          <strong>Galago is in beta - please share your feedback! </strong>
+          <strong>Galago is no longer regularly updated.</strong>
         </AlertTitle>
         <span style={{}}>
-          We'd love to hear from you via{" "}
-          <a href="https://github.com/chanzuckerberg/galago/discussions">
-            <b>discussion board</b>
-          </a>{" "}
-          or{" "}
-          <a href="mailto:[email protected]">
-            <b>email</b>
-          </a>
-          .
+          For usage instructions, see the{" "}
+          <Link target="_blank" rel="noreferrer noopener" to={ROUTES.FAQ}>
+            FAQs
+          </Link>{" "}
+          and{" "}
+          <Link target="_blank" rel="noreferrer noopener" to={ROUTES.FAQ}>
+            Methods
+          </Link>{" "}
+          pages. For questions, contact{" "}
+          <Link to="mailto:[email protected]">Sidney Bell</Link>.
         </span>
       </Alert>
     </Collapse>

diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -5,6 +5,8 @@ import StagingBanner from "./stagingBanner";
 import { isAppRunningInStaging } from "src/utils/staging";
 import { useSelector } from "react-redux";
 import { GenericErrorBanner } from "./genericErrorBanner";
+import { Link } from "react-router-dom";
+import { ROUTES } from "src/routes";
 
 type HeaderProps = {
   sectionHeight?: number;
@@ -67,10 +69,12 @@ const Header = (props: HeaderProps) => {
           margin: 0,
         }}
       >
-        <img
-          src="https://github.com/chanzuckerberg/galago-labs/raw/main/src/images/galago-logo.svg"
-          height={50}
-        />
+        <Link to={ROUTES.HOMEPAGE}>
+          <img
+            src="https://github.com/chanzuckerberg/galago-labs/raw/main/src/images/galago-logo.svg"
+            height={50}
+          />
+        </Link>
       </div>
       <Helmet>
         <meta charSet="utf-8" />

diff --git a/src/components/landingPage/demo.tsx b/src/components/landingPage/demo.tsx
@@ -38,7 +38,7 @@ export const Demo = (props: DemoProps) => {
         </a>
         .
       </p>
-      <p style={{ marginTop: 40, height: 37 }} />
+      <p style={{ marginTop: 40, height: 11 }} />
       <p style={{ width: 200 }}>
         <Button
           variant="contained"

diff --git a/src/components/landingPage/index.tsx b/src/components/landingPage/index.tsx
@@ -33,10 +33,6 @@ export const LandingPage = () => {
           <Demo sectionWidth={middleWidth * 0.43} />
           <Upload sectionWidth={middleWidth * 0.43} />
         </div>
-
-        <div style={{ marginBottom: 30, marginTop: 30 }}>
-          <ContactUs />
-        </div>
       </div>
       <BigFoot />
     </div>

diff --git a/src/components/landingPage/upload.tsx b/src/components/landingPage/upload.tsx
@@ -97,8 +97,12 @@ export const Upload = (props: UploadProps) => {
             title={
               <>
                 If you need help generating a phylogenetic tree, head over to{" "}
-                <a href="https://czgenepi.org" style={{ color: "white" }}>
-                  CZ GEN EPI
+                <a href="http://theiagenepi.org/" style={{ color: "white" }}>
+                  TheiaGenEpi
+                </a>{" "}
+                or{" "}
+                <a href="https://nextstrain.org/" style={{ color: "white" }}>
+                  Nextstrain
                 </a>
               </>
             }