ui v2: landing

frontend/packages/app/src/index.css

@@ -1,3 +1,8 @@
-#root {
+html, body, #root, #App {
   height: 100%;
 }
+
+#App {
+  display: flex;
+  flex-direction: column;
+}

frontend/packages/core/src/Assets/Graphics/index.tsx

@@ -0,0 +1,4 @@
+import MonsterGraphic from "./monster";
+
+/* eslint-disable import/prefer-default-export */
+export { MonsterGraphic };

frontend/packages/core/src/Assets/Graphics/monster.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+
+const MonsterIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={44} height={41} fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M42.682 12.728c.53.058.975.384 1.19.871a1.46 1.46 0 01-.158 1.466l-1.371 1.88c.339 1.291.519 2.667.519 4.078a16.43 16.43 0 01-3.48 10.095h.028a2.568 2.568 0 012.566 2.565v6.739a.504.504 0 01-.504.504H14.096a.504.504 0 01-.504-.504v-2.224l-8.277-5.42a5.013 5.013 0 01-1.824-2.138L.267 23.467a3.026 3.026 0 011.515-3.997l.8-.358a3.027 3.027 0 013.997 1.516l2.646 5.877c.232.517.606.956 1.082 1.27l1.45.952a16.35 16.35 0 01-1.924-7.704c0-7.659 5.379-14.382 12.818-16.087L25.069.738c.27-.463.747-.738 1.279-.738.53 0 1.009.275 1.277.736l2.419 4.197c.616.139 1.218.31 1.784.518.104.035.211.078.319.121l.086.034 2.983-1.514a1.46 1.46 0 011.472.077c.448.29.7.782.673 1.315v.003l-.169 3.097.064.056c.129.114.257.227.38.342a15.26 15.26 0 011.714 1.884c.398.503.77 1.052 1.116 1.623l2.216.239zm-6.541-7.713a.461.461 0 00-.468-.025l-2.226 1.13.046.025a16.067 16.067 0 011.368.734c.021.012.042.026.062.04a16.307 16.307 0 011.18.794l.06.04.063.042.129-2.361a.463.463 0 00-.214-.42zm-9.793-4.007a.462.462 0 00-.407.235l-1.982 3.44c.035-.005.071-.008.107-.012l.093-.01c.26-.034.521-.063.782-.085l.02-.002a16.551 16.551 0 011.227-.06l.075-.002a1.604 1.604 0 01.168 0l.075.003a16.591 16.591 0 011.223.059l.024.002c.26.022.52.05.78.085l.095.01c.037.004.073.007.109.012l-1.983-3.442a.462.462 0 00-.406-.233zm14.62 38.91v-6.235a1.56 1.56 0 00-1.558-1.558h-.735c-.044 0-.087.002-.13.006-.102.114-.21.223-.319.333l-.119.12-.108.113c-.057.06-.114.121-.174.18-.271.263-.55.517-.839.758a16.39 16.39 0 01-10.639 3.895 16.39 16.39 0 01-9.382-2.93 4.556 4.556 0 01-.302-.22 15.734 15.734 0 01-1.011-.791 4.535 4.535 0 01-.181-.165l-.129-.12-.082-.072c-.189-.169-.377-.337-.558-.517-.078-.078-.152-.16-.227-.242l-.135-.148-.122-.128a11.67 11.67 0 01-.401-.438 7.423 7.423 0 01-.223-.277 11.318 11.318 0 00-.124-.159l-.134-.165a9.555 9.555 0 01-.31-.392l-3.273-2.15a3.988 3.988 0 01-1.447-1.698L5.66 21.041a2.018 2.018 0 00-2.666-1.01l-.799.358a2.018 2.018 0 00-1.01 2.665l3.225 7.173a4.002 4.002 0 001.458 1.709l8.504 5.568a.506.506 0 01.228.422v1.992h21.353v-2.272a.504.504 0 011.008 0v2.272h4.007zm-4.633-7.052a14.45 14.45 0 001.577-1.54 15.447 15.447 0 003.401-14.354l.003-.002a.092.092 0 00-.004-.011l-.005-.014-.008-.026c-.02-.068-.029-.102-.036-.138a15.146 15.146 0 00-1.526-3.56 15.195 15.195 0 00-1.182-1.736A14.22 14.22 0 0036.95 9.72a24.9 24.9 0 00-.584-.525l-.014-.013a15.214 15.214 0 00-4.273-2.556 6.86 6.86 0 00-.584-.224 13.313 13.313 0 00-1.88-.538h-.003a15.57 15.57 0 00-6.527 0c-7.094 1.52-12.243 7.895-12.243 15.16a15.39 15.39 0 002.947 9.076c.245.338.502.665.77.98.205.238.421.463.638.688l.09.098c.037.041.074.082.112.12a15.26 15.26 0 001.871 1.59 15.39 15.39 0 009.078 2.948 15.388 15.388 0 009.988-3.658zm5.652-17.142l.914-1.252a.462.462 0 00.05-.466.461.461 0 00-.378-.277l-1.496-.16a.177.177 0 01.01.023c.169.33.326.667.47 1.01.02.045.038.092.055.139l.042.108c.106.262.21.525.302.793l.015.04.016.041zm-2.981-1.551a.487.487 0 01.07.147.1.1 0 00.007.014.07.07 0 01.01.022c.173.86.261 1.737.261 2.607 0 7.169-5.834 13-13.006 13-7.173 0-13.007-5.831-13.007-13 0-.87.088-1.747.26-2.607.002-.009.007-.015.011-.022.004-.006.008-.012.01-.02a.49.49 0 01.067-.141l.007-.01c.011-.016.022-.032.036-.047a.491.491 0 01.139-.102.077.077 0 00.016-.012c.006-.006.012-.01.02-.014h.006c.002 0 .003 0 .005-.002a.024.024 0 00.007-.003l.003-.003a.499.499 0 01.214-.025c.009.001.017.004.026.007a.164.164 0 00.02.006c.059.011.114.03.165.062l.014.005c.005.001.01.002.015.005 3.21 2.217 7.46 3.438 11.966 3.438 4.505 0 8.755-1.22 11.965-3.438a.047.047 0 01.016-.006c.002 0 .005 0 .007-.002a.496.496 0 01.175-.065c.004 0 .009-.003.014-.004.01-.003.019-.007.03-.007.068-.007.139-.001.209.023.002 0 .004.002.006.004a.024.024 0 00.007.003l.005.001.006.001c.008.003.014.008.02.014.005.004.01.009.016.012.053.027.1.06.139.102.014.015.025.03.036.047l.007.01zm-2.214 3.971l.87-2.519c-3.197 1.845-7.15 2.86-11.314 2.86s-8.118-1.014-11.315-2.86l.87 2.52 1.308-.379a.503.503 0 01.623.343l.855 2.924 2.37-1.153a.505.505 0 01.608.13l2.17 2.611L26 20.557a.504.504 0 01.695 0l2.164 2.064 2.17-2.61a.505.505 0 01.607-.131l2.371 1.153.854-2.924a.504.504 0 01.623-.343l1.308.378zm-22.444-1.18c0 6.612 5.383 11.992 12 11.992 6.616 0 11.998-5.38 11.998-11.993l-.003-.117-.004-.094-.75 2.174a.502.502 0 01-.616.32l-1.285-.372-.881 3.014a.502.502 0 01-.704.313l-2.552-1.242-2.262 2.72a.505.505 0 01-.359.182h-.029a.505.505 0 01-.347-.139l-2.206-2.104-2.207 2.105a.505.505 0 01-.735-.043l-2.262-2.721-2.551 1.242a.505.505 0 01-.704-.313l-.881-3.014-1.285.371a.503.503 0 01-.616-.32l-.751-2.174c0 .031-.002.063-.004.094-.002.04-.004.079-.004.118zm8.123-2.812a.786.786 0 100-1.572.786.786 0 000 1.572zm8.539-.786a.786.786 0 11-1.572 0 .786.786 0 011.572 0z"
+      fill="#3548D4"
+    />
+  </svg>
+);
+
+export default MonsterIcon;

