@corva/ui 0.38.0-6 → 0.38.0-9

package/src/components/Login/components/Chip.js

@@ -1,48 +0,0 @@
-import PropTypes from 'prop-types';
-import { Chip as MUIChip, Grid, withStyles, styled } from '@material-ui/core';
-
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-
-const EmailBackIcon = styled(ArrowBackIcon)(({ theme }) => ({
-  color: theme.palette.primary.text6,
-  fontSize: 16,
-}));
-
-const Chip = ({ label, onClick, classes, dataTestid }) => (
-  <Grid item className={classes.chip}>
-    <MUIChip
-      label={label}
-      className={classes.chipContent}
-      icon={<EmailBackIcon />}
-      variant="outlined"
-      onClick={onClick}
-      data-testid={dataTestid}
-    />
-  </Grid>
-);
-
-Chip.defaultProps = {
-  dataTestid: null,
-};
-
-Chip.propTypes = {
-  label: PropTypes.string.isRequired,
-  dataTestid: PropTypes.string,
-  onClick: PropTypes.func.isRequired,
-  classes: PropTypes.shape({}).isRequired,
-};
-
-export default withStyles(theme => ({
-  chip: {
-    marginTop: '-25px',
-    marginBottom: 20,
-    textAlign: 'center',
-  },
-  chipContent: {
-    color: theme.palette.primary.text6,
-    fontSize: 13,
-    border: 'none',
-    background: '#2C2C2C',
-    padding: '0 5px 0 10px',
-  },
-}))(Chip);

package/src/components/Login/components/DCLogoIcon.js

