contentoh-components-library 21.0.46 → 21.0.49

package/dist/components/atoms/Loading/styles.js

@@ -13,6 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n  width: 50%;\n  position: relative;\n  img {\n    width: 60%;\n    position: absolute;\n    bottom: 55%;\n    left: 10%;\n  }\n  .loader {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 10%;\n    width: 50%;\n    position: absolute;\n    bottom: 45%;\n    left:10%;\n    span {\n      display: inline-block;\n      border-radius: 100%;\n      margin-left: 5px;\n      opacity: 1;\n    }\n    .first {\n      background-color: #ff75cf;\n    }\n    .second {\n      background-color: #e33aa9;\n    }\n    .third {\n      background-color: #b12d84;\n    }\n    span:nth-child(1) {\n      width: 16px;\n      height: 16px;\n      animation: opacitychange 1s ease-in-out infinite;\n    }\n    span:nth-child(2) {\n      width: 18px;\n      height: 18px;\n\n      animation: opacitychange 1s ease-in-out 0.33s infinite;\n    }\n    span:nth-child(3) {\n      width: 20px;\n      height: 20px;\n\n      animation: opacitychange 1s ease-in-out 0.66s infinite;\n    }\n    @keyframes opacitychange {\n      0%,\n      100% {\n        opacity: 0;\n      }\n      60% {\n        opacity: 1;\n      }\n    }\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n  width: 50%;\n  position: relative;\n  img {\n    width: 75% !important;\n    position: absolute;\n    bottom: 55%;\n    left: 10%;\n  }\n  .loader {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 10%;\n    width: 50%;\n    position: absolute;\n    bottom: 45%;\n    left:25%;\n    span {\n      display: inline-block;\n      border-radius: 100%;\n      margin-left: 5px;\n      opacity: 1;\n    }\n    .first {\n      background-color: #ff75cf;\n    }\n    .second {\n      background-color: #e33aa9;\n    }\n    .third {\n      background-color: #b12d84;\n    }\n    span:nth-child(1) {\n      width: 16px;\n      height: 16px;\n      animation: opacitychange 1s ease-in-out infinite;\n    }\n    span:nth-child(2) {\n      width: 18px;\n      height: 18px;\n\n      animation: opacitychange 1s ease-in-out 0.33s infinite;\n    }\n    span:nth-child(3) {\n      width: 20px;\n      height: 20px;\n\n      animation: opacitychange 1s ease-in-out 0.66s infinite;\n    }\n    @keyframes opacitychange {\n      0%,\n      100% {\n        opacity: 0;\n      }\n      60% {\n        opacity: 1;\n      }\n    }\n  }\n"])));
 
 exports.Container = Container;

package/dist/components/molecules/RegistrationFirstStep/index.js

@@ -163,6 +163,7 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
     }), emptyName && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       children: "Ingrese su nombre"
     }), emptyLastName && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+      className: "lastname",
       children: "Ingrese sus apellidos"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
       inputType: "text",

