"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var styled_components_1 = __importDefault(require("styled-components"));
var styleConstants_1 = require("../../styleConstants");
var img_check_email_2x_png_1 = __importDefault(require("../../images/auth/img-check-email@2x.png"));
var img_confirm_email_2x_png_1 = __importDefault(require("../../images/auth/img-confirm-email@2x.png"));
var ico_error_red_2x_png_1 = __importDefault(require("../../images/icons/ico-error-red@2x.png"));
var utils_1 = require("@joincivil/utils");
var AuthTextComponents_1 = require("./AuthTextComponents");
var __1 = require("../..");
exports.CheckboxContainer = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  list-style: none;\n  padding-left: 0;\n  margin-top: 0;\n"], ["\n  list-style: none;\n  padding-left: 0;\n  margin-top: 0;\n"])));
exports.CheckboxSection = styled_components_1.default.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-bottom: 10px;\n"], ["\n  margin-bottom: 10px;\n"])));
exports.CheckboxLabel = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  font: 400 15px/20px ", ";\n  padding-left: 7px;\n  vertical-align: middle;\n"], ["\n  color: ", ";\n  font: 400 15px/20px ", ";\n  padding-left: 7px;\n  vertical-align: middle;\n"])), styleConstants_1.colors.primary.CIVIL_GRAY_1, styleConstants_1.fonts.SANS_SERIF);
exports.ConfirmButtonContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  padding-top: 20px;\n"], ["\n  display: flex;\n  justify-content: center;\n  padding-top: 20px;\n"])));
exports.SkipForNowButtonContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  padding-top: 20px;\n"], ["\n  display: flex;\n  justify-content: center;\n  padding-top: 20px;\n"])));
exports.CheckEmailLetterIcon = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 108px;\n  height: 108px;\n  background-position: center center;\n  background-image: url(", ");\n  background-size: cover;\n  margin: 30px 0;\n"], ["\n  width: 108px;\n  height: 108px;\n  background-position: center center;\n  background-image: url(", ");\n  background-size: cover;\n  margin: 30px 0;\n"])), img_check_email_2x_png_1.default);
exports.ConfirmedEmailLetterIcon = styled_components_1.default(exports.CheckEmailLetterIcon)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-image: url(", ");\n"], ["\n  background-image: url(", ");\n"])), img_confirm_email_2x_png_1.default);
exports.CenterWrapper = function (_a) {
    var children = _a.children;
    return (React.createElement("div", { style: { display: "flex", justifyContent: "center" } },
        React.createElement("div", null, children)));
};
exports.CheckEmailSection = function () { return (React.createElement(exports.CenterWrapper, null,
    React.createElement(exports.CheckEmailLetterIcon, null))); };