@@ -1,20 +0,0 @@
-import { memo } from 'react';
-
-function DCLogoIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="300"
-      height="68"
-      fill="none"
-      viewBox="0 0 300 68"
-    >
-      <path
-        fill="#fff"
-        d="M20.111.186H.906C.362.186 0 .554 0 1.107V35.752c0 .553.362.921.906.921H20.11c5.436 0 9.784-4.238 9.965-9.582V9.584c0-5.16-4.348-9.398-9.965-9.398zm2.718 17.138v9.767c0 1.474-1.268 2.764-2.718 2.764H8.153c-.543 0-.906-.369-.906-.921V8.294c0-.553.363-.921.906-.921h11.958c1.45 0 2.718 1.105 2.718 2.764v7.187zM186.256 59.891c.181 0 1.993-.737 1.993-3.501 0-2.027-.906-3.87-3.986-3.87h-4.892v15.111h4.892c3.261 0 4.529-1.658 4.529-4.054 0-3.317-2.355-3.686-2.536-3.686zm-6.161-6.818h3.986c2.718 0 3.443 1.29 3.443 3.317 0 1.843-.906 3.317-3.443 3.317h-3.986v-6.634zm4.168 13.821h-4.168V60.26h3.986c2.537 0 3.805 1.106 3.805 3.317 0 2.027-.725 3.317-3.623 3.317zM201.295 52.52l-5.073 7.924-4.892-7.924h-.906l5.436 8.662v6.265h.724v-6.265l5.617-8.662h-.544c-.181-.184-.362 0-.362 0zM217.6 54.916h6.341s.181 0 .363-.185l1.087-1.658v-.369s-.182-.184-.363-.184H217.6c-4.349 0-7.247 2.948-7.247 7.371 0 4.239 3.08 7.556 7.247 7.556h7.428c.181 0 .181 0 .363-.184v-.369l-1.087-1.474s-.182-.184-.363-.184h-5.254c-3.805 0-5.979-1.843-5.979-5.16 0-2.396 1.631-5.16 4.892-5.16zM235.719 52.52c-5.616 0-8.515 2.58-8.515 7.74s2.718 7.74 8.515 7.74c5.617 0 8.516-2.58 8.516-7.74 0-5.344-2.899-7.74-8.516-7.74zm0 12.9c-4.348 0-6.16-1.474-6.16-5.344s1.631-5.345 6.16-5.345c4.349 0 6.161 1.475 6.161 5.345 0 3.87-1.631 5.344-6.161 5.344zM262.533 57.68c0-2.027-.906-3.5-2.537-4.238-1.087-.553-2.536-.553-3.261-.553h-10.69c-.181 0-.181 0-.362.184v.369l1.087 1.659s.181.184.362.184h8.697c2.899 0 4.167.921 4.167 2.764 0 1.659-1.63 2.764-4.167 2.764h-8.516c-.181 0-.362.185-.362.369v6.266c0 .184.181.368.362.368h1.631c.181 0 .363-.184.363-.368v-4.423h7.79l2.718 4.607h2.355c.182 0 .182 0 .363-.184v-.37l-2.899-4.975c1.268-.553 2.899-2.027 2.899-4.422zM282.464 52.888s-.181-.184-.363-.184h-1.993c-.181 0-.181 0-.362.184l-6.704 11.61-6.522-11.61s-.181-.184-.363-.184h-1.993c-.181 0-.181 0-.362.184v.369l7.791 13.636c.181.369.725.922 1.449.922.544 0 1.087-.369 1.45-.922l7.791-13.636c.362-.185.362-.37.181-.37zM299.133 66.893l-7.79-13.637c-.363-.184-.725-.921-1.631-.921s-1.268.553-1.449.921l-7.791 13.637v.369s.181.184.362.184h1.993c.181 0 .181 0 .362-.184l6.704-11.61 5.436 9.583h-6.342s-.181 0-.362.184l-1.087 1.659v.368s.181.184.362.184h10.69c.181 0 .181 0 .362-.184.181-.368.181-.553.181-.553zM268.151 37.04h5.254c.543 0 1.087-.368 1.087-1.105V8.293c0-.553.362-1.106 1.087-1.106h11.958c1.45 0 2.718 1.106 2.718 2.764v5.713c0 1.474-1.268 2.764-2.718 2.764h-7.247c-.363 0-.906.185-1.087.737l-1.631 5.345c-.181.737.362 1.29 1.087 1.29h5.073l6.16 10.688a.996.996 0 00.906.553h6.161c.724 0 1.268-.922.905-1.474l-6.16-10.505a9.885 9.885 0 005.979-8.66V9.766c0-5.344-4.529-9.767-9.965-9.767h-19.386c-.544 0-1.087.369-1.087 1.106v35.013c0 .553.362.922.906.922zM87.15.738l-8.697 27.643v-.184l-4.53-14.006-3.08-9.214L69.575.923c-.181-.369-.544-.737-1.087-.737H35.15c-.543 0-.906.368-.906.921v34.83c0 .552.363 1.105.906 1.105h29.352c.725 0 1.268-.553 1.087-1.29l-1.63-5.344c-.182-.369-.544-.737-1.088-.737H42.76c-.544 0-.906-.369-.906-.922v-5.528c0-.553.362-.922.906-.922h13.226c.544 0 .906-.368.906-.92v-5.16c0-.554-.362-.922-.906-.922H42.76c-.544 0-.906-.369-.906-.922V9.031c0-.553.362-.921.906-.921h20.292l9.24 28.932c.182.369.544.737 1.088.737h9.965c.362 0 .906-.184 1.087-.737L96.028.738h-7.791c-.544-.737-.906-.368-1.087 0zM125.922 0h-9.965c-5.435 0-9.784 4.239-9.965 9.583v18.059c0 5.345 4.53 9.583 9.965 9.583h9.965c5.436 0 9.784-4.238 9.965-9.583v-.552c0-.369-.362-.738-.724-.738h-5.798c-.363 0-.725.369-.725.738 0 1.474-1.268 2.764-2.718 2.764h-9.602c-1.45 0-2.718-1.106-2.718-2.764V9.767c0-1.474 1.268-2.764 2.718-2.764h9.602c1.45 0 2.718 1.29 2.718 2.764 0 .369.362.737.725.737h5.798c.362 0 .724-.368.724-.737v-.369C135.706 4.423 131.358 0 125.922 0zM166.507.186H140.598c-.544 0-.906.368-.906.921V35.752c0 .553.362.921.906.921h25.909c.543 0 .906-.368.906-.92v-5.345c0-.553-.363-.922-.906-.922h-18.119c-.543 0-.906-.368-.906-.92v-5.53c0-.552.363-.92.906-.92h13.227c.543 0 .906-.37.906-.922v-5.16c0-.553-.363-.922-.906-.922h-13.227c-.543 0-.906-.368-.906-.921v-5.16c0-.553.363-.921.906-.921h18.119c.543 0 .906-.369.906-.922V1.291c0-.737-.363-1.105-.906-1.105zM236.081 37.04h26.091c.543 0 1.087-.368 1.087-1.105v-5.16c0-.553-.363-1.105-1.087-1.105h-18.481c-.543 0-1.087-.37-1.087-1.106v-5.529c0-.552.362-1.105 1.087-1.105h13.226c.544 0 1.088-.369 1.088-1.106v-5.16c0-.553-.363-1.106-1.088-1.106h-13.226c-.543 0-1.087-.368-1.087-1.105V8.108c0-.552.362-1.105 1.087-1.105h18.3c.543 0 1.087-.369 1.087-1.106V1.106c0-.553-.363-1.106-1.087-1.106h-25.91c-.543 0-1.087.369-1.087 1.106v34.83c0 .736.363 1.105 1.087 1.105zM212.708 36.858h7.429c.181 0 .362-.184.362-.369V8.48c0-.37.363-.738.725-.738h9.059c.181 0 .362-.184.362-.368V.738c0-.184-.181-.368-.362-.368H194.59c-.181 0-.362.184-.362.368v18.797c0 .369-.182.553-.544.737-.362.185-.725 0-.906-.368L179.19.186h-7.429c-.181 0-.362.184-.362.368v35.751c0 .184.181.368.362.368h6.885c.181 0 .362-.184.362-.368V16.587c0-.369.182-.553.544-.737.362-.185.725 0 .906.368l14.132 20.64h6.885c.181 0 .362-.184.362-.369V7.741h9.603c.362 0 .725.369.725.737v27.827c.181.368.362.553.543.553z"
-      />
-    </svg>
-  );
-}
-
-export default memo(DCLogoIcon);

