bridge_ui: homepage redesign

Change-Id: I74e5623b171cbc4f907f0ee0903677e9aae630a7
2021-09-19 15:31:02 -04:00 · 2021-09-19 15:31:02 -04:00 · 57a3e55608
parent 6ab6c95fdf
commit 57a3e55608
13 changed files with 3956 additions and 128 deletions
--- a/bridge_ui/src/components/Attest/index.tsx
+++ b/bridge_ui/src/components/Attest/index.tsx
@ -9,6 +9,7 @@ import {
 import { Alert } from "@material-ui/lab";
 import { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { COLORS } from "../../muiTheme";
 import { setStep } from "../../store/attestSlice";
 import {
  selectAttestActiveStep,
@ -28,7 +29,7 @@ import TargetPreview from "./TargetPreview";

 const useStyles = makeStyles(() => ({
  rootContainer: {
-    backgroundColor: "rgba(0,0,0,0.2)",
+    backgroundColor: COLORS.nearBlackWithMinorTransparency,
  },
 }));

--- a/bridge_ui/src/components/BackgroundImage.tsx
+++ b/bridge_ui/src/components/BackgroundImage.tsx
@ -0,0 +1,51 @@
+import { makeStyles } from "@material-ui/core";
+import { useRouteMatch } from "react-router";
+import holev2 from "../images/holev2.svg";
+
+const useStyles = makeStyles((theme) => ({
+  holeOuterContainer: {
+    maxWidth: "100%",
+    width: "100%",
+    position: "relative",
+  },
+  holeInnerContainer: {
+    position: "absolute",
+    zIndex: -1,
+    left: "50%",
+    transform: "translate(-50%, 0)",
+    width: "100%",
+    maxWidth: "100%",
+    overflow: "hidden",
+    display: "flex",
+    justifyContent: "center",
+  },
+  holeImage: {
+    width: "max(1200px, 100vw)",
+    maxWidth: "1600px",
+  },
+  blurred: {
+    filter: "blur(2px)",
+    opacity: ".9",
+  },
+}));
+
+const BackgroundImage = () => {
+  const classes = useStyles();
+  const isHomepage = useRouteMatch({ path: "/", exact: true });
+
+  return (
+    <div className={classes.holeOuterContainer}>
+      <div className={classes.holeInnerContainer}>
+        <img
+          src={holev2}
+          alt=""
+          className={
+            classes.holeImage + (isHomepage ? "" : " " + classes.blurred)
+          }
+        />
+      </div>
+    </div>
+  );
+};
+
+export default BackgroundImage;
--- a/bridge_ui/src/components/Home/index.tsx
+++ b/bridge_ui/src/components/Home/index.tsx
@ -1,29 +1,38 @@
 import {
  Button,
+  Card,
  Container,
  Link,
  makeStyles,
  Typography,
 } from "@material-ui/core";
 import { Link as RouterLink } from "react-router-dom";
-import overview from "../../images/overview.svg";
+import overview from "../../images/overview2.svg";
+import { COLORS } from "../../muiTheme";

 const useStyles = makeStyles((theme) => ({
-  rootContainer: {
-    backgroundColor: "rgba(0,0,0,0.2)",
-    margin: theme.spacing(4, 0),
-    padding: theme.spacing(4, 4),
+  centeredContainer: {
    textAlign: "center",
+    width: "100%",
  },
  header: {
-    marginBottom: theme.spacing(12),
+    marginTop: theme.spacing(12),
+    marginBottom: theme.spacing(15),
    [theme.breakpoints.down("sm")]: {
      marginBottom: theme.spacing(6),
    },
  },
+  linearGradient: {
+    background: `linear-gradient(to left, ${COLORS.blue}, ${COLORS.green});`,
+    WebkitBackgroundClip: "text",
+    backgroundClip: "text",
+    WebkitTextFillColor: "transparent",
+    MozBackgroundClip: "text",
+    MozTextFillColor: "transparent",
+    filter: `drop-shadow( 0px 0px 8px ${COLORS.nearBlack}) drop-shadow( 0px 0px 14px ${COLORS.nearBlack}) drop-shadow( 0px 0px 24px ${COLORS.nearBlack})`,
+  },
  description: {
-    fontWeight: 400,
-    marginBottom: theme.spacing(4),
+    marginBottom: theme.spacing(2),
  },
  button: {
    marginBottom: theme.spacing(4),
@ -35,56 +44,81 @@ const useStyles = makeStyles((theme) => ({
    },
    maxWidth: "100%",
  },
+  mainCard: {
+    padding: theme.spacing(1),
+    borderRadius: "5px",
+    backgroundColor: COLORS.nearBlackWithMinorTransparency,
+  },
+  spacer: {
+    height: theme.spacing(5),
+  },
 }));

 function Home() {
  const classes = useStyles();
  return (
-    <Container maxWidth="lg">
-      <div className={classes.rootContainer}>
-        <Typography variant="h3" className={classes.header}>
-          The portal is open.
-        </Typography>
-        <Typography variant="h5" gutterBottom>
-          Wormhole v2 is here!
-        </Typography>
-        <Typography variant="subtitle1" gutterBottom>
-          If you transferred assets using the previous version of Wormhole, most
-          assets can be migrated to v2 on the{" "}
-          <Link component={RouterLink} to="/transfer" color="secondary">
-            transfer page
-          </Link>
-          .
-        </Typography>
-        <Typography variant="subtitle1" className={classes.header}>
-          For assets that don't support the migration, the v1 UI can be found at{" "}
-          <Link href="https://v1.wormholebridge.com" color="secondary">
-            v1.wormholebridge.com
-          </Link>
-        </Typography>
-        <Typography variant="h6" className={classes.description}>
-          The Wormhole Token Bridge allows you to seamlessly transfer tokenized
-          assets across Solana and Ethereum.
-        </Typography>
-        <Button
-          component={RouterLink}
-          to="/transfer"
-          variant="contained"
-          color="primary"
-          size="large"
-          className={classes.button}
-        >
-          Transfer Tokens
-        </Button>
-        <Typography variant="h6" className={classes.description}>
-          To learn more about the Wormhole Protocol that powers it, visit{" "}
-          <Link href="https://wormholenetwork.com/en/" color="secondary">
-            wormholenetwork.com
-          </Link>
-        </Typography>
-        <img src={overview} alt="overview" className={classes.overview} />
-      </div>
-    </Container>
+    <div>
+      <Container maxWidth="md">
+        <div className={classes.centeredContainer}>
+          <Typography variant="h2" component="h1" className={classes.header}>
+            <span className={classes.linearGradient}>The Portal is Open</span>
+          </Typography>
+        </div>
+      </Container>
+      <Container maxWidth="sm">
+        <Card className={classes.mainCard}>
+          <Typography variant="h4" className={classes.description}>
+            Wormhole v2 is here!
+          </Typography>
+          <Typography variant="h6" className={classes.description}>
+            The Wormhole Token Bridge allows you to seamlessly transfer
+            tokenized assets across Solana and Ethereum.
+          </Typography>
+          <Button
+            component={RouterLink}
+            to="/transfer"
+            variant="contained"
+            color="secondary"
+            size="large"
+            className={classes.button}
+          >
+            Transfer Tokens
+          </Button>
+          <div className={classes.spacer} />
+          <Typography variant="subtitle1" className={classes.description}>
+            If you transferred assets using the previous version of Wormhole,
+            most assets can be migrated to v2 on the{" "}
+            <Link
+              component={RouterLink}
+              to="/transfer"
+              color="secondary"
+              noWrap
+            >
+              transfer page
+            </Link>
+            .
+          </Typography>
+          <Typography variant="subtitle1" className={classes.description}>
+            For assets that don't support the migration, the v1 UI can be found
+            at{" "}
+            <Link href="https://v1.wormholebridge.com" color="secondary">
+              v1.wormholebridge.com
+            </Link>
+          </Typography>
+          <Typography variant="subtitle1" className={classes.description}>
+            To learn more about the Wormhole Protocol that powers it, visit{" "}
+            <Link href="https://wormholenetwork.com/en/" color="secondary">
+              wormholenetwork.com
+            </Link>
+          </Typography>
+        </Card>
+      </Container>
+      <Container maxWidth="md">
+        <div className={classes.centeredContainer}>
+          <img src={overview} alt="overview" className={classes.overview} />
+        </div>
+      </Container>
+    </div>
  );
 }

--- a/bridge_ui/src/components/Migration/Workflow.tsx
+++ b/bridge_ui/src/components/Migration/Workflow.tsx
@ -22,6 +22,7 @@ import { useSolanaWallet } from "../../contexts/SolanaWalletContext";
 import useIsWalletReady from "../../hooks/useIsWalletReady";
 import useMetaplexData from "../../hooks/useMetaplexData";
 import useSolanaTokenMap from "../../hooks/useSolanaTokenMap";
+import { COLORS } from "../../muiTheme";
 import { MIGRATION_PROGRAM_ADDRESS, SOLANA_HOST } from "../../utils/consts";
 import { getMultipleAccounts, signSendAndConfirm } from "../../utils/solana";
 import ButtonWithLoader from "../ButtonWithLoader";
@ -35,6 +36,7 @@ import SolanaWalletKey from "../SolanaWalletKey";

 const useStyles = makeStyles(() => ({
  mainPaper: {
+    backgroundColor: COLORS.nearBlackWithMinorTransparency,
    textAlign: "center",
    padding: "2rem",
    "& > h, p ": {
--- a/bridge_ui/src/components/NFT/index.tsx
+++ b/bridge_ui/src/components/NFT/index.tsx
@ -27,10 +27,11 @@ import Source from "./Source";
 import SourcePreview from "./SourcePreview";
 import Target from "./Target";
 import TargetPreview from "./TargetPreview";
+import { COLORS } from "../../muiTheme";

 const useStyles = makeStyles(() => ({
  rootContainer: {
-    backgroundColor: "rgba(0,0,0,0.2)",
+    backgroundColor: COLORS.nearBlackWithMinorTransparency,
  },
 }));

--- a/bridge_ui/src/components/RadialGradient.tsx
+++ b/bridge_ui/src/components/RadialGradient.tsx
@ -1,34 +0,0 @@
-import { makeStyles } from "@material-ui/core";
-import hole from "../images/hole.svg";
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    position: "fixed",
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    background: `radial-gradient(100% 100% at 100% 125%,${theme.palette.secondary.dark} 0,rgba(255,255,255,0) 100%)`,
-    zIndex: -1,
-  },
-  hole: {
-    position: "fixed",
-    bottom: 0,
-    right: 0,
-    opacity: 0.3,
-    filter: "blur(1px)",
-    zIndex: -1,
-  },
-}));
-
-const RadialGradient = () => {
-  const classes = useStyles();
-  return (
-    <>
-      <img src={hole} alt="" className={classes.hole} />
-      <div className={classes.root} />
-    </>
-  );
-};
-
-export default RadialGradient;
--- a/bridge_ui/src/components/Transfer/index.tsx
+++ b/bridge_ui/src/components/Transfer/index.tsx
@ -11,6 +11,7 @@ import { useDispatch, useSelector } from "react-redux";
 import useCheckIfWormholeWrapped from "../../hooks/useCheckIfWormholeWrapped";
 import useFetchTargetAsset from "../../hooks/useFetchTargetAsset";
 import useGetBalanceEffect from "../../hooks/useGetBalanceEffect";
+import { COLORS } from "../../muiTheme";
 import {
  selectTransferActiveStep,
  selectTransferIsRedeemComplete,
@ -31,7 +32,7 @@ import TargetPreview from "./TargetPreview";

 const useStyles = makeStyles(() => ({
  rootContainer: {
-    backgroundColor: "rgba(0,0,0,0.2)",
+    backgroundColor: COLORS.nearBlackWithMinorTransparency,
  },
 }));

--- a/bridge_ui/src/images/hole.svg
+++ b/bridge_ui/src/images/hole.svg
--- a/bridge_ui/src/images/holev2.svg
+++ b/bridge_ui/src/images/holev2.svg
--- a/bridge_ui/src/images/overview.svg
+++ b/bridge_ui/src/images/overview.svg
--- a/bridge_ui/src/images/overview2.svg
+++ b/bridge_ui/src/images/overview2.svg
--- a/bridge_ui/src/index.js
+++ b/bridge_ui/src/index.js
@ -5,7 +5,7 @@ import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 import { HashRouter } from "react-router-dom";
 import App from "./App";
-import RadialGradient from "./components/RadialGradient";
+import BackgroundImage from "./components/BackgroundImage";
 import { EthereumProviderProvider } from "./contexts/EthereumProviderContext";
 import { SolanaWalletProvider } from "./contexts/SolanaWalletContext.tsx";
 import { TerraWalletProvider } from "./contexts/TerraWalletContext.tsx";
@ -18,13 +18,13 @@ ReactDOM.render(
    <Provider store={store}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
-        <RadialGradient />
        <ErrorBoundary>
          <SnackbarProvider maxSnack={3}>
            <SolanaWalletProvider>
              <EthereumProviderProvider>
                <TerraWalletProvider>
                  <HashRouter>
+                    <BackgroundImage />
                    <App />
                  </HashRouter>
                </TerraWalletProvider>
--- a/bridge_ui/src/muiTheme.js
+++ b/bridge_ui/src/muiTheme.js
@ -1,23 +1,33 @@
 import { createTheme, responsiveFontSizes } from "@material-ui/core";

+export const COLORS = {
+  lightGreen: "rgba(51, 242, 223, 1)",
+  green: "#00EFD8",
+  blue: "#0074FF",
+  blueWithTransparency: "rgba(0, 116, 255, 0.8)",
+  greenWithTransparency: "rgba(0,239,216,0.8)",
+  nearBlack: "#010114",
+  nearBlackWithMinorTransparency: "rgba(0,0,0,.97)",
+};
+
 export const theme = responsiveFontSizes(
  createTheme({
    palette: {
      type: "dark",
      background: {
-        default: "#010114",
-        paper: "#010114",
+        default: COLORS.nearBlack,
+        paper: COLORS.nearBlack,
      },
      divider: "#4e4e54",
      text: {
        primary: "rgba(255,255,255,0.98)",
      },
      primary: {
-        main: "rgba(0, 116, 255, 0.8)", // #0074FF
+        main: COLORS.blueWithTransparency, // #0074FF
      },
      secondary: {
-        main: "rgb(0,239,216,0.8)", // #00EFD8
-        light: "rgb(51, 242, 223, 1)",
+        main: COLORS.greenWithTransparency, // #00EFD8
+        light: COLORS.lightGreen,
      },
      error: {
        main: "#FD3503",
@ -25,11 +35,17 @@ export const theme = responsiveFontSizes(
    },
    typography: {
      fontFamily: "'Sora', sans-serif",
+      h2: {
+        fontWeight: "700",
+      },
+      h4: {
+        fontWeight: "500",
+      },
    },
    overrides: {
      MuiButton: {
        root: {
-          borderRadius: 0,
+          borderRadius: "5px",
          textTransform: "none",
        },
      },