contentoh-components-library 21.0.58 → 21.0.61

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/atoms/SliderToolTip/index.js +147 -86
  2. package/dist/components/atoms/SliderToolTip/styles.js +2 -2
  3. package/dist/components/molecules/SignInLogin/index.js +4 -7
  4. package/package.json +1 -1
  5. package/src/components/atoms/SliderToolTip/index.js +79 -13
  6. package/src/components/atoms/SliderToolTip/styles.js +18 -19
  7. package/src/components/molecules/SignInLogin/index.js +1 -9
package/dist/components/atoms/SliderToolTip/index.js CHANGED
@@ -40,99 +40,160 @@ var SliderToolTip = function SliderToolTip(_ref) {
40
40
  document.addEventListener("click", closeMenu, false);
41
41
  }
42
42
  }, [showMenu]);
43
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
44
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
45
- onClick: function onClick(e) {
46
- setShowMenu(!showMenu);
47
43
 
48
- if (showMenu) {
49
- document.removeEventListener("click", closeMenu, false);
44
+ var color = function color(id) {
45
+ if (id === "slidea1") {
46
+ document.getElementById("slidea1").style.backgroundColor = "#E33AA9";
47
+ document.getElementById("slidea2").style.backgroundColor = "#C4C4C4";
48
+ document.getElementById("slidea3").style.backgroundColor = "#C4C4C4";
49
+ document.getElementById("slidea4").style.backgroundColor = "#C4C4C4";
50
+ document.getElementById("slidea5").style.backgroundColor = "#C4C4C4";
51
+ }
52
+
53
+ if (id === "slidea2") {
54
+ document.getElementById("slidea1").style.backgroundColor = "#FAFAFA";
55
+ document.getElementById("slidea2").style.backgroundColor = "#E33AA9";
56
+ document.getElementById("slidea3").style.backgroundColor = "#C4C4C4";
57
+ document.getElementById("slidea4").style.backgroundColor = "#C4C4C4";
58
+ document.getElementById("slidea5").style.backgroundColor = "#C4C4C4";
59
+ }
60
+
61
+ if (id === "slidea3") {
62
+ document.getElementById("slidea1").style.backgroundColor = "#FAFAFA";
63
+ document.getElementById("slidea2").style.backgroundColor = "#FAFAFA";
64
+ document.getElementById("slidea3").style.backgroundColor = "#E33AA9";
65
+ document.getElementById("slidea4").style.backgroundColor = "#C4C4C4";
66
+ document.getElementById("slidea5").style.backgroundColor = "#C4C4C4";
67
+ }
68
+
69
+ if (id === "slidea4") {
70
+ document.getElementById("slidea1").style.backgroundColor = "#FAFAFA";
71
+ document.getElementById("slidea2").style.backgroundColor = "#FAFAFA";
72
+ document.getElementById("slidea3").style.backgroundColor = "#FAFAFA";
73
+ document.getElementById("slidea4").style.backgroundColor = "#E33AA9";
74
+ document.getElementById("slidea5").style.backgroundColor = "#C4C4C4";
75
+ }
76
+
77
+ if (id === "slidea5") {
78
+ document.getElementById("button-slide").style.display = "flex";
79
+ }
80
+ };
81
+
82
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
83
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
84
+ className: "container-slider",
85
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
86
+ src: InfoIcon,
87
+ alt: "info icon",
88
+ onClick: function onClick(e) {
89
+ setShowMenu(!showMenu);
90
+
91
+ if (showMenu) {
92
+ document.removeEventListener("click", closeMenu, false);
93
+ }
50
94
  }
51
- },
52
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
53
- src: showMenu ? InfoIcon : InfoIcon,
54
- alt: "info icon"
55
- })
56
- }), showMenu && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Slider, {
57
- id: "div-slider",
58
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
59
- className: "slider",
60
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
61
- id: "slide1",
62
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
63
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
64
- src: Slide1
65
- })
66
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
67
- children: "Creamos tu contenido, y todo lo que haga falta para tu producto, cada secci\xF3n puedes socilitar contenido enriquecido, y nosotros lo haremos por ti."
68
- })]
69
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
70
- id: "slide2",
71
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
72
- src: Slide2
73
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
74
- children: "Puedes agregar solicitudes de contenido enriquecido a tu carrito de compra las veces que sean necesarias. Una vez completada tu lista con los servicios necesitados sigue el proceso de compra en checkout."
75
- })]
76
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
77
- id: "slide3",
78
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
79
- src: Slide3
80
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
81
- children: "Revisa el contenido que deseas solicilitar, valida y tambien puedes agregar contenido extra, traducciones, o simplemente completar el checkout."
82
- })]
83
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
84
- id: "slide4",
85
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
86
- src: Slide4
87
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
88
- children: "Elige el tipo de entrega de tu producto, puedes ser recolecci\xF3n en el lugar o por el contrario puedes dejarlo en nuestras oficinas."
95
+ }), showMenu && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Slider, {
96
+ id: "div-slider",
97
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
98
+ className: "slider",
99
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
100
+ id: "slide1",
101
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
102
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
103
+ src: Slide1
104
+ })
105
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
106
+ children: "Creamos tu contenido, y todo lo que haga falta para tu producto, cada secci\xF3n puedes socilitar contenido enriquecido, y nosotros lo haremos por ti."
107
+ })]
108
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
109
+ id: "slide2",
110
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
111
+ src: Slide2
112
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
113
+ children: "Puedes agregar solicitudes de contenido enriquecido a tu carrito de compra las veces que sean necesarias. Una vez completada tu lista con los servicios necesitados sigue el proceso de compra en checkout."
114
+ })]
115
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
116
+ id: "slide3",
117
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
118
+ src: Slide3
119
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
120
+ children: "Revisa el contenido que deseas solicilitar, valida y tambien puedes agregar contenido extra, traducciones, o simplemente completar el checkout."
121
+ })]
122
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
123
+ id: "slide4",
124
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
125
+ src: Slide4
126
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
127
+ children: "Elige el tipo de entrega de tu producto, puedes ser recolecci\xF3n en el lugar o por el contrario puedes dejarlo en nuestras oficinas."
128
+ })]
129
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
130
+ id: "slide5",
131
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
132
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
133
+ src: Slide5
134
+ })
135
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
136
+ className: "lema-end",
137
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
138
+ children: "Finalmente elige la forma de pago que m\xE1s te guste, procede con el pago y listo."
139
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
140
+ children: "Bienvenido al modo Content-oh!"
141
+ })]
142
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
143
+ id: "button-slide",
144
+ onClick: function onClick(e) {
145
+ document.removeEventListener("click", closeMenu, false);
146
+ setShowMenu(false);
147
+ },
148
+ children: "Cerrar"
149
+ })]
89
150
  })]