package/src/components/Login/components/EmailField.js

@@ -1,75 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { TextField, withStyles } from '@material-ui/core';
-
-const PAGE_NAME = 'EmailField';
-
-
-const EmailField = ({ value, onChange, disabled, error, classes }) => (
-  <TextField
-    data-testid={`${PAGE_NAME}_emailInput`}
-    id="email-input"
-    label="Email"
-    type="email"
-    name="email"
-    autoComplete="email"
-    value={value}
-    placeholder="Enter your email address"
-    variant="outlined"
-    InputLabelProps={{
-      classes: {
-        root: classes.emailFieldLabelRoot,
-        focused: classes.emailFieldFocused,
-      },
-    }}
-    InputProps={{
-      classes: {
-        root: classes.emailFieldRoot,
-        input: classes.emailInput,
-        disabled: classes.emailFieldDisabled,
-        focused: classes.emailFieldFocused,
-        error: classes.emailFieldError,
-      },
-    }}
-    onChange={onChange}
-    disabled={disabled}
-    error={!!error}
-    helperText={error}
-    fullWidth
-  />
-);
-
-EmailField.defaultProps = {
-  disabled: false,
-  error: null,
-}
-
-EmailField.propTypes = {
-  value: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  disabled: PropTypes.bool,
-  error: PropTypes.string,
-  classes: PropTypes.shape().isRequired,
-};
-
-export default withStyles(theme => ({
-  emailFieldRoot: {
-    '&:hover:not($emailFieldDisabled):not($emailFieldFocused):not($emailFieldError) $emailFieldNotchedOutline': {
-      borderColor: theme.status.loginButton,
-    },
-    '&$emailFieldFocused $emailFieldNotchedOutline': {
-      borderColor: theme.status.loginButton,
-    },
-  },
-  emailInput: {
-    '&:-webkit-autofill': {
-      WebkitBoxShadow: '0 0 0 100px #233 inset',
-    },
-  },
-  emailFieldLabelRoot: {
-    color: '#666',
-    '&$emailFieldFocused': {
-      color: theme.status.loginButton,
-    },
-  },
-}))(EmailField);

package/src/components/Login/components/HiddenEmailField.js

