contentoh-components-library 21.0.59 → 21.0.60

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 +3 -2
  4. package/package.json +1 -1
  5. package/src/components/atoms/SliderToolTip/index.js +79 -14
  6. package/src/components/atoms/SliderToolTip/styles.js +18 -19
  7. package/src/components/molecules/SignInLogin/index.js +3 -2
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
@@ -163,19 +163,20 @@ var SignInLogin = function SignInLogin(props) {
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
168
  console.log("error 1");
169
169
 
170
170
  if (_context.t0.code === "NotAuthorizedException") {
171
171
  setSignInError("NotAuthorizedException");
172
+ console.log("not autho");
172
173
  } else if (_context.t0.code === "UserNotConfirmedException") {
174
+ console.log("not user");
173
175
  sessionStorage.setItem("email", JSON.stringify(document.querySelector("#usernameInput").value.trim()));
174
176
  sessionStorage.setItem("email", JSON.stringify(email));
175
177
  props.setPaso(5);
176
178
  } else {
177
179
  setSignInError("Error");
178
- console.log("error 2");
179
180
  }
180
181
 
181
182
  case 33:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "contentoh-components-library",
3
- "version": "21.0.59",
3
+ "version": "21.0.60",
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,21 +21,54 @@ export const SliderToolTip = ({
21
21
  document.addEventListener("click", closeMenu, false);
22
22
  }
23
23
  }, [showMenu]);
24
-
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
+
25
58
  return (
26
59
  <>
27
60
  <Container
28
- onClick={(e) => {
61
+ className="container-slider"
62
+
63
+ >
64
+ <img src={InfoIcon} alt="info icon" onClick={(e) => {
29
65
  setShowMenu(!showMenu);
30
66
  if (showMenu) {
31
67
  document.removeEventListener("click", closeMenu, false);
32
68
  }
33
- }}
34
- >
35
- <img src={showMenu ? InfoIcon : InfoIcon} alt="info icon" />
36
- </Container>
37
- {showMenu && (
38
- <Slider id="div-slider">
69
+ }}/>
70
+ {showMenu && (
71
+ <Slider id="div-slider" >
39
72
  <ul className="slider">
40
73
  <li id="slide1">
41
74
  <div>
@@ -83,7 +116,7 @@ export const SliderToolTip = ({
83
116
  </p>
84
117
  <span>Bienvenido al modo Content-oh!</span>
85
118
  </div>
86
- <button
119
+ <button id="button-slide"
87
120
  onClick={(e) => {
88
121
  document.removeEventListener("click", closeMenu, false);
89
122
  setShowMenu(false);
@@ -95,23 +128,55 @@ export const SliderToolTip = ({
95
128
  </ul>
96
129
  <ul className="menu">
97
130
  <li>
98
- <a href="#slide1"></a>
131
+ <a
132
+ href="#slide1"
133
+ id="slidea1"
134
+ onClick={(e) => {
135
+ color("slidea1");
136
+ }}
137
+ ></a>
99
138
  </li>
100
139
  <li>
101
- <a href="#slide2"></a>
140
+ <a
141
+ href="#slide2"
142
+ id="slidea2"
143
+ onClick={(e) => {
144
+ color("slidea2");
145
+ }}
146
+ ></a>
102
147
  </li>
103
148
  <li>
104
- <a href="#slide3"></a>
149
+ <a
150
+ href="#slide3"
151
+ id="slidea3"
152
+ onClick={(e) => {
153
+ color("slidea3");
154
+ }}
155
+ ></a>
105
156
  </li>
106
157
  <li>
107
- <a href="#slide4"></a>
158
+ <a
159
+ href="#slide4"
160
+ id="slidea4"
161
+ onClick={(e) => {
162
+ color("slidea4");
163
+ }}
164
+ ></a>
108
165
  </li>
109
166
  <li>
110
- <a href="#slide5"></a>
167
+ <a
168
+ href="#slide5"
169
+ id="slidea5"
170
+ onClick={(e) => {
171
+ color("slidea5");
172
+ }}
173
+ ></a>
111
174
  </li>
112
175
  </ul>
113
176
  </Slider>
114
177
  )}
178
+ </Container>
179
+
115
180
  </>
116
181
  );
117
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,12 +87,14 @@ 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
92
  console.log("error 1");
93
93
  if (error.code === "NotAuthorizedException") {
94
94
  setSignInError("NotAuthorizedException");
95
+ console.log("not autho");
95
96
  } else if (error.code === "UserNotConfirmedException") {
97
+ console.log("not user");
96
98
  sessionStorage.setItem(
97
99
  "email",
98
100
  JSON.stringify(
@@ -103,7 +105,6 @@ export const SignInLogin = (props) => {
103
105
  props.setPaso(5);
104
106
  } else {
105
107
  setSignInError("Error");
106
- console.log("error 2");
107
108
  }
108
109
  }
109
110
  }