Skip to content

Commit edd8023

Browse files
grv-saini-20grv-saini-20
authored
fix: w3ds messaging related UI Changes (#348)
* fix: metastate-requested-changes * fix: pictique login screen * fix: blabsy login screen * fix: color * fix: format and lint
1 parent aec8be0 commit edd8023

4 files changed

Lines changed: 35 additions & 32 deletions

File tree

‎platforms/blabsy/src/components/login/login-main.tsx‎

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ export function LoginMain(): JSX.Element {
3131
type?: string;
3232
};
3333

34-
// Check for error messages (version mismatch)
3534
if (data.error && data.type === 'version_mismatch') {
3635
setErrorMessage(
3736
data.message ||
@@ -41,9 +40,7 @@ export function LoginMain(): JSX.Element {
4140
return;
4241
}
4342

44-
// Handle successful authentication
4543
if (data.token) {
46-
console.log(data.token);
4744
await signInWithCustomToken(data.token);
4845
}
4946
};
@@ -53,47 +50,49 @@ export function LoginMain(): JSX.Element {
5350
eventSource.close();
5451
};
5552
}
53+
5654
const getOfferData = async (): Promise<void> => {
5755
const { data } = await axios.get<{ uri: string }>(
5856
new URL(
5957
'/api/auth/offer',
6058
process.env.NEXT_PUBLIC_BASE_URL
6159
).toString()
6260
);
63-
console.log('getting offer data');
6461
setQr(data.uri);
6562
watchEventStream(
6663
new URL(data.uri).searchParams.get('session') as string
6764
);
6865
};
66+
6967
const getAppStoreLink = () => {
7068
if (typeof window === 'undefined' || typeof navigator === 'undefined') {
7169
return 'https://play.google.com/store/apps/details?id=foundation.metastate.eid_wallet';
7270
}
71+
7372
const userAgent =
7473
navigator.userAgent || navigator.vendor || (window as any).opera;
74+
7575
if (/android/i.test(userAgent)) {
7676
return 'https://play.google.com/store/apps/details?id=foundation.metastate.eid_wallet';
7777
}
78+
7879
if (/iPad|iPhone|iPod/.test(userAgent) && !(window as any).MSStream) {
7980
return 'https://apps.apple.com/in/app/eid-for-w3ds/id6747748667';
8081
}
82+
8183
return 'https://play.google.com/store/apps/details?id=foundation.metastate.eid_wallet';
8284
};
8385

8486
useEffect(() => {
85-
getOfferData()
86-
.then((): void => {
87-
console.log('QR code data fetched successfully.');
88-
})
89-
.catch((error): void => {
90-
console.error('Error fetching QR code data:', error);
91-
});
87+
getOfferData().catch((error) =>
88+
console.error('Error fetching QR code data:', error)
89+
);
9290
}, []);
9391

9492
return (
9593
<main className='grid lg:grid-cols-[1fr,45vw]'>
96-
<div className='relative hidden items-center justify-center lg:flex'>
94+
{/* Left side image */}
95+
<div className='relative hidden items-center justify-center lg:flex'>
9796
<NextImage
9897
imgClassName='object-cover'
9998
blurClassName='bg-accent-blue'
@@ -103,16 +102,20 @@ export function LoginMain(): JSX.Element {
103102
useSkeleton
104103
/>
105104
</div>
106-
<div className='flex flex-col items-center justify-between gap-6 p-8 lg:items-start lg:justify-center min-h-screen'>
105+
106+
{/* Right side content */}
107+
<div className='flex flex-col items-center justify-between gap-6 p-8 lg:items-center lg:justify-center min-h-screen'>
107108
<div className='flex max-w-xs flex-col gap-4 font-twitter-chirp-extended lg:max-w-none lg:gap-16'>
108-
<h1 className='text-3xl before:content-["See_what’s_happening_in_the_world_right_now."] lg:text-6xl lg:before:content-["Happening_now"]'>
109+
<h1 className='text-center text-3xl before:content-["See_what’s_happening_in_the_world_right_now."] lg:text-6xl lg:before:content-["Happening_now"]'>
109110
<span className='sr-only'>
110111
See what’s happening in the world right now.
111112
</span>
112113
</h1>
113-
<h2 className='hidden text-xl lg:block lg:text-3xl'>
114+
115+
<h2 className='hidden text-center text-xl lg:block lg:text-3xl'>
114116
Join Blabsy today.
115117
</h2>
118+
116119
<div>
117120
{errorMessage && (
118121
<div className='mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg'>
@@ -122,6 +125,7 @@ export function LoginMain(): JSX.Element {
122125
<p className='text-sm'>{errorMessage}</p>
123126
</div>
124127
)}
128+
125129
{isMobileDevice() ? (
126130
<div className='flex flex-col gap-4 items-center'>
127131
<div className='text-xs text-gray-500 text-center max-w-xs'>
@@ -133,12 +137,14 @@ export function LoginMain(): JSX.Element {
133137
</a>{' '}
134138
to login
135139
</div>
140+
136141
<a
137142
href={qr ? getDeepLinkUrl(qr) : '#'}
138143
className='px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-center'
139144
>
140145
Login with eID Wallet
141146
</a>
147+
142148
<div className='text-center mt-4'>
143149
<p className='text-sm text-gray-500'>
144150
<span className='mb-1 block font-bold text-gray-600'>
@@ -162,9 +168,11 @@ export function LoginMain(): JSX.Element {
162168
</a>{' '}
163169
to login
164170
</p>
171+
165172
<div className='p-2 rounded-md bg-white w-fit'>
166173
{qr && <QRCode value={qr} />}
167174
</div>
175+
168176
<div className='text-center mt-4'>
169177
<p className='text-sm text-gray-500'>
170178
<span className='mb-1 block font-bold text-gray-600'>
@@ -179,23 +187,18 @@ export function LoginMain(): JSX.Element {
179187
</div>
180188
)}
181189
</div>
182-
<div className='absolute right-0 rotate-90 top-1/2'>
183-
<Image
184-
src='/assets/w3dslogo.svg'
185-
alt='W3DS logo'
186-
width={100}
187-
height={20}
188-
/>
189-
</div>
190190
</div>
191+
192+
{/* Bottom Info Box */}
191193
<div className='flex max-w-lg flex-col gap-6 [&_button]:py-2 bg-white/20 p-4 rounded-lg'>
192-
<div className='grid gap-3 font-bold text-white/80'>
194+
<div className='grid gap-3 text-center font-bold text-white/70'>
193195
You are entering Blabsy - a social network built on the
194196
Web 3.0 Data Space (W3DS) architecture. This system is
195-
designed around the principle of data-platform
196-
separation, where all your personal content is stored in
197-
your own sovereign eVault, not on centralised servers.
197+
designed around data-platform separation, where all your
198+
personal content is stored in your own sovereign eVault,
199+
not on centralized servers.
198200
</div>
201+
199202
<a
200203
href='https://metastate.foundation'
201204
target='_blank'

‎platforms/group-charter-manager/src/components/auth/login-screen.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ export default function LoginScreen() {
181181
</p>
182182
</div>
183183

184-
<div className="p-4 rounded-xl bg-gray-100 text-gray-700 mt-4">
184+
<div className="p-4 rounded-xl text-xs text-center bg-gray-100 text-gray-500 mt-4">
185185
You are entering Group Charter - a group charter management
186186
platform built on the Web 3.0 Data Space (W3DS)
187187
architecture. This system is designed around the principle

‎platforms/pictique/src/routes/(auth)/auth/+page.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@
100100
{#if isMobileDevice()}
101101
Login with your <a href={getAppStoreLink()}><b><u>eID Wallet</u></b></a>
102102
{:else}
103-
Scan the QR code using your <b><u>eID App</u></b> to login
103+
Scan the QR code using your <b><u class="text-sm">eID App</u></b> to login
104104
{/if}
105105
</h2>
106106
{#if errorMessage}
@@ -114,7 +114,7 @@
114114
<div class="flex flex-col items-center gap-4">
115115
<a
116116
href={getDeepLinkUrl(qrData)}
117-
class="rounded-xl bg-gradient-to-r from-[#4D44EF] via-[#F35B5B] to-[#F7A428] px-8 py-4 text-lg font-semibold text-white transition-opacity hover:opacity-90"
117+
class="rounded-xl bg-gradient-to-r from-[#4D44EF] via-[#F35B5B] to-[#F7A428] px-8 py-4 text-base font-semibold text-white transition-opacity hover:opacity-90"
118118
>
119119
Login with eID Wallet
120120
</a>
@@ -159,7 +159,7 @@
159159
>
160160
</p>
161161

162-
<p class="w-full rounded-md bg-white/60 p-4 text-sm leading-4 text-black/60">
162+
<p class="w-full rounded-md bg-white/60 p-4 text-center text-xs leading-4 text-black/40">
163163
You are entering Pictique - a social network built on the Web 3.0 Data Space (W3DS)
164164
architecture. This system is designed around the principle of data-platform separation,
165165
where all your personal content is stored in your own sovereign eVault, not on

‎pnpm-lock.yaml‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)