From 34c7ae5af0ee327688f9400b15c929a829d92e8a Mon Sep 17 00:00:00 2001 From: Jonatan Luis Moreno Date: Mon, 14 Feb 2022 16:16:11 -0300 Subject: [PATCH 1/3] basic component --- src/pages/Confirmation/Confirmation.jsx | 27 ++++++++++++++ .../Confirmation/Confirmation.module.css | 35 +++++++++++++++++++ src/routes/routes.js | 6 ++++ 3 files changed, 68 insertions(+) create mode 100644 src/pages/Confirmation/Confirmation.jsx create mode 100644 src/pages/Confirmation/Confirmation.module.css diff --git a/src/pages/Confirmation/Confirmation.jsx b/src/pages/Confirmation/Confirmation.jsx new file mode 100644 index 0000000..1089f7c --- /dev/null +++ b/src/pages/Confirmation/Confirmation.jsx @@ -0,0 +1,27 @@ +import React from 'react' +import { Link } from 'react-router-dom/cjs/react-router-dom.min' +import styles from './Confirmation.module.css' + +export function Confirmation() { + + return ( +
+
Mango
+

¡Tu invitación está lista!

+
+
+

Diseño

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

17 de septiembre

+
+
+
+ ) +} + diff --git a/src/pages/Confirmation/Confirmation.module.css b/src/pages/Confirmation/Confirmation.module.css new file mode 100644 index 0000000..dc6c790 --- /dev/null +++ b/src/pages/Confirmation/Confirmation.module.css @@ -0,0 +1,35 @@ +.confirmation { + background: #FFFEF5; + height: 100vh; +} + +.header { + display: block; + position: absolute; + width: 100vw; + background-color: #ffc324; + padding: 20px; + font-family: Work Sans; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: 22px; + letter-spacing: 0px; + text-align: left; +} + +.title { + padding-top: 110px; + display: flex; + justify-content: center; + font-family: Reem Kufi; + font-style: normal; + font-weight: normal; + font-size: 48px; + line-height: 55px; + color: #22302C; +} + +.jam { + +} \ No newline at end of file diff --git a/src/routes/routes.js b/src/routes/routes.js index 6deb70d..f4beb3f 100644 --- a/src/routes/routes.js +++ b/src/routes/routes.js @@ -1,8 +1,13 @@ import { SignIn } from '../pages/SignIn/SignIn'; import { LogIn } from '../pages/LogIn/LogIn'; import { Home } from '../pages/Home/Home'; +import { Confirmation } from '../pages/Confirmation/Confirmation'; export const routes = [ + { + path: '/confirmation', + component: Confirmation, + }, { path: '/signin', component: SignIn, @@ -11,6 +16,7 @@ import { Home } from '../pages/Home/Home'; path: '/login', component: LogIn, }, + { path: '/', component: Home, From c7dde0270a85f5c98d7583db1f7c54a69a8e4179 Mon Sep 17 00:00:00 2001 From: Jonatan Luis Moreno Date: Wed, 23 Feb 2022 16:01:08 -0300 Subject: [PATCH 2/3] desktop view --- src/assets/images/arrow-orange.svg | 3 + src/assets/images/backicon.svg | 3 + src/assets/images/line.svg | 3 + src/assets/images/notifications.svg | 3 + src/assets/images/plus.svg | 4 + src/assets/images/plusbutton.svg | 19 ++ src/assets/images/share.svg | 3 + src/assets/images/threelines.svg | 3 + src/pages/Confirmation/Confirmation.jsx | 116 ++++++- .../Confirmation/Confirmation.module.css | 305 +++++++++++++++++- 10 files changed, 442 insertions(+), 20 deletions(-) create mode 100644 src/assets/images/arrow-orange.svg create mode 100644 src/assets/images/backicon.svg create mode 100644 src/assets/images/line.svg create mode 100644 src/assets/images/notifications.svg create mode 100644 src/assets/images/plus.svg create mode 100644 src/assets/images/plusbutton.svg create mode 100644 src/assets/images/share.svg create mode 100644 src/assets/images/threelines.svg diff --git a/src/assets/images/arrow-orange.svg b/src/assets/images/arrow-orange.svg new file mode 100644 index 0000000..235486d --- /dev/null +++ b/src/assets/images/arrow-orange.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/backicon.svg b/src/assets/images/backicon.svg new file mode 100644 index 0000000..48e75ed --- /dev/null +++ b/src/assets/images/backicon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/line.svg b/src/assets/images/line.svg new file mode 100644 index 0000000..76d13ad --- /dev/null +++ b/src/assets/images/line.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/notifications.svg b/src/assets/images/notifications.svg new file mode 100644 index 0000000..b8f5252 --- /dev/null +++ b/src/assets/images/notifications.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/plus.svg b/src/assets/images/plus.svg new file mode 100644 index 0000000..4ce77b6 --- /dev/null +++ b/src/assets/images/plus.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/images/plusbutton.svg b/src/assets/images/plusbutton.svg new file mode 100644 index 0000000..26a604a --- /dev/null +++ b/src/assets/images/plusbutton.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/share.svg b/src/assets/images/share.svg new file mode 100644 index 0000000..803772c --- /dev/null +++ b/src/assets/images/share.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/threelines.svg b/src/assets/images/threelines.svg new file mode 100644 index 0000000..07e6690 --- /dev/null +++ b/src/assets/images/threelines.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/Confirmation/Confirmation.jsx b/src/pages/Confirmation/Confirmation.jsx index 1089f7c..ac391cf 100644 --- a/src/pages/Confirmation/Confirmation.jsx +++ b/src/pages/Confirmation/Confirmation.jsx @@ -1,26 +1,118 @@ -import React from 'react' +import { useState, React} from 'react' +import { nanoid } from 'nanoid' import { Link } from 'react-router-dom/cjs/react-router-dom.min' +import { ButtonComponent } from '../../components/ButtonComponent/ButtonComponent' import styles from './Confirmation.module.css' +import arrow from '../../assets/images/arrow-orange.svg' +import line from '../../assets/images/line.svg' +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' + export function Confirmation() { + const [inputList, setinputList] = useState([ + {id: nanoid()}, + {id: nanoid()}, + {id: nanoid()} + ]); + + function addInputList() { + setinputList([ + ...inputList, + { + id: nanoid(), + } + ]) + } + const generatedLink = "https://www.figma.com/file/cv13MX..." return (
-
Mango
-

¡Tu invitación está lista!

-
-
-

Diseño

-
Lluvia de ideas para Luxi
-
Duración: 1.5 hrs aprox.
+
+

+ Mango +

+
+ notifications + threelines
-
-
Observaciones: Por zoom
+
+

+ + Nueva Reunión + +

+

+ + Mi perfil + +

+

+ + Mis reuniones + +

+

+ + Log out + +

-
-

17 de septiembre

+
+ +
+ back +

Atrás

+
+ +

¡Tu invitación está lista!

+
+
+

Diseño

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

17 de septiembre

+
+ + arrow + +
+

Puedes copiar el link o enviarla por mail

+
+
+

Link:

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

Mail

+ { + inputList.map(() => ( + + )) + } +
+
+ + + +
+
+
) } diff --git a/src/pages/Confirmation/Confirmation.module.css b/src/pages/Confirmation/Confirmation.module.css index dc6c790..4fcc9ab 100644 --- a/src/pages/Confirmation/Confirmation.module.css +++ b/src/pages/Confirmation/Confirmation.module.css @@ -1,21 +1,60 @@ .confirmation { background: #FFFEF5; - height: 100vh; + height: 100%; } .header { - display: block; position: absolute; - width: 100vw; + width: 100%; background-color: #ffc324; padding: 20px; - font-family: Work Sans; - font-size: 18px; + display: flex; + justify-content: space-between; +} + +.headertitle { + font-family: Reem Kufi; font-style: normal; - font-weight: 500; + font-weight: 400; + font-size: 48px; line-height: 22px; - letter-spacing: 0px; - text-align: left; + text-transform: uppercase; + padding-left: 50px; + padding-top: 7px; + padding-bottom: 7px; +} + +.headericons { + display: none; +} + +.headerlink { + display: flex; + font-family: Work Sans; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 26px; +} + +.headerlink > h3 { + margin-left: 20px; + padding: 0 7px; +} + +.headerlink > .dashed { + text-decoration: dashed; +} + +.headerlink > .logout { + color: #22302C; + background-color:#62CBC5; + border-radius: 16px; + padding: 4px 8px; +} + +.back { + display: none; } .title { @@ -30,6 +69,256 @@ color: #22302C; } +.section { + display: flex; + justify-content: center; + padding-top: 45px; +} + .jam { + display: flex; + flex-direction: column; + background: #FEFEFE; + border: 2px solid #3C9191; + box-sizing: border-box; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border-radius: 16px; +} + +.jamtitle { + padding-top: 20px; + padding-left: 20px; + font-family: Work Sans; + font-style: normal; + font-weight: normal; + font-size: 28px; + line-height: 35px; +} + +.jaminfo { + display: flex; + align-items: center; + padding-left: 30px; + padding-right: 15px; + padding-bottom: 20px; +} + +.jamtext { + font-family: Work Sans; + font-style: normal; + font-weight: normal; + font-size: 18px; + line-height: 26px; + padding: 7px 15px; +} + +.line { + padding: 0 20px; +} + +.jamdate { + font-family: Work Sans; + font-style: normal; + font-weight: 600; + font-size: 24px; + line-height: 32px; + color: #3C9191; + padding: 0 20px; +} + +.subtitle { + padding-top: 170px; + padding-bottom: 60px; + display: flex; + justify-content: center; + font-family: Work Sans; + font-style: normal; + font-weight: normal; + font-size: 28px; + line-height: 35px; +} + +.form { + display: flex; + flex-direction: column; + align-items: center; + padding-bottom: 50px; +} + +.copyNShare { + display: flex; + flex-direction: column; + justify-content: center; + width: 750px; + align-items: center; + padding: 16px; + background: #FFFFFF; + margin-bottom: 70px; + + border: 1px solid #FFC324; + box-sizing: border-box; + border-radius: 8px; +} + +.camp { + font-family: Work Sans; + font-style: normal; + 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; + margin: 0px 8px; +} + +.linkinput { + display: flex; + flex-direction: row; + 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; +} + +.linkinput::placeholder { + font-family: Work Sans; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 18px; + /* or 129% */ + opacity: 1; + display: flex; + align-items: center; + color: #2684FC; +} + +.shareicon { + position: absolute; + top: 717px; + right: calc(50% - 335px); +} + +.input { + display: flex; + flex-direction: row; + 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; + margin: 8px 0px; +} + +.plusbutton { + font-family: Work Sans; + font-size: xx-large; + display: flex; + flex-direction: row; + 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; + } + + + + +@media (max-width: 875px) { + + .headertitle { + font-family: Work Sans; + font-size: 22px; + font-style: normal; + font-weight: 500; + line-height: 22px; + letter-spacing: 0px; + text-align: left; + text-transform: none; + padding-left: 10px; + } + + .headericons { + display: flex; + padding-right: 25px; + } + + .headericon { + width: 57%; + padding: 0 5px; + } + + .headerlink { + display: none; + } + + .back { + display: flex; + top: 87px; + right: 23px; + position: absolute; + } + + .backtext { + font-family: Work Sans; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 22px; + letter-spacing: 0px; + padding-left: 5px; + color: #3C9191; + } } \ No newline at end of file From a610d067b7c628f7e0803047ab51c978dc83b0d8 Mon Sep 17 00:00:00 2001 From: Jonatan Luis Moreno Date: Tue, 1 Mar 2022 19:42:49 -0300 Subject: [PATCH 3/3] 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