From 08f0e1a390376ec2d2217c633da7d035f748fd14 Mon Sep 17 00:00:00 2001 From: Gabriel Marques Correia Date: Tue, 29 Aug 2023 09:37:23 -0300 Subject: [PATCH] Atualizando --- src/components/CreateUser/createuser.tsx | 192 +++++++++++++++++- src/components/CreateUser/dist/createuser.js | 32 ++- .../RecoveryYourEmail/RecoveryEmail.tsx | 19 +- .../RecoveryYourEmail/dist/RecoveryEmail.js | 2 +- 4 files changed, 239 insertions(+), 6 deletions(-) diff --git a/src/components/CreateUser/createuser.tsx b/src/components/CreateUser/createuser.tsx index 7ab1113..3add0bc 100644 --- a/src/components/CreateUser/createuser.tsx +++ b/src/components/CreateUser/createuser.tsx @@ -206,7 +206,7 @@ const CreateUserComponent = styled.section ` // Tablet @media(min-width: 768px) { - height: 151vh; + height: 191vh; .mobile { display: none; @@ -343,6 +343,159 @@ const CreateUserComponent = styled.section ` margin-left: 355%; margin-top: -166.5%; } + + .transvestite { + width: 30px; + margin-left: 47%; + margin-top: -7%; + } + + #transvestite { + width: 10px; + } + + .t1-op { + margin-left: 355%; + margin-top: -166.5%; + } + + .no-binary { + width: 30px; + margin-left: 10%; + margin-top: -3%; + } + + #no-binary { + width: 10px; + } + + .nb-op { + margin-left: 355%; + margin-top: -166.5%; + width: 105px; + } + + .trans { + width: 30px; + margin-left: 29%; + margin-top: -7%; + } + + #trans { + width: 10px; + } + + .t2-op { + margin-left: 355%; + margin-top: -166.5%; + } + + .another { + width: 30px; + margin-left: 47%; + margin-top: -7%; + } + + #another { + width: 10px; + } + + .a-op { + margin-left: 355%; + margin-top: -166.5%; + } + + .none { + width: 30px; + margin-left: 10%; + margin-top: -3%; + } + + #none { + width: 10px; + } + + .n-op { + margin-left: 355%; + margin-top: -166.5%; + width: 150px; + } + + .social-name { + margin-top: 1%; + margin-left: -3%; + } + + #social-name { + width: 500px; + } + + #social-name::-webkit-input-placeholder { /* Chrome/Opera/Safari */ + font-size: 1.3em; + } + + .date { + margin-top: -5%; + margin-left: -3%; + } + + #birthday { + width: 500px; + } + + #birthday::-webkit-input-placeholder { /* Chrome/Opera/Safari */ + font-size: 1.3em; + } + + .small { + margin-left: 11%; + position: absolute; + top: 870px; + } + + .cpf { + margin-top: -2%; + margin-left: -3%; + } + + #cpf { + width: 500px; + } + + #cpf::-webkit-input-placeholder { /* Chrome/Opera/Safari */ + font-size: 1.3em; + } + + .email { + margin-top: -4.5%; + margin-left: -3%; + } + + #email { + width: 500px; + } + + #email::-webkit-input-placeholder { /* Chrome/Opera/Safari */ + font-size: 1.3em; + } + + .country { + margin-top: -4.5%; + margin-left: -3%; + } + + #country { + width: 500px; + } + + #country::-webkit-input-placeholder { /* Chrome/Opera/Safari */ + font-size: 1.3em; + } + + .profile-photo2 { + margin-top: -2%; + margin-left: 10.5%; + } } `; @@ -446,7 +599,44 @@ const CreateUserPg = function() {

Feminino

+
+ +

Travesti

+
+
+ +

Não Binário

+
+
+ +

Trans

+
+
+ +

Outros

+
+
+ +

Prefiro não dizer

+
+ +
+ +
+
+
+ Digite a data de aniversário +
+
+ +
+
+ +
+
+
+

Foto de Perfil