@@ -1,32 +0,0 @@
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-
-const muiStyles = {
-  input: { display: 'none' },
-};
-
-
-// NOTE: Workaround to fill username field in browser's password managers
-function HiddenEmailField(props) {
-  return props.email ? (
-    <input
-      name="hidden-email"
-      className={props.classes.input}
-      type="email"
-      defaultValue={props.email}
-    />
-  ) : null;
-}
-
-HiddenEmailField.propTypes = {
-  email: PropTypes.string,
-  classes: PropTypes.shape({
-    input: PropTypes.string.isRequired,
-  }).isRequired,
-};
-
-HiddenEmailField.defaultProps = {
-  email: null,
-};
-
-export default withStyles(muiStyles)(HiddenEmailField);

package/src/components/Login/components/Login.global.css

@@ -1,110 +0,0 @@
-.c-login {
-  display: flex;
-  flex: 1;
-  background-color: #212121;
-}
-
-.c-login-promo {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-  text-indent: -9999px;
-}
-
-.c-login-promo__image {
-  background-size: cover;
-  background-position: center bottom;
-  background-repeat: no-repeat;
-}
-
-.c-login-promo__video {
-  object-fit: cover;
-  max-height: 100vh;
-  height: 100vh;
-}
-
-.c-login-content {
-  width: 439px;
-  background-color: #212121;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-}
-
-.c-login-logo {
-  padding-top: 156px;
-  display: flex;
-  justify-content: center;
-  padding-bottom: 30px;
-}
-
-.c-login-mobile .c-login-promo {
-  display: none;
-}
-
-.c-login-mobile.c-login-large_content {
-  align-items: center;
-  justify-content: center;
-}
-
-.c-login-mobile.c-login-large_content .c-login-logo {
-  padding-top: 0;
-}
-
-.c-login-mobile.c-login-landscape {
-  align-items: flex-start;
-}
-
-.c-login-mobile.c-login-landscape .c-login-logo {
-  padding-top: 57px;
-  padding-bottom: 0;
-}
-
-@media (max-width: 1023px) {
-  .c-login-promo {
-    display: none;
-  }
-
-  .c-login-large_content {
-    align-items: center;
-    justify-content: center;
-  }
-
-  .c-login-large_content .c-login-logo {
-    padding-top: 0;
-  }
-
-  .c-login-landscape {
-    align-items: flex-start;
-  }
-
-  .c-login-landscape .c-login-logo {
-    padding-top: 57px;
-    padding-bottom: 0;
-  }
-}
-
-@supports (-webkit-touch-callout: none) {
-  .c-login-promo {
-    display: none;
-  }
-
-  .c-login-large_content {
-    align-items: center;
-    justify-content: center;
-  }
-
-  .c-login-large_content .c-login-logo {
-    padding-top: 0;
-  }
-
-  .c-login-landscape {
-    align-items: flex-start;
-  }
-
-  .c-login-landscape .c-login-logo {
-    padding-top: 57px;
-    padding-bottom: 0;
-  }
-}

package/src/components/Login/components/Login.js

@@ -1,85 +0,0 @@
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { Tooltip, styled } from '@material-ui/core';
-import { isMobileDetected, isTabletDetected } from '~/utils/mobileDetect';
-
-import LogoIcon from './LogoIcon';
-import LoginBackgroundImage from '../assets/login_screen_progressive.jpg';
-
-import './Login.global.css';
-
-const isLandscape = window.innerHeight < window.innerWidth;
-const StyledTooltip = styled(Tooltip)({ maxWidth: 300, margin: 0 });
-
-const Login = ({
-  children,
-  location,
-  logoIcon,
-  logoTooltip,
-  promoBackgroundImage,
-  promoBackgroundWebM,
-  promoBackgroundMp4,
-  promoLink,
-}) => {
-  const hasVideoAnimation = promoBackgroundWebM || promoBackgroundMp4;
-
-  const backgroundAnimation = (
-    <a
-      href={promoLink}
-      target="_blank"
-      rel="noreferrer"
-      className={classnames('c-login-promo', !hasVideoAnimation && 'c-login-promo__image')}
-      style={{ backgroundImage: !hasVideoAnimation && `url(${promoBackgroundImage})` }}
-    >
-      Promo
-      {hasVideoAnimation && (
-        <video loop muted autoPlay playsinline className="c-login-promo__video">
-          {promoBackgroundWebM && <source src={promoBackgroundWebM} type="video/webm" />}
-          {promoBackgroundMp4 && <source src={promoBackgroundMp4} type="video/mp4" />}
-        </video>
-      )}
-    </a>
-  );
-
-  return (
-    <div
-      className={classnames('c-login', {
-        'c-login-mobile': isMobileDetected || isTabletDetected,
-        'c-login-large_content': location.path !== '/login',
-        'c-login-landscape': isLandscape,
-      })}
-    >
-      {backgroundAnimation}
-      <div className="c-login-content">
-        <div className="c-login-logo">
-          <StyledTooltip title={logoTooltip} placement="bottom">
-            <div>{logoIcon}</div>
-          </StyledTooltip>
-        </div>
-
-        {children}
-      </div>
-    </div>
-  );
-};
-Login.propTypes = {
-  children: PropTypes.node,
-  logoIcon: PropTypes.node,
-  logoTooltip: PropTypes.string,
-  promoLink: PropTypes.string,
-  promoBackgroundImage: PropTypes.string,
-  promoBackgroundWebM: PropTypes.string,
-  promoBackgroundMp4: PropTypes.string,
-};
-
-Login.defaultProps = {
-  children: undefined,
-  logoIcon: <LogoIcon />,
-  logoTooltip: '',
-  promoLink: 'https://www.corva.ai/',
-  promoBackgroundImage: LoginBackgroundImage,
-  promoBackgroundWebM: undefined,
-  promoBackgroundMp4: undefined,
-};
-
-export default Login;

package/src/components/Login/components/LogoIcon.js

@@ -1,20 +0,0 @@
-import { memo } from 'react';
-
-function Icon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="200"
-      height="50"
-      fill="none"
-      viewBox="0 0 200 50"
-    >
-      <path
-        fill="#fff"
-        d="M35.867 35.917a.732.732 0 00-.604-.319H24.1c-7.956 0-12.706-3.987-12.706-10.666 0-5.05 3.258-10.486 10.41-10.486h13.498a.732.732 0 00.61-.327l2.274-3.408a.733.733 0 00-.609-1.14h-15.77c-9.038 0-15.348 6.225-15.348 15.138 0 8.962 6.597 15.72 15.345 15.72h15.767a.733.733 0 00.606-1.147l-2.31-3.365zM59.852 9.075c-12 0-17.835 5.202-17.835 15.902 0 10.732 5.833 15.948 17.835 15.948s17.835-5.216 17.835-15.948c0-10.7-5.833-15.902-17.835-15.902zm0 27.019c-9.283 0-12.9-3.117-12.9-11.115 0-7.966 3.617-11.07 12.9-11.07 9.283 0 12.9 3.104 12.9 11.07 0 7.998-3.617 11.115-12.9 11.115zM104.104 9.571h-22.43a.737.737 0 00-.65.392.736.736 0 00.047.758l2.352 3.409a.735.735 0 00.604.316h18.521c6.15 0 8.891 1.79 8.891 5.802 0 3.492-3.325 5.578-8.891 5.578H84.279a.734.734 0 00-.733.733v13.135c0 .404.329.733.733.733h3.469c.404 0 .733-.329.733-.733v-9.219h16.458l5.58 9.72a.737.737 0 00.535.233h4.685a.731.731 0 00.523-1.248l-6.143-10.17c3.162-.778 6.373-3.845 6.373-9.033 0-4.079-1.8-7.141-5.207-8.858-2.673-1.346-5.648-1.548-7.181-1.548zM157.85 9.571h-4.09a.732.732 0 00-.633.363l-14.165 24.219L125.067 9.94a.736.736 0 00-.636-.369h-4.325a.733.733 0 00-.633 1.1l16.331 28.134c.423.752 1.394 2.029 3.079 2.029 1.25 0 2.286-.681 3.079-2.027l16.521-28.132a.728.728 0 00.004-.735.738.738 0 00-.637-.369zM173.823 9.167c-1.663 0-2.644 1.27-3.079 2.03l-16.559 28.126a.733.733 0 00.634 1.104h4.127a.73.73 0 00.633-.364L173.744 15.8l11.352 19.794h-12.892a.732.732 0 00-.621.344l-2.108 3.364a.732.732 0 00.621 1.123h22.506a.733.733 0 00.633-1.1l-16.333-28.13c-.423-.753-1.394-2.028-3.079-2.028z"
-      />
-    </svg>
-  );
-}
-
-export default memo(Icon);

