Skip to content

Commit 3a28f5a

Browse files
AlexVOiceoverAlexVOiceover
committed
style: refined user's data modal for mobile
1 parent 6728518 commit 3a28f5a

File tree

9 files changed

+1102
-89
lines changed

9 files changed

+1102
-89
lines changed

‎docs/IGT DPIA Screening Tool.docx‎

87.3 KB
Binary file not shown.

‎docs/IGT DPIA Screening Tool.rtf‎

Lines changed: 990 additions & 0 deletions
Large diffs are not rendered by default.

‎package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@
88
"prod": "vite --mode production",
99
"build": "tsc -b && vite build --mode production",
1010
"lint": "eslint .",
11-
"preview": "vite preview --mode production",
12-
"deploy": "npm run build && gh-pages -d dist"
11+
"preview": "vite preview --mode production"
1312
},
1413
"dependencies": {
1514
"better-auth": "^1.2.3",

‎src/components/modals/UserDataModal.tsx‎

Lines changed: 63 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,9 @@ const UserDataModal: React.FC<UserDataModalProps> = ({ onOpenChange }) => {
2626
const [managerNameInput, setManagerNameInput] = useState(
2727
data.managerName || ''
2828
);
29-
const [usernameInput, setUsernameInput] = useState(
30-
data.username || ''
31-
);
29+
const [usernameInput, setUsernameInput] = useState(data.username || '');
3230
const [emailError, setEmailError] = useState('');
33-
31+
3432
const handleSignOut = async () => {
3533
await signOut();
3634
// Clear user data from entries context
@@ -50,7 +48,13 @@ const UserDataModal: React.FC<UserDataModalProps> = ({ onOpenChange }) => {
5048
if (isEditingUsername) {
5149
setUsernameInput(data.username || '');
5250
}
53-
}, [isEditingContact, isEditingUsername, data.managerEmail, data.managerName, data.username]);
51+
}, [
52+
isEditingContact,
53+
isEditingUsername,
54+
data.managerEmail,
55+
data.managerName,
56+
data.username,
57+
]);
5458