90
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
91
- id: "slide5",
92
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
93
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
94
- src: Slide5
151
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
152
+ className: "menu",
153
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
154
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
155
+ href: "#slide1",
156
+ id: "slidea1",
157
+ onClick: function onClick(e) {
158
+ color("slidea1");
159
+ }
160
+ })
161
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
162
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
163
+ href: "#slide2",
164
+ id: "slidea2",
165
+ onClick: function onClick(e) {
166
+ color("slidea2");
167
+ }
168
+ })
169
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
170
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
171
+ href: "#slide3",
172
+ id: "slidea3",
173
+ onClick: function onClick(e) {
174
+ color("slidea3");
175
+ }
176
+ })
177
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
178
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
179
+ href: "#slide4",
180
+ id: "slidea4",
181
+ onClick: function onClick(e) {
182
+ color("slidea4");
183
+ }
184
+ })
185
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
186
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
187
+ href: "#slide5",
188
+ id: "slidea5",
189
+ onClick: function onClick(e) {
190
+ color("slidea5");
191
+ }
95
192
  })
96
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
97
- className: "lema-end",
98
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
99
- children: "Finalmente elige la forma de pago que m\xE1s te guste, procede con el pago y listo."
100
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
101
- children: "Bienvenido al modo Content-oh!"
102
- })]
103
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
104
- onClick: function onClick(e) {
105
- document.removeEventListener("click", closeMenu, false);
106
- setShowMenu(false);
107
- },
108
- children: "Cerrar"
109
193
  })]
