From a610d067b7c628f7e0803047ab51c978dc83b0d8 Mon Sep 17 00:00:00 2001 From: Jonatan Luis Moreno Date: Tue, 1 Mar 2022 19:42:49 -0300 Subject: [PATCH] second view completed --- src/assets/images/newmeet.svg | 4 + src/assets/images/user.svg | 3 + src/assets/images/users.svg | 8 + src/pages/Confirmation/Confirmation.jsx | 159 ++++++++---- .../Confirmation/Confirmation.module.css | 236 ++++++++++++++++-- 5 files changed, 341 insertions(+), 69 deletions(-) create mode 100644 src/assets/images/newmeet.svg create mode 100644 src/assets/images/user.svg create mode 100644 src/assets/images/users.svg diff --git a/src/assets/images/newmeet.svg b/src/assets/images/newmeet.svg new file mode 100644 index 0000000..96a26fe --- /dev/null +++ b/src/assets/images/newmeet.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/images/user.svg b/src/assets/images/user.svg new file mode 100644 index 0000000..6bf69f1 --- /dev/null +++ b/src/assets/images/user.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/users.svg b/src/assets/images/users.svg new file mode 100644 index 0000000..19a80e1 --- /dev/null +++ b/src/assets/images/users.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/pages/Confirmation/Confirmation.jsx b/src/pages/Confirmation/Confirmation.jsx index ac391cf..b36a263 100644 --- a/src/pages/Confirmation/Confirmation.jsx +++ b/src/pages/Confirmation/Confirmation.jsx @@ -10,6 +10,9 @@ import share from '../../assets/images/share.svg' import notifications from '../../assets/images/notifications.svg' import threelines from '../../assets/images/threelines.svg' import backicon from '../../assets/images/backicon.svg' +import newmeet from '../../assets/images/newmeet.svg' +import user from '../../assets/images/user.svg' +import users from '../../assets/images/users.svg' export function Confirmation() { const [inputList, setinputList] = useState([ @@ -27,6 +30,8 @@ export function Confirmation() { ]) } + const [isNotConfirmed, setIsNotConfirmed] = useState(true) + const generatedLink = "https://www.figma.com/file/cv13MX..." return (
@@ -61,58 +66,122 @@ export function Confirmation() {
- -
- back -

Atrás

-
- -

¡Tu invitación está lista!

-
-
-

Diseño

-
-
-
Lluvia de ideas para Luxi
-
Duración: 1.5 hrs aprox.
+ { + isNotConfirmed + ? +
+ +
+ back +

Atrás

- line -
-
Observaciones: -
Por zoom
- + +

¡Tu invitación está lista!

+
+
+

Diseño

+
+
+
Lluvia de ideas para Luxi
+
Observaciones: +
Por zoom
+ +
Duración: 1.5 hrs aprox.
+
+ line +
+
Observaciones: +
Por zoom
+ +
+
+

17 de septiembre

+
Duración: 1.5 hrs aprox.
+
+ + arrow + +
-
-

17 de septiembre

+
+

Puedes copiar el link o enviarla por mail

+
+
+

Link:

+ navigator.clipboard.writeText(generatedLink)}> + + + share +

Mail

+ { + inputList.map(() => ( + + )) + } +
+
setIsNotConfirmed(false)}> +
+
+ +
- arrow +
+ +

Nueva reunión

+
-
+ +
+ +

Perfil

+
+ + +
+ +

Mis reuniones

+
+ +
- -

Puedes copiar el link o enviarla por mail

-
-
-

Link:

- navigator.clipboard.writeText(generatedLink)}> - - - share -

Mail

- { - inputList.map(() => ( - - )) - } -
-
- - - + : +
+
+

¡LISTO!

+
+

+ Ahora tus invitados tienen que elegir el mejor horario. Podés ver las votaciones en

“Mis reuniones”

+ +
+
+ + + +
+
+
+ +
+ +

Nueva reunión

+
+ + +
+ +

Perfil

+
+ + +
+ +

Mis reuniones

+
+ +
-
- + }
) } diff --git a/src/pages/Confirmation/Confirmation.module.css b/src/pages/Confirmation/Confirmation.module.css index 4fcc9ab..511a23d 100644 --- a/src/pages/Confirmation/Confirmation.module.css +++ b/src/pages/Confirmation/Confirmation.module.css @@ -85,6 +85,10 @@ border-radius: 16px; } +.jamtextmovile { + display: none; +} + .jamtitle { padding-top: 20px; padding-left: 20px; @@ -112,6 +116,15 @@ padding: 7px 15px; } +.jamtextdesktop { + font-family: Work Sans; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 26px; + padding: 7px 15px; +} + .line { padding: 0 20px; } @@ -166,12 +179,9 @@ font-weight: 600; font-size: 24px; line-height: 32px; - /* identical to box height, or 135% */ display: flex; align-items: center; color: #22302C; - /* Inside auto layout */ - flex: none; order: 0; flex-grow: 0; @@ -184,20 +194,14 @@ justify-content: center; align-items: center; padding: 8px 16px 8px 8px; - position: static; width: 706px; height: 51px; left: 0px; top: 41px; - - /* secundario oscuro */ - border: 1px solid #3C9191; box-sizing: border-box; border-radius: 16px; - - /* Inside auto layout */ flex-grow: 0; margin: 8px 0px; cursor: copy; @@ -209,7 +213,6 @@ font-weight: normal; font-size: 14px; line-height: 18px; - /* or 129% */ opacity: 1; display: flex; align-items: center; @@ -228,21 +231,14 @@ justify-content: center; align-items: center; padding: 8px 16px 8px 8px; - position: static; width: 706px; height: 51px; left: 0px; top: 41px; - - /* secundario oscuro */ - border: 1px solid #3C9191; box-sizing: border-box; border-radius: 16px; - - /* Inside auto layout */ - flex: none; order: 1; flex-grow: 0; @@ -257,27 +253,81 @@ justify-content: center; align-items: center; padding: 30px; - position: absolute; - /* mango principal */ - background: #FFC324; - /* Elevation 2 */ - box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25); border-radius: 64px; - width: 18.33px; height: 14.4px; right: calc(50% - 350px); bottom: 88px; } +.navbar { + display: none; +} + +.confirmed { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.confirmedmain { + display: flex; + flex-direction: column; + align-items: center; +} + +.confirmedtitle { + padding-bottom: 42px; + font-family: Reem Kufi; + font-style: normal; + font-weight: normal; + font-size: 48px; + line-height: 55px; + text-align: center; + color: #22302C; +} + +.confirmedsection { + position: static; + width: 519px; + height: 329px; + left: 0px; + top: 106px; + background: #FEFEFE; + border: 1px solid #FFC324; + box-sizing: border-box; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border-radius: 8px; +} + +.confirmedtext { + margin: 95px 15px; + font-family: Work Sans; + font-style: normal; + font-weight: normal; + font-size: 28px; + line-height: 35px; + text-align: center; + color: #22302C; +} +.confirmedtextorange { + color: #FFC324; +} +.confirmedbuttoncontainer { + padding-top: 51px; +} @media (max-width: 875px) { + .confirmation { + overflow: auto; + } .headertitle { font-family: Work Sans; font-size: 22px; @@ -292,7 +342,7 @@ .headericons { display: flex; - padding-right: 25px; + padding-right: 20px; } .headericon { @@ -321,4 +371,142 @@ padding-left: 5px; color: #3C9191; } + + .title { + font-family: Reem Kufi; + font-style: normal; + font-weight: normal; + font-size: 24px; + line-height: 28px; + display: flex; + padding-left: 40px; + justify-content: flex-start; + } + + .jam { + background: none; + } + + .jamtextmovile { + display: flex; + flex-direction: column; + align-items: center; + font-family: Work Sans; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 26px; + padding: 7px 15px; + } + + .jaminfo { + flex-direction: column; + padding: 15px 15px; + } + + .jamtitle { + padding-left: 0; + display: flex; + justify-content: space-evenly; + } + + .jamtextdesktop { + display: none; + } + + .jamdate { + font-family: Work Sans; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 22px; + display: flex; + justify-content: center; + padding: 0; + } + + .line { + transform: rotateZ(90deg); + } + + .subtitle { + font-family: Work Sans; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 28px; + padding-top: 60px; + padding-bottom: 10px; + } + + .linkinput { + position: static; + width: 326px; + height: 50px; + left: 0px; + top: 22px; + + background: #FEFEFE; + /* secundario oscuro */ + + border: 1px solid #3C9191; + box-sizing: border-box; + border-radius: 16px; + } + + .input { + position: static; + width: 326px; + height: 50px; + left: 0px; + top: 22px; + margin: 4px 0; + + background: #FEFEFE; + /* secundario oscuro */ + + border: 1px solid #3C9191; + box-sizing: border-box; + border-radius: 16px; + } + + .copyNShare { + padding: 0; + background: none; + margin: 0; + border: none; + margin-bottom: 50px; + } + + .shareicon { + right: calc(50% - 150px); + } + + .form { + margin-bottom: 40px; + } + + .plusbutton { + right: calc(50% - 145px); + bottom: 140px; + } + + .navbar { + display: flex; + justify-content: space-evenly; + align-items: center; + flex-direction: row; + position: absolute; + height: 56px; + left: 0px; + right: 0px; + bottom: 0px; + background: #FFC324; + } + + .navbarcamp { + display: flex; + flex-direction: column; + flex-wrap: wrap; + } } \ No newline at end of file