5559
const handleSaveContact = () => {
5660
if (managerEmailInput.trim() && !validateEmail(managerEmailInput.trim())) {
@@ -62,56 +66,55 @@ const UserDataModal: React.FC<UserDataModalProps> = ({ onOpenChange }) => {
6266
setIsEditingContact(false);
6367
setEmailError('');
6468
};
65-
69+
6670
const handleSaveUsername = () => {
6771
setData({ type: 'SET_USERNAME', payload: usernameInput });
6872
setIsEditingUsername(false);
6973
};
7074

7175
return (
72-
<div className="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/50">
73-
<div className="bg-white m-2 sm:m-5 max-w-3xl w-full rounded-lg p-0 overflow-hidden shadow-xl">
76+
<div className='fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/50'>
77+
<div className='bg-white m-2 sm:m-5 max-w-3xl w-full min-w-[280px] rounded-lg p-0 overflow-hidden shadow-xl'>
7478
<div className='bg-brand-pink p-2 flex items-center justify-between sm:rounded-t-lg'>
75-
<h2 className='text-xl font-semibold text-white'>
76-
User's Data
77-
</h2>
78-
<button
79+
<h2 className='text-xl font-semibold text-white'>User's Data</h2>
80+
<button
7981
className='text-white focus:outline-none focus:ring-2 focus:ring-white rounded-sm'
8082
onClick={() => onOpenChange(false)}
8183
>
8284
<X size={24} />
8385
</button>
8486
</div>
85-
86-
<p className="sr-only">
87-
Dashboard with user information and settings.
88-
</p>
89-
90-
<div className='relative overflow-auto'
91-
style={{
92-
background: 'linear-gradient(135deg, #f5f7fa 0%, #f8f9fb 100%)',
93-
}}>
94-
87+
88+
<p className='sr-only'>Dashboard with user information and settings.</p>
89+
90+
<div
91+
className='relative overflow-auto'
92+
style={{
93+
background: 'linear-gradient(135deg, #f5f7fa 0%, #f8f9fb 100%)',
94+
}}
95+
>
9596
<div className='p-4 sm:p-6'>
9697
{/* Main content with responsive layout */}
97-
<div className='flex flex-col lg:flex-row gap-4'>
98+
<div className='flex flex-col sm:flex-row gap-4'>
9899
{/* Left column for desktop (stacked on mobile) */}
99-
<div className='flex flex-col space-y-4 lg:w-1/2'>
100+
<div className='flex flex-col space-y-4 sm:w-1/2 sm:self-stretch'>
100101
{/* Username section */}
101102
<div className='bg-white rounded-lg p-3 shadow-sm border border-pink-100'>
102103
<div className='flex items-center justify-between mb-1'>
103104
<div className='flex items-center'>
104105
<User size={16} className='text-brand-pink mr-1' />
105-
<div className='text-xs font-semibold text-gray-700'>Your name</div>
106+
<div className='text-xs font-semibold text-gray-700'>
107+
Your name
108+
</div>
106109
</div>
107110
{!isEditingUsername && (
108111
<Tooltip>
109112
<TooltipTrigger asChild>
110113
<button
111114
className='flex items-center justify-center rounded-full bg-pink-50 p-1 text-brand-pink hover:bg-pink-100 transition-colors'
112-
aria-label="Edit your name"
115+
aria-label='Edit your name'
113116
onClick={() => setIsEditingUsername(true)}
114-
type="button"
117+
type='button'
115118
>
116119
<Edit2 size={14} />
117120
</button>
@@ -120,13 +123,13 @@ const UserDataModal: React.FC<UserDataModalProps> = ({ onOpenChange }) => {
120123
</Tooltip>
121124
)}
122125
</div>
123-
126+
124127
{isEditingUsername ? (
125128
<div className='space-y-2'>
126129
<Input
127130
value={usernameInput}
128131
onChange={(e) => setUsernameInput(e.target.value)}
129-
placeholder="Enter your name"
132+
placeholder='Enter your name'
130133
aria-label='Your Name'
131134
className='w-full border-pink-200 focus:border-brand-pink text-sm'
132135
/>
@@ -137,7 +140,7 @@ const UserDataModal: React.FC<UserDataModalProps> = ({ onOpenChange }) => {
137140
size='sm'
138141
aria-label='Save Name'
139142
className='px-2 py-0.5 h-auto text-xs'
140-
type="button"
143+
type='button'
141144
>
142145
<Save size={12} className='mr-1' />
143146
Save
@@ -151,26 +154,28 @@ const UserDataModal: React.FC<UserDataModalProps> = ({ onOpenChange }) => {
151154
size='sm'
152155
aria-label='Cancel Editing'
153156
className='px-2 py-0.5 h-auto text-xs'
154-
type="button"
157+
type='button'
155158
>
156159
<X size={12} className='mr-1' />
157160
Cancel
158161
</Button>
159162
</div>
160163
</div>
161164
) : (
162-
<div className='bg-pink-50 px-2 py-1 rounded-md text-sm font-medium text-gray-800'>
165+
<div className='bg-pink-50 px-2 py-1 rounded-md text-sm font-medium text-gray-800 break-words'>
163166
{data.username || 'Not set'}
164167
</div>
165168
)}
166169
</div>
167170

168171
{/* Manager contact section */}
169-
<div className='bg-white rounded-lg p-3 shadow-sm border border-pink-100'>
172+
<div className='bg-white rounded-lg p-3 shadow-sm border border-pink-100 flex-grow'>
170173
<div className='flex items-center justify-between mb-1'>
171174
<div className='flex items-center'>
172175
<Mail size={16} className='text-brand-pink mr-1' />
173-
<div className='text-xs font-semibold text-gray-700'>Line manager's details</div>
176+
<div className='text-xs font-semibold text-gray-700'>
177+
Line manager's details
178+
</div>
174179
</div>
175180
{!isEditingContact && (
176181
<Tooltip>
@@ -179,16 +184,18 @@ const UserDataModal: React.FC<UserDataModalProps> = ({ onOpenChange }) => {
179184
className='flex items-center justify-center rounded-full bg-pink-50 p-1 text-brand-pink hover:bg-pink-100 transition-colors'
180185
aria-label="Edit your line manager's details"
181186
onClick={() => setIsEditingContact(true)}
182-
type="button"
187+
type='button'
183188
>
184189
<Edit2 size={14} />
185190
</button>
186191
</TooltipTrigger>
187-
<TooltipContent>Edit line manager's details</TooltipContent>
192+
<TooltipContent>
193+
Edit line manager's details
194+
</TooltipContent>
188195
</Tooltip>
189196
)}
190197
</div>
191-
198+
192199
{isEditingContact ? (
193200
<div className='space-y-2'>
194201
<div>
@@ -209,7 +216,9 @@ const UserDataModal: React.FC<UserDataModalProps> = ({ onOpenChange }) => {
209216
className='w-full border-pink-200 focus:border-brand-pink text-sm'
210217
/>
211218
{emailError && (
212-
<div className='text-red-500 text-xs mt-0.5'>{emailError}</div>
219+
<div className='text-red-500 text-xs mt-0.5'>
220+
{emailError}
221+
</div>
213222
)}
214223
</div>
215224
<div className='flex space-x-2'>
@@ -223,7 +232,7 @@ const UserDataModal: React.FC<UserDataModalProps> = ({ onOpenChange }) => {
223232
managerEmailInput.trim() !== '' &&
224233
!validateEmail(managerEmailInput.trim())
225234
}
226-
type="button"
235+
type='button'
227236
>
228237
<Save size={12} className='mr-1' />
229238
Save
@@ -239,7 +248,7 @@ const UserDataModal: React.FC<UserDataModalProps> = ({ onOpenChange }) => {
239248
size='sm'
240249
aria-label='Cancel Editing'
241250
className='px-2 py-0.5 h-auto text-xs'
242-
type="button"
251+
type='button'
243252
>
244253
<X size={12} className='mr-1' />
245254
Cancel
@@ -250,29 +259,31 @@ const UserDataModal: React.FC<UserDataModalProps> = ({ onOpenChange }) => {
250259
<div className='text-sm'>
251260
<div className='bg-pink-50 px-2 py-1 rounded-md mb-1'>
252261
<span className='text-xs text-gray-500'>Name:</span>{' '}
253-
<span className='font-medium text-gray-800'>
262+
<span className='font-medium text-gray-800 break-words'>
254263
{data.managerName || 'Not set'}
255264
</span>
256265
</div>
257266
<div className='bg-pink-50 px-2 py-1 rounded-md'>
258267
<span className='text-xs text-gray-500'>Email:</span>{' '}
259-
<span className='font-medium text-gray-800'>
268+
<span className='font-medium text-gray-800 break-all'>
260269
{data.managerEmail || 'Not set'}
261270
</span>
262271
</div>
263272
</div>
264273
)}
265274
</div>
266275
</div>
267-
276+
268277
{/* Right column for desktop (Progress) */}
269-
<div className='lg:w-1/2'>
278+
<div className='sm:w-1/2 flex sm:self-stretch'>
270279
{/* Progress section */}
271-
<div className='bg-white rounded-lg p-3 shadow-sm border border-pink-100 h-full'>
280+
<div className='bg-white rounded-lg p-3 shadow-sm border border-pink-100 w-full'>
272281
<div className='flex items-center justify-between mb-2'>
273282
<div className='flex items-center'>
274283
<Award size={16} className='text-brand-pink mr-1' />
275-
<div className='text-xs font-semibold text-gray-700'>Your progress</div>
284+
<div className='text-xs font-semibold text-gray-700'>
285+
Your progress
286+
</div>
276287
</div>
277288
<QuestionCounter />
278289
</div>
@@ -282,23 +293,23 @@ const UserDataModal: React.FC<UserDataModalProps> = ({ onOpenChange }) => {
282293
</div>
283294
</div>
284295
</div>
285-
296+
286297
{/* Sign Out and Close buttons in a row at the bottom */}
287298
<div className='flex justify-between mt-4'>
288299
<Button
289300
variant='outline'
290301
className='px-4'
291-
type="button"
302+
type='button'
292303
onClick={() => onOpenChange(false)}
293304
>
294305
<X size={16} className='mr-1.5' />
295306
Close
296307
</Button>
297-
298-
<button
308+
309+
<button
299310
onClick={handleSignOut}
300311
className='flex items-center justify-center py-2 px-4 rounded-md border border-pink-100 text-red-600 hover:bg-red-50 transition-colors'
301-
type="button"
312+
type='button'
302313
>
303314
<LogOut size={16} className='mr-1.5' />
304315
<span className='font-medium'>Sign Out</span>
@@ -311,4 +322,4 @@ const UserDataModal: React.FC<UserDataModalProps> = ({ onOpenChange }) => {
311322
);
312323
};
313324

314-
export default UserDataModal;
325+
export default UserDataModal;

‎src/components/ui/questionCounter/LargeCircularQuestionCounter.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@ const LargeCircularQuestionCounter: React.FC<
4545
style={{ transition: 'stroke-dashoffset 0.35s ease-out' }}
4646
/>
4747
</svg>
48-
{/* Percentage Text in Center */}
49-
<span className='absolute inset-0 flex items-center justify-center text-lg font-semibold'>
48+
{/* Percentage Text in Center - Now black for better contrast */}
49+
<span className='absolute inset-0 flex items-center justify-center text-lg font-semibold text-gray-900'>
5050
{progress}%
5151
</span>
5252
</div>

‎src/features/auth/components/LoginPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ const LoginPage: React.FC<LoginPageProps> = ({ onSubmit }) => {
165165
<div className="text-sm font-medium text-gray-700 mb-1">
166166
Email Address
167167
</div>
168-
<div className="px-3 py-2 bg-gray-100 rounded text-gray-800">
168+
<div className="px-3 py-2 bg-gray-100 rounded text-gray-800 break-all">
169169
{state.user.email}
170170
</div>
171171
<p className="text-xs text-gray-500 mt-1">

‎src/features/wizard/components/StatementPreview.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const StatementPreview: React.FC<StatementPreviewProps> = ({ selection }) => {
5151
if (!hasContent) return null;
5252

5353
return (
54-
<div className='w-full pl-2 pr-4 mt-3 -mb-1 flex flex-wrap gap-1.5 items-center justify-start'>
54+
<div className='w-full pl-2 pr-4 mt-3 mb-3 flex flex-wrap gap-1.5 items-center justify-start'>
5555
{/* Statement label */}
5656
<div className='flex items-center mr-1 text-gray-500'>
5757
<FileText size={12} className='mr-1' />
@@ -86,11 +86,11 @@ const StatementPreview: React.FC<StatementPreviewProps> = ({ selection }) => {
8686
{/* Privacy indicator (only show after privacy step) */}
8787
{showPrivacyIcon && (
8888
<span
89-
className={`ml-0.5 flex-shrink-0 ${
90-
isPublic ? 'text-green-500' : 'text-red-500'
89+
className={`ml-0.5 px-1.5 py-0.5 flex-shrink-0 rounded flex items-center ${
90+
isPublic ? 'text-green-500 bg-green-50' : 'text-red-500 bg-red-50'
9191
}`}
9292
>
93-
{isPublic ? <MailPlus size={14} /> : <MailX size={14} />}
93+
{isPublic ? <MailPlus size={16} /> : <MailX size={16} />}
9494
</span>
9595
)}
9696

0 commit comments

Comments
 (0)