From 750b571374c05b915d136af481fe93bf966bac39 Mon Sep 17 00:00:00 2001 From: Ivan Date: Mon, 24 Jun 2024 01:49:10 +0300 Subject: [PATCH] design update, bug fixes --- src/assets/styles/adminPanel.module.scss | 234 ++++--- src/assets/styles/answersForm.module.scss | 270 ++++--- src/assets/styles/app.module.scss | 31 +- src/assets/styles/base.css | 141 ++-- .../styles/components/myButton.module.scss | 55 +- .../styles/components/myInput.module.scss | 26 +- .../styles/components/navbar.module.scss | 104 ++- src/assets/styles/enterAccount.module.scss | 222 +++--- src/assets/styles/forms.module.scss | 156 ++--- src/assets/styles/home.module.scss | 125 ++-- src/assets/styles/newForm.module.scss | 315 +++++---- src/assets/styles/profile.module.scss | 111 +-- src/assets/styles/tokensForm.module.scss | 298 ++++---- src/assets/styles/viewForm.module.scss | 123 ++-- src/pages/EnterAccount.jsx | 234 ++++--- src/pages/Forms.jsx | 289 +++++--- src/pages/Home.jsx | 6 +- src/pages/NewForm.jsx | 659 ++++++++++-------- 18 files changed, 1828 insertions(+), 1571 deletions(-) diff --git a/src/assets/styles/adminPanel.module.scss b/src/assets/styles/adminPanel.module.scss index 1e1d26e..0288e26 100644 --- a/src/assets/styles/adminPanel.module.scss +++ b/src/assets/styles/adminPanel.module.scss @@ -1,131 +1,133 @@ .main { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .wrapper { - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; } .admin { - width: 70%; - height: 70%; - box-shadow: 0 0 5px 1px rgb(200, 200, 200); - padding: 1.5%; - position: relative; - &__linkProfile { - position: absolute; - bottom: 103%; - left: 10px; - cursor: pointer; - span { - font-size: 15px; - font-family: "Montserrat", sans-serif; - color: rgb(100, 100, 100); - &:hover { - text-decoration: underline; - color: rgb(66, 68, 189); - } - } + width: 70%; + height: 70%; + background: #fff; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 16px; + padding: 1.5%; + position: relative; + &__linkProfile { + position: absolute; + bottom: 103%; + left: 10px; + cursor: pointer; + span { + font-size: 15px; + font-family: "Montserrat", sans-serif; + color: rgb(100, 100, 100); + &:hover { + text-decoration: underline; + color: rgb(66, 68, 189); + } } - &__wrapper { + } + &__wrapper { + width: 100%; + height: 100%; + &__header { + width: 100%; + height: 15%; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 10px; + h3 { + font-size: 25px; + font-family: "Montserrat", sans-serif; + color: rgb(100, 100, 100); + } + } + &__body { + width: 100%; + height: 85%; + &__columns { width: 100%; - height: 100%; - &__header { - width: 100%; - height: 15%; + height: 20%; + border-bottom: 1px solid rgb(200, 200, 200); + &__wrapper { + display: flex; + justify-content: space-between; + align-items: center; + width: 95%; + height: 100%; + } + &__item { + font-size: 15px; + font-family: "Montserrat", sans-serif; + color: rgb(70, 70, 70); + width: 33.3%; + text-align: center; + } + } + &__users { + width: 100%; + height: 80%; + overflow-y: auto; + &::-webkit-scrollbar { + width: 7px; + } + &::-webkit-scrollbar-thumb { + background-color: rgb(200, 200, 200); + } + &__item { + width: 100%; + height: 20%; + border-bottom: 1px solid rgb(200, 200, 200); + position: relative; + &__wrapper { + width: 95%; + height: 100%; display: flex; justify-content: space-between; align-items: center; - margin-bottom: 10px; - h3 { - font-size: 25px; - font-family: "Montserrat", sans-serif; - color: rgb(100, 100, 100); - } - } - &__body { - width: 100%; - height: 85%; - &__columns { - width: 100%; - height: 20%; - border-bottom: 1px solid rgb(200, 200, 200); - &__wrapper { - display: flex; - justify-content: space-between; - align-items: center; - width: 95%; - height: 100%; - } - &__item { - font-size: 15px; - font-family: "Montserrat", sans-serif; - color: rgb(70, 70, 70); - width: 33.3%; - text-align: center; - } - } - &__users { - width: 100%; - height: 80%; - overflow-y: auto; - &::-webkit-scrollbar { - width: 7px; - } - &::-webkit-scrollbar-thumb { - background-color: rgb(200, 200, 200); - } - &__item { - width: 100%; - height: 20%; - border-bottom: 1px solid rgb(200, 200, 200); - position: relative; - &__wrapper { - width: 95%; - height: 100%; - display: flex; - justify-content: space-between; - align-items: center; - } - &__link { - font-size: 15px; - font-family: "Montserrat", sans-serif; - color: rgb(70, 70, 70); - width: 20%; - text-align: center; - cursor: pointer; - &:hover { - text-decoration: underline; - color: rgb(66, 68, 189); - } - } - &__info { - font-size: 15px; - font-family: "Montserrat", sans-serif; - color: rgb(100, 100, 100); - width: 20%; - text-align: center; - } - &__remove { - position: absolute; - right: 2%; - cursor: pointer; - i { - &:hover { - color: rgb(199, 73, 73); - } - } - } - } - } - &__item { - padding: 5px; + } + &__link { + font-size: 15px; + font-family: "Montserrat", sans-serif; + color: rgb(70, 70, 70); + width: 20%; + text-align: center; + cursor: pointer; + &:hover { + text-decoration: underline; + color: rgb(66, 68, 189); } + } + &__info { + font-size: 15px; + font-family: "Montserrat", sans-serif; + color: rgb(100, 100, 100); + width: 20%; + text-align: center; + } + &__remove { + position: absolute; + right: 2%; + cursor: pointer; + i { + &:hover { + color: rgb(199, 73, 73); + } + } + } } + } + &__item { + padding: 5px; + } } -} \ No newline at end of file + } +} diff --git a/src/assets/styles/answersForm.module.scss b/src/assets/styles/answersForm.module.scss index 7afa108..672b242 100644 --- a/src/assets/styles/answersForm.module.scss +++ b/src/assets/styles/answersForm.module.scss @@ -1,158 +1,156 @@ .main { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .wrapper { - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; } .loading__wrapper { - width: 100%; - height: 80%; - display: flex; - justify-content: center; - align-items: center; - &__body { - // margin-top: 100px; - span { - - } + width: 100%; + height: 80%; + display: flex; + justify-content: center; + align-items: center; + &__body { + // margin-top: 100px; + span { } + } } - .answers { - width: 70%; - height: 70%; - box-shadow: 0 0 5px 1px rgb(200, 200, 200); - padding: 1.5%; - &__linkAdmin { - position: absolute; - bottom: 103%; - left: 10px; - span { - font-size: 15px; - font-family: "Montserrat", sans-serif; - color: rgb(100, 100, 100); + width: 70%; + height: 70%; + background: #fff; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 16px; + padding: 1.5%; + &__linkAdmin { + position: absolute; + bottom: 103%; + left: 10px; + span { + font-size: 15px; + font-family: "Montserrat", sans-serif; + color: rgb(100, 100, 100); + cursor: pointer; + &:hover { + text-decoration: underline; + color: rgb(66, 68, 189); + } + } + } + &__wrapper { + width: 100%; + height: 100%; + &__header { + width: 100%; + height: 15%; + display: flex; + justify-content: start; + align-items: center; + margin-bottom: 10px; + // border-bottom: 1px solid rgb(200, 200, 200); + h3 { + font-size: 25px; + font-family: "Montserrat", sans-serif; + color: rgb(100, 100, 100); + } + } + &__body { + width: 100%; + height: 85%; + overflow-y: auto; + border-bottom: 1px solid rgb(200, 200, 200); + &::-webkit-scrollbar { + width: 7px; + } + &::-webkit-scrollbar-thumb { + background-color: rgb(200, 200, 200); + } + &__column { + font-size: 15px; + font-family: "Montserrat", sans-serif; + padding: 5px; + width: 100%; + border-bottom: 1px solid rgb(200, 200, 200); + &__wrapper { + display: flex; + justify-content: space-between; + align-items: center; + height: 100%; + width: 95%; + } + } + &__item { + padding: 0 5px; + font-size: 15px; + font-family: "Montserrat", sans-serif; + height: 20%; + width: 100%; + position: relative; + &:hover { + background-color: rgba(230, 230, 230, 0.6); + } + &__wrapper { + display: flex; + justify-content: space-between; + align-items: center; + height: 100%; + width: 95%; + &__user { cursor: pointer; &:hover { - text-decoration: underline; - color: rgb(66, 68, 189); - } - } - } - &__wrapper { - width: 100%; - height: 100%; - &__header { - width: 100%; - height: 15%; - display: flex; - justify-content: start; - align-items: center; - margin-bottom: 10px; - // border-bottom: 1px solid rgb(200, 200, 200); - h3 { - font-size: 25px; - font-family: "Montserrat", sans-serif; - color: rgb(100, 100, 100); - } - } - &__body { - width: 100%; - height: 85%; - overflow-y: auto; - border-bottom: 1px solid rgb(200, 200, 200); - &::-webkit-scrollbar { - width: 7px; - } - &::-webkit-scrollbar-thumb { - background-color: rgb(200, 200, 200); - } - &__column { - font-size: 15px; - font-family: "Montserrat", sans-serif; - padding: 5px; - width: 100%; - border-bottom: 1px solid rgb(200, 200, 200); - &__wrapper { - display: flex; - justify-content: space-between; - align-items: center; - height: 100%; - width: 95%; - } - } - &__item { - padding: 0 5px; - font-size: 15px; - font-family: "Montserrat", sans-serif; - height: 20%; - width: 100%; - position: relative; - &:hover { - background-color: rgba(230, 230, 230, 0.6); - } - &__wrapper { - display: flex; - justify-content: space-between; - align-items: center; - height: 100%; - width: 95%; - &__user { - cursor: pointer; - &:hover { - text-decoration: underline; - } - } - &__date { - - } - i { - font-size: 13px; - position: absolute; - right: 10px; - cursor: pointer; - &:hover { - color: rgb(199, 73, 73); - } - } - } - + text-decoration: underline; } + } + &__date { + } + i { + font-size: 13px; + position: absolute; + right: 10px; + cursor: pointer; + &:hover { + color: rgb(199, 73, 73); + } + } } + } } + } } .myModal { - &__item { - padding: 5px; - border-bottom: 1px solid rgb(200, 200, 200); + &__item { + padding: 5px; + border-bottom: 1px solid rgb(200, 200, 200); + font-size: 15px; + font-family: "Montserrat", sans-serif; + cursor: pointer; + &__question { + &__text { font-size: 15px; font-family: "Montserrat", sans-serif; - cursor: pointer; - &__question { - &__text { - font-size: 15px; - font-family: "Montserrat", sans-serif; - } - &__comment { - font-size: 11px; - font-family: "Montserrat", sans-serif; - font-style: italic; - color: rgb(200, 200, 200); - } - } - &__answer { - &__text { - font-size: 15px; - font-family: "Montserrat", sans-serif; - } - } + } + &__comment { + font-size: 11px; + font-family: "Montserrat", sans-serif; + font-style: italic; + color: rgb(200, 200, 200); + } } -} \ No newline at end of file + &__answer { + &__text { + font-size: 15px; + font-family: "Montserrat", sans-serif; + } + } + } +} diff --git a/src/assets/styles/app.module.scss b/src/assets/styles/app.module.scss index 5491749..11a399e 100644 --- a/src/assets/styles/app.module.scss +++ b/src/assets/styles/app.module.scss @@ -1,24 +1,29 @@ -@import url('./base.css'); -@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); +@import url("./base.css"); +@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"); + +body { + background: #9dccf6 !important; +} .main { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .container { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .header { - background-color: rgb(240, 240, 240); - width: 100%; - height: 10%; - box-shadow: 0 0 5px 1px rgb(210, 210, 210); + background-color: #fff; + width: 100%; + height: 50px; + box-sizing: border-box; + // box-shadow: 0 0 5px 1px rgb(210, 210, 210); } .content { - width: 100%; - height: 90%; -} \ No newline at end of file + width: 100%; + height: 90%; +} diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css index e74ff02..4215dbb 100644 --- a/src/assets/styles/base.css +++ b/src/assets/styles/base.css @@ -1,57 +1,88 @@ * { - padding: 0; - margin: 0; - border: 0; } - -*, *:before, *:after { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; } - -:focus, :active { - outline: none; } - -a:focus, a:active { - outline: none; } - -nav, footer, header, aside { - display: block; } - -html, body { - height: 100%; - width: 100%; - font-size: 100%; - line-height: 1; - font-size: 14px; - -ms-text-size-adjust: 100%; - -moz-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; } - -input, button, textarea { - font-family: inherit; } - + padding: 0; + margin: 0; + border: 0; +} + +*, +*:before, +*:after { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +:focus, +:active { + outline: none; +} + +a:focus, +a:active { + outline: none; +} + +nav, +footer, +header, +aside { + display: block; +} + +html, +body { + height: 100%; + width: 100%; + font-size: 100%; + line-height: 1; + font-size: 14px; + -ms-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +input, +button, +textarea { + font-family: inherit; +} + input::-ms-clear { - display: none; } - - button { - cursor: pointer; } - - button::-moz-focus-inner { - padding: 0; - border: 0; } - - a, a:visited { - text-decoration: none; } - - a:hover { - text-decoration: none; } - - ul li { - list-style: none; } - - img { - vertical-align: top; } - - h1, h2, h3, h4, h5, h6 { - font-size: inherit; - font-weight: 400; } \ No newline at end of file + display: none; +} + +button { + cursor: pointer; +} + +button::-moz-focus-inner { + padding: 0; + border: 0; +} + +a, +a:visited { + text-decoration: none; +} + +a:hover { + text-decoration: none; +} + +ul li { + list-style: none; +} + +img { + vertical-align: top; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: 400; +} diff --git a/src/assets/styles/components/myButton.module.scss b/src/assets/styles/components/myButton.module.scss index 3985573..9a07889 100644 --- a/src/assets/styles/components/myButton.module.scss +++ b/src/assets/styles/components/myButton.module.scss @@ -1,27 +1,34 @@ .main { - // height: 100%; - max-height: 40px; - button { - font-size: 15px; - height: 100%; - padding: .40em 1.2rem; - border-radius: 5px; - font-family: "Montserrat", sans-serif; + max-height: 40px; + button { + font-size: 15px; + height: 100%; + padding: 0.4em 1.2rem; + border-radius: 5px; + font-family: "Montserrat", sans-serif; + transition: 0.2s; + &:hover { + filter: brightness(1.1); } - &__red { - color: white; - background-color: rgb(235, 130, 130); + } + &__red { + color: white; + background-color: rgb(235, 130, 130); + } + &__green { + color: white; + background-color: rgb(150, 209, 158); + } + &__blue { + color: white; + background-color: #1379c1; + } + &__white { + color: black; + background-color: white; + border: 1px solid rgba(0, 0, 0, 0.2); + &:hover { + border: 1px solid rgba(0, 0, 0, 0.3); } - &__green { - color: white; - background-color: rgb(150, 209, 158); - } - &__white { - color: black; - background-color: white; - border: 1px solid rgba(0, 0, 0, 0.2); - &:hover { - border: 1px solid rgba(0, 0, 0, 0.3); - } - } -} \ No newline at end of file + } +} diff --git a/src/assets/styles/components/myInput.module.scss b/src/assets/styles/components/myInput.module.scss index 3e39702..4f28646 100644 --- a/src/assets/styles/components/myInput.module.scss +++ b/src/assets/styles/components/myInput.module.scss @@ -1,12 +1,18 @@ .main { - max-height: 40px; - input { - border: 1px solid rgb(180, 180, 180); - height: 100%; - border-radius: 5px; - font-family: "Montserrat", sans-serif; - padding: .40em 3px; - color: rgb(40, 40, 40); - font-size: 15px; + max-height: 40px; + input { + border: 1px solid rgba(0, 0, 0, 0.1); + height: 100%; + border-radius: 5px; + font-family: "Montserrat", sans-serif; + box-sizing: border-box; + padding: 8px 8px 8px 10px; + color: rgb(40, 40, 40); + font-size: 15px; + transition: 0.2s; + &:hover, + &:focus { + border: 1px solid rgba(0, 0, 0, 0.3); } -} \ No newline at end of file + } +} diff --git a/src/assets/styles/components/navbar.module.scss b/src/assets/styles/components/navbar.module.scss index 96d4e88..34abc0e 100644 --- a/src/assets/styles/components/navbar.module.scss +++ b/src/assets/styles/components/navbar.module.scss @@ -1,67 +1,63 @@ .main { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .wrapper { - width: 100%; - height: 100%; - display: flex; - justify-content: space-between; - align-items: center; + width: 100%; + height: 100%; + display: flex; + justify-content: space-between; + align-items: center; } .menu { - width: 80%; - height: 100%; - &__authorized { - height: 100%; - display: flex; - align-items: center; - span { - margin-left: 2%; - display: block; - font-size: 15px; - color: rgb(80, 80, 80); - cursor: pointer; - &:hover { - color: rgb(66, 68, 189); - text-decoration: underline; - } - } - } -} - -.profile { - width: 20%; + width: 80%; + height: 100%; + &__authorized { height: 100%; display: flex; align-items: center; - justify-content: center; - &__authorized { - span { - font-size: 15px; - color: rgb(80, 80, 80); - cursor: pointer; - &:hover { - color: rgb(66, 68, 189); - text-decoration: underline; - } - } + span { + margin-left: 30px; + display: block; + font-size: 15px; + color: rgb(80, 80, 80); + cursor: pointer; + &:hover { + text-decoration: underline; + } } - &__nonAuthorized { - span { - font-size: 15px; - font-family: "Montserrat", sans-serif; - color: rgb(80, 80, 80); - cursor: pointer; - i { + } +} - } - &:hover { - color: rgb(66, 68, 189); - text-decoration: underline; - } - } +.profile { + height: 100%; + margin-right: 30px; + display: flex; + align-items: center; + justify-content: center; + &__authorized { + span { + font-size: 15px; + color: rgb(80, 80, 80); + cursor: pointer; + &:hover { + text-decoration: underline; + } } -} \ No newline at end of file + } + &__nonAuthorized { + span { + font-size: 15px; + font-family: "Montserrat", sans-serif; + color: rgb(80, 80, 80); + cursor: pointer; + i { + } + &:hover { + text-decoration: underline; + } + } + } +} diff --git a/src/assets/styles/enterAccount.module.scss b/src/assets/styles/enterAccount.module.scss index fb4063d..d0fb170 100644 --- a/src/assets/styles/enterAccount.module.scss +++ b/src/assets/styles/enterAccount.module.scss @@ -1,119 +1,135 @@ .main { - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; } .wrapper { - width: 50%; - height: 70%; + width: 500px; } .tabs { - ul { - li { - width: 50%; - cursor: pointer; - a { - text-align: center; - font-family: "Montserrat", sans-serif; - font-size: 12px; - } + ul { + li { + width: 50%; + cursor: pointer; + a { + text-align: center; + font-family: "Montserrat", sans-serif; + font-size: 12px; + color: #000; + &:hover { + color: #000; + border: 1px solid rgba(0, 0, 0, 0.1); + background: rgba(255, 255, 255, 0.3); } + } } + } } .content { - width: 100%; - height: 100%; - border: 1px solid rgb(220, 220, 220); - border-top: none; - &__wrapper { - padding: 2%; + width: 500px; + min-height: 320px; + box-sizing: border-box; + padding: 35px 25px; + background: #fff; + border: 1px solid rgba(0, 0, 0, 0.1); + border-top: 0; + border-radius: 0 0 16px 16px; + &__wrapper { + &__login { + display: flex; + flex-direction: column; + gap: 15px; + &__header { width: 100%; - height: 100%; - &__login { - width: 100%; - height: 100%; - &__header { - width: 100%; - height: 30%; - display: flex; - align-items: center; - justify-content: center; - h3 { - display: block; - font-size: 25px; - font-family: "Montserrat", sans-serif; - text-align: center; - color: rgb(100, 100, 100); - } - } - &__body { - width: 100%; - height: 50%; - display: flex; - justify-content: space-around; - flex-direction: column; - position: relative; - &__error { - position: absolute; - font-size: 13px; - font-family: "Montserrat", sans-serif; - top: 0; - left: 10px; - color: rgb(224, 75, 75); - } - } - &__footer { - width: 100%; - height: 20%; - } + height: 30%; + display: flex; + align-items: center; + justify-content: center; + h3 { + display: block; + font-size: 25px; + margin: 0; + font-family: "Montserrat", sans-serif; + text-align: center; + color: rgb(100, 100, 100); } - &__register { - width: 100%; - height: 100%; - &__header { - width: 100%; - height: 15%; - display: flex; - align-items: center; - justify-content: center; - h3 { - display: block; - font-size: 25px; - font-family: "Montserrat", sans-serif; - color: rgb(100, 100, 100); - } - } - &__body { - width: 100%; - height: 75%; - display: flex; - justify-content: space-around; - flex-direction: column; - padding-bottom: 5px; - position: relative; - &__error { - position: absolute; - font-size: 13px; - font-family: "Montserrat", sans-serif; - top: 0; - left: 10px; - color: rgb(224, 75, 75); - } - &__fio { - height: 15%; - display: flex; - justify-content: space-between; - } - } - &__footer { - width: 100%; - height: 10%; - } + } + &__body { + width: 100%; + display: flex; + justify-content: space-around; + flex-direction: column; + gap: 15px; + position: relative; + &__error { + position: absolute; + font-size: 13px; + font-family: "Montserrat", sans-serif; + top: 0; + left: 10px; + color: rgb(224, 75, 75); } + } + &__footer { + div, + button { + width: 100%; + height: 40px; + } + } } -} \ No newline at end of file + &__register { + display: flex; + flex-direction: column; + gap: 15px; + &__header { + width: 100%; + height: 15%; + display: flex; + align-items: center; + justify-content: center; + h3 { + display: block; + font-size: 25px; + margin: 0; + text-align: center; + font-family: "Montserrat", sans-serif; + color: rgb(100, 100, 100); + } + } + &__body { + width: 100%; + display: flex; + justify-content: space-around; + flex-direction: column; + gap: 15px; + position: relative; + &__error { + position: absolute; + font-size: 13px; + font-family: "Montserrat", sans-serif; + top: 0; + left: 10px; + color: rgb(224, 75, 75); + } + &__fio { + height: 15%; + display: flex; + justify-content: space-between; + } + } + &__footer { + div, + button { + width: 100%; + height: 40px; + } + } + } + } +} diff --git a/src/assets/styles/forms.module.scss b/src/assets/styles/forms.module.scss index 12664be..f0e7ad9 100644 --- a/src/assets/styles/forms.module.scss +++ b/src/assets/styles/forms.module.scss @@ -1,92 +1,92 @@ .main { - width: 100%; - height: 100%; - padding: 4% 8%; + width: 100%; + min-height: 100%; + padding: 4% 8%; } .wrapper { - width: 100%; - height: 100%; + width: 100%; + min-height: 100%; } .panel { - width: 100%; - height: 10%; - display: flex; - justify-content: space-between; - align-items: end; - padding: 0 5%; + width: 100%; + display: flex; + justify-content: space-between; + align-items: end; + margin-bottom: 25px; + gap: 15px; + div:first-child { + flex-grow: 1; + input { + width: 100%; + } + } } .listForms { - box-shadow: 0 0 5px 1px rgb(200, 200, 200); - border-radius: 5px; - margin-top: 5%; - height: 70%; - width: 100%; - &__columns { - display: flex; - justify-content: start; - align-items: center; - padding: 0 2%; - height: 15%; - width: 100%; - border-bottom: 1px solid rgb(220, 220, 220); - &__item { - font-size: 15px; - font-family: "Montserrat", sans-serif; - } + border: 1px solid rgba(0, 0, 0, 0.1); + background: #fff; + border-radius: 16px; + height: 70%; + min-height: 700px; + margin-bottom: 50px; + width: 100%; + &__columns { + display: flex; + justify-content: start; + align-items: center; + padding: 20px 25px; + border-bottom: 1px solid rgb(220, 220, 220); + &__item { + font-size: 15px; + font-family: "Montserrat", sans-serif; + font-weight: bold; } - &__forms { - width: 100%; - height: 85%; - overflow-y: auto; - &::-webkit-scrollbar { - width: 7px; + } + &__forms { + min-height: 100%; + display: inline; + overflow-y: auto; + &__item { + display: flex; + justify-content: start; + align-items: center; + width: 100%; + padding: 20px 25px; + font-family: "Montserrat", sans-serif; + position: relative; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); + &:hover { + background-color: rgba(240, 240, 240, 0.8); + } + &__title { + text-align: center; + cursor: pointer; + &:hover { + text-decoration: underline; } - &::-webkit-scrollbar-thumb { - background-color: rgb(200, 200, 200); - } - &__item { - display: flex; - justify-content: start; - align-items: center; - padding: 0 2%; - height: 25%; - width: 100%; - font-family: "Montserrat", sans-serif; - position: relative; - &:hover { - background-color: rgba(240, 240, 240, 0.8); - } - &__title { - // width: 33.3%; - text-align: center; - cursor: pointer; - &:hover { - text-decoration: underline; - } - } - &__answers { - width: 33.3%; - text-align: center; - } - &__update { - width: 33.3%; - text-align: center; - } - i { - position: absolute; - font-size: 15px; - right: 30px; - top: calc(50% - 7px); - cursor: pointer; - } - ul { - li { - cursor: pointer; - } - } + } + &__answers { + width: 33.3%; + text-align: center; + } + &__update { + width: 33.3%; + text-align: center; + } + i { + position: absolute; + font-size: 15px; + right: 30px; + top: calc(50% - 7px); + cursor: pointer; + } + ul { + li { + cursor: pointer; } + } } -} \ No newline at end of file + } +} diff --git a/src/assets/styles/home.module.scss b/src/assets/styles/home.module.scss index 01ee942..238e663 100644 --- a/src/assets/styles/home.module.scss +++ b/src/assets/styles/home.module.scss @@ -1,68 +1,83 @@ .main { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .wrapper { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } .header { - width: 60%; - height: 30%; - text-align: center; - &__top { - font-size: 30px; - font-family: "Montserrat", sans-serif; - color: rgb(100, 100, 100); - } - &__bottom { - font-size: 30px; - font-family: "Montserrat", sans-serif; - color: rgb(100, 100, 100); - } + text-align: center; + &__top { + font-size: 24px; + font-family: "Montserrat", sans-serif; + font-weight: bold; + color: #000; + } + &__bottom { + margin-top: 25px; + font-size: 24px; + font-family: "Montserrat", sans-serif; + font-weight: bold; + color: #000; + } } .content { - width: 60%; - height: 50%; - box-shadow: 0 0 5px 1px rgb(180, 180, 180); - padding: 1% 0; - &__title { - height: 30%; - display: flex; - justify-content: center; - align-items: center; - &__wrapper { - h3 { - font-size: 35px; - font-family: "Montserrat", sans-serif; - color: rgb(100, 100, 100); - } - } + width: 500px; + margin-top: 50px; + box-sizing: border-box; + padding: 35px 25px; + background: #fff; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 16px; + display: flex; + flex-direction: column; + gap: 25px; + &__title { + display: flex; + justify-content: center; + align-items: center; + &__wrapper { + h3 { + font-size: 24px; + font-family: "Montserrat", sans-serif; + color: #000; + font-weight: normal; + margin: 0; + } } - &__token { - height: 50%; - display: flex; - justify-content: center; - align-items: center; - &__wrapper { - height: 35%; - width: 80%; - } + } + &__token { + display: flex; + justify-content: center; + align-items: center; + &__wrapper { + height: 40px; + width: 100%; + input { + height: 40px; + } + input::placeholder { + color: rgba(0, 0, 0, 0.25); + } } - &__search { - height: 20%; - display: flex; - justify-content: center; - align-items: center; - &__wrapper { - height: 70%; - } + } + &__search { + height: 40px; + display: flex; + justify-content: center; + align-items: center; + div, + button { + width: 100%; + height: 40px; } -} \ No newline at end of file + } +} diff --git a/src/assets/styles/newForm.module.scss b/src/assets/styles/newForm.module.scss index e18c9bd..692d9e3 100644 --- a/src/assets/styles/newForm.module.scss +++ b/src/assets/styles/newForm.module.scss @@ -1,174 +1,171 @@ .main { - width: 100%; - height: 100%; - padding: 4% 8%; + width: 100%; + height: 100%; + padding: 4% 8%; } .wrapper { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .header { + display: flex; + justify-content: space-between; + width: 100%; + margin-bottom: 25px; + &__listInput { display: flex; - justify-content: space-between; - width: 100%; - height: 8%; - &__listInput { - width: 40%; - height: 100%; - display: flex; - justify-content: space-between; - align-items: center; - &__date { - width: 100%; - height: 100%; - display: flex; - justify-content: space-between; - position: relative; - span { - position: absolute; - font-size: 8px; - font-family: "Montserrat", sans-serif; - top: -40%; - left: 2%; - } - } - &__title { - width: 100%; - height: 100%; - display: flex; - justify-content: space-between; - position: relative; - span { - position: absolute; - font-size: 8px; - font-family: "Montserrat", sans-serif; - top: -40%; - left: 2%; - } - } + align-items: center; + gap: 15px; + &__date { + width: 100%; + display: flex; + justify-content: space-between; + position: relative; + span { + position: absolute; + font-size: 15px; + font-family: "Montserrat", sans-serif; + top: -25px; + left: 0; + } } - &__listBtn { - display: flex; - justify-content: space-between; - - width: 30%; - } + &__title { + width: 100%; + display: flex; + justify-content: space-between; + position: relative; + span { + position: absolute; + font-size: 15px; + font-family: "Montserrat", sans-serif; + top: -25px; + left: 0; + } + } + } + &__listBtn { + display: flex; + gap: 15px; + } } .content { - margin-top: 3%; - height: 85%; - width: 100%; - display: flex; - justify-content: space-between; - &__listQuestion { - height: 100%; - width: 25%; - &__list { - height: 100%; - width: 100%; - &__item { - height: 12.5%; - width: 100%; - display: flex; - align-items: center; - padding: 0 5px; - cursor: pointer; + width: 100%; + height: calc(90% - 100px); + background: #fff; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 16px; + display: flex; + justify-content: space-between; + margin-bottom: 50px; + &__listQuestion { + height: 100%; + width: 25%; + &__list { + height: 100%; + width: 100%; + &__item { + padding: 15px 10px; + width: 100%; + display: flex; + align-items: center; + cursor: pointer; + &:first-child { + border-radius: 16px 0 0 0; + } + &:hover { + background-color: rgba(230, 230, 230, 0.6); + } + span { + display: block; + font-size: 15px; + font-family: "Montserrat", sans-serif; + } + } + &__item:not(:last-child) { + border-bottom: 1px solid rgb(220, 220, 220); + } + } + } + &__newForm { + box-shadow: 0 0 5px 1px rgb(220, 220, 220); + min-height: 100%; + width: 75%; + &__title { + padding: 1%; + width: 100%; + height: 10%; + h3 { + font-size: 20px; + font-family: "Montserrat", sans-serif; + color: rgb(80, 80, 80); + } + } - &:hover { - background-color: rgba(230, 230, 230, 0.6); - } - span { - display: block; - font-size: 15px; - font-family: "Montserrat", sans-serif; - } - } - &__item:not(:last-child) { - border-bottom: 1px solid rgb(220, 220, 220); - } + &__list { + overflow-y: auto; + overflow-x: hidden; + width: 100%; + height: 90%; + &::-webkit-scrollbar { + width: 7px; + } + &::-webkit-scrollbar-thumb { + background-color: rgb(200, 200, 200); + } + &__item { + padding: 1%; + width: 100%; + border-bottom: 1px solid rgb(220, 220, 220); + display: flex; + justify-content: space-between; + align-items: center; + &:hover { + background-color: rgba(230, 230, 230, 0.6); + cursor: pointer; } + &__answer { + width: 90%; + overflow-x: auto; + &::-webkit-scrollbar { + height: 7px; + border: 1px solid rgb(200, 200, 200); + } + &::-webkit-scrollbar-thumb { + background-color: rgb(200, 200, 200); + } + span { + display: block; + } + span:first-child { + font-size: 15px; + font-family: "Montserrat", sans-serif; + color: rgb(80, 80, 80); + } + span:last-child { + font-size: 12px; + font-family: "Montserrat", sans-serif; + color: rgb(180, 180, 180); + } + } + &__btn { + width: 10%; + display: flex; + justify-content: space-around; + align-items: center; + i { + display: block; + } + i:first-child:hover { + color: rgb(42, 64, 187); + } + i:last-child:hover { + color: rgb(199, 73, 73); + } + } + } } - &__newForm { - box-shadow: 0 0 5px 1px rgb(220, 220, 220); - height: 100%; - width: 75%; - &__title { - padding: 1%; - width: 100%; - height: 10%; - h3 { - font-size: 20px; - font-family: "Montserrat", sans-serif; - color: rgb(80, 80, 80); - } - } - - &__list { - overflow-y: auto; - overflow-x: hidden; - width: 100%; - height: 90%; - &::-webkit-scrollbar { - width: 7px; - } - &::-webkit-scrollbar-thumb { - background-color: rgb(200, 200, 200); - } - &__item { - padding: 1%; - width: 100%; - min-height: 25%; - border-bottom: 1px solid rgb(220, 220, 220); - display: flex; - justify-content: space-between; - align-items: center; - &:hover { - background-color: rgba(230, 230, 230, 0.6); - cursor: pointer; - } - &__answer { - width: 90%; - overflow-x: auto; - &::-webkit-scrollbar { - height: 7px; - border: 1px solid rgb(200, 200, 200); - } - &::-webkit-scrollbar-thumb { - background-color: rgb(200, 200, 200); - } - span { - display: block; - } - span:first-child { - font-size: 15px; - font-family: "Montserrat", sans-serif; - color: rgb(80, 80, 80); - } - span:last-child { - font-size: 12px; - font-family: "Montserrat", sans-serif; - color: rgb(180, 180, 180); - } - } - &__btn { - width: 10%; - display: flex; - justify-content: space-around; - align-items: center; - i { - display: block; - } - i:first-child:hover { - color: rgb(42, 64, 187); - } - i:last-child:hover { - color: rgb(199, 73, 73); - } - } - } - } - } -} \ No newline at end of file + } +} diff --git a/src/assets/styles/profile.module.scss b/src/assets/styles/profile.module.scss index 32a942c..5a797ba 100644 --- a/src/assets/styles/profile.module.scss +++ b/src/assets/styles/profile.module.scss @@ -1,64 +1,65 @@ .main { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .wrapper { - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; } .profile { - width: 70%; - height: 70%; - box-shadow: 0 0 5px 1px rgb(200, 200, 200); - padding: 1.5%; - position: relative; - &__linkAdmin { - position: absolute; - bottom: 103%; - left: 10px; - span { - font-size: 15px; - font-family: "Montserrat", sans-serif; - color: rgb(100, 100, 100); - cursor: pointer; - &:hover { - text-decoration: underline; - color: rgb(66, 68, 189); - } - } + width: 70%; + height: 70%; + background: #fff; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 16px; + padding: 1.5%; + position: relative; + &__linkAdmin { + position: absolute; + bottom: 103%; + left: 10px; + span { + font-size: 15px; + font-family: "Montserrat", sans-serif; + color: rgb(100, 100, 100); + cursor: pointer; + &:hover { + text-decoration: underline; + color: rgb(66, 68, 189); + } } - &__wrapper { - &__header { - width: 100%; - height: 15%; - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 10px; - &__btn { - height: 100%; - width: 35%; - display: flex; - justify-content: space-between; - align-items: center; - } - h3 { - font-size: 25px; - font-family: "Montserrat", sans-serif; - color: rgb(100, 100, 100); - } - } - &__body { - width: 100%; - height: 85%; - &__item { - padding: 5px; - } - } + } + &__wrapper { + &__header { + width: 100%; + height: 15%; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 10px; + &__btn { + height: 100%; + display: flex; + align-items: center; + gap: 15px; + } + h3 { + font-size: 25px; + font-family: "Montserrat", sans-serif; + color: rgb(100, 100, 100); + } } -} \ No newline at end of file + &__body { + width: 100%; + height: 85%; + &__item { + padding: 5px; + } + } + } +} diff --git a/src/assets/styles/tokensForm.module.scss b/src/assets/styles/tokensForm.module.scss index 4cec3d0..785a2c3 100644 --- a/src/assets/styles/tokensForm.module.scss +++ b/src/assets/styles/tokensForm.module.scss @@ -1,172 +1,170 @@ .main { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .wrapper { - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; } .loading__wrapper { - width: 100%; - height: 80%; - display: flex; - justify-content: center; - align-items: center; - &__body { - // margin-top: 100px; - span { - - } + width: 100%; + height: 80%; + display: flex; + justify-content: center; + align-items: center; + &__body { + // margin-top: 100px; + span { } + } } - .answers { - width: 70%; - height: 70%; - box-shadow: 0 0 5px 1px rgb(200, 200, 200); - padding: 1.5%; - &__linkAdmin { - position: absolute; - bottom: 103%; - left: 10px; - span { - font-size: 15px; - font-family: "Montserrat", sans-serif; - color: rgb(100, 100, 100); + width: 70%; + height: 70%; + background: #fff; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 16px; + padding: 1.5%; + &__linkAdmin { + position: absolute; + bottom: 103%; + left: 10px; + span { + font-size: 15px; + font-family: "Montserrat", sans-serif; + color: rgb(100, 100, 100); + cursor: pointer; + &:hover { + text-decoration: underline; + color: rgb(66, 68, 189); + } + } + } + &__wrapper { + width: 100%; + height: 100%; + &__header { + width: 100%; + height: 15%; + display: flex; + justify-content: start; + align-items: center; + margin-bottom: 10px; + display: flex; + justify-content: space-between; + align-items: center; + h3 { + font-size: 25px; + font-family: "Montserrat", sans-serif; + color: rgb(100, 100, 100); + display: block; + } + } + &__body { + width: 100%; + height: 85%; + overflow-y: auto; + border-bottom: 1px solid rgb(200, 200, 200); + &::-webkit-scrollbar { + width: 7px; + } + &::-webkit-scrollbar-thumb { + background-color: rgb(200, 200, 200); + } + &__column { + font-size: 15px; + width: 100%; + font-family: "Montserrat", sans-serif; + padding: 5px 30px 5px 5px; + border-bottom: 1px solid rgb(200, 200, 200); + &__wrapper { + display: flex; + justify-content: space-between; + align-items: center; + width: 90%; + } + } + &__item { + padding: 0 30px 0 5px; + // border-bottom: 1px solid rgb(200, 200, 200); + font-size: 15px; + font-family: "Montserrat", sans-serif; + height: 20%; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + &:hover { + background-color: rgba(230, 230, 230, 0.6); + } + &__wrapper { + display: flex; + justify-content: space-between; + align-items: center; + width: 90%; + height: 100%; + &__title { cursor: pointer; &:hover { - text-decoration: underline; - color: rgb(66, 68, 189); - } - } - } - &__wrapper { - width: 100%; - height: 100%; - &__header { - width: 100%; - height: 15%; - display: flex; - justify-content: start; - align-items: center; - margin-bottom: 10px; - display: flex; - justify-content: space-between; - align-items: center; - h3 { - font-size: 25px; - font-family: "Montserrat", sans-serif; - color: rgb(100, 100, 100); - display: block; - } - - } - &__body { - width: 100%; - height: 85%; - overflow-y: auto; - border-bottom: 1px solid rgb(200, 200, 200); - &::-webkit-scrollbar { - width: 7px; - } - &::-webkit-scrollbar-thumb { - background-color: rgb(200, 200, 200); - } - &__column { - font-size: 15px; - width: 100%; - font-family: "Montserrat", sans-serif; - padding: 5px 30px 5px 5px; - border-bottom: 1px solid rgb(200, 200, 200); - &__wrapper { - display: flex; - justify-content: space-between; - align-items: center; - width: 90%; - } - } - &__item { - padding: 0 30px 0 5px; - // border-bottom: 1px solid rgb(200, 200, 200); - font-size: 15px; - font-family: "Montserrat", sans-serif; - height: 20%; - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - &:hover { - background-color: rgba(230, 230, 230, 0.6); - } - &__wrapper { - display: flex; - justify-content: space-between; - align-items: center; - width: 90%; - height: 100%; - &__title { - cursor: pointer; - &:hover { - text-decoration: underline; - } - } - &__token { - - } - } - &__btn { - width: 10%; - display: flex; - justify-content: space-around; - align-items: center; - padding: 0 5px; - font-size: 13px; - i { - display: block; - cursor: pointer; - } - i:first-child:hover { - color: rgb(42, 64, 187); - } - i:last-child:hover { - color: rgb(199, 73, 73); - } - } + text-decoration: underline; } + } + &__token { + } } + &__btn { + width: 10%; + display: flex; + justify-content: space-around; + align-items: center; + padding: 0 5px; + font-size: 13px; + i { + display: block; + cursor: pointer; + } + i:first-child:hover { + color: rgb(42, 64, 187); + } + i:last-child:hover { + color: rgb(199, 73, 73); + } + } + } } + } } .myModal { - &__item { - padding: 5px; - border-bottom: 1px solid rgb(200, 200, 200); + &__item { + padding: 5px; + border-bottom: 1px solid rgb(200, 200, 200); + font-size: 15px; + font-family: "Montserrat", sans-serif; + cursor: pointer; + &__question { + &__text { font-size: 15px; font-family: "Montserrat", sans-serif; - cursor: pointer; - &__question { - &__text { - font-size: 15px; - font-family: "Montserrat", sans-serif; - } - &__comment { - font-size: 11px; - font-family: "Montserrat", sans-serif; - font-style: italic; - color: rgb(200, 200, 200); - } - } - &__answer { - &__text { - font-size: 15px; - font-family: "Montserrat", sans-serif; - } - } + } + &__comment { + font-size: 11px; + font-family: "Montserrat", sans-serif; + font-style: italic; + color: rgb(200, 200, 200); + } } -} \ No newline at end of file + &__answer { + &__text { + font-size: 15px; + font-family: "Montserrat", sans-serif; + } + } + } +} diff --git a/src/assets/styles/viewForm.module.scss b/src/assets/styles/viewForm.module.scss index 55e441d..a779d3e 100644 --- a/src/assets/styles/viewForm.module.scss +++ b/src/assets/styles/viewForm.module.scss @@ -1,74 +1,77 @@ .main { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .wrapper { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.form { + overflow-y: auto; + width: 70%; + height: 80%; + background: #fff; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 16px 16px 0 0; + &::-webkit-scrollbar { + width: 7px; + border-left: 1px solid rgb(200, 200, 200); + } + &::-webkit-scrollbar-thumb { + background-color: rgb(200, 200, 200); + } + &__header { + border-bottom: 1px solid rgb(220, 220, 220); + width: 100%; + height: 10%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; + &__title { + font-size: 17px; + font-weight: bold; + font-family: "Montserrat", sans-serif; + color: rgb(100, 100, 100); + } + &__id { + } + } + &__content { + width: 100%; + height: 80%; + } + &__unexists { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; - flex-direction: column; -} - -.form { - overflow-y: auto; - width: 70%; - height: 80%; - border: 2px solid rgb(220, 220, 220); - &::-webkit-scrollbar { - width: 7px; - border-left: 1px solid rgb(200, 200, 200); - } - &::-webkit-scrollbar-thumb { - background-color: rgb(200, 200, 200); - } - &__header { - border-bottom: 1px solid rgb(220, 220, 220); - width: 100%; - height: 10%; - display: flex; - justify-content: space-between; - align-items: center; - padding: 10px 20px; - &__title { - font-size: 17px; - font-weight: bold; - font-family: "Montserrat", sans-serif; - color: rgb(100, 100, 100); - } - &__id { - - } - } - &__content { - width: 100%; - height: 80%; - } - &__unexists { - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - span { - display: block; - font-size: 18px; - font-family: "Montserrat", sans-serif; - font-style: italic; - color: rgb(200, 200, 200); - } + span { + display: block; + font-size: 18px; + font-family: "Montserrat", sans-serif; + font-style: italic; + color: rgb(200, 200, 200); } + } } .footer { - width: 70%; - height: 10%; - display: flex; - justify-content: space-between; - align-items: center; - padding: 8px 20px; - border: 2px solid rgb(220, 220, 220); - border-top: none; + background: #fff; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 0 0 16px 16px; + width: 70%; + height: 10%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 20px; + border-top: none; } diff --git a/src/pages/EnterAccount.jsx b/src/pages/EnterAccount.jsx index fb2a3da..ee2eb64 100644 --- a/src/pages/EnterAccount.jsx +++ b/src/pages/EnterAccount.jsx @@ -23,11 +23,11 @@ const EnterAccount = () => { const [password, setPassword] = useState(""); const [repiedPassword, setRepiedPassword] = useState(""); - const {user, setUser} = useContext(UserData); - const [cookies, setCookie, removeCookie] = useCookies(["user"]); + const { user, setUser } = useContext(UserData); + const [cookies, setCookie, removeCookie] = useCookies(["user"]); - const [loginError, setLoginError] = useState(false); - const [regsterError, setRegsterError] = useState(false); + const [loginError, setLoginError] = useState(false); + const [regsterError, setRegsterError] = useState(false); function cleanState() { setEmail(""); @@ -51,82 +51,145 @@ const EnterAccount = () => { repiedPassword: repiedPassword, }); - if (response.status === 200) { - const responseMe = await verifyUserApi(response.data.token) - setUser(responseMe.data); - setCookie("token", response.data.token); - cleanState(); - navigate("/"); - } - else { - setRegsterError(response) - } - }; + if (response.status === 200) { + const responseMe = await verifyUserApi(response.data.token); + setUser(responseMe.data); + setCookie("token", response.data.token); + cleanState(); + navigate("/"); + } else { + setRegsterError(response); + } + } async function logInToAccount() { const response = await logIn(login, password); - if (response.status === 200) { - setCookie("token", response.data.token); - const responseMe = await verifyUserApi(response.data.token) - setUser(responseMe.data) + if (response.status === 200) { + setCookie("token", response.data.token); + const responseMe = await verifyUserApi(response.data.token); + setUser(responseMe.data); - cleanState(); - navigate("/") - } - else { - setLoginError(true); - } + cleanState(); + navigate("/"); + } else { + setLoginError(true); } + } - return ( -
-
-
- + return ( +
+
+
+ +
+
+
+ {enter === "login" ? ( +
+
+

Войти в аккаунт

-
-
- {enter === 'login' ?
-
-

Войти в аккаунт

-
-
- {loginError ? - Ошибка. Проверте корректность ввода логина и пароля. - : } - - -
-
- -
-
: -
-
-

Зарегистрировать учетную запись

-
-
- {regsterError ? - {regsterError} - : } - - - -
- {/*
+
+ {loginError ? ( + + Ошибка. Проверте корректность ввода логина и пароля. + + ) : ( + + )} + + +
+
+ +
+
+ ) : ( +
+
+

Создать аккаунт

+
+
+ {regsterError ? ( + + {regsterError} + + ) : ( + + )} + + + +
+ {/*
@@ -137,21 +200,20 @@ const EnterAccount = () => {
*/} -
- createUser()} - /> -
-
- } -
+
+ createUser()} + />
-
+
+ )} +
- ); - }; +
+
+ ); +}; export default EnterAccount; diff --git a/src/pages/Forms.jsx b/src/pages/Forms.jsx index d7391ee..754aabf 100644 --- a/src/pages/Forms.jsx +++ b/src/pages/Forms.jsx @@ -1,140 +1,201 @@ import React, { useState, useContext, useEffect } from "react"; import { useCookies } from "react-cookie"; -import { useNavigate } from 'react-router-dom'; -import classes from "../assets/styles/forms.module.scss" +import { useNavigate } from "react-router-dom"; +import classes from "../assets/styles/forms.module.scss"; import MyButton from "../components/MyButton.jsx"; import MyInput from "../components/MyInput.jsx"; import { FormsData, UserData } from "../context"; import CheckModal from "../components/CheckModal.jsx"; -import { listFormsApi, createFormApi, removeFormApi, newFormTokenApi, listFormsByTokenApi } from "../hooks/api/listFormsApi.js"; +import { + listFormsApi, + createFormApi, + removeFormApi, + newFormTokenApi, + listFormsByTokenApi, +} from "../hooks/api/listFormsApi.js"; const Forms = () => { - const navigate = useNavigate(); - const {forms, setForms} = useContext(FormsData); - const {user, setUser} = useContext(UserData); - const [stateLoading, setStateLoading] = useState(false); - const [searchForm, setSearchForm] = useState(""); + const navigate = useNavigate(); + const { forms, setForms } = useContext(FormsData); + const { user, setUser } = useContext(UserData); + const [stateLoading, setStateLoading] = useState(false); + const [searchForm, setSearchForm] = useState(""); - const [cookies, _, __] = useCookies(["user"]); + const [cookies, _, __] = useCookies(["user"]); - useEffect(() => { - async function listForms() { - const response = await listFormsApi(cookies.token); + useEffect(() => { + async function listForms() { + const response = await listFormsApi(cookies.token); - if (response.data) { - setForms(response.data); - } - else if (response.status === 200 && response.data) { - setForms([]); - } - else { - console.log(response) - } - }; + if (response.data) { + setForms(response.data); + } else if (response.status === 200 && response.data) { + setForms([]); + } else { + console.log(response); + } + } - listForms(); - }, []); + listForms(); + }, []); - async function createForm() { - setStateLoading(true); - const response = await createFormApi(cookies.token); - setStateLoading(false); + async function createForm() { + setStateLoading(true); + const response = await createFormApi(cookies.token); + setStateLoading(false); - if (response.data) { - const token = await newFormTokenApi(cookies.token, response.data.id) - navigate(`/forms/${response.data.id}/edit`) - } - else { - console.log(response) - } - }; + if (response.data) { + const token = await newFormTokenApi(cookies.token, response.data.id); + navigate(`/forms/${response.data.id}/edit`); + } else { + console.log(response); + } + } - function editForm(item) { - navigate(`/forms/${item.id}/edit`); - }; + function editForm(item) { + navigate(`/forms/${item.id}/edit`); + } - async function removeForm(id) { - const response = await removeFormApi(cookies.token, id) + async function removeForm(id) { + const response = await removeFormApi(cookies.token, id); - if (response.status === 200) { - setForms([...forms.filter(item => item.id !== id)]); - } - else { - console.log(response); - } - }; + if (response.status === 200) { + setForms([...forms.filter((item) => item.id !== id)]); + } else { + console.log(response); + } + } - async function openFormView(formId) { - const response = await listFormsByTokenApi(cookies.token, formId); + async function openFormView(formId) { + const response = await listFormsByTokenApi(cookies.token, formId); - if (response.status === 200 && response.data.tokens) { - navigate(`/forms/${response.data.tokens[0].id}/`); - } - else { - console.log(response) - } - }; + if (response.status === 200 && response.data.tokens) { + navigate(`/forms/${response.data.tokens[0].id}/`); + } else { + console.log(response); + } + } - async function copyLinkToFormView(formId) { - const response = await listFormsByTokenApi(cookies.token, formId); + async function copyLinkToFormView(formId) { + const response = await listFormsByTokenApi(cookies.token, formId); - if (response.status === 200 && response.data.tokens) { - navigator.clipboard.writeText(`${window.location.host}/forms/${response.data.tokens[0].id}/`) - } - else { - console.log(response) - } - }; + if (response.status === 200 && response.data.tokens) { + navigator.clipboard.writeText( + `${window.location.host}/forms/${response.data.tokens[0].id}/` + ); + } else { + console.log(response); + } + } - const filterFormsBySearch = () => [...forms].filter(item => item.title.toLowerCase().includes(searchForm)); + const filterFormsBySearch = () => + [...forms].filter((item) => item.title.toLowerCase().includes(searchForm)); - return ( -
-
-
- - - -
: 'Создать' - }/> + return ( +
+
+
+ + +
-
-
-
Название
- {/*
Ответы
-
Изменения
*/} -
-
- {filterFormsBySearch().map((item, i) => -
-
editForm(item)}>{item.title}
- {/*
{item.datetime}
-
{item.update}
*/} - - - - ?`} - action={{ - execute: () => removeForm(item.id), - cancel: () => {} - }} - /> -
- )} -
-
-
+ ) : ( + "Создать" + ) + } + />
- ) -} +
+
+
Название
+ {/*
Ответы
+
Изменения
*/} +
+
+ {filterFormsBySearch().map((item, i) => ( +
+
editForm(item)} + > + {item.title} +
+ {/*
{item.datetime}
+
{item.update}
*/} + + -export default Forms; \ No newline at end of file + ?`} + action={{ + execute: () => removeForm(item.id), + cancel: () => {}, + }} + /> +
+ ))} +
+
+
+
+ ); +}; + +export default Forms; diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 184e7f5..6aa8fea 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -16,8 +16,8 @@ const Home = () => { Кажется вы попали на общую страницу.
- Чтобы перейти к форме введите токен ниже или снова перейдите по - ссылке. + Чтобы перейти к форме введите токен ниже
или снова перейдите + по ссылке.
@@ -41,7 +41,7 @@ const Home = () => {
navigate(`/forms/${token}`)} />
diff --git a/src/pages/NewForm.jsx b/src/pages/NewForm.jsx index 198491b..5d838e3 100644 --- a/src/pages/NewForm.jsx +++ b/src/pages/NewForm.jsx @@ -1,5 +1,5 @@ import React, { useState, useContext, useEffect } from "react"; -import { useNavigate, useLocation, useParams } from 'react-router-dom'; +import { useNavigate, useLocation, useParams } from "react-router-dom"; import { useCookies } from "react-cookie"; import classes from "../assets/styles/newForm.module.scss"; import MyButton from "../components/MyButton.jsx"; @@ -8,332 +8,391 @@ import PreviewModal from "../components/PreviewModal.jsx"; import Loading from "../components/Loading.jsx"; import { FormsData, TypeAnswerData } from "../context"; import { listFormsApi, updateTitleFormApi } from "../hooks/api/listFormsApi.js"; -import { saveFormApi, addFormBlockApi, listFormBlockApi, updateBlockApi, updateOrderBlockApi, removeBlockApi, getBlockApi } from "../hooks/api/formApi.js"; -import { responseDataToListBlock, numberingBlocks } from "../hooks/sundry/parseListBlock.js"; +import { + saveFormApi, + addFormBlockApi, + listFormBlockApi, + updateBlockApi, + updateOrderBlockApi, + removeBlockApi, + getBlockApi, +} from "../hooks/api/formApi.js"; +import { + responseDataToListBlock, + numberingBlocks, +} from "../hooks/sundry/parseListBlock.js"; import MyInput from "../components/MyInput.jsx"; const NewForm = () => { - const navigate = useNavigate(); - const location = useLocation(); - const { formId } = useParams(); - const [dragElem, setDragElem] = useState(null); - const [dropElem, setDropElem] = useState(null); - const [loading, setLoading] = useState(false); + const navigate = useNavigate(); + const location = useLocation(); + const { formId } = useParams(); + const [dragElem, setDragElem] = useState(null); + const [dropElem, setDropElem] = useState(null); + const [loading, setLoading] = useState(false); - const [cookies, _, __] = useCookies(["user"]); - - const {forms, setForms} = useContext(FormsData); - const {listTypeAnswer, setListTypeAnswer} = useContext(TypeAnswerData); + const [cookies, _, __] = useCookies(["user"]); - const nextID = (list, param) => { - return list.length ? list.at(-1)[param] + 1 : 1 - }; - const [question, setQuestion] = useState(""); - const [comment, setComment] = useState(""); - const [mandatory, setMandatory] = useState(false); - const [optionAnswer, setOptionAnswer] = useState([]); - const [file, setFile] = useState([]); - const [video, setVideo] = useState(""); - const [currentTypeAnswer, setCurrentTypeAnswer] = useState(""); - const [currentOptionAnswer, setCurrentOptionAnswer] = useState(""); + const { forms, setForms } = useContext(FormsData); + const { listTypeAnswer, setListTypeAnswer } = useContext(TypeAnswerData); - const [datetime, setDatetime] = useState(""); - const [newTitleForm, setNewTitleForm] = useState(""); - const [oldTitleFrom, setOldTitleForm] = useState(""); + const nextID = (list, param) => { + return list.length ? list.at(-1)[param] + 1 : 1; + }; + const [question, setQuestion] = useState(""); + const [comment, setComment] = useState(""); + const [mandatory, setMandatory] = useState(false); + const [optionAnswer, setOptionAnswer] = useState([]); + const [file, setFile] = useState([]); + const [video, setVideo] = useState(""); + const [currentTypeAnswer, setCurrentTypeAnswer] = useState(""); + const [currentOptionAnswer, setCurrentOptionAnswer] = useState(""); - const [listBlock, setListBlock] = useState([]); + const [datetime, setDatetime] = useState(""); + const [newTitleForm, setNewTitleForm] = useState(""); + const [oldTitleFrom, setOldTitleForm] = useState(""); - const [stateModal, setStateModal] = useState(false); + const [listBlock, setListBlock] = useState([]); - function cleanStates() { - setStateModal(false) - setQuestion(""); - setComment(""); - setOptionAnswer([]) - setFile([]); - setVideo(""); - setCurrentTypeAnswer(""); - setCurrentOptionAnswer("") - setMandatory(false); + const [stateModal, setStateModal] = useState(false); + + function cleanStates() { + setStateModal(false); + setQuestion(""); + setComment(""); + setOptionAnswer([]); + setFile([]); + setVideo(""); + setCurrentTypeAnswer(""); + setCurrentOptionAnswer(""); + setMandatory(false); + } + + useEffect(() => { + async function totalData() { + const responseForms = await listFormsApi(cookies.token); + const responseBlock = await listFormBlockApi(cookies.token, formId); + + if ( + responseBlock.status === 200 && + responseBlock.data && + responseForms.status === 200 + ) { + setListBlock(responseDataToListBlock(responseBlock.data)); + const title = responseForms.data.find( + (item) => item.id === formId + ).title; + setNewTitleForm(title); + setOldTitleForm(title); + } else { + setListBlock([]); + setNewTitleForm("Новыя форма"); + setOldTitleForm("Новыя форма"); + } + setLoading(true); + } + + totalData(); + }, []); + + function addOptionAnswer() { + setOptionAnswer( + numberingBlocks( + [ + ...optionAnswer, + { + id: nextID(optionAnswer, "id"), + text: currentOptionAnswer, + }, + ], + "id", + 1 + ) + ); + setCurrentOptionAnswer(""); + } + + function removeOptionAnswer(id) { + setOptionAnswer( + numberingBlocks( + [...optionAnswer].filter((answer) => answer.id !== id), + "id", + 1 + ) + ); + } + + function editAnswerByForm(id) { + const obj = listBlock.find((item) => item.id === id); + setQuestion(obj.question); + setComment(obj.comment); + setFile(obj.file); + setVideo(obj.video); + setCurrentTypeAnswer(obj.typeAnswer); + setOptionAnswer(obj.optionAnswer); + setMandatory(obj.mandatory); + setStateModal(obj.id); + } + + async function updateBlock() { + const data = { + question: question, + comment: comment, + file: file, + video: video, + mandatory: mandatory, + optionAnswer: optionAnswer, + typeAnswer: currentTypeAnswer, }; - useEffect(() => { - async function totalData() { - const responseForms = await listFormsApi(cookies.token); - const responseBlock = await listFormBlockApi(cookies.token, formId); + const response = await updateBlockApi( + cookies.token, + formId, + data, + listBlock.find((item) => item.id === stateModal).order + ); - if (responseBlock.status === 200 && responseBlock.data && responseForms.status === 200) { - setListBlock(responseDataToListBlock(responseBlock.data)); - const title = responseForms.data.find(item => item.id === formId).title - setNewTitleForm(title); - setOldTitleForm(title); - } - else { - setListBlock([]) - setNewTitleForm("Новыя форма"); - setOldTitleForm("Новыя форма"); - } - setLoading(true); - }; + if (response.status === 200) { + const responseBlock = await listFormBlockApi(cookies.token, formId); - totalData(); - }, []); + if (responseBlock.status === 200) { + setListBlock(responseDataToListBlock(responseBlock.data)); + } else { + setListBlock([]); + } + } else { + console.log(response); + } - function addOptionAnswer() { - setOptionAnswer(numberingBlocks( - [...optionAnswer, { - id: nextID(optionAnswer, "id"), - text: currentOptionAnswer - }], - "id", - 1 - )); - setCurrentOptionAnswer(""); + cleanStates(); + } + + async function removeBlock(order) { + const response = await removeBlockApi(cookies.token, formId, order); + + if (response.status === 200) { + setListBlock([...listBlock.filter((item) => item.order !== order)]); + } else { + console.log(response); + } + } + + async function addFormBlock() { + console.log(optionAnswer); + + const newBlock = { + question: question, + typeAnswer: currentTypeAnswer, + comment: comment, + mandatory: mandatory, + optionAnswer: optionAnswer, + file: file, + video: video, }; - function removeOptionAnswer(id) { - setOptionAnswer(numberingBlocks( - [...optionAnswer].filter(answer => answer.id !== id), - "id", - 1 - )); - }; + const response = await addFormBlockApi(cookies.token, formId, newBlock); - function editAnswerByForm(id) { - const obj = listBlock.find(item => item.id === id); - setQuestion(obj.question); - setComment(obj.comment); - setFile(obj.file); - setVideo(obj.video); - setCurrentTypeAnswer(obj.typeAnswer); - setOptionAnswer(obj.optionAnswer); - setMandatory(obj.mandatory); - setStateModal(obj.id); - }; + if (response.status === 200) { + const responseBlock = await listFormBlockApi(cookies.token, formId); - async function updateBlock() { - const data = { - question: question, - comment: comment, - file: file, - video: video, - mandatory: mandatory, - optionAnswer: optionAnswer, - typeAnswer: currentTypeAnswer, - } + if (responseBlock.status === 200) { + setListBlock(responseDataToListBlock(responseBlock.data)); + } else { + setListBlock([]); + } + } else { + console.log(response); + } + cleanStates(); + } - const response = await updateBlockApi( - cookies.token, - formId, - data, - listBlock.find(item => item.id === stateModal).order - ); + // async function updateTitleForm() { + // const response = await updateTitleFormApi(cookies.token, formId, newTitleForm); - if (response.status === 200) { - const responseBlock = await listFormBlockApi(cookies.token, formId); + // if (response.status === 200) { + // console.log(response) + // } + // else { + // console.log(response) + // } + // }; - if (responseBlock.status === 200) { - setListBlock(responseDataToListBlock(responseBlock.data)); - } - else { - setListBlock([]) - } - } - else { - console.log(response) - } - - cleanStates(); - }; + async function updateOrderBlock() { + const response = await updateOrderBlockApi(cookies.token, formId, { + new: dropElem, + old: dragElem, + }); - async function removeBlock(order) { - const response = await removeBlockApi(cookies.token, formId, order) + if (response.status === 200) { + const currentElem = listBlock[dragElem]; + const tListBlock = [...listBlock]; - if (response.status === 200) { - setListBlock([...listBlock.filter(item => item.order !== order)]); - } - else { - console.log(response) - } - }; + if (dragElem > dropElem) { + tListBlock.splice(dropElem, 0, currentElem); + tListBlock.splice(dragElem + 1, 1); + } else { + tListBlock.splice(dropElem + 1, 0, currentElem); + tListBlock.splice(dragElem, 1); + } - async function addFormBlock() { - console.log(optionAnswer) + setListBlock(numberingBlocks(tListBlock, "order")); + } + } - const newBlock = { - question: question, - typeAnswer: currentTypeAnswer, - comment: comment, - mandatory: mandatory, - optionAnswer: optionAnswer, - file: file, - video: video - } + async function saveForm() { + if (oldTitleFrom !== newTitleForm) { + await updateTitleFormApi(cookies.token, formId, newTitleForm); + } - const response = await addFormBlockApi(cookies.token, formId, newBlock) + cleanStates(); + navigate("/forms"); + } - if (response.status === 200) { - const responseBlock = await listFormBlockApi(cookies.token, formId); - - if (responseBlock.status === 200) { - setListBlock(responseDataToListBlock(responseBlock.data)); - } - else { - setListBlock([]) - } - } - else { - console.log(response) - } - cleanStates(); - }; - - // async function updateTitleForm() { - // const response = await updateTitleFormApi(cookies.token, formId, newTitleForm); - - // if (response.status === 200) { - // console.log(response) - // } - // else { - // console.log(response) - // } - // }; - - async function updateOrderBlock() { - const response = await updateOrderBlockApi(cookies.token, formId, { - new: dropElem, - old: dragElem - }) - - if (response.status === 200) { - const currentElem = listBlock[dragElem]; - const tListBlock = [...listBlock]; - - if (dragElem > dropElem) { - tListBlock.splice(dropElem, 0, currentElem); - tListBlock.splice(dragElem + 1, 1); - } - else { - tListBlock.splice(dropElem + 1, 0, currentElem); - tListBlock.splice(dragElem, 1); - }; - - setListBlock(numberingBlocks(tListBlock, "order")); - } - }; - - async function saveForm() { - if (oldTitleFrom !== newTitleForm) { - await updateTitleFormApi(cookies.token, formId, newTitleForm); - } - - cleanStates(); - navigate("/forms"); - }; - - return ( -
-
-
-
-
- Дедлайн выполнения - -
-
- Название формы - -
-
-
- - -
-
-
-
-
- {listTypeAnswer.map((item, i) => -
setCurrentTypeAnswer(item.id)} key={i}> - {item.text} -
- )} -
-
- - - - - -
-
-

Новая форма

-
-
- {loading ? listBlock.map((item, i) => -
{event.preventDefault()}} - onDragStart={(event) => { - if (event.target.id) { - setDragElem(Number(event.target.id)) - } - }} - onDragEnter={(event) => { - if (event.target.id) { - setDropElem(Number(event.target.id)) - } - }} - onDrop={() => updateOrderBlock()} - > -
- {item.question} - {listTypeAnswer.map(typeItem => { - if (typeItem.id === item.typeAnswer) { - return typeItem.text - } - })} -
-
- {editAnswerByForm(item.id)}}> - removeBlock(item.order)}> -
-
- ) : - } -
-
-
+ return ( +
+
+
+
+
+ Дедлайн выполнения +
+
+ Название формы + +
+
+
+ + +
- ) -} +
+
+
+ {listTypeAnswer.map((item, i) => ( +
setCurrentTypeAnswer(item.id)} + key={i} + > + {item.text} +
+ ))} +
+
-export default NewForm; \ No newline at end of file + + + + +
+
+

Новая форма

+
+
+ {loading ? ( + listBlock.map((item, i) => ( +
{ + event.preventDefault(); + }} + onDragStart={(event) => { + if (event.target.id) { + setDragElem(Number(event.target.id)); + } + }} + onDragEnter={(event) => { + if (event.target.id) { + setDropElem(Number(event.target.id)); + } + }} + onDrop={() => updateOrderBlock()} + > +
+ {item.question} + + {listTypeAnswer.map((typeItem) => { + if (typeItem.id === item.typeAnswer) { + return typeItem.text; + } + })} + +
+
+ { + editAnswerByForm(item.id); + }} + > + removeBlock(item.order)} + > +
+
+ )) + ) : ( + + )} +
+
+
+
+
+ ); +}; + +export default NewForm;