Skip to content

Commit 1ea6eef

Browse files
VivekkheniVivekkheni
committed
design related issue like responsive button design and also set ui related issue fix
1 parent f61f253 commit 1ea6eef

File tree

3 files changed

+89
-87
lines changed

3 files changed

+89
-87
lines changed

‎src/components/global/minifooter.tsx‎

Lines changed: 18 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
import Image from 'next/image';
3-
import copy from '../../../public/images/copy.png';
2+
import Copyright from './footer/Copyright';
3+
import Donations from './footer/Donations';
44

55
const MiniFooter = () => {
66
const handleCopyClick = () => {
@@ -16,39 +16,23 @@ const MiniFooter = () => {
1616
};
1717
return (
1818
<>
19-
<div className="px-24 container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
20-
<p className=" first-text text-white text-xl font-weight-bold">jiffyscan.xyz@2023</p>
21-
<div style={{ display: 'flex', gap: 10 }}>
22-
<p className=" text-white text-xl font-weight-bold">❤ Donations: 0x37b415...C8392f </p>
23-
<Image src={copy} onClick={handleCopyClick} width={22} alt="" />
19+
<footer className="bg-dark-600 py-8 md:py-12 text-white">
20+
<div className="container flex flex-col gap-8 md:gap-12">
21+
<div className=" flex md:flex-row flex-col md:justify-between md:items-center">
22+
<div className="flex items-center gap-1 md:ml-0 -ml-3"></div>
23+
</div>
24+
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
25+
<div>
26+
<div className="mb-6"></div>
27+
<p className="text-sm"></p>
28+
</div>
29+
</div>
30+
<div className="flex flex-wrap gap-3 md:gap-10 justify-between ">
31+
<Copyright />
32+
<Donations />
33+
</div>
2434
</div>
25-
</div>
26-
27-
<style>
28-
{`
29-
30-
@media (max-width: 576px) {
31-
.container {
32-
// padding: 0 10px ;
33-
flex-direction:column;
34-
}
35-
}
36-
37-
@media (min-width: 576px) and (max-width: 768px) {
38-
.container {
39-
padding: 0 10px;
40-
margin-top:-40px;
41-
}
42-
}
43-
44-
@media (min-width: 768px) and (max-width: 992px) {
45-
.container{
46-
padding: 0 10px;
47-
}
48-
}
49-
50-
`}
51-
</style>
35+
</footer>
5236
</>
5337
);
5438
};

‎src/views/login/login.tsx‎

Lines changed: 9 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
import React, { useState } from 'react';
22
import Image from 'next/image';
33
import logo from '../../../public/images/logo.png';
4-
import google from '../../../public/images/google.png';
54
import github from '../../../public/images/github.png';
65
import Link from 'next/link';
76
import GoogleLogin from 'react-google-login';
8-
import Copyright from '@/components/global/footer/Copyright';
9-
import Donations from '@/components/global/footer/Donations';
10-
import Footer from '@/components/global/footer/Footer';
7+
import MiniFooter from '@/components/global/minifooter';
118

129
const LoginComponent = () => {
1310
const responseGoogleSuccess = (response: any) => {
@@ -27,10 +24,8 @@ const LoginComponent = () => {
2724
}
2825
};
2926

30-
const shouldShowLogin = true;
31-
3227
return (
33-
<div className="main-box bg-dark-600" style={{ height: '100vh !important' }}>
28+
<div className="main-box bg-dark-600" style={{ height: 'auto !important', minHeight: '100vh' }}>
3429
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
3530
<Image src={logo} alt="logo" className="mt-10 text-center" />
3631
<div className="whitebox bg-white rounded px-10 mt-11 py-5" style={{ height: '546px', width: '464px' }}>
@@ -43,12 +38,7 @@ const LoginComponent = () => {
4338
onSuccess={responseGoogleSuccess}
4439
onFailure={responseGoogleFailure}
4540
cookiePolicy={'single_host_origin'}
46-
className="rounded py-2 mt-6 w-full gap-3 text-center"
47-
// style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}
48-
style={{
49-
border: '1px solid #e5e7eb', // Add the border style
50-
// ... other styles ...
51-
}}
41+
className="box rounded py-2 mt-6 w-full gap-3"
5242
>
5343
<p className="text-black font-weight-bold">LOGIN WITH GOOGLE</p>
5444
</GoogleLogin>
@@ -127,21 +117,16 @@ const LoginComponent = () => {
127117
.whitebox button{
128118
justify-content:center
129119
}
120+
.box{
121+
border:1px solid #e5e7eb !important;
122+
box-shadow:none !important;
123+
border-radius: 5px !important;
124+
}
130125
`}
131126
</style>
132127
</div>
133128
</div>
134-
{<LoginComponent /> ? (
135-
<div
136-
className="footer flex flex-wrap gap-3 md:gap-10 justify-between text-white"
137-
style={{ marginTop: '13%', padding: '0 100px' }}
138-
>
139-
<Copyright />
140-
<Donations />
141-
</div>
142-
) : (
143-
<Footer />
144-
)}
129+
<MiniFooter />
145130
</div>
146131
);
147132
};

‎src/views/register/register.tsx‎

Lines changed: 62 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,35 @@
11
import React from 'react';
22
import Image from 'next/image';
33
import logo from '../../../public/images/logo.png';
4-
import google from '../../../public/images/google.png';
54
import github from '../../../public/images/github.png';
65
import check from '../../../public/images/Success.svg';
76
import Link from 'next/link';
8-
import Footer from '@/components/global/footer/Footer';
9-
import Copyright from '@/components/global/footer/Copyright';
10-
import Donations from '@/components/global/footer/Donations';
7+
import GoogleLogin from 'react-google-login';
8+
import MiniFooter from '@/components/global/minifooter';
119

1210
const RegisterComponent = () => {
11+
const responseGoogleSuccess = (response: any) => {
12+
console.log('Google login success:', response);
13+
};
14+
15+
const responseGoogleFailure = (error: any) => {
16+
console.error('Google login error:', error);
17+
};
18+
19+
const handleGithubLogin = async () => {
20+
try {
21+
window.location.href = `https://github.com/login/oauth/authorize?client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&scope=user`;
22+
} catch (error) {
23+
console.error('Error initiating GitHub login:', error);
24+
}
25+
};
1326
return (
1427
<>
1528
<div
16-
className="Maincontainer bg-dark-600 h-screen d-flex justify-content-center align-items-center w-full"
17-
style={{ height: '100vh' }}
29+
className="Maincontainer bg-dark-600 d-flex justify-content-center align-items-center w-full"
30+
style={{ height: 'auto !important', minHeight: '100vh' }}
1831
>
19-
<div className="container w-full pt-6 gap-20" style={{ display: 'flex', justifyContent: 'center' }}>
32+
<div className="container w-full pt-6 px-6 gap-20" style={{ display: 'flex', justifyContent: 'center' ,marginTop:"-35px"}}>
2033
<div className="mt-20">
2134
<Image src={logo} alt="logo" className=" text-center" />
2235
<div style={{ display: 'flex', alignItems: 'center' }} className="mt-3">
@@ -50,23 +63,28 @@ const RegisterComponent = () => {
5063
</div>
5164
</div>
5265
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
53-
<div className="sec-box bg-white rounded px-10 mt-8 py-5" style={{ height: '645px', width: '464px' }}>
66+
<div className="sec-box bg-white rounded px-10 mt-8 py-5" style={{ height: 'auto !important', width: '464px' }}>
5467
<p className="text-black text-xl font-weight-bold mt-4 text-center" style={{ fontSize: '1.5rem' }}>
5568
Register
5669
</p>
57-
<button
58-
className="rounded border py-2 mt-6 w-full gap-3"
59-
style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}
70+
<GoogleLogin
71+
clientId="YOUR_GOOGLE_CLIENT_ID"
72+
onSuccess={responseGoogleSuccess}
73+
onFailure={responseGoogleFailure}
74+
cookiePolicy={'single_host_origin'}
75+
className="box rounded py-2 mt-6 w-full gap-3 text-cente"
6076
>
61-
<Image src={google} alt="logo" />
6277
<p className="text-black font-weight-bold">LOGIN WITH GOOGLE</p>
63-
</button>
78+
</GoogleLogin>
6479
<button
80+
onClick={handleGithubLogin}
6581
className="rounded border py-2 text-black font-weight-bold mt-2 w-full gap-3"
6682
style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}
6783
>
6884
<Image src={github} alt="logo" />
69-
<p className="text-black font-weight-bold">LOGIN WITH GITHUB</p>
85+
<p className="text-black font-weight-bold" style={{ marginLeft: '17px' }}>
86+
LOGIN WITH GITHUB
87+
</p>
7088
</button>
7189
<p className="text-black text-md font-weight-bold mt-5 text-center">or</p>
7290
<input
@@ -94,10 +112,27 @@ const RegisterComponent = () => {
94112
REGISTER
95113
</button>
96114
<p className="text-black text-md font-weight-bold mt-9 text-center">
97-
By clicking “Create account” or “Continue with Google” or “Continue with Github”, you agree to the
98-
jiffyscan.xyz <span style={{ color: '#1976D2' }}>Terms of Service</span> and
99-
<span style={{ color: '#1976D2' }}>Privacy Policy</span>
115+
By clicking “Create account” or “Continue with Google” or “Continue with Github”, you agree to the&nbsp;
116+
jiffyscan.xyz
117+
<a
118+
href="https://www.notion.so/adityaagarwal/Terms-of-Use-0012b80699cc4b948cdae9e42983035b"
119+
style={{ color: '#1976D2' }}
120+
target="_blank"
121+
rel="noopener noreferrer"
122+
>
123+
Terms of Service
124+
</a>
125+
&nbsp;and&nbsp;
126+
<a
127+
href="https://adityaagarwal.notion.site/Privacy-Policy-5f05315af636474797f1255d338a0d76?pvs=4"
128+
style={{ color: '#1976D2' }}
129+
target="_blank"
130+
rel="noopener noreferrer"
131+
>
132+
Privacy Policy
133+
</a>
100134
</p>
135+
101136
<Link href="/login">
102137
<p className=" text-black text-md font-weight-bold mt-5 text-center">
103138
Already have an account? <span style={{ color: '#1976D2' }}>Log in</span>
@@ -134,25 +169,23 @@ const RegisterComponent = () => {
134169
}
135170
@media (min-width: 768px) and (max-width: 992px) {
136171
.footer{
137-
margin-bottom: 40px;
172+
margin-bottom: 40px !important;
138173
}
139174
}
175+
.box{
176+
border:1px solid #e5e7eb !important;
177+
box-shadow:none !important;
178+
border-radius: 5px !important;
179+
}
180+
.sec-box button{
181+
justify-content:center
182+
}
140183
`}
141184
</style>
142185
</div>
143186
</div>
144187
</div>
145-
{<RegisterComponent /> ? (
146-
<div
147-
className="footer flex flex-wrap gap-3 md:gap-10 justify-between text-white"
148-
style={{ marginTop: '13%', padding: '0 100px' }}
149-
>
150-
<Copyright />
151-
<Donations />
152-
</div>
153-
) : (
154-
<Footer />
155-
)}
188+
<MiniFooter />
156189
</div>
157190
</>
158191
);

0 commit comments

Comments
 (0)