110
194
  })]
111
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
112
- className: "menu",
113
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
114
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
115
- href: "#slide1"
116
- })
117
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
118
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
119
- href: "#slide2"
120
- })
121
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
122
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
123
- href: "#slide3"
124
- })
125
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
126
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
127
- href: "#slide4"
128
- })
129
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
130
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
131
- href: "#slide5"
132
- })
133
- })]
134
195
  })]
135
- })]
196
+ })
136
197
  });
137
198
  };
138
199
 
package/dist/components/atoms/SliderToolTip/styles.js CHANGED
@@ -15,10 +15,10 @@ var _variables = require("../../../global-files/variables");
15
15
 
16
16
  var _templateObject, _templateObject2;
17
17
 
18
- var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background: transparent;\n cursor: pointer;\n width: 40px;\n margin-left: 9px;\n position: relative;\n & + * {\n margin-left: 9px;\n }\n top: 100%;\n left: 100%;\n"])));
18
+ var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background: transparent;\n cursor: pointer;\n width: 40px !important;\n margin: 9px;\n position: relative;\n"])));
19
19
 
20
20
  exports.Container = Container;
21
21
 
22
- var Slider = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n font-family: sans-serif;\n margin: auto;\n background: #281f33;\n border-radius: 6px;\n width: 310px;\n padding: 16px;\n padding-top: 20px;\n box-sizing: border-box;\n position: absolute;\n //top: 50px;\n left: 91%;\n top: 57%;\n ul,\n li {\n padding: 0;\n margin: 0;\n list-style: none;\n }\n .slider {\n position: relative;\n max-width: 300px;\n width: 100%;\n height: 270px;\n li {\n position: absolute;\n left: 0px;\n top: 0px;\n opacity: 0;\n width: inherit;\n height: inherit;\n transition: opacity 0.5s;\n background: transparent;\n img {\n width: 100%;\n height: 180px;\n border-radius: 4px;\n background-color: #fafafa;\n & + * {\n margin-top: 10px;\n }\n }\n p {\n font-family: \"Avenir Next\";\n font-style: normal;\n font-weight: 400;\n font-size: 10px;\n line-height: 12px;\n text-align: center;\n letter-spacing: -0.015em;\n color: #fafafa;\n background-color: #281f33;\n }\n div {\n background-color: #fafafa;\n height: 180px;\n border-radius: 4px;\n display: flex;\n justify-content: center;\n flex-direction: column;\n img {\n height: 40px;\n }\n & + * {\n margin-top: 13px;\n }\n }\n }\n #slide5 {\n div {\n height: 130px;\n width: 100%;\n background-color: #fafafa;\n display: flex;\n align-items: center;\n border-radius: 4px;\n img {\n width: 100%;\n height: 115px;\n object-fit: contain;\n }\n }\n .lema-end {\n justify-content: center;\n justify-content: space-evenly;\n height: 100px;\n background-color: #281f33;\n flex-direction: column;\n justify-content: space-evenly;\n border-radius: inherit;\n span {\n font-family: \"Avenir Next\";\n font-style: normal;\n font-weight: 700;\n font-size: 17px;\n line-height: 15px;\n text-align: center;\n letter-spacing: -0.015em;\n color: #fafafa;\n }\n }\n button {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px;\n position: absolute;\n width: 160px;\n height: 30px;\n border: 1px solid #d4d1d7;\n border-radius: 15px;\n color: #fafafa;\n background-color: #281f33;\n font-family: \"Avenir Next\";\n font-style: normal;\n font-weight: 400;\n font-size: 18px;\n line-height: 25px;\n letter-spacing: -0.015em;\n left: 21%;\n position: absolute;\n top: 80%;\n cursor: pointer;\n }\n }\n }\n li:first-child {\n opacity: 1; /*Mostramos el primer <li>*/\n }\n li:target {\n opacity: 1; /*Mostramos el primer <li>*/\n }\n .menu {\n text-align: center;\n li {\n display: inline-block;\n text-align: center;\n & + * {\n margin-left: 15px;\n }\n a {\n display: inline-block;\n text-decoration: none;\n background-color: grey;\n width: 10px;\n height: 10px;\n border-radius: 100%;\n a:target {\n background-color: magenta;\n }\n }\n }\n }\n"])));
22
+ var Slider = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n font-family: sans-serif;\n margin: auto;\n background: #281f33;\n border-radius: 6px;\n \n padding: 16px;\n padding-top: 20px;\n box-sizing: border-box;\n position: absolute;\n top: calc(100% + 25px);\n left: calc(50% - 223px / 2);\n #div-slider {\n width: 310px;\n }\n ul,\n li {\n padding: 0;\n margin: 0;\n list-style: none;\n }\n .slider {\n position: relative;\n max-width: 300px;\n width: 100%;\n height: 270px;\n margin: 0;\n li {\n position: absolute;\n left: 0px;\n top: 0px;\n opacity: 0;\n width: inherit;\n height: inherit;\n transition: opacity 0.5s;\n background: transparent;\n img {\n width: 100%;\n height: 180px;\n border-radius: 4px;\n background-color: #fafafa;\n & + * {\n margin-top: 10px;\n }\n }\n p {\n font-family: \"Avenir Next\";\n font-style: normal;\n font-weight: 400;\n font-size: 10px;\n line-height: 12px;\n text-align: center;\n letter-spacing: -0.015em;\n color: #fafafa;\n background-color: #281f33;\n }\n div {\n background-color: #fafafa;\n height: 180px;\n border-radius: 4px;\n display: flex;\n justify-content: center;\n flex-direction: column;\n img {\n height: 40px;\n }\n & + * {\n margin-top: 13px;\n }\n }\n }\n #slide5 {\n div {\n height: 130px;\n width: 100%;\n background-color: #fafafa;\n display: flex;\n align-items: center;\n border-radius: 4px;\n img {\n width: 100%;\n height: 115px;\n object-fit: contain;\n }\n }\n .lema-end {\n justify-content: center;\n justify-content: space-evenly;\n height: 100px;\n background-color: #281f33;\n flex-direction: column;\n justify-content: space-evenly;\n border-radius: inherit;\n span {\n font-family: \"Avenir Next\";\n font-style: normal;\n font-weight: 700;\n font-size: 17px;\n line-height: 15px;\n text-align: center;\n letter-spacing: -0.015em;\n color: #fafafa;\n }\n }\n button {\n display: none;\n justify-content: center;\n align-items: center;\n padding: 10px;\n width: 160px;\n height: 30px;\n border: 1px solid #d4d1d7;\n border-radius: 15px;\n color: #fafafa;\n background-color: #281f33;\n font-family: \"Avenir Next\";\n font-style: normal;\n font-weight: 400;\n font-size: 18px;\n line-height: 25px;\n letter-spacing: -0.015em;\n position: absolute;\n left: 22%;\n top: 88%;\n cursor: pointer;\n }\n }\n }\n\n li:first-child {\n opacity: 1; /*Mostramos el primer <li>*/\n }\n li:target {\n opacity: 1; /*Mostramos el primer <li>*/\n }\n .menu {\n margin: 0;\n text-align: center;\n li {\n display: inline-block;\n text-align: center;\n & + * {\n margin-left: 15px;\n }\n a {\n display: inline-block;\n text-decoration: none;\n background-color: #c4c4c4;\n width: 10px;\n height: 10px;\n border-radius: 100%;\n }\n #slidea1 {\n background-color: #e33aa9;\n }\n }\n }\n"])));
23
23
 