package/src/components/Login/components/OrDivider.js

@@ -1,48 +0,0 @@
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-
-import Divider from '@material-ui/core/Divider';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-
-const muiStyles = theme => ({
-  dividerItem: {
-    flex: 10,
-  },
-  textItem: {
-    textAlign: 'center',
-    paddingLeft: 24,
-    paddingRight: 24,
-  },
-  text: {
-    color: theme.palette.primary.text6,
-  },
-});
-
-function OrDivider(props) {
-  return (
-    <Grid container justify="space-between" alignItems="center" wrap="nowrap">
-      <Grid item className={props.classes.dividerItem}>
-        <Divider />
-      </Grid>
-      <Grid item className={props.classes.textItem}>
-        <Typography variant="subtitle1" className={props.classes.text}>
-          OR
-        </Typography>
-      </Grid>
-      <Grid item className={props.classes.dividerItem}>
-        <Divider />
-      </Grid>
-    </Grid>
-  );
-}
-
-OrDivider.propTypes = {
-  classes: PropTypes.shape({
-    dividerItem: PropTypes.string.isRequired,
-    textItem: PropTypes.string.isRequired,
-    text: PropTypes.string.isRequired,
-  }).isRequired,
-};
-
-export default withStyles(muiStyles)(OrDivider);

