Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Revamped the signup and login page #88

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Revamped the signup and login page #88

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0392e25
changes in signup and login part
psankhe28 Feb 27, 2023
bd103ea
minor change
psankhe28 Feb 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 8 additions & 5 deletions com-dict-client/src/components/Login/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,26 +92,29 @@ function App(props) {
backgroundColor: "#FFFFFF ",
border: 0,
padding: "1vmin",
width: "100%",
width: "100%"
}}
headStyle={{
backgroundColor: "#FFFFFF ",
fontSize: "6vmin",
color: "#black",
border: 0,
textAlign: "center",
textAlign: "left",
paddingLeft: "28%"

}}
bodyStyle={{ backgroundColor: "#FFFFFF", border: 0 }}
>
<NormalLoginForm />

<div style={{marginLeft: "16%"}}>
<NormalLoginForm/>
</div>
<Divider> OR </Divider>

<SocialLogin />
</Card>

<div style={{ textAlign: "center" }}>
<Text strong>Don't have an account?</Text>
<Text strong>Don't have an account?&nbsp;</Text>
<a href="/signup">Sign Up here</a>
</div>
</Col>
Expand Down
11 changes: 7 additions & 4 deletions com-dict-client/src/components/Login/loginForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,11 @@ const NormalLoginForm = () => {
remember: true,
}}
onFinish={onSubmit}
style={{width: '80%',margin:' 0 10%'}}
>
<Form.Item
name="email"
style={{width: '80%'}}
rules={[
{
required: true,
Expand All @@ -40,6 +42,7 @@ const NormalLoginForm = () => {
</Form.Item>
<Form.Item
name="password"
style={{width: '80%'}}
rules={[
{
required: true,
Expand All @@ -53,18 +56,18 @@ const NormalLoginForm = () => {
placeholder="Password"
/>
</Form.Item>
<Form.Item>
<Form.Item style={{marginLeft:'20px'}}>
<Form.Item name="remember" valuePropName="checked" noStyle>
<Checkbox>Remember me</Checkbox>
</Form.Item>

<a href="#1" className="login-form-forgot">
<a href="#1" className="login-form-forgot" style={{marginRight:'120px'}}>
Forgot password
</a>
</Form.Item>

<Form.Item>
<Button type="primary" htmlType="submit" className="login-form-button">
<Form.Item style={{textAlign:'center',paddingRight: "20%"}}>
<Button type="primary" htmlType="submit" className="login-form-button" style={{maxWidth: '200px',width:'50%',paddingBottom:'10px',borderRadius:'10px',}}>
Sign in
</Button>
</Form.Item>
Expand Down
12 changes: 6 additions & 6 deletions com-dict-client/src/components/Login/socialLogin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ function SocialLogin() {
await signInWithProviderID(provider)(firebase, history);
};
return (
<div>
<div style={{width:'80%',paddingLeft:'20%' }}>
<Row gutter={[16, 16]}>
<Col span={24} style={{ textAlign: "center" }}>
<Col span={24} style={{ textAlign: "center",paddingBottom:'5px' }}>
<Text strong>Login using your social media account</Text>
</Col>
</Row>
Expand All @@ -38,11 +38,11 @@ function SocialLogin() {
md={24}
sm={24}
xs={24}
style={{ textAlign: "center" }}
style={{ textAlign: "center"}}
>
<Button
className="social_btn"
style={{ backgroundColor: "#0284E1", width: "100%" }}
style={{ backgroundColor: "#0284E1", width: "80%",paddingBottom:'10px',borderRadius:'10px' }}
icon={<FacebookFilled />}
// size="large"
onClick={() => loginWithProviderID("facebook")}
Expand All @@ -60,7 +60,7 @@ function SocialLogin() {
>
<Button
className="social_btn"
style={{ backgroundColor: "#64CFF6", width: "100%" }}
style={{ backgroundColor: "#64CFF6", width: "80%",paddingBottom:'10px',borderRadius:'10px'}}
icon={<TwitterOutlined />}
// size="large"
onClick={() => loginWithProviderID("twitter")}
Expand All @@ -78,7 +78,7 @@ function SocialLogin() {
>
<Button
className="social_btn"
style={{ backgroundColor: "#F4414B", width: "100%" }}
style={{ backgroundColor: "#F4414B", width: "80%",paddingBottom:'10px',borderRadius:'10px'}}
icon={<GoogleOutlined />}
onClick={loginWithGoogle}
// size="large"
Expand Down
10 changes: 6 additions & 4 deletions com-dict-client/src/components/Signup/SignUp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ const RegistrationForm = () => {
<Row>
<Row>
<Col span={1}></Col>
<Col span={23}>
<Col span={20} style={{ textAlign: "center" }}>
<span style={{ textAlign: "center" }}>
<Title level={1}>BECOME A PART OF OUR COMMUNITY TODAY!!!</Title>
</span>
Expand All @@ -98,7 +98,7 @@ const RegistrationForm = () => {
<Row align="middle">
<img
alt="signup"
style={{ maxWidth: "120%", paddingTop: "5%" }}
style={{ maxWidth: "120%", paddingTop: "5%",paddingLeft: "25%" }}
src={signup}
/>
</Row>
Expand All @@ -113,6 +113,7 @@ const RegistrationForm = () => {
name="register"
onFinish={onFinish}
scrollToFirstError
style={{ maxWidth: "80%",marginLeft:'30%'}}
>
<Form.Item
name="email"
Expand Down Expand Up @@ -235,12 +236,13 @@ const RegistrationForm = () => {

<Row gutter={8}>
<Col span={6}></Col>
<Col span={18}>
<Form.Item>
<Col span={10}>
<Form.Item style={{textAlign:'center'}}>
<Button
type="primary"
htmlType="submit"
className="register-form-button"
style={{borderRadius: '5px',padding:'5px',textAlign: 'center'}}
>
Register
</Button>
Expand Down
11 changes: 6 additions & 5 deletions com-dict-client/src/components/Signup/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const formItemLayout = {
span: 16,
},
lg: {
span: 18,
span: 2,
},
},
};
Expand Down Expand Up @@ -96,16 +96,16 @@ const RegistrationForm = () => {
</span>
</Col>
</Row>
<Row style={{ paddingTop: "3vmin" }}>
<Row style={{ paddingTop: "3vmin",textAlign:'center' }}>
<Col xl={1} lg={0}></Col>
<Col xl={7} lg={8} md={0} sm={0} xs={0} style={{ textAlign: "center" }}>
<Row align="middle">
<img style={{ maxWidth: "120%", paddingTop: "5%" }} src={signup} />
<img style={{ maxWidth: "120%", paddingTop: "50% !important" }} src={signup} alt='signup'/>
</Row>
</Col>
<Col xl={0} lg={1} md={1} sm={1} xs={1}></Col>
<Row></Row>
<Col xl={14} lg={12} md={22} sm={22} xs={22}>
<Col xl={10} lg={2} md={2} sm={2} xs={2}>
<Form
{...formItemLayout}
form={form}
Expand All @@ -116,6 +116,7 @@ const RegistrationForm = () => {
<Form.Item
name="email"
label="E-mail"
style={{ maxWidth: "1%"}}
rules={[
{
type: "email",
Expand All @@ -127,7 +128,7 @@ const RegistrationForm = () => {
},
]}
>
<Input />
<Input style={{ maxWidth: "1%"}}/>
</Form.Item>

<Form.Item
Expand Down
109 changes: 54 additions & 55 deletions com-dict-client/src/containers/home/arrow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,62 @@
.arrows {
position: relative;
width: 12vmin;
height: 12vmin;
transform: translate(-50%, -50%);
position: relative;
width: 12vmin;
height: 12vmin;
transform: translate(-50%, -50%);
}

.arrows:before {
content: '';
position: absolute;
margin-top: 10vmin;
width: 100%;
height: 100%;
border-left: 26.66667px solid rgba(0, 0, 0, 0.7);
border-bottom: 26.66667px solid rgba(0, 0, 0, 0.7);
transform: translate(26.66667px, 106.66667px) rotate(-45deg);
animation: arrows 2s linear infinite;
}

.arrows:after {
content: '';
position: absolute;
margin-top: 10vmin;
width: 100%;
height: 100%;
border-left: 26.66667px solid rgba(0, 0, 0, 0.7);
border-bottom: 26.66667px solid rgba(0, 0, 0, 0.7);
transform: translate(53.33333px, 0px) rotate(-45deg);
animation: arrows 2s linear infinite -1s;
}

@keyframes arrows {
0% {
border-left: 26.66667px solid transparent;
border-bottom: 26.66667px solid transparent;
transform: translate(-13.33333px, -53.33333px) rotate(-45deg);
}

.arrows:before {
content: '';
position: absolute;
margin-top: 10vmin;
width: 100%;
height: 100%;
border-left: 26.66667px solid rgba(0, 0, 0, 0.7);
border-bottom: 26.66667px solid rgba(0, 0, 0, 0.7);
transform: translate(26.66667px, 106.66667px) rotate(-45deg);
animation: arrows 2s linear infinite;
10%, 90% {
border-left: 26.66667px solid transparent;
border-bottom: 26.66667px solid transparent;
}

.arrows:after {
content: '';
position: absolute;
margin-top: 10vmin;
width: 100%;
height: 100%;
50% {
border-left: 26.66667px solid rgba(0, 0, 0, 0.7);
border-bottom: 26.66667px solid rgba(0, 0, 0, 0.7);
transform: translate(53.33333px, 0px) rotate(-45deg);
animation: arrows 2s linear infinite -1s;
transform: translate(-13.33333px, 0px) rotate(-45deg);
}

@keyframes arrows {
0% {
border-left: 26.66667px solid transparent;
border-bottom: 26.66667px solid transparent;
transform: translate(-13.33333px, -53.33333px) rotate(-45deg);
}
10%, 90% {
border-left: 26.66667px solid transparent;
border-bottom: 26.66667px solid transparent;
}
50% {
border-left: 26.66667px solid rgba(0, 0, 0, 0.7);
border-bottom: 26.66667px solid rgba(0, 0, 0, 0.7);
transform: translate(-13.33333px, 0px) rotate(-45deg);
}
100% {
border-left: 26.66667px solid transparent;
border-bottom: 26.66667px solid transparent;
transform: translate(-13.33333px, 53.33333px) rotate(-45deg);
}
100% {
border-left: 26.66667px solid transparent;
border-bottom: 26.66667px solid transparent;
transform: translate(-13.33333px, 53.33333px) rotate(-45deg);
}
}

#rotate-text {
padding-top: 20vmin;
margin-left: -30vmin;
line-height: 2vmin;
width: 40vmin;
/* display:block; */
transform: rotate(-90deg);
transform: rotate(-90deg);
}

#rotate-text {
padding-top: 20vmin;
margin-left: -30vmin;
line-height: 2vmin;
width: 40vmin;
/* display:block; */
transform: rotate(-90deg);
transform: rotate(-90deg);
}