@krowdy/kds-auth/es/LoginSinglePage/PasswordNotify.js

React components that implement Google's Material Design.

import React from 'react';
import { Paper, makeStyles, IconButton, Button, Typography } from '@krowdy/kds-core';
import { Close as CloseIcon } from '@material-ui/icons';

var _ref = /*#__PURE__*/React.createElement(CloseIcon, {
  fontSize: "small"
});

var _ref2 = /*#__PURE__*/React.createElement(Typography, {
  variant: "body2"
}, "\xBFTe gustar\xEDa crear una contrase\xF1a para ingresar con esta cuenta?");

const PasswordNotify = ({
  onCreate = () => {},
  onClose = () => {}
}) => {
  const classes = useStyles();
  return /*#__PURE__*/React.createElement(Paper, {
    className: classes.paper,
    variant: "elevation"
  }, /*#__PURE__*/React.createElement(IconButton, {
    className: classes.closeButton,
    onClick: onClose,
    size: "small",
    variant: "outlined"
  }, _ref), _ref2, /*#__PURE__*/React.createElement(Button, {
    className: classes.button,
    color: "primary",
    onClick: onCreate,
    variant: "contained"
  }, "Crear una contrase\xF1a"));
};

const useStyles = makeStyles(({
  palette,
  spacing,
  zIndex,
  breakpoints
}) => ({
  button: {
    marginTop: spacing(1.25)
  },
  closeButton: {
    position: 'absolute',
    right: 5,
    top: 5
  },
  paper: {
    [breakpoints.up('md')]: {
      maxWidth: 324,
      right: 54,
      top: 90
    },
    background: palette.common.white,
    maxWidth: 324,
    padding: spacing(1.5, 2),
    position: 'fixed',
    right: 16,
    top: 32,
    zIndex: zIndex.modal + 10
  }
}), {
  name: 'PasswordNotify'
});
export default React.memo(PasswordNotify);