package/src/components/Login/components/PasswordField.js

@@ -1,73 +0,0 @@
-import { useState } from 'react';
-import { InputAdornment, TextField, withStyles } from '@material-ui/core';
-import IconButton from '@material-ui/core/IconButton';
-import VisibilityIcon from '@material-ui/icons/Visibility';
-import VisibilityOffIcon from '@material-ui/icons/VisibilityOff';
-
-const PasswordField = ({ value, onChange, disabled, error, classes }) => {
-  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-  const togglePassword = () => setIsPasswordVisible(val => !val);
-  return (
-    <TextField
-      id="password-input"
-      label="Password"
-      type={isPasswordVisible ? 'text' : 'password'}
-      name="password"
-      value={value}
-      variant="outlined"
-      onChange={onChange}
-      autoComplete="password"
-      disabled={disabled}
-      error={!!error}
-      helperText={error}
-      InputProps={{
-        endAdornment: (
-          <InputAdornment position="end">
-            <IconButton
-              aria-label="Toggle password visibility"
-              onClick={togglePassword}
-            >
-              {isPasswordVisible ? <VisibilityIcon /> : <VisibilityOffIcon />}
-            </IconButton>
-          </InputAdornment>
-        ),
-        classes: {
-          root: classes.passwordFieldRoot,
-          input: classes.passwordField,
-          disabled: classes.passwordFieldDisabled,
-          focused: classes.passwordFieldFocused,
-          error: classes.passwordFieldError,
-          notchedOutline: classes.passwordFieldNotchedOutline,
-        },
-      }}
-      InputLabelProps={{
-        classes: {
-          root: classes.passwordFieldLabelRoot,
-          focused: classes.passwordFieldFocused,
-        },
-      }}
-      fullWidth
-    />
-  );
-};
-
-export default withStyles((theme) => ({
-  passwordFieldRoot: {
-    '&:hover:not($passwordFieldDisabled):not($passwordFieldFocused):not($passwordFieldError) $passwordFieldNotchedOutline': {
-      borderColor: theme.status.loginButton,
-    },
-    '&$passwordFieldFocused $passwordFieldNotchedOutline': {
-      borderColor: theme.status.loginButton,
-    },
-  },
-  passwordFieldLabelRoot: {
-    '&$passwordFieldFocused': {
-      color: theme.status.loginButton,
-    },
-  },
-  passwordField: {
-    '&:-webkit-autofill': {
-      WebkitBoxShadow: '0 0 0 100px #233 inset',
-    },
-  },
-}))(PasswordField);

package/src/components/Login/components/Step.js