24
24
  exports.Slider = Slider;
package/dist/components/molecules/SignInLogin/index.js CHANGED
@@ -103,7 +103,7 @@ var SignInLogin = function SignInLogin(props) {
103
103
  }
104
104
 
105
105
  if (!valid) {
106
- _context.next = 33;
106
+ _context.next = 32;
107
107
  break;
108
108
  }
109
109
 
@@ -157,28 +157,25 @@ var SignInLogin = function SignInLogin(props) {
157
157
  }
158
158
 
159
159
  case 25:
160
- _context.next = 33;
160
+ _context.next = 32;
161
161
  break;
162
162
 
163
163
  case 27:
164
164
  _context.prev = 27;
165
165
  _context.t0 = _context["catch"](10);
166
- console.log(_context.t0);
166
+ console.log(_context.t0.code);
167
167
  setLoading(false);
168
- console.log("error 1");
169
168
 
170
169
  if (_context.t0.code === "NotAuthorizedException") {
171
170
  setSignInError("NotAuthorizedException");
172
171
  } else if (_context.t0.code === "UserNotConfirmedException") {
173
- sessionStorage.setItem("email", JSON.stringify(document.querySelector("#usernameInput").value.trim()));
174
172
  sessionStorage.setItem("email", JSON.stringify(email));
175
173
  props.setPaso(5);
176
174
  } else {
177
175
  setSignInError("Error");
178
- console.log("error 2");
179
176
  }
