2021-1-capstone-design1 / GCL_Project1

Go to a project
Toggle navigation Toggle navigation pinning
안형욱
f125f274 1 parent 679698fc

chore: login form 로고 추가

Inline Side-by-side
Showing 3 changed files with 36 additions and 8 deletions
1 +import React from 'react';
2 +import styled from 'styled-components';
3 +
4 +const LogoWrap = styled.div`
5 + display: flex;
6 + margin-top: 11%;
7 + width: 100%;
8 + align-items: center;
9 + justify-content: center;
10 +`;
11 +
12 +function Logo() {
13 + return (
14 + <LogoWrap>
15 + <img src="eDrive_logo.png" alt="" />
16 + </LogoWrap>
17 + );
18 +}
19 +
20 +export default Logo;
...@@ -26,11 +26,10 @@ const Document = ({ ...@@ -26,11 +26,10 @@ const Document = ({
26 <Container 26 <Container
27 style={{ 27 style={{
28 padding: '2rem 2rem', 28 padding: '2rem 2rem',
29 - margin: '2rem 4rem', 29 + margin: '0 4rem',
30 - border: '1px solid black',
31 }} 30 }}
32 > 31 >
33 - <div style={{ display: 'flex' }}> 32 + <div style={{ display: 'flex', margin: '0.5rem 0' }}>
34 <File filename={filename} filepath={filePath} /> 33 <File filename={filename} filepath={filePath} />
35 <Popover 34 <Popover
36 opened={opened} 35 opened={opened}
...@@ -39,7 +38,13 @@ const Document = ({ ...@@ -39,7 +38,13 @@ const Document = ({
39 <FaSearchPlus 38 <FaSearchPlus
40 onMouseEnter={() => setOpened(true)} 39 onMouseEnter={() => setOpened(true)}
41 onMouseLeave={() => setOpened(false)} 40 onMouseLeave={() => setOpened(false)}
42 - style={{ marginTop: 3, marginLeft: 3, color: '#868e96' }} 41 + style={{
42 + marginTop: 3,
43 + marginLeft: 3,
44 + color: '#868e96',
45 + border: 'none',
46 + outline: 'none',
47 + }}
43 /> 48 />
44 } 49 }
45 position="bottom-start" 50 position="bottom-start"
......
...@@ -4,6 +4,7 @@ import { useForm } from '@mantine/hooks'; ...@@ -4,6 +4,7 @@ import { useForm } from '@mantine/hooks';
4 import styled from 'styled-components'; 4 import styled from 'styled-components';
5 import { Link } from 'react-router-dom'; 5 import { Link } from 'react-router-dom';
6 import palette from '../../lib/styles/palette'; 6 import palette from '../../lib/styles/palette';
7 +import Logo from '../Logo';
7 8
8 const LoginFormBlock = styled.div` 9 const LoginFormBlock = styled.div`
9 display: flex; 10 display: flex;
...@@ -15,7 +16,9 @@ const ButtonBlock = styled.div` ...@@ -15,7 +16,9 @@ const ButtonBlock = styled.div`
15 justify-content: space-between; 16 justify-content: space-between;
16 margin-top: 2rem; 17 margin-top: 2rem;
17 `; 18 `;
18 -const FormBlock = styled.div``; 19 +const FormBlock = styled.div`
20 + padding-top: 2rem;
21 +`;
19 const LoginForm = () => { 22 const LoginForm = () => {
20 const { onSubmit, errors, values, setFieldValue } = useForm({ 23 const { onSubmit, errors, values, setFieldValue } = useForm({
21 initialValues: { 24 initialValues: {
...@@ -31,16 +34,16 @@ const LoginForm = () => { ...@@ -31,16 +34,16 @@ const LoginForm = () => {
31 <LoginFormBlock> 34 <LoginFormBlock>
32 <Container 35 <Container
33 size={CONTAINER_SIZES.xs} 36 size={CONTAINER_SIZES.xs}
34 - padding="xs" 37 + padding={20}
35 style={{ 38 style={{
36 display: 'block', 39 display: 'block',
37 width: CONTAINER_SIZES.xs, 40 width: CONTAINER_SIZES.xs,
38 padding: '5rem', 41 padding: '5rem',
39 - border: `1px ${palette.gray3} solid`, 42 + border: `1px ${palette.gray5} solid`,
40 borderRadius: '5px', 43 borderRadius: '5px',
41 }} 44 }}
42 > 45 >
43 - <h2>Logo</h2> 46 + <Logo />
44 <FormBlock> 47 <FormBlock>
45 <TextInput 48 <TextInput
46 required 49 required
......