exports.CenteredText = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  text-align: center;\n"], ["\n  text-align: center;\n"])));
exports.FooterTextCentered = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  text-align: center;\n"], ["\n  text-align: center;\n"])));
exports.AuthOuterWrapperContainer = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  width: 700px;\n\n  ", " {\n    width: 100%;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  width: 700px;\n\n  ", " {\n    width: 100%;\n  }\n"])), styleConstants_1.mediaQueries.MOBILE);
exports.AuthOuterWrapper = function (_a) {
    var children = _a.children;
    return (React.createElement(exports.CenterWrapper, null,
        React.createElement(exports.AuthOuterWrapperContainer, null,
            React.createElement(exports.CenterWrapper, null, children))));
};
exports.AuthWrapper = function (_a) {
    var children = _a.children;
    return (React.createElement(exports.AuthOuterWrapper, null,
        React.createElement(exports.AuthInnerWrapper, null, children),
        React.createElement(exports.AuthFooterTerms, { textEl: React.createElement(AuthTextComponents_1.AuthTextFooter, null) })));
};
exports.AuthInnerWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  margin: 71px 115px 0;\n\n  ", " {\n    margin: 71px 15px 0;\n  }\n"], ["\n  margin: 71px 115px 0;\n\n  ", " {\n    margin: 71px 15px 0;\n  }\n"])), styleConstants_1.mediaQueries.MOBILE);
exports.AuthPageFooterLink = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  text-align: center;\n  font-size: 12px;\n  text-decoration: underline;\n  padding-top: 60px;\n"], ["\n  text-align: center;\n  font-size: 12px;\n  text-decoration: underline;\n  padding-top: 60px;\n"])));
exports.AuthFooterContainer = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  border-top: 1px solid #d8d8d8;\n  margin-top: 40px;\n  padding-top: 20px;\n"], ["\n  border-top: 1px solid #d8d8d8;\n  margin-top: 40px;\n  padding-top: 20px;\n"])));
exports.BenefitsLink = styled_components_1.default(exports.AuthPageFooterLink)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  padding: 0;\n"], ["\n  padding: 0;\n"])));
exports.AuthFooterTerms = function (_a) {
    var textEl = _a.textEl;
    return (React.createElement(exports.AuthFooterContainer, null,
        textEl,
        React.createElement(exports.BenefitsLink, null,
            React.createElement("a", { href: utils_1.urlConstants.BECOME_A_MEMBER, target: "_blank" }, "Read more about those benefits."))));
};
exports.AuthEmailVerify = function (_a) {
    var hasVerified = _a.hasVerified, errorMessage = _a.errorMessage, onAuthenticationContinue = _a.onAuthenticationContinue, ethAuthNextExt = _a.ethAuthNextExt;
    if (errorMessage) {
        return React.createElement(AuthTextComponents_1.AuthTextVerifyTokenError, { errorMessage: errorMessage });
    }
    return (React.createElement(React.Fragment, null,
        hasVerified ? React.createElement(AuthTextComponents_1.AuthTextVerifyTokenConfirmed, null) : React.createElement(AuthTextComponents_1.AuthTextVerifyTokenVerifying, null),
        React.createElement(exports.CenterWrapper, null,
            React.createElement(exports.ConfirmedEmailLetterIcon, null)),
        ethAuthNextExt && (React.createElement("div", { style: { marginBottom: 24 } },
            React.createElement(AuthTextComponents_1.AuthTextEthAuthNext, null))),
        React.createElement(exports.CenterWrapper, null,
            React.createElement(__1.Button, { size: __1.buttonSizes.MEDIUM_WIDE, onClick: onAuthenticationContinue }, "Continue"))));
};
exports.EmailConfirmVerify = function (_a) {
    var hasVerified = _a.hasVerified, errorMessage = _a.errorMessage, onEmailConfirmContinue = _a.onEmailConfirmContinue, ethAuthNextExt = _a.ethAuthNextExt;
    if (errorMessage) {
        return React.createElement(AuthTextComponents_1.AuthTextVerifyTokenError, { errorMessage: errorMessage });
    }
    return (React.createElement(React.Fragment, null,
        hasVerified ? React.createElement(AuthTextComponents_1.AuthTextVerifyTokenConfirmed, null) : React.createElement(AuthTextComponents_1.AuthTextVerifyTokenVerifying, null),
        React.createElement(exports.CenterWrapper, null,
            React.createElement(exports.ConfirmedEmailLetterIcon, null)),
        ethAuthNextExt && (React.createElement("div", { style: { marginBottom: 24 } },
            React.createElement(AuthTextComponents_1.AuthTextEthAuthNext, null))),
        React.createElement(exports.CenterWrapper, null,
            React.createElement(__1.Button, { size: __1.buttonSizes.MEDIUM_WIDE, onClick: onEmailConfirmContinue }, "Continue"))));
};
exports.AuthErrorMessage = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  border: 1px solid rgba(242, 82, 74, 0.56);\n  border-radius: 4px;\n  background-color: #fff7f8;\n\n  background-position: 10px center;\n  background-image: url(", ");\n  background-size: 30px;\n  background-repeat: no-repeat;\n\n  color: #555555;\n  font-family: ", ";\n  font-size: 14px;\n\n  /*  TODO(jorgelo): This is terrible, but the error message breaks out of the parent box. There has to be a better way. */\n  margin: 0 -116px 17px -116px;\n\n  padding: 18px 0;\n\n  text-align: center;\n"], ["\n  border: 1px solid rgba(242, 82, 74, 0.56);\n  border-radius: 4px;\n  background-color: #fff7f8;\n\n  background-position: 10px center;\n  background-image: url(", ");\n  background-size: 30px;\n  background-repeat: no-repeat;\n\n  color: #555555;\n  font-family: ", ";\n  font-size: 14px;\n\n  /*  TODO(jorgelo): This is terrible, but the error message breaks out of the parent box. There has to be a better way. */\n  margin: 0 -116px 17px -116px;\n\n  padding: 18px 0;\n\n  text-align: center;\n"])), ico_error_red_2x_png_1.default, styleConstants_1.fonts.SANS_SERIF);
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
//# sourceMappingURL=AuthStyledComponents.js.map