package/dist/components/molecules/RegistrationFirstStep/styles.js

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 50%;\n  height: 100vh;\n  .user {\n    .name-registration-user {\n      display: flex;\n      justify-content: space-between;\n      input {\n        width: 160px;\n      }\n    }\n    .input-name-header {\n      margin-bottom: 4px;\n      margin-top: 12px;\n    }\n    .phone-registration-user {\n      display: flex;\n      justify-content: space-between;\n      .phone-options {\n        width: 80px;\n      }\n      input {\n        width: 100%;\n      }\n      & + * {\n        margin-top: 10px;\n      }\n    }\n    .country-options,\n    .phone-options {\n      width: 100%;\n      border: 1px solid ", ";\n      font-family: ", ";\n      color: ", ";\n      font-weight: normal;\n      font-size: 12px;\n      line-height: 15px;\n      padding: 10px;\n      outline: none;\n      border-radius: 2px;\n      resize: none;\n      &:focus {\n        border: 1px solid ", ";\n      }\n    }\n  }\n  .button-end {\n    text-align: end;\n    .general-default-button {\n      width: 160px;\n    }\n    & + * {\n      margin-top: 10px;\n    }\n  }\n  .progress-bar {\n    width: 100%;\n    height: 8px;\n    display: flex;\n    justify-content: space-between;\n    .progress-bar-first-step {\n      width: 33.33%;\n      background-color: rgb(196, 196, 196);\n    }\n    .progress-bar-registration {\n      background-color: rgb(226, 226, 226);\n      width: 66.66%;\n    }\n  }\n  .date-header {\n    .new-login {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n  }\n  .pre-registro {\n    cursor: pointer;\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.magenta_s2);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 50%;\n  height: 100vh;\n  .user {\n    .name-registration-user {\n      display: flex;\n      justify-content: space-between;\n      input {\n        width: 160px;\n      }\n    }\n    .lastname {\n      margin-left: 69%;\n    }\n    .input-name-header {\n      margin-bottom: 4px;\n      margin-top: 12px;\n    }\n    .phone-registration-user {\n      display: flex;\n      justify-content: space-between;\n      .phone-options {\n        width: 80px;\n      }\n      input {\n        width: 100%;\n      }\n      & + * {\n        margin-top: 10px;\n      }\n    }\n    .country-options,\n    .phone-options {\n      width: 100%;\n      border: 1px solid ", ";\n      font-family: ", ";\n      color: ", ";\n      font-weight: normal;\n      font-size: 12px;\n      line-height: 15px;\n      padding: 10px;\n      outline: none;\n      border-radius: 2px;\n      resize: none;\n      &:focus {\n        border: 1px solid ", ";\n      }\n    }\n  }\n  .button-end {\n    text-align: end;\n    .general-default-button {\n      width: 160px;\n    }\n    & + * {\n      margin-top: 10px;\n    }\n  }\n  .progress-bar {\n    width: 100%;\n    height: 8px;\n    display: flex;\n    justify-content: space-between;\n    .progress-bar-first-step {\n      width: 33.33%;\n      background-color: rgb(196, 196, 196);\n    }\n    .progress-bar-registration {\n      background-color: rgb(226, 226, 226);\n      width: 66.66%;\n    }\n  }\n  .date-header {\n    .new-login {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n  }\n  .pre-registro {\n    cursor: pointer;\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.magenta_s2);
 
 exports.Container = Container;

package/dist/components/molecules/SignInLoginCreationApp/index.js

@@ -35,8 +35,6 @@ var _reactRouterDom = require("react-router-dom");
 
 var _axios = _interopRequireDefault(require("axios"));
 
-var _index5 = require("../../atoms/GradientPanel/index");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 var SignInLoginCreationApp = function SignInLoginCreationApp(props) {
@@ -200,71 +198,67 @@ var SignInLoginCreationApp = function SignInLoginCreationApp(props) {
   (0, _react.useEffect)(function () {
     if (upgradePlanRedirect) setLoading(false);
   }, [upgradePlanRedirect]);
-  var loginRight = [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "main-container",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.LogoImage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "credenciales",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.ScreenHeader, {
-        fontFamily: _variables.FontFamily.AvenirNext,
-        color: _variables.GlobalColors.s5,
-        text: "Ingresa tus credenciales"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "user",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
-        inputType: "text",
-        label: "Nombre de usuario",
-        inputPlaceHolder: "username@contentoh.com",
-        inputId: "emailInput"
-      }), showErrors && emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-        children: "Ingrese su correo"
-      }), invalidEmail && !emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-        children: "Ingrese un correo v\xE1lido"
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "password",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
-        inputType: "password",
-        label: "Contraseña",
-        inputPlaceHolder: "Escribe tu contraseña",
-        inputId: "passwordInput"
-      }), showErrors && emptyPassword && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-        children: "Ingrese su contrase\xF1a"
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "select",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.CheckBox, {
-        label: "Mantener sesión activada",
-        id: "chk-default",
-        className: "active-left"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-        onClick: function onClick() {
-          return props.setPaso(10);
-        },
-        className: "active-right",
-        children: "Olvide mi contrase\xF1a"
-      }), showErrors && signInError === "NotAuthorizedException" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-        children: "Correo o contrase\xF1a incorrectos"
-      }), showErrors && signInError === "Error" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-        children: "Ha habido un problema al iniciar sesi\xF3n"
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "button-right",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Button, {
-        buttonType: "general-default-button",
-        label: "Iniciar sesión",
-        onClick: function onClick(e) {
-          return validate(e);
-        }
-      })
-    })]
-  })];
   return loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.GradientPanel, {
-        componentsArray: loginRight,
-        panelType: "home-login",
-        panelColor: _variables.GlobalColors.white
+      className: "home-login",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "main-container",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.LogoImage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "credenciales",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.ScreenHeader, {
+            fontFamily: _variables.FontFamily.AvenirNext,
+            color: _variables.GlobalColors.s5,
+            text: "Ingresa tus credenciales"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "user",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+            inputType: "text",
+            label: "Nombre de usuario",
+            inputPlaceHolder: "username@contentoh.com",
+            inputId: "emailInput"
+          })
+        }), showErrors && emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: "Ingrese su correo"
+        }), invalidEmail && !emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: "Ingrese un correo v\xE1lido"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "password",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
+            inputType: "password",
+            label: "Contraseña",
+            inputPlaceHolder: "Escribe tu contraseña",
+            inputId: "passwordInput"
+          })
+        }), showErrors && emptyPassword && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: "Ingrese su contrase\xF1a"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "select",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.CheckBox, {
+            label: "Mantener sesión activada",
+            id: "chk-default",
+            className: "active-left"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            onClick: function onClick() {
+              return props.setPaso(10);
+            },
+            className: "active-right",
+            children: "Olvide mi contrase\xF1a"
+          })]
+        }), showErrors && signInError === "NotAuthorizedException" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: "Correo o contrase\xF1a incorrectos"
+        }), showErrors && signInError === "Error" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: "Ha habido un problema al iniciar sesi\xF3n"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "button-right",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Button, {
+            buttonType: "general-default-button",
+            label: "Iniciar sesión",
+            onClick: function onClick(e) {
+              return validate(e);
+            }
+          })
+        })]
       })
     }), upgradePlanRedirect && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Redirect, {
       to: {

package/dist/components/molecules/SignInLoginCreationApp/styles.js

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: \"white\";\n  display: flex;\n  height: 100vh;\n  width: 50%;\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: \"white\";\n  display: flex;\n  height: 100vh;\n  width: 50%;\n  justify-content: center;\n  align-items: center;\n  label {\n    color: red;\n    margin-top: 3px;\n    margin-left: 15px;\n    font-family: ", ";\n    font-size: 11px;\n    & + * {\n      margin-top: 12px;\n    }\n  }\n\n  &.home-login {\n    .credenciales {\n      & + * {\n        margin-top: 30px;\n      }\n    }\n    .user {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    .password {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    .select {\n      display: flex;\n      justify-content: space-between;\n      .active-right {\n        font-family: ", ";\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 24px;\n        letter-spacing: -0.015em;\n        color: ", ";\n        cursor: pointer;\n      }\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .button-right {\n      text-align: right;\n      & + * {\n        margin-top: 55px;\n      }\n    }\n    .new-login {\n      p {\n        font-family: ", ";\n        text-align: right;\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 24px;\n        color: ", ";\n        cursor: pointer;\n        span {\n          color: ", ";\n        }\n      }\n    }\n  }\n  .main-container {\n    max-width: 80%;\n    max-height: 80%;\n  }\n"])), _variables.FontFamily.Raleway_700, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.GlobalColors.secondary_magenta);
 
 exports.Container = Container;

