feat: new login mobile device

frontend/src/Auth/Styles.ts

@@ -4,10 +4,20 @@ export const Container = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100vw;
   height: 100vh;
+
+  @media (max-width: 600px) {
+    position: relative;
+    top: 30%;
+    font-size: 150px;
+  }
 `;
 
 export const LoginWrapper = styled.div`
-  width: 60%;
+  width: 70%;
+
+  @media (max-width: 600px) {
+    width: 90%;
+    margin-top: 50vh;
+  }
 `;

frontend/src/shared/components/Login/Styles.ts

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import Button from 'shared/components/Button';
 import { mixin } from 'shared/utils/styles';
+import AccessAccount from 'shared/undraw/AccessAccount';
 
 export const Wrapper = styled.div`
   background: #eff2f7;
@@ -15,6 +16,12 @@ export const Column = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  @media (max-width: 600px) {
+    svg {
+      display: none;
+    }
+    position: absolute;
+  }
 `;
 
 export const LoginFormWrapper = styled.div`
@@ -25,18 +32,47 @@ export const LoginFormWrapper = styled.div`
 export const LoginFormContainer = styled.div`
   min-height: 505px;
   padding: 2rem;
+  @media (max-width: 600px) {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border: solid black 1px;
+    width: 600px;
+    height: 1100px;
+    box-shadow: 20px 20px 50px black;
+  }
+  @media (min-height: 641px) and (max-height: 653px) {
+    margin-top: 25%;
+  }
+  @media (min-height: 654px) and (max-height: 823px) and (max-width: 500px) {
+    margin-top: -20%;
+  }
+  @media (min-height: 480px) and (max-height: 639px) {
+    margin-top: 20%;
+  }
 `;
 
 export const Title = styled.h1`
   color: #ebeefd;
   font-size: 18px;
   margin-bottom: 14px;
+  @media (max-width: 600px) {
+    font-size: 38px;
+    margin-top: 50px;
+    text-align: center;
+  }
 `;
 
 export const SubTitle = styled.h2`
   color: #c2c6dc;
   font-size: 14px;
   margin-bottom: 14px;
+  @media (max-width: 600px) {
+    margin-top: 30px;
+    font-size: 24.5px;
+    margin-bottom: 90px;
+    text-align: center;
+  }
 `;
 export const Form = styled.form`
   display: flex;
@@ -48,6 +84,10 @@ export const FormLabel = styled.label`
   font-size: 12px;
   position: relative;
   margin-top: 14px;
+  @media (max-width: 600px) {
+    font-size: 35px;
+    font-weight: bold;
+  }
 `;
 
 export const FormTextInput = styled.input`
@@ -59,28 +99,92 @@ export const FormTextInput = styled.input`
   font-size: 1rem;
   color: #c2c6dc;
   border-radius: 5px;
+
+  @media (max-width: 600px) {
+    border: 5px solid rgba(0, 0, 0, 0.2);
+    border-radius: 5%;
+    font-size: 30px;
+    background-color: #353D64;
+    color: black;
+    padding: 0.7rem 1rem 1rem 3rem;
+    text-align: center;
+    &::placeholder {
+      visibility: hidden;
+    }
+
+    &:not(:placeholder-shown) {
+      background-color: white;
+    }
+  }
 `;
 
 export const FormIcon = styled.div`
   top: 30px;
   left: 16px;
   position: absolute;
+
+  @media (max-width: 600px) {
+    svg {
+      width: 40px;
+      height: 40px;
+      display: inline;
+      position: absolute;
+      top: 30px;
+      left: -5px;
+    }
+  }
 `;
 
 export const FormError = styled.span`
   font-size: 0.875rem;
-  color: ${props => props.theme.colors.danger};
+  color: ${(props) => props.theme.colors.danger};
+  @media (max-width: 600px) {
+    font-size: 1.8rem;
+  }
 `;
 
-export const LoginButton = styled(Button)``;
+export const LoginButton = styled(Button)`
+  @media (max-width: 600px) {
+    span {
+      font-size: 40px;
+      text-align: center;
+      width: 100%;
+    }
+    align-self: center;
+    position: absolute; 
+    right: 0px;
+    margin-top: 40%;
+    width: 100%;
+    &:hover {
+      box-shadow: 5px 5px 20px white;
+    }
+  }
+`;
 
 export const ActionButtons = styled.div`
   margin-top: 17.5px;
   display: flex;
   justify-content: space-between;
+  @media (max-width: 600px) {
+    width: 150px;
+    align-content: center;
+    font-size: 50px;
+  }
 `;
 
-export const RegisterButton = styled(Button)``;
+export const RegisterButton = styled(Button)`
+  @media (max-width: 600px) {
+    span {
+      font-size: 40px;
+      text-align: center;
+      width: 100%;
+    }
+    width: 100%;
+    position: absolute;
+    left: 0px;
+    margin-top: 29%;
+  }
+`;
 
 export const LogoTitle = styled.div`
   font-size: 24px;
@@ -88,6 +192,9 @@ export const LogoTitle = styled.div`
   margin-left: 12px;
   transition: visibility, opacity, transform 0.25s ease;
   color: #7367f0;
+  @media (max-width: 600px) {
+    font-size: 60px;
+  }
 `;
 
 export const LogoWrapper = styled.div`
@@ -100,5 +207,16 @@ export const LogoWrapper = styled.div`
   padding-bottom: 16px;
   margin-bottom: 24px;
   color: rgb(222, 235, 255);
-  border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
+  border-bottom: 1px solid ${(props) => mixin.rgba(props.theme.colors.alternate, 0.65)};
+  @media (max-width: 600px) {
+    svg {
+      display: inline;
+      width: 80px;
+      height: 80px;
+    }
+  }
 `;
+
+
+
+

frontend/src/shared/components/Login/index.tsx

@@ -64,7 +64,11 @@ const Login = ({ onSubmit }: LoginProps) => {
             <Form onSubmit={handleSubmit(loginSubmit)}>
               <FormLabel htmlFor="username">
                 Username
-                <FormTextInput type="text" {...register('username', { required: 'Username is required' })} />
+                <FormTextInput
+                  placeholder="Username"
+                  type="text"
+                  {...register('username', { required: 'Username is required' })}
+                />
                 <FormIcon>
                   <User width={20} height={20} />
                 </FormIcon>
@@ -72,7 +76,11 @@ const Login = ({ onSubmit }: LoginProps) => {
               {errors.username && <FormError>{errors.username.message}</FormError>}
               <FormLabel htmlFor="password">
                 Password
-                <FormTextInput type="password" {...register('password', { required: 'Password is required' })} />
+                <FormTextInput
+                  placeholder="Password"
+                  type="password"
+                  {...register('password', { required: 'Password is required' })}
+                />
                 <FormIcon>
                   <Lock width={20} height={20} />
                 </FormIcon>