frontend/packages/core/src/landing.tsx

@@ -1,49 +1,48 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
-import { Grid, Link, Paper } from "@material-ui/core";
+import styled from "@emotion/styled";
+import { Grid } from "@material-ui/core";
 import Typography from "@material-ui/core/Typography";
-import GitHubIcon from "@material-ui/icons/GitHub";
-import styled from "styled-components";
 
 import { userId } from "./AppLayout/user";
+import { MonsterGraphic } from "./Assets/Graphics";
 import { LandingCard } from "./card";
 import { useAppContext } from "./Contexts";
-import { TrendingUpIcon } from "./icon";
 
-const GridContainer = styled(Grid)`
-  margin-top: 20px;
-`;
+const StyledLanding = styled.div({
+  backgroundColor: "#f9f9fe",
+  height: "100%",
+  "& .welcome": {
+    display: "flex",
+    backgroundColor: "white",
+    padding: "32px 80px",
+  },
 
-const Content = styled(Paper)`
-  padding: 1.5%;
-`;
+  "& .welcome svg": {
+    flex: "0 0 auto",
+    marginRight: "24px",
+  },
 
-const Footer = styled.div`
-  @media screen and (min-width: 900px) and (min-height: 500px) {
-    position: absolute;
-    bottom: 0;
-    width: 150px;
-    left: 50%;
-    margin-left: -75px;
-    padding-bottom: 10px;
-  }
-  @media screen and (max-height: 500px) {
-    position: inherit;
-  }
-`;
+  "& .welcome .welcomeText": {
+    flex: "1 1 auto",
+  },
 
-const GitHubLogo = styled(GitHubIcon)`
-  ${({ theme }) => `
-  color: ${theme.palette.accent.main};
-  margin-right: 5px;
-  `}
-`;
+  "& .welcome .title": {
+    fontWeight: "bold",
+    fontSize: "22px",
+    color: "#0d1030",
+  },
 
-const GitHubLink = styled(Link)`
-  ${({ theme }) => `
-  color: ${theme.palette.secondary.main};
-  `}
-`;
+  "& .welcome .subtitle": {
+    fontSize: "16px",
+    fontWeight: "normal",
+    color: "rgba(13, 16, 48, 0.6)",
+  },
+
+  "& .content": {
+    padding: "32px 80px",
+  },
+});
 
 const Landing: React.FC<{}> = () => {
   const navigate = useNavigate();
@@ -70,64 +69,38 @@ const Landing: React.FC<{}> = () => {
   };
 
   return (
-    <Content id="landing" elevation={0}>
-      <Typography variant="h5">
-        <strong>Welcome {userId()} </strong>
-        <span role="img" aria-label="Hand Waving">
-          👋
-        </span>
-      </Typography>
-      <>
-        <div>
-          <Typography gutterBottom variant="body1" paragraph>
+    <StyledLanding id="landing">
+      <div className="welcome">
+        <MonsterGraphic />
+        <div className="welcomeText">
+          <div className="title">Welcome {userId()}</div>
+          <div className="subtitle">
             Clutch will assist you in safely modifying resources outside of the normal orchestration
             process.
-          </Typography>
-
-          {trendingWorkflows.length === 0 ? null : (
-            <>
-              <Grid container justify="center" alignItems="center">
-                <TrendingUpIcon />
-                <Typography align="center" variant="h5">
-                  Trending Workflows
-                </Typography>
-              </Grid>
-
-              <GridContainer justify="center" container direction="row" spacing={3}>
-                {trendingWorkflows.map(workflow => (
-                  <Grid item>
-                    <LandingCard
-                      group={workflow.group}
-                      title={workflow.title}
-                      description={workflow.description}
-                      onClick={() => navigateTo(workflow.path)}
-                      key={workflow.path}
-                    />
-                  </Grid>
-                ))}
-              </GridContainer>
-            </>
-          )}
+          </div>
         </div>
-        <Footer>
-          <GridContainer container justify="center">
-            <Grid item>
-              <GitHubLogo fontSize="small" />
-            </Grid>
-            <Grid item>
-              <GitHubLink
-                target="_blank"
-                rel="noreferrer"
-                href="https://github.com/lyft/clutch"
-                underline="none"
-              >
-                lyft/clutch
-              </GitHubLink>
+      </div>
+      <div className="content">
+        {trendingWorkflows.length === 0 ? null : (
+          <Grid container spacing={3} alignItems="center">
+            <Grid item xs={12}>
+              <Typography variant="h5">Trending Workflows</Typography>
             </Grid>
-          </GridContainer>
-        </Footer>
-      </>
-    </Content>
+            {trendingWorkflows.map(workflow => (
+              <Grid item xs={12} sm={12} md={6} lg={4} xl={4}>
+                <LandingCard
+                  group={workflow.group}
+                  title={workflow.title}
+                  description={workflow.description}
+                  onClick={() => navigateTo(workflow.path)}
+                  key={workflow.path}
+                />
+              </Grid>
+            ))}
+          </Grid>
+        )}
+      </div>
+    </StyledLanding>
   );
 };