package/dist/index.js

@@ -472,7 +472,7 @@ Object.keys(_index34).forEach(function (key) {
   });
 });
 
-var _index35 = require("./components/molecules/StatusAsignationInfo/index");
+var _index35 = require("./components/molecules/SignInLoginCreationApp/index");
 
 Object.keys(_index35).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -485,7 +485,7 @@ Object.keys(_index35).forEach(function (key) {
   });
 });
 
-var _index36 = require("./components/molecules/TableHeader/index");
+var _index36 = require("./components/molecules/StatusAsignationInfo/index");
 
 Object.keys(_index36).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -498,7 +498,7 @@ Object.keys(_index36).forEach(function (key) {
   });
 });
 
-var _index37 = require("./components/molecules/TableRow/index");
+var _index37 = require("./components/molecules/TableHeader/index");
 
 Object.keys(_index37).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -511,7 +511,7 @@ Object.keys(_index37).forEach(function (key) {
   });
 });
 
-var _index38 = require("./components/molecules/TabsMenu/index");
+var _index38 = require("./components/molecules/TableRow/index");
 
 Object.keys(_index38).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -524,7 +524,7 @@ Object.keys(_index38).forEach(function (key) {
   });
 });
 
-var _index39 = require("./components/molecules/TagAndInput/index");
+var _index39 = require("./components/molecules/TabsMenu/index");
 
 Object.keys(_index39).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -537,7 +537,7 @@ Object.keys(_index39).forEach(function (key) {
   });
 });
 