180
177
 
181
- case 33:
178
+ case 32:
182
179
  case "end":
183
180
  return _context.stop();
184
181
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "contentoh-components-library",
3
- "version": "21.0.58",
3
+ "version": "21.0.61",
4
4
  "dependencies": {
5
5
  "@aws-amplify/auth": "^4.5.3",
6
6
  "@aws-amplify/datastore": "^3.11.0",
package/src/components/atoms/SliderToolTip/index.js CHANGED
@@ -21,20 +21,54 @@ export const SliderToolTip = ({
21
21
  document.addEventListener("click", closeMenu, false);
22
22
  }
23
23
  }, [showMenu]);
24
+ const color = (id) => {
25
+ if (id === "slidea1") {
26
+ document.getElementById("slidea1").style.backgroundColor = "#E33AA9";
27
+ document.getElementById("slidea2").style.backgroundColor = "#C4C4C4";
28
+ document.getElementById("slidea3").style.backgroundColor = "#C4C4C4";
29
+ document.getElementById("slidea4").style.backgroundColor = "#C4C4C4";
30
+ document.getElementById("slidea5").style.backgroundColor = "#C4C4C4";
31
+ }
32
+ if (id === "slidea2") {
33
+ document.getElementById("slidea1").style.backgroundColor = "#FAFAFA";
34
+ document.getElementById("slidea2").style.backgroundColor = "#E33AA9";
35
+ document.getElementById("slidea3").style.backgroundColor = "#C4C4C4";
36
+ document.getElementById("slidea4").style.backgroundColor = "#C4C4C4";
37
+ document.getElementById("slidea5").style.backgroundColor = "#C4C4C4";
38
+ }
39
+ if (id === "slidea3") {
40
+ document.getElementById("slidea1").style.backgroundColor = "#FAFAFA";
41
+ document.getElementById("slidea2").style.backgroundColor = "#FAFAFA";
42
+ document.getElementById("slidea3").style.backgroundColor = "#E33AA9";
43
+ document.getElementById("slidea4").style.backgroundColor = "#C4C4C4";
44
+ document.getElementById("slidea5").style.backgroundColor = "#C4C4C4";
45
+ }
46
+ if (id === "slidea4") {
47
+ document.getElementById("slidea1").style.backgroundColor = "#FAFAFA";
48
+ document.getElementById("slidea2").style.backgroundColor = "#FAFAFA";
49
+ document.getElementById("slidea3").style.backgroundColor = "#FAFAFA";
50
+ document.getElementById("slidea4").style.backgroundColor = "#E33AA9";
51
+ document.getElementById("slidea5").style.backgroundColor = "#C4C4C4";
52
+ }
53
+ if (id === "slidea5") {
54
+ document.getElementById("button-slide").style.display = "flex";
55
+ }
56
+ };
57
+
24
58
  return (
25
59
  <>
26
60
  <Container
27
- onClick={(e) => {
61
+ className="container-slider"
62
+
63
+ >
64
+ <img src={InfoIcon} alt="info icon" onClick={(e) => {
28
65
  setShowMenu(!showMenu);
29
66
  if (showMenu) {
30
67
  document.removeEventListener("click", closeMenu, false);
31
68
  }
32
- }}
33
- >
34
- <img src={showMenu ? InfoIcon : InfoIcon} alt="info icon" />
35
- </Container>
36
- {showMenu && (
37
- <Slider id="div-slider">
69
+ }}/>
70
+ {showMenu && (
71
+ <Slider id="div-slider" >
38
72
  <ul className="slider">
39
73
  <li id="slide1">
40
74
  <div>
@@ -82,7 +116,7 @@ export const SliderToolTip = ({
82
116
  </p>
83
117
  <span>Bienvenido al modo Content-oh!</span>
84
118
  </div>
85
- <button
119
+ <button id="button-slide"
86
120
  onClick={(e) => {
87
121
  document.removeEventListener("click", closeMenu, false);
88
122
  setShowMenu(false);
@@ -94,23 +128,55 @@ export const SliderToolTip = ({
94
128
  </ul>
95
129
  <ul className="menu">
96
130
  <li>
97
- <a href="#slide1"></a>
131
+ <a
132
+ href="#slide1"
133
+ id="slidea1"
134
+ onClick={(e) => {
135
+ color("slidea1");
136
+ }}
137
+ ></a>
98
138
  </li>
99
139
  <li>
100
- <a href="#slide2"></a>
140
+ <a
141
+ href="#slide2"
142
+ id="slidea2"
143
+ onClick={(e) => {
144
+ color("slidea2");
145
+ }}
146
+ ></a>
101
147
  </li>
102
148
  <li>
103
- <a href="#slide3"></a>
149
+ <a
150
+ href="#slide3"
151
+ id="slidea3"
152
+ onClick={(e) => {
153
+ color("slidea3");
154
+ }}
155
+ ></a>
104
156
  </li>
105
157
  <li>
106
- <a href="#slide4"></a>
158
+ <a
159
+ href="#slide4"
160
+ id="slidea4"
161
+ onClick={(e) => {
162
+ color("slidea4");
163
+ }}
164
+ ></a>
107
165
  </li>
108
166
  <li>
109
- <a href="#slide5"></a>
167
+ <a
168
+ href="#slide5"
169
+ id="slidea5"
170
+ onClick={(e) => {
171
+ color("slidea5");
172
+ }}
173
+ ></a>
110
174
  </li>
111
175
  </ul>
112
176
  </Slider>
113
177
  )}
178
+ </Container>
179
+
114
180
  </>
115
181
  );
116
182
  };
package/src/components/atoms/SliderToolTip/styles.js CHANGED
@@ -4,28 +4,25 @@ import { GlobalColors, FontFamily } from "../../../global-files/variables";
4
4
  export const Container = styled.div`
5
5
  background: transparent;
6
6
  cursor: pointer;
7
- width: 40px;
8
- margin-left: 9px;
7
+ width: 40px !important;
8
+ margin: 9px;
9
9
  position: relative;
10
- & + * {
11
- margin-left: 9px;
12
- }
13
- top: 100%;
14
- left: 100%;
15
10
  `;
16
11
  export const Slider = styled.div`
17
12
  font-family: sans-serif;
18
13
  margin: auto;
19
14
  background: #281f33;
20
15
  border-radius: 6px;
21
- width: 310px;
16
+
22
17
  padding: 16px;
23
18
  padding-top: 20px;
24
19
  box-sizing: border-box;
25
20
  position: absolute;
26
- //top: 50px;
27
- left: 91%;
28
- top: 57%;
21
+ top: calc(100% + 25px);
22
+ left: calc(50% - 223px / 2);
23
+ #div-slider {
24
+ width: 310px;
25
+ }
29
26
  ul,
30
27
  li {
31
28
  padding: 0;
@@ -37,6 +34,7 @@ export const Slider = styled.div`
37
34
  max-width: 300px;
38
35
  width: 100%;
39
36
  height: 270px;
37
+ margin: 0;
40
38
  li {
41
39
  position: absolute;
42
40
  left: 0px;
@@ -115,11 +113,10 @@ export const Slider = styled.div`
115
113
  }
116
114
  }
117
115
  button {
118
- display: flex;
116
+ display: none;
119
117
  justify-content: center;
120
118
  align-items: center;
121
119
  padding: 10px;
122
- position: absolute;
123
120
  width: 160px;
124
121
  height: 30px;
125
122
  border: 1px solid #d4d1d7;
@@ -132,13 +129,14 @@ export const Slider = styled.div`
132
129
  font-size: 18px;
133
130
  line-height: 25px;
134
131
  letter-spacing: -0.015em;
135
- left: 21%;
136
132
  position: absolute;
137
- top: 80%;
133
+ left: 22%;
134
+ top: 88%;
138
135
  cursor: pointer;
139
136
  }
140
137
  }
141
138
  }
139
+
142
140
  li:first-child {
143
141
  opacity: 1; /*Mostramos el primer <li>*/
144
142
  }
@@ -146,6 +144,7 @@ export const Slider = styled.div`
146
144
  opacity: 1; /*Mostramos el primer <li>*/
147
145
  }
148
146
  .menu {
147
+ margin: 0;
149
148
  text-align: center;
150
149
  li {
151
150
  display: inline-block;
@@ -156,13 +155,13 @@ export const Slider = styled.div`
156
155
  a {
157
156
  display: inline-block;
158
157
  text-decoration: none;
159
- background-color: grey;
158
+ background-color: #c4c4c4;
160
159
  width: 10px;
161
160
  height: 10px;
162
161
  border-radius: 100%;
163
- a:target {
164
- background-color: magenta;
165
- }
162
+ }
163
+ #slidea1 {
164
+ background-color: #e33aa9;
166
165
  }
167
166
  }
168
167
  }
package/src/components/molecules/SignInLogin/index.js CHANGED
@@ -87,23 +87,15 @@ export const SignInLogin = (props) => {
87
87
  }
88
88
  }
89
89
  } catch (error) {
90
- console.log(error);
90
+ console.log(error.code);
91
91
  setLoading(false);
92
- console.log("error 1");
93
92
  if (error.code === "NotAuthorizedException") {
94
93
  setSignInError("NotAuthorizedException");
95
94
  } else if (error.code === "UserNotConfirmedException") {
96
- sessionStorage.setItem(
97
- "email",
98
- JSON.stringify(
99
- document.querySelector("#usernameInput").value.trim()
100
- )
101
- );
102
95
  sessionStorage.setItem("email", JSON.stringify(email));
103
96
  props.setPaso(5);
104
97
  } else {
105
98
  setSignInError("Error");
106
- console.log("error 2");
107
99
  }
108
100
  }
109
101
  }