Merge pull request #13 from roninchris/feat/sign-up-and-login

fix: responsive layouts
roninchris · Jun 6, 2023 · 2099075 · 2099075
2 parents f5c97f6 + e5165ed
commit 2099075
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/client/src/pages/login/Login.jsx b/client/src/pages/login/Login.jsx
@@ -54,7 +54,7 @@ const Login = () => {
               <button onClick={handleLogin}>Login</button>
             </form>
             <div className="redirect">
-              <span>Ainda não tem uma conta DevFinder?</span>
+              <span>Não possui uma conta?</span>
               <Link to="/register">
                 <p>Registre-se</p>
               </Link>

diff --git a/client/src/pages/login/login.scss b/client/src/pages/login/login.scss
@@ -14,6 +14,11 @@ font-family: 'Roboto', sans-serif;
   height: 100vh;
   display: flex;
   align-items: center;
+  justify-content: center;
+
+  @media(max-width: 64rem) {
+    background: var(--white);
+  }
 
     .content {
     display: flex;
@@ -24,6 +29,7 @@ font-family: 'Roboto', sans-serif;
     margin: 0 auto;
     @media (max-width: 64rem) {
       width: 100%;
+      gap: 0;
     }
 
       .left {
@@ -55,7 +61,7 @@ font-family: 'Roboto', sans-serif;
       gap: 40px;
       justify-content: center;
       @media (max-width: 64rem) {
-        min-width: 100%;
+        min-width: unset;
         width: 100%;
       }
 

diff --git a/client/src/pages/register/Register.jsx b/client/src/pages/register/Register.jsx
@@ -66,7 +66,7 @@ const Register = () => {
                 onChange={handleChange}
               />
               {err && err}
-              <button onClick={handleClick}>Registre-se</button>
+              <button onClick={handleClick}><Link to="/login" >Registre-se</Link></button>
             </form>
             <div className="redirect">
               <span>Já tem uma conta?</span>

diff --git a/client/src/pages/register/register.scss b/client/src/pages/register/register.scss
@@ -15,6 +15,10 @@
   height: 100vh;
   display: flex;
   align-items: center;
+  justify-content: center;
+  @media(max-width: 64rem) {
+    background: var(--white);
+  }
 
     .content {
     display: flex;
@@ -25,6 +29,7 @@
     margin: 0 auto;
     @media (max-width: 64rem) {
       width: 100%;
+      gap: 0;
     }
 
       .left {
@@ -56,7 +61,7 @@
       gap: 40px;
       justify-content: center;
       @media (max-width: 64rem) {
-        min-width: 100%;
+        min-width: unset;
         width: 100%;
       }
 
@@ -85,6 +90,10 @@
           font-weight: bold;
           transition: all .2s ease-out;
           cursor: pointer;
+          a {
+            color: #ffffff;
+            text-decoration: none;
+          }
           &:hover {
             transform: scale(1.04);
           }