-var _index40 = require("./components/molecules/VerificationCodeResetPasswordLogin/index");
+var _index40 = require("./components/molecules/TagAndInput/index");
 
 Object.keys(_index40).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -550,7 +550,7 @@ Object.keys(_index40).forEach(function (key) {
   });
 });
 
-var _index41 = require("./components/organisms/ChangePassword/index");
+var _index41 = require("./components/molecules/VerificationCodeResetPasswordLogin/index");
 
 Object.keys(_index41).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -563,7 +563,7 @@ Object.keys(_index41).forEach(function (key) {
   });
 });
 
-var _index42 = require("./components/organisms/Fullplan/index");
+var _index42 = require("./components/organisms/ChangePassword/index");
 
 Object.keys(_index42).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -576,7 +576,7 @@ Object.keys(_index42).forEach(function (key) {
   });
 });
 
-var _index43 = require("./components/organisms/FullProductNameHeader/index");
+var _index43 = require("./components/organisms/Fullplan/index");
 
 Object.keys(_index43).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -589,7 +589,7 @@ Object.keys(_index43).forEach(function (key) {
   });
 });
 
-var _index44 = require("./components/organisms/FullTabsMenu/index");
+var _index44 = require("./components/organisms/FullProductNameHeader/index");
 
 Object.keys(_index44).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -602,7 +602,7 @@ Object.keys(_index44).forEach(function (key) {
   });
 });
 
-var _index45 = require("./components/organisms/ImageDataTable/index");
+var _index45 = require("./components/organisms/FullTabsMenu/index");
 
 Object.keys(_index45).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -615,7 +615,7 @@ Object.keys(_index45).forEach(function (key) {
   });
 });
 
-var _index46 = require("./components/organisms/ImagePreviewer/index");
+var _index46 = require("./components/organisms/ImageDataTable/index");
 
 Object.keys(_index46).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -628,7 +628,7 @@ Object.keys(_index46).forEach(function (key) {
   });
 });
 
-var _index47 = require("./components/organisms/ImagesGroup/index");
+var _index47 = require("./components/organisms/ImagePreviewer/index");
 
 Object.keys(_index47).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -641,7 +641,7 @@ Object.keys(_index47).forEach(function (key) {
   });
 });
 
-var _index48 = require("./components/organisms/InputGroup/index");
+var _index48 = require("./components/organisms/ImagesGroup/index");
 
 Object.keys(_index48).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -654,7 +654,7 @@ Object.keys(_index48).forEach(function (key) {
   });
 });
 
-var _index49 = require("./components/organisms/ProductImageModal/index");
+var _index49 = require("./components/organisms/InputGroup/index");
 
 Object.keys(_index49).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -667,6 +667,19 @@ Object.keys(_index49).forEach(function (key) {
   });
 });
 