@@ -1,23 +0,0 @@
-import PropTypes from 'prop-types';
-
-import Grid from '@material-ui/core/Grid';
-
-
-function Step(props) {
-  return (
-    <Grid
-      container
-      direction="column"
-      wrap="nowrap"
-      alignItems="center"
-    >
-      {props.children}
-    </Grid>
-  );
-}
-
-Step.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default Step;

package/src/components/Login/components/StepContent.js

@@ -1,29 +0,0 @@
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-
-import Grid from '@material-ui/core/Grid';
-
-const muiStyles = theme => ({
-  gridItem: {
-    padding: theme.spacing(2, 4, 2, 4),
-    width: '100%',
-  },
-});
-
-
-function StepContent(props) {
-  return (
-    <Grid item className={props.classes.gridItem}>
-      {props.children}
-    </Grid>
-  );
-}
-
-StepContent.propTypes = {
-  children: PropTypes.node.isRequired,
-  classes: PropTypes.shape({
-    gridItem: PropTypes.string.isRequired,
-  }).isRequired,
-};
-
-export default withStyles(muiStyles)(StepContent);

package/src/components/Login/components/StepFooter.js

@@ -1,78 +0,0 @@
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-
-import Grid from '@material-ui/core/Grid';
-import { UniversalLink } from '../../DevCenter/DevCenterRouterContext';
-
-const PAGE_NAME = 'EmailPo';
-
-const muiStyles = theme => ({
-  gridItem: {
-    padding: theme.spacing(2, 4, 4, 4),
-    width: '100%',
-  },
-  helpLink: {
-    color: theme.palette.primary.text6,
-    textTransform: 'uppercase',
-    padding: theme.spacing(1),
-    borderRadius: 4,
-    '&:hover': {
-      background: '#333',
-      color: '#fff',
-    },
-  },
-});
-
-const NEED_HELP_LABEL = 'Need help?';
-
-function StepFooter(props) {
-  const { children, classes, showNeedHelp, needHelpExternalLink } = props;
-
-  return (
-    <Grid item className={classes.gridItem}>
-      <Grid container direction="row" justify="space-between" alignItems="center">
-        <Grid item>
-          {showNeedHelp && !needHelpExternalLink && (
-            <UniversalLink
-              data-testid={`${PAGE_NAME}_needHelp`}
-              className={classes.helpLink}
-              href="/login/help"
-            >
-              {NEED_HELP_LABEL}
-            </UniversalLink>
-          )}
-          {showNeedHelp && needHelpExternalLink && (
-            <a
-              data-testid={`${PAGE_NAME}_needHelp`}
-              className={classes.helpLink}
-              href={needHelpExternalLink}
-              target="_blank"
-              rel="noreferrer"
-            >
-              {NEED_HELP_LABEL}
-            </a>
-          )}
-        </Grid>
-        <Grid item>{children}</Grid>
-      </Grid>
-    </Grid>
-  );
-}
-
-StepFooter.propTypes = {
-  children: PropTypes.node,
-  showNeedHelp: PropTypes.bool,
-  needHelpExternalLink: PropTypes.string,
-  classes: PropTypes.shape({
-    gridItem: PropTypes.string.isRequired,
-    helpLink: PropTypes.string.isRequired,
-  }).isRequired,
-};
-
-StepFooter.defaultProps = {
-  children: null,
-  needHelpExternalLink: null,
-  showNeedHelp: true,
-};
-
-export default withStyles(muiStyles)(StepFooter);

package/src/components/Login/components/StepHeader.js

@@ -1,31 +0,0 @@
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-
-const muiStyles = theme => ({
-  gridItem: {
-    padding: theme.spacing(4),
-    textAlign: 'center',
-    width: '100%',
-  },
-});
-
-
-function StepHeader(props) {
-  return (
-    <Grid item className={props.classes.gridItem}>
-      <Typography variant="h6">{props.children}</Typography>
-    </Grid>
-  );
-}
-
-StepHeader.propTypes = {
-  children: PropTypes.string.isRequired,
-  classes: PropTypes.shape({
-    gridItem: PropTypes.string.isRequired,
-  }).isRequired,
-};
-
-export default withStyles(muiStyles)(StepHeader);