From cc68a3e51749ff6f500c930719c6aa3b6c57bd8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=A3=20Clemente?= <cauaclemente07@gmail.com>
Date: Thu, 13 Jun 2024 12:23:31 -0300
Subject: [PATCH] feat: created the registration screen responsiveness

---
 src/components/molecules/Calendar/styles.ts           |  8 +++++++-
 .../FormRegister/FormRegisterFields/styles.ts         |  1 -
 src/components/molecules/FormRegister/style.ts        | 11 +++++++++++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/molecules/Calendar/styles.ts b/src/components/molecules/Calendar/styles.ts
index e57f95a6..4124a4c2 100644
--- a/src/components/molecules/Calendar/styles.ts
+++ b/src/components/molecules/Calendar/styles.ts
@@ -5,12 +5,18 @@ import * as Popover from '@radix-ui/react-popover'
 
 export const Container = styled(PopoverContent)`
   background-color: #fff;
+  position: absolute;
+  z-index: 99;
   border-radius: 0.5rem;
   padding: 1rem 2.5rem 0.5rem;
-  position: relative;
   max-width: 21rem;
   transition: none;
   box-shadow: 2px 0 16px rgba(0, 0, 0, 0.1);
+
+  @media screen and (max-width: 350px) {
+    max-width: 16rem;
+    padding: 1rem 2.5rem 0.5rem 1.8rem;
+  }
 `
 
 export const CalendarActions = styled.div`
diff --git a/src/components/molecules/FormRegister/FormRegisterFields/styles.ts b/src/components/molecules/FormRegister/FormRegisterFields/styles.ts
index b2aaa9f6..5716c4de 100644
--- a/src/components/molecules/FormRegister/FormRegisterFields/styles.ts
+++ b/src/components/molecules/FormRegister/FormRegisterFields/styles.ts
@@ -22,7 +22,6 @@ export const DatePickerContainer = styled.label`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-
   font-size: 0.875rem;
   color: ${(props) => props.theme.colors.gray[700]};
 
diff --git a/src/components/molecules/FormRegister/style.ts b/src/components/molecules/FormRegister/style.ts
index 2abe5299..462a0948 100644
--- a/src/components/molecules/FormRegister/style.ts
+++ b/src/components/molecules/FormRegister/style.ts
@@ -13,6 +13,16 @@ export const ContainerForm = styled.div`
   background: ${(props) => props.theme.colors.white};
   border-radius: 12px;
   padding: 2rem;
+
+  @media screen and (max-width: 600px) {
+    width: 80%;
+    top: 7rem;
+  }
+  @media screen and (max-width: 450px) {
+    width: 90%;
+    margin-right: -20px;
+    top: 4rem;
+  }
 `
 
 export const ContainerRegister = styled.div`
@@ -60,6 +70,7 @@ export const ContainerTerms = styled.div`
 
 export const TxtTerms = styled.label`
   font-size: 0.875rem;
+  text-align: start;
   width: 100%;
   color: ${(props) => props.theme.colors.blue[500]};
   line-height: 150%;