+var _index50 = require("./components/organisms/ProductImageModal/index");
+
+Object.keys(_index50).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index50[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index50[key];
+    }
+  });
+});
+
 var _ChangePasswordLogin = require("./components/pages/ChangePasswordLogin");
 
 Object.keys(_ChangePasswordLogin).forEach(function (key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.0.46",
+  "version": "21.0.49",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/components/atoms/Loading/styles.js

@@ -7,7 +7,7 @@ export const Container = styled.div`
   width: 50%;
   position: relative;
   img {
-    width: 60%;
+    width: 75% !important;
     position: absolute;
     bottom: 55%;
     left: 10%;
@@ -20,7 +20,7 @@ export const Container = styled.div`
     width: 50%;
     position: absolute;
     bottom: 45%;
-    left:10%;
+    left:25%;
     span {
       display: inline-block;
       border-radius: 100%;

package/src/components/molecules/RegistrationFirstStep/index.js

@@ -36,12 +36,12 @@ export const RegistrationFirstStep = (props) => {
   }, []);
   const validate = (evt) => {
     const name = document.querySelector("#nameInput").value;
-  const lastName = document.querySelector("#lastNameInput").value;
-  const email = document.querySelector("#emailInput").value;
-  const job = document.querySelector("#jobInput").value;
-  const phone = document.querySelector("#phoneInput").value;
-  const country = document.querySelector("#countrySelect").value;
-  const countryCode = document.querySelector("#countryCodeSelect").value;
+    const lastName = document.querySelector("#lastNameInput").value;
+    const email = document.querySelector("#emailInput").value;
+    const job = document.querySelector("#jobInput").value;
+    const phone = document.querySelector("#phoneInput").value;
+    const country = document.querySelector("#countrySelect").value;
+    const countryCode = document.querySelector("#countryCodeSelect").value;
     let valid = true;
     evt.preventDefault();
     name === "" ? setEmptyName(true) : setEmptyName(false);
@@ -122,7 +122,9 @@ export const RegistrationFirstStep = (props) => {
         />
       </div>
       {emptyName && <label>Ingrese su nombre</label>}
-      {emptyLastName && <label>Ingrese sus apellidos</label>}
+      {emptyLastName && (
+        <label className="lastname">Ingrese sus apellidos</label>
+      )}
       <TagAndInput
         inputType={"text"}
         inputId={"emailInput"}

package/src/components/molecules/RegistrationFirstStep/styles.js

@@ -13,6 +13,9 @@ export const Container = styled.div`
         width: 160px;
       }
     }
+    .lastname {
+      margin-left: 69%;
+    }
     .input-name-header {
       margin-bottom: 4px;
       margin-top: 12px;

package/src/components/molecules/SignInLoginCreationApp/index.js

@@ -9,7 +9,6 @@ import { useState, useEffect } from "react";
 import { Loading } from "../../atoms/Loading";
 import { Redirect } from "react-router-dom";
 import axios from "axios";
-import { GradientPanel } from "../../atoms/GradientPanel/index";
 
 export const SignInLoginCreationApp = (props) => {
   const [emptyEmail, setEmptyEmail] = useState(false);
@@ -111,80 +110,72 @@ export const SignInLoginCreationApp = (props) => {
       }
     }
   };
-
   useEffect(() => {
     sessionStorage.getItem("resetPasswordProcess") &&
       sessionStorage.removeItem("resetPasswordProcess");
   }, []);
-
   useEffect(() => {
     if (upgradePlanRedirect) setLoading(false);
   }, [upgradePlanRedirect]);
-
-  const loginRight = [
-    <div className="main-container">
-      <LogoImage />
-      <div className="credenciales">
-        <ScreenHeader
-          fontFamily={FontFamily.AvenirNext}
-          color={GlobalColors.s5}
-          text={"Ingresa tus credenciales"}
-        />
-      </div>
-      <div className="user">
-        <TagAndInput
-          inputType={"text"}
-          label={"Nombre de usuario"}
-          inputPlaceHolder={"username@contentoh.com"}
-          inputId={"emailInput"}
-        />
-        {showErrors && emptyEmail && <label>Ingrese su correo</label>}
-        {invalidEmail && !emptyEmail && <label>Ingrese un correo válido</label>}
-      </div>
-      <div className="password">
-        <TagAndInput
-          inputType={"password"}
-          label={"Contraseña"}
-          inputPlaceHolder={"Escribe tu contraseña"}
-          inputId={"passwordInput"}
-        />
-        {showErrors && emptyPassword && <label>Ingrese su contraseña</label>}
-      </div>
-      <div className="select">
-        <CheckBox
-          label={"Mantener sesión activada"}
-          id={"chk-default"}
-          className="active-left"
-        />
-        <p onClick={() => props.setPaso(10)} className="active-right">
-          Olvide mi contraseña
-        </p>
-        {showErrors && signInError === "NotAuthorizedException" && (
-          <label>Correo o contraseña incorrectos</label>
-        )}
-        {showErrors && signInError === "Error" && (
-          <label>Ha habido un problema al iniciar sesión</label>
-        )}
-      </div>
-      <div className="button-right">
-        <Button
-          buttonType={"general-default-button"}
-          label={"Iniciar sesión"}
-          onClick={(e) => validate(e)}
-        />
-      </div>
-    </div>,
-  ];
   return loading ? (
     <Loading />
   ) : (
     <>
-      <Container>
-        <GradientPanel
-          componentsArray={loginRight}
-          panelType={"home-login"}
-          panelColor={GlobalColors.white}
-        />
+      <Container className={"home-login"}>
+        <div className="main-container">
+          <LogoImage />
+          <div className="credenciales">
+            <ScreenHeader
+              fontFamily={FontFamily.AvenirNext}
+              color={GlobalColors.s5}
+              text={"Ingresa tus credenciales"}
+            />
+          </div>
+          <div className="user">
+            <TagAndInput
+              inputType={"text"}
+              label={"Nombre de usuario"}
+              inputPlaceHolder={"username@contentoh.com"}
+              inputId={"emailInput"}
+            />
+          </div>
+          {showErrors && emptyEmail && <label>Ingrese su correo</label>}
+          {invalidEmail && !emptyEmail && (
+            <label>Ingrese un correo válido</label>
+          )}
+          <div className="password">
+            <TagAndInput
+              inputType={"password"}
+              label={"Contraseña"}
+              inputPlaceHolder={"Escribe tu contraseña"}
+              inputId={"passwordInput"}
+            />
+          </div>
+          {showErrors && emptyPassword && <label>Ingrese su contraseña</label>}
+          <div className="select">
+            <CheckBox
+              label={"Mantener sesión activada"}
+              id={"chk-default"}
+              className="active-left"
+            />
+            <p onClick={() => props.setPaso(10)} className="active-right">
+              Olvide mi contraseña
+            </p>
+          </div>
+          {showErrors && signInError === "NotAuthorizedException" && (
+            <label>Correo o contraseña incorrectos</label>
+          )}
+          {showErrors && signInError === "Error" && (
+            <label>Ha habido un problema al iniciar sesión</label>
+          )}
+          <div className="button-right">
+            <Button
+              buttonType={"general-default-button"}
+              label={"Iniciar sesión"}
+              onClick={(e) => validate(e)}
+            />
+          </div>
+        </div>
       </Container>
       {upgradePlanRedirect && <Redirect to={{ pathname: "/dashboard" }} />}
     </>

package/src/components/molecules/SignInLoginCreationApp/styles.js

@@ -6,4 +6,74 @@ export const Container = styled.div`
   display: flex;
   height: 100vh;
   width: 50%;
+  justify-content: center;
+  align-items: center;
+  label {
+    color: red;
+    margin-top: 3px;
+    margin-left: 15px;
+    font-family: ${FontFamily.Raleway_700};
+    font-size: 11px;
+    & + * {
+      margin-top: 12px;
+    }
+  }
+
+  &.home-login {
+    .credenciales {
+      & + * {
+        margin-top: 30px;
+      }
+    }
+    .user {
+      & + * {
+        margin-top: 20px;
+      }
+    }
+    .password {
+      & + * {
+        margin-top: 20px;
+      }
+    }
+    .select {
+      display: flex;
+      justify-content: space-between;
+      .active-right {
+        font-family: ${FontFamily.AvenirNext};
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 24px;
+        letter-spacing: -0.015em;
+        color: ${GlobalColors.s5};
+        cursor: pointer;
+      }
+      & + * {
+        margin-top: 50px;
+      }
+    }
+    .button-right {
+      text-align: right;
+      & + * {
+        margin-top: 55px;
+      }
+    }
+    .new-login {
+      p {
+        font-family: ${FontFamily.AvenirNext};
+        text-align: right;
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 24px;
+        color: ${GlobalColors.s5};
+        cursor: pointer;
+        span {
+          color: ${GlobalColors.secondary_magenta};
+        }
+      }
+    }
+  }
+  .main-container {
+    max-width: 80%;
+    max-height: 80%;
+  }
 `;

package/src/index.js

@@ -37,6 +37,7 @@ export * from "./components/molecules/RegistrationFirstStep/index";
 export * from "./components/molecules/RegistrationSecondStep/index";
 export * from "./components/molecules/RegistrationThirdStep/index";
 export * from "./components/molecules/SignInLogin/index";
+export * from "./components/molecules/SignInLoginCreationApp/index";
 export * from "./components/molecules/StatusAsignationInfo/index";
 export * from "./components/molecules/TableHeader/index";
 export * from "./components/molecules/TableRow/index";