diff --git a/src/components/CreateUser/dist/createuser.js b/src/components/CreateUser/dist/createuser.js index 9e1c3b7..5aae1ea 100644 --- a/src/components/CreateUser/dist/createuser.js +++ b/src/components/CreateUser/dist/createuser.js @@ -9,7 +9,7 @@ exports.__esModule = true; var styled_1 = require("@emotion/styled"); var Input_1 = require("../Login/Input/Input"); var image_1 = require("next/image"); -var CreateUserComponent = styled_1["default"].section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n // Mobile\n \n .mobile {\n display: block;\n justify-content: space-between;\n }\n\n .tablet-desktops {\n display: none;\n }\n\n * {\n color: white;\n font-family: 'Poppins-Medium';\n }\n\n height: 200vh;\n\n background: linear-gradient(180deg, #0A53B5 0%, #0081E8 100%);\n\n h1 {\n padding-top: 15%;\n margin-left: 26%;\n font-size: 1.3em;\n }\n\n form {\n margin-top: 10%;\n margin-left: 9%;\n }\n\n #name::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n font-size: 1.1em;\n }\n\n .gender {\n margin-left: -15%;\n font-family: 'Poppins-Regular';\n }\n\n .gender-txt {\n font-size: 1.1em;\n margin-top: 8%;\n margin-left: 7%;\n font-family: 'Poppins-Medium';\n }\n\n .man {\n margin-left: -15%;\n }\n\n .man-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .woman {\n margin-left: -15%;\n }\n\n .woman-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .transvestite {\n margin-left: -15%;\n }\n\n .t1-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .no-binary {\n margin-left: -15%;\n }\n\n .nb-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .trans {\n margin-left: -15%;\n }\n\n .t2-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .another {\n margin-left: -15%;\n }\n\n .a-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .none {\n margin-left: -15%;\n }\n\n .n-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .social-name {\n margin-top: 7%;\n }\n\n #social-name::-webkit-input-placeholder {\n font-size: 1.1em;\n }\n\n Small {\n margin-left: 7%;\n }\n\n #cpf::-webkit-input-placeholder {\n font-size: 1.1em;\n }\n\n #email::-webkit-input-placeholder {\n font-size: 1.1em;\n }\n\n #country::-webkit-input-placeholder {\n font-size: 1.1em;\n }\n\n .photo {\n display: none;\n }\n\n .profile-photo {\n margin-top: 5%;\n }\n\n .choose-a-image {\n margin-top: 3%;\n color: black;\n font-weight: bold;\n background-color: white;\n border: none;\n width: 210px;\n height: 50px;\n align-items: center;\n border-radius: 10px;\n }\n\n .choose-a-image:active {\n margin-top: 3%;\n color: black;\n font-weight: bold;\n background-color: #ffffffca;\n border: none;\n width: 210px;\n height: 50px;\n align-items: center;\n border-radius: 10px;\n }\n\n label{\n position: absolute;\n color: black;\n margin-left: 5%;\n top: 1118px;\n font-size: 0.9em;\n }\n\n .save {\n background-color: #93B413;\n border: none;\n margin-top: 12%;\n margin-left: 18%;\n width: 150px;\n height: 50px;\n font-size: 1.5em;\n border-radius: 19px;\n }\n\n .save:active {\n background-color: #86a40f;\n border: none;\n margin-top: 12%;\n margin-left: 18%;\n width: 150px;\n height: 50px;\n font-size: 1.5em;\n border-radius: 19px;\n }\n\n // Tablet\n @media(min-width: 768px) {\n\n height: 151vh;\n\n .mobile {\n display: none;\n }\n\n .tablet-desktops {\n display: block;\n justify-content: space-between;\n }\n\n background: linear-gradient(180deg, #0A53B5 0%, #0A53B5 100%);\n\n header {\n background-color: #2F99BF;\n height: 200px;\n }\n\n .search {\n width: 30px;\n height: 30px;\n margin-top: 9%;\n margin-left: 8%;\n }\n\n .box-1 {\n margin-top: -9.5%;\n margin-left: 20%;\n text-align: center;\n background-color: #0081E8;\n width: 170px;\n height: 130px;\n }\n\n .amount-documents {\n font-size: 4em;\n }\n\n .documents {\n margin-top: -10%;\n }\n\n .box-2 {\n margin-top: -17%;\n margin-left: 50%;\n text-align: center;\n background-color: #F47216;\n width: 170px;\n height: 130px;\n }\n\n .amount-users {\n font-size: 4em;\n }\n\n .users {\n margin-top: -10%;\n }\n\n .profile-photo {\n position: absolute;\n top: 160px;\n margin-left: 79%;\n width: 110px;\n height: 110px;\n }\n\n #your-name {\n margin-left: 80%;\n margin-top: -3%;\n }\n\n form {\n border-radius: 19px;\n background: linear-gradient(180deg, #07B3FD 0%, #0b58bc 100%);\n width: 630px;\n }\n \n h1 {\n font-size: 2em;\n margin-left: 31.5%;\n padding-top: 5%;\n }\n\n .name {\n margin-top: 1%;\n margin-left: -3%;\n }\n\n #name {\n width: 500px;\n }\n\n #name::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n font-size: 1.3em;\n }\n\n .gender-txt {\n font-size: 1.5em;\n margin-top: 1%;\n margin-left: 10%;\n }\n\n span {\n color: #F47216;\n margin-left: -50%;\n }\n\n .man {\n width: 30px;\n margin-left: 10%;\n margin-top: -3%;\n }\n\n #man {\n width: 10px;\n }\n\n .man-op {\n margin-left: 355%;\n margin-top: -166.5%;\n }\n\n .woman {\n width: 30px;\n margin-left: 29%;\n margin-top: -7%;\n }\n\n #woman {\n width: 10px;\n }\n\n .woman-op {\n margin-left: 355%;\n margin-top: -166.5%;\n }\n }\n"], ["\n\n // Mobile\n \n .mobile {\n display: block;\n justify-content: space-between;\n }\n\n .tablet-desktops {\n display: none;\n }\n\n * {\n color: white;\n font-family: 'Poppins-Medium';\n }\n\n height: 200vh;\n\n background: linear-gradient(180deg, #0A53B5 0%, #0081E8 100%);\n\n h1 {\n padding-top: 15%;\n margin-left: 26%;\n font-size: 1.3em;\n }\n\n form {\n margin-top: 10%;\n margin-left: 9%;\n }\n\n #name::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n font-size: 1.1em;\n }\n\n .gender {\n margin-left: -15%;\n font-family: 'Poppins-Regular';\n }\n\n .gender-txt {\n font-size: 1.1em;\n margin-top: 8%;\n margin-left: 7%;\n font-family: 'Poppins-Medium';\n }\n\n .man {\n margin-left: -15%;\n }\n\n .man-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .woman {\n margin-left: -15%;\n }\n\n .woman-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .transvestite {\n margin-left: -15%;\n }\n\n .t1-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .no-binary {\n margin-left: -15%;\n }\n\n .nb-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .trans {\n margin-left: -15%;\n }\n\n .t2-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .another {\n margin-left: -15%;\n }\n\n .a-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .none {\n margin-left: -15%;\n }\n\n .n-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .social-name {\n margin-top: 7%;\n }\n\n #social-name::-webkit-input-placeholder {\n font-size: 1.1em;\n }\n\n Small {\n margin-left: 7%;\n }\n\n #cpf::-webkit-input-placeholder {\n font-size: 1.1em;\n }\n\n #email::-webkit-input-placeholder {\n font-size: 1.1em;\n }\n\n #country::-webkit-input-placeholder {\n font-size: 1.1em;\n }\n\n .photo {\n display: none;\n }\n\n .profile-photo {\n margin-top: 5%;\n }\n\n .choose-a-image {\n margin-top: 3%;\n color: black;\n font-weight: bold;\n background-color: white;\n border: none;\n width: 210px;\n height: 50px;\n align-items: center;\n border-radius: 10px;\n }\n\n .choose-a-image:active {\n margin-top: 3%;\n color: black;\n font-weight: bold;\n background-color: #ffffffca;\n border: none;\n width: 210px;\n height: 50px;\n align-items: center;\n border-radius: 10px;\n }\n\n label{\n position: absolute;\n color: black;\n margin-left: 5%;\n top: 1118px;\n font-size: 0.9em;\n }\n\n .save {\n background-color: #93B413;\n border: none;\n margin-top: 12%;\n margin-left: 18%;\n width: 150px;\n height: 50px;\n font-size: 1.5em;\n border-radius: 19px;\n }\n\n .save:active {\n background-color: #86a40f;\n border: none;\n margin-top: 12%;\n margin-left: 18%;\n width: 150px;\n height: 50px;\n font-size: 1.5em;\n border-radius: 19px;\n }\n\n // Tablet\n @media(min-width: 768px) {\n\n height: 151vh;\n\n .mobile {\n display: none;\n }\n\n .tablet-desktops {\n display: block;\n justify-content: space-between;\n }\n\n background: linear-gradient(180deg, #0A53B5 0%, #0A53B5 100%);\n\n header {\n background-color: #2F99BF;\n height: 200px;\n }\n\n .search {\n width: 30px;\n height: 30px;\n margin-top: 9%;\n margin-left: 8%;\n }\n\n .box-1 {\n margin-top: -9.5%;\n margin-left: 20%;\n text-align: center;\n background-color: #0081E8;\n width: 170px;\n height: 130px;\n }\n\n .amount-documents {\n font-size: 4em;\n }\n\n .documents {\n margin-top: -10%;\n }\n\n .box-2 {\n margin-top: -17%;\n margin-left: 50%;\n text-align: center;\n background-color: #F47216;\n width: 170px;\n height: 130px;\n }\n\n .amount-users {\n font-size: 4em;\n }\n\n .users {\n margin-top: -10%;\n }\n\n .profile-photo {\n position: absolute;\n top: 160px;\n margin-left: 79%;\n width: 110px;\n height: 110px;\n }\n\n #your-name {\n margin-left: 80%;\n margin-top: -3%;\n }\n\n form {\n border-radius: 19px;\n background: linear-gradient(180deg, #07B3FD 0%, #0b58bc 100%);\n width: 630px;\n }\n \n h1 {\n font-size: 2em;\n margin-left: 31.5%;\n padding-top: 5%;\n }\n\n .name {\n margin-top: 1%;\n margin-left: -3%;\n }\n\n #name {\n width: 500px;\n }\n\n #name::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n font-size: 1.3em;\n }\n\n .gender-txt {\n font-size: 1.5em;\n margin-top: 1%;\n margin-left: 10%;\n }\n\n span {\n color: #F47216;\n margin-left: -50%;\n }\n\n .man {\n width: 30px;\n margin-left: 10%;\n margin-top: -3%;\n }\n\n #man {\n width: 10px;\n }\n\n .man-op {\n margin-left: 355%;\n margin-top: -166.5%;\n }\n\n .woman {\n width: 30px;\n margin-left: 29%;\n margin-top: -7%;\n }\n\n #woman {\n width: 10px;\n }\n\n .woman-op {\n margin-left: 355%;\n margin-top: -166.5%;\n }\n }\n"]))); +var CreateUserComponent = styled_1["default"].section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n // Mobile\n \n .mobile {\n display: block;\n justify-content: space-between;\n }\n\n .tablet-desktops {\n display: none;\n }\n\n * {\n color: white;\n font-family: 'Poppins-Medium';\n }\n\n height: 200vh;\n\n background: linear-gradient(180deg, #0A53B5 0%, #0081E8 100%);\n\n h1 {\n padding-top: 15%;\n margin-left: 26%;\n font-size: 1.3em;\n }\n\n form {\n margin-top: 10%;\n margin-left: 9%;\n }\n\n #name::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n font-size: 1.1em;\n }\n\n .gender {\n margin-left: -15%;\n font-family: 'Poppins-Regular';\n }\n\n .gender-txt {\n font-size: 1.1em;\n margin-top: 8%;\n margin-left: 7%;\n font-family: 'Poppins-Medium';\n }\n\n .man {\n margin-left: -15%;\n }\n\n .man-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .woman {\n margin-left: -15%;\n }\n\n .woman-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .transvestite {\n margin-left: -15%;\n }\n\n .t1-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .no-binary {\n margin-left: -15%;\n }\n\n .nb-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .trans {\n margin-left: -15%;\n }\n\n .t2-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .another {\n margin-left: -15%;\n }\n\n .a-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .none {\n margin-left: -15%;\n }\n\n .n-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .social-name {\n margin-top: 7%;\n }\n\n #social-name::-webkit-input-placeholder {\n font-size: 1.1em;\n }\n\n Small {\n margin-left: 7%;\n }\n\n #cpf::-webkit-input-placeholder {\n font-size: 1.1em;\n }\n\n #email::-webkit-input-placeholder {\n font-size: 1.1em;\n }\n\n #country::-webkit-input-placeholder {\n font-size: 1.1em;\n }\n\n .photo {\n display: none;\n }\n\n .profile-photo {\n margin-top: 5%;\n }\n\n .choose-a-image {\n margin-top: 3%;\n color: black;\n font-weight: bold;\n background-color: white;\n border: none;\n width: 210px;\n height: 50px;\n align-items: center;\n border-radius: 10px;\n }\n\n .choose-a-image:active {\n margin-top: 3%;\n color: black;\n font-weight: bold;\n background-color: #ffffffca;\n border: none;\n width: 210px;\n height: 50px;\n align-items: center;\n border-radius: 10px;\n }\n\n label{\n position: absolute;\n color: black;\n margin-left: 5%;\n top: 1118px;\n font-size: 0.9em;\n }\n\n .save {\n background-color: #93B413;\n border: none;\n margin-top: 12%;\n margin-left: 18%;\n width: 150px;\n height: 50px;\n font-size: 1.5em;\n border-radius: 19px;\n }\n\n .save:active {\n background-color: #86a40f;\n border: none;\n margin-top: 12%;\n margin-left: 18%;\n width: 150px;\n height: 50px;\n font-size: 1.5em;\n border-radius: 19px;\n }\n\n // Tablet\n @media(min-width: 768px) {\n\n height: 191vh;\n\n .mobile {\n display: none;\n }\n\n .tablet-desktops {\n display: block;\n justify-content: space-between;\n }\n\n background: linear-gradient(180deg, #0A53B5 0%, #0A53B5 100%);\n\n header {\n background-color: #2F99BF;\n height: 200px;\n }\n\n .search {\n width: 30px;\n height: 30px;\n margin-top: 9%;\n margin-left: 8%;\n }\n\n .box-1 {\n margin-top: -9.5%;\n margin-left: 20%;\n text-align: center;\n background-color: #0081E8;\n width: 170px;\n height: 130px;\n }\n\n .amount-documents {\n font-size: 4em;\n }\n\n .documents {\n margin-top: -10%;\n }\n\n .box-2 {\n margin-top: -17%;\n margin-left: 50%;\n text-align: center;\n background-color: #F47216;\n width: 170px;\n height: 130px;\n }\n\n .amount-users {\n font-size: 4em;\n }\n\n .users {\n margin-top: -10%;\n }\n\n .profile-photo {\n position: absolute;\n top: 160px;\n margin-left: 79%;\n width: 110px;\n height: 110px;\n }\n\n #your-name {\n margin-left: 80%;\n margin-top: -3%;\n }\n\n form {\n border-radius: 19px;\n background: linear-gradient(180deg, #07B3FD 0%, #0b58bc 100%);\n width: 630px;\n }\n \n h1 {\n font-size: 2em;\n margin-left: 31.5%;\n padding-top: 5%;\n }\n\n .name {\n margin-top: 1%;\n margin-left: -3%;\n }\n\n #name {\n width: 500px;\n }\n\n #name::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n font-size: 1.3em;\n }\n\n .gender-txt {\n font-size: 1.5em;\n margin-top: 1%;\n margin-left: 10%;\n }\n\n span {\n color: #F47216;\n margin-left: -50%;\n }\n\n .man {\n width: 30px;\n margin-left: 10%;\n margin-top: -3%;\n }\n\n #man {\n width: 10px;\n }\n\n .man-op {\n margin-left: 355%;\n margin-top: -166.5%;\n }\n\n .woman {\n width: 30px;\n margin-left: 29%;\n margin-top: -7%;\n }\n\n #woman {\n width: 10px;\n }\n\n .woman-op {\n margin-left: 355%;\n margin-top: -166.5%;\n }\n\n .transvestite {\n width: 30px;\n margin-left: 47%;\n margin-top: -7%;\n }\n\n #transvestite {\n width: 10px;\n }\n\n .t1-op {\n margin-left: 355%;\n margin-top: -166.5%;\n }\n\n .no-binary {\n width: 30px;\n margin-left: 10%;\n margin-top: -3%;\n }\n\n #no-binary {\n width: 10px;\n }\n\n .nb-op {\n margin-left: 355%;\n margin-top: -166.5%;\n width: 105px;\n }\n\n .trans {\n width: 30px;\n margin-left: 29%;\n margin-top: -7%;\n }\n\n #trans {\n width: 10px;\n }\n\n .t2-op {\n margin-left: 355%;\n margin-top: -166.5%;\n }\n\n .another {\n width: 30px;\n margin-left: 47%;\n margin-top: -7%;\n }\n\n #another {\n width: 10px;\n }\n\n .a-op {\n margin-left: 355%;\n margin-top: -166.5%;\n }\n\n .none {\n width: 30px;\n margin-left: 10%;\n margin-top: -3%;\n }\n\n #none {\n width: 10px;\n }\n\n .n-op {\n margin-left: 355%;\n margin-top: -166.5%;\n width: 150px;\n }\n\n .social-name {\n margin-top: 1%;\n margin-left: -3%;\n }\n\n #social-name {\n width: 500px;\n }\n\n #social-name::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n font-size: 1.3em;\n }\n\n .date {\n margin-top: -5%;\n margin-left: -3%;\n }\n\n #birthday {\n width: 500px;\n }\n\n #birthday::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n font-size: 1.3em;\n }\n\n .small {\n margin-left: 11%;\n position: absolute;\n top: 870px;\n }\n\n .cpf {\n margin-top: -2%;\n margin-left: -3%;\n }\n\n #cpf {\n width: 500px;\n }\n\n #cpf::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n font-size: 1.3em;\n }\n\n .email {\n margin-top: -4.5%;\n margin-left: -3%;\n }\n\n #email {\n width: 500px;\n }\n\n #email::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n font-size: 1.3em;\n }\n\n .country {\n margin-top: -4.5%;\n margin-left: -3%;\n }\n\n #country {\n width: 500px;\n }\n\n #country::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n font-size: 1.3em;\n }\n\n .profile-photo2 {\n margin-top: -2%;\n margin-left: 10.5%;\n }\n }\n"], ["\n\n // Mobile\n \n .mobile {\n display: block;\n justify-content: space-between;\n }\n\n .tablet-desktops {\n display: none;\n }\n\n * {\n color: white;\n font-family: 'Poppins-Medium';\n }\n\n height: 200vh;\n\n background: linear-gradient(180deg, #0A53B5 0%, #0081E8 100%);\n\n h1 {\n padding-top: 15%;\n margin-left: 26%;\n font-size: 1.3em;\n }\n\n form {\n margin-top: 10%;\n margin-left: 9%;\n }\n\n #name::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n font-size: 1.1em;\n }\n\n .gender {\n margin-left: -15%;\n font-family: 'Poppins-Regular';\n }\n\n .gender-txt {\n font-size: 1.1em;\n margin-top: 8%;\n margin-left: 7%;\n font-family: 'Poppins-Medium';\n }\n\n .man {\n margin-left: -15%;\n }\n\n .man-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .woman {\n margin-left: -15%;\n }\n\n .woman-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .transvestite {\n margin-left: -15%;\n }\n\n .t1-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .no-binary {\n margin-left: -15%;\n }\n\n .nb-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .trans {\n margin-left: -15%;\n }\n\n .t2-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .another {\n margin-left: -15%;\n }\n\n .a-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .none {\n margin-left: -15%;\n }\n\n .n-op {\n margin-left: 40%;\n margin-top: -10.5%;\n }\n\n .social-name {\n margin-top: 7%;\n }\n\n #social-name::-webkit-input-placeholder {\n font-size: 1.1em;\n }\n\n Small {\n margin-left: 7%;\n }\n\n #cpf::-webkit-input-placeholder {\n font-size: 1.1em;\n }\n\n #email::-webkit-input-placeholder {\n font-size: 1.1em;\n }\n\n #country::-webkit-input-placeholder {\n font-size: 1.1em;\n }\n\n .photo {\n display: none;\n }\n\n .profile-photo {\n margin-top: 5%;\n }\n\n .choose-a-image {\n margin-top: 3%;\n color: black;\n font-weight: bold;\n background-color: white;\n border: none;\n width: 210px;\n height: 50px;\n align-items: center;\n border-radius: 10px;\n }\n\n .choose-a-image:active {\n margin-top: 3%;\n color: black;\n font-weight: bold;\n background-color: #ffffffca;\n border: none;\n width: 210px;\n height: 50px;\n align-items: center;\n border-radius: 10px;\n }\n\n label{\n position: absolute;\n color: black;\n margin-left: 5%;\n top: 1118px;\n font-size: 0.9em;\n }\n\n .save {\n background-color: #93B413;\n border: none;\n margin-top: 12%;\n margin-left: 18%;\n width: 150px;\n height: 50px;\n font-size: 1.5em;\n border-radius: 19px;\n }\n\n .save:active {\n background-color: #86a40f;\n border: none;\n margin-top: 12%;\n margin-left: 18%;\n width: 150px;\n height: 50px;\n font-size: 1.5em;\n border-radius: 19px;\n }\n\n // Tablet\n @media(min-width: 768px) {\n\n height: 191vh;\n\n .mobile {\n display: none;\n }\n\n .tablet-desktops {\n display: block;\n justify-content: space-between;\n }\n\n background: linear-gradient(180deg, #0A53B5 0%, #0A53B5 100%);\n\n header {\n background-color: #2F99BF;\n height: 200px;\n }\n\n .search {\n width: 30px;\n height: 30px;\n margin-top: 9%;\n margin-left: 8%;\n }\n\n .box-1 {\n margin-top: -9.5%;\n margin-left: 20%;\n text-align: center;\n background-color: #0081E8;\n width: 170px;\n height: 130px;\n }\n\n .amount-documents {\n font-size: 4em;\n }\n\n .documents {\n margin-top: -10%;\n }\n\n .box-2 {\n margin-top: -17%;\n margin-left: 50%;\n text-align: center;\n background-color: #F47216;\n width: 170px;\n height: 130px;\n }\n\n .amount-users {\n font-size: 4em;\n }\n\n .users {\n margin-top: -10%;\n }\n\n .profile-photo {\n position: absolute;\n top: 160px;\n margin-left: 79%;\n width: 110px;\n height: 110px;\n }\n\n #your-name {\n margin-left: 80%;\n margin-top: -3%;\n }\n\n form {\n border-radius: 19px;\n background: linear-gradient(180deg, #07B3FD 0%, #0b58bc 100%);\n width: 630px;\n }\n \n h1 {\n font-size: 2em;\n margin-left: 31.5%;\n padding-top: 5%;\n }\n\n .name {\n margin-top: 1%;\n margin-left: -3%;\n }\n\n #name {\n width: 500px;\n }\n\n #name::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n font-size: 1.3em;\n }\n\n .gender-txt {\n font-size: 1.5em;\n margin-top: 1%;\n margin-left: 10%;\n }\n\n span {\n color: #F47216;\n margin-left: -50%;\n }\n\n .man {\n width: 30px;\n margin-left: 10%;\n margin-top: -3%;\n }\n\n #man {\n width: 10px;\n }\n\n .man-op {\n margin-left: 355%;\n margin-top: -166.5%;\n }\n\n .woman {\n width: 30px;\n margin-left: 29%;\n margin-top: -7%;\n }\n\n #woman {\n width: 10px;\n }\n\n .woman-op {\n margin-left: 355%;\n margin-top: -166.5%;\n }\n\n .transvestite {\n width: 30px;\n margin-left: 47%;\n margin-top: -7%;\n }\n\n #transvestite {\n width: 10px;\n }\n\n .t1-op {\n margin-left: 355%;\n margin-top: -166.5%;\n }\n\n .no-binary {\n width: 30px;\n margin-left: 10%;\n margin-top: -3%;\n }\n\n #no-binary {\n width: 10px;\n }\n\n .nb-op {\n margin-left: 355%;\n margin-top: -166.5%;\n width: 105px;\n }\n\n .trans {\n width: 30px;\n margin-left: 29%;\n margin-top: -7%;\n }\n\n #trans {\n width: 10px;\n }\n\n .t2-op {\n margin-left: 355%;\n margin-top: -166.5%;\n }\n\n .another {\n width: 30px;\n margin-left: 47%;\n margin-top: -7%;\n }\n\n #another {\n width: 10px;\n }\n\n .a-op {\n margin-left: 355%;\n margin-top: -166.5%;\n }\n\n .none {\n width: 30px;\n margin-left: 10%;\n margin-top: -3%;\n }\n\n #none {\n width: 10px;\n }\n\n .n-op {\n margin-left: 355%;\n margin-top: -166.5%;\n width: 150px;\n }\n\n .social-name {\n margin-top: 1%;\n margin-left: -3%;\n }\n\n #social-name {\n width: 500px;\n }\n\n #social-name::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n font-size: 1.3em;\n }\n\n .date {\n margin-top: -5%;\n margin-left: -3%;\n }\n\n #birthday {\n width: 500px;\n }\n\n #birthday::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n font-size: 1.3em;\n }\n\n .small {\n margin-left: 11%;\n position: absolute;\n top: 870px;\n }\n\n .cpf {\n margin-top: -2%;\n margin-left: -3%;\n }\n\n #cpf {\n width: 500px;\n }\n\n #cpf::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n font-size: 1.3em;\n }\n\n .email {\n margin-top: -4.5%;\n margin-left: -3%;\n }\n\n #email {\n width: 500px;\n }\n\n #email::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n font-size: 1.3em;\n }\n\n .country {\n margin-top: -4.5%;\n margin-left: -3%;\n }\n\n #country {\n width: 500px;\n }\n\n #country::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n font-size: 1.3em;\n }\n\n .profile-photo2 {\n margin-top: -2%;\n margin-left: 10.5%;\n }\n }\n"]))); var CreateUserPg = function () { return (React.createElement(CreateUserComponent, null, React.createElement("nav", { className: 'mobile' }, @@ -81,7 +81,35 @@ var CreateUserPg = function () { React.createElement("p", { className: 'man-op' }, "Masculino")), React.createElement("div", { className: 'woman' }, React.createElement(Input_1["default"], { type: 'radio', name: 'gender', id: 'woman', defaultValue: 'F' }), - React.createElement("p", { className: 'woman-op' }, "Feminino"))))))); + React.createElement("p", { className: 'woman-op' }, "Feminino")), + React.createElement("div", { className: 'transvestite' }, + React.createElement(Input_1["default"], { type: 'radio', name: 'gender', id: 'transvestite', defaultValue: 'T1' }), + React.createElement("p", { className: 't1-op' }, "Travesti")), + React.createElement("div", { className: 'no-binary' }, + React.createElement(Input_1["default"], { type: 'radio', name: 'gender', id: 'no-binary', defaultValue: 'NB' }), + React.createElement("p", { className: 'nb-op' }, "N\u00E3o Bin\u00E1rio")), + React.createElement("div", { className: 'trans' }, + React.createElement(Input_1["default"], { type: 'radio', name: 'gender', id: 'trans', defaultValue: 'T2' }), + React.createElement("p", { className: 't2-op' }, "Trans")), + React.createElement("div", { className: 'another' }, + React.createElement(Input_1["default"], { type: 'radio', name: 'gender', id: 'another', defaultValue: 'A' }), + React.createElement("p", { className: 'a-op' }, "Outros")), + React.createElement("div", { className: 'none' }, + React.createElement(Input_1["default"], { type: 'radio', name: 'gender', id: 'none', defaultValue: 'N' }), + React.createElement("p", { className: 'n-op' }, "Prefiro n\u00E3o dizer"))), + React.createElement("div", { className: 'social-name' }, + React.createElement(Input_1["default"], { type: "string", name: "social-name", id: "social-name", placeholder: 'Nome Social' })), + React.createElement("div", { className: 'date' }, + React.createElement(Input_1["default"], { type: 'date', name: 'birthday', id: 'birthday', placeholder: 'Data de nascimento' }), + React.createElement("br", null), + React.createElement("small", { className: 'small' }, "Digite a data de anivers\u00E1rio")), + React.createElement("div", { className: 'cpf' }, + React.createElement(Input_1["default"], { type: "number", name: "cpf", id: "cpf", placeholder: 'CPF' })), + React.createElement("div", { className: 'email' }, + React.createElement(Input_1["default"], { type: "email", name: "email", id: "email", placeholder: 'Email' })), + React.createElement("div", { className: 'country' }, + React.createElement(Input_1["default"], { type: "string", name: "country", id: "country", placeholder: 'Pa\u00EDs' })), + React.createElement("p", { className: 'profile-photo2' }, "Foto de Perfil"))))); }; exports["default"] = CreateUserPg; var templateObject_1; diff --git a/src/components/RecoveryYourEmail/RecoveryEmail.tsx b/src/components/RecoveryYourEmail/RecoveryEmail.tsx index 7d7040a..27e3926 100644 --- a/src/components/RecoveryYourEmail/RecoveryEmail.tsx +++ b/src/components/RecoveryYourEmail/RecoveryEmail.tsx @@ -49,11 +49,26 @@ const RecoveryEmailComponent = styled.section` } } background-image: url("/images/tablet-recuperar-senha.svg"); + background-repeat: no-repeat; } - //Desktop + //Small Screens - //Large Screen + @media(min-width: 992px) { + background-image: url("/images/992px-recuperar-senha.svg"); + height: 90vh; + } + + //Medium Screen + @media(min-width: 1200px) { + background-image: url("/images/1200px-recuperar-senha.svg"); + } + + //Large Screen + @media(min-width: 1600px) { + background-image: url("/images/1600px-recuperar-senha.svg"); + height: 80vh; + } ` const RecoveryEmail = function (){ diff --git a/src/components/RecoveryYourEmail/dist/RecoveryEmail.js b/src/components/RecoveryYourEmail/dist/RecoveryEmail.js index a7b2320..c65ed88 100644 --- a/src/components/RecoveryYourEmail/dist/RecoveryEmail.js +++ b/src/components/RecoveryYourEmail/dist/RecoveryEmail.js @@ -8,7 +8,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook exports.__esModule = true; var styled_1 = require("@emotion/styled"); var Input_1 = require("../Login/Input/Input"); -var RecoveryEmailComponent = styled_1["default"].section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n \n background: linear-gradient(180deg, #04a4e8 0%, #0A53B5 100%);\n .container-center{\n h3{\n padding: 40px;\n text-align: center;\n color: #ffffff;\n font-family:'Poppins-Bold';\n }\n .input-email{\n text-align: center;\n }\n .btn-confirm{\n text-align: center;\n .confirm{\n width: 170px;\n height: 50px;\n border-radius: 20px;\n border: none;\n background: #93B413;\n font-size: 1.6em;\n color: #ffffff;\n margin: 40px;\n }\n }\n }\n\n //tablet\n @media(min-width: 450px){\n .container-center{\n padding: 30px;\n form{\n margin-left: 30%;\n width: 300px;\n border-radius: 19px;\n background: linear-gradient(180deg, #07B3FD 0%, #0A53B5 100%);\n .input-email{\n #PhoneOrCPF{\n width: 200px;\n }\n }\n }\n }\n background-image: url(\"/images/tablet-recuperar-senha.svg\");\n }\n\n //Desktop\n\n //Large Screen\n"], ["\n \n background: linear-gradient(180deg, #04a4e8 0%, #0A53B5 100%);\n .container-center{\n h3{\n padding: 40px;\n text-align: center;\n color: #ffffff;\n font-family:'Poppins-Bold';\n }\n .input-email{\n text-align: center;\n }\n .btn-confirm{\n text-align: center;\n .confirm{\n width: 170px;\n height: 50px;\n border-radius: 20px;\n border: none;\n background: #93B413;\n font-size: 1.6em;\n color: #ffffff;\n margin: 40px;\n }\n }\n }\n\n //tablet\n @media(min-width: 450px){\n .container-center{\n padding: 30px;\n form{\n margin-left: 30%;\n width: 300px;\n border-radius: 19px;\n background: linear-gradient(180deg, #07B3FD 0%, #0A53B5 100%);\n .input-email{\n #PhoneOrCPF{\n width: 200px;\n }\n }\n }\n }\n background-image: url(\"/images/tablet-recuperar-senha.svg\");\n }\n\n //Desktop\n\n //Large Screen\n"]))); +var RecoveryEmailComponent = styled_1["default"].section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n \n background: linear-gradient(180deg, #04a4e8 0%, #0A53B5 100%);\n .container-center{\n h3{\n padding: 40px;\n text-align: center;\n color: #ffffff;\n font-family:'Poppins-Bold';\n }\n .input-email{\n text-align: center;\n }\n .btn-confirm{\n text-align: center;\n .confirm{\n width: 170px;\n height: 50px;\n border-radius: 20px;\n border: none;\n background: #93B413;\n font-size: 1.6em;\n color: #ffffff;\n margin: 40px;\n }\n }\n }\n\n //tablet\n @media(min-width: 450px){\n .container-center{\n padding: 30px;\n form{\n margin-left: 30%;\n width: 300px;\n border-radius: 19px;\n background: linear-gradient(180deg, #07B3FD 0%, #0A53B5 100%);\n .input-email{\n #PhoneOrCPF{\n width: 200px;\n }\n }\n }\n }\n background-image: url(\"/images/tablet-recuperar-senha.svg\");\n background-repeat: no-repeat;\n }\n\n //Small Screens\n\n @media(min-width: 992px) {\n background-image: url(\"/images/992px-recuperar-senha.svg\");\n height: 90vh;\n }\n\n //Medium Screen \n @media(min-width: 1200px) {\n background-image: url(\"/images/1200px-recuperar-senha.svg\");\n }\n\n //Large Screen \n @media(min-width: 1600px) {\n background-image: url(\"/images/1600px-recuperar-senha.svg\");\n height: 80vh;\n }\n"], ["\n \n background: linear-gradient(180deg, #04a4e8 0%, #0A53B5 100%);\n .container-center{\n h3{\n padding: 40px;\n text-align: center;\n color: #ffffff;\n font-family:'Poppins-Bold';\n }\n .input-email{\n text-align: center;\n }\n .btn-confirm{\n text-align: center;\n .confirm{\n width: 170px;\n height: 50px;\n border-radius: 20px;\n border: none;\n background: #93B413;\n font-size: 1.6em;\n color: #ffffff;\n margin: 40px;\n }\n }\n }\n\n //tablet\n @media(min-width: 450px){\n .container-center{\n padding: 30px;\n form{\n margin-left: 30%;\n width: 300px;\n border-radius: 19px;\n background: linear-gradient(180deg, #07B3FD 0%, #0A53B5 100%);\n .input-email{\n #PhoneOrCPF{\n width: 200px;\n }\n }\n }\n }\n background-image: url(\"/images/tablet-recuperar-senha.svg\");\n background-repeat: no-repeat;\n }\n\n //Small Screens\n\n @media(min-width: 992px) {\n background-image: url(\"/images/992px-recuperar-senha.svg\");\n height: 90vh;\n }\n\n //Medium Screen \n @media(min-width: 1200px) {\n background-image: url(\"/images/1200px-recuperar-senha.svg\");\n }\n\n //Large Screen \n @media(min-width: 1600px) {\n background-image: url(\"/images/1600px-recuperar-senha.svg\");\n height: 80vh;\n }\n"]))); var RecoveryEmail = function () { return (React.createElement(RecoveryEmailComponent, null, React.createElement("div", { className: 'container-center' },