Skip to content

Commit 2c244c9

Browse files
emac129emac129
committed
fix for sign up scroll
1 parent bfe35fb commit 2c244c9

3 files changed

Lines changed: 176 additions & 151 deletions

File tree

‎src/index.css‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,8 @@ select option {
130130
.app-container {
131131
display: flex;
132132
flex-direction: column;
133-
min-height: 100vh;
133+
height: 100vh;
134+
overflow: hidden;
134135
}
135136

136137
.navbar {
@@ -163,6 +164,7 @@ select option {
163164
justify-content: center;
164165
align-items: center;
165166
width: 100%;
167+
overflow: hidden;
166168
}
167169

168170
@keyframes spin {

‎src/pages/Preferences.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,17 @@ export default function Preferences() {
3333
};
3434

3535
return (
36-
<div style={{ maxWidth: '500px', margin: '40px auto', padding: '0 20px' }}>
36+
<div style={{
37+
width: '100%',
38+
height: '100%',
39+
display: 'flex',
40+
justifyContent: 'center',
41+
alignItems: 'flex-start',
42+
overflowY: 'auto',
43+
padding: '40px 20px',
44+
boxSizing: 'border-box'
45+
}}>
46+
<div style={{ width: '100%', maxWidth: '500px', paddingTop: '40px' }}>
3747
<div className="glass-panel" style={{ padding: '32px' }}>
3848
<h1 style={{ textAlign: 'center', marginBottom: '24px', color: 'var(--color-secondary)' }}>Your Preferences</h1>
3949
<p style={{ textAlign: 'center', marginBottom: '32px', color: 'rgba(234, 222, 218, 0.8)' }}>
@@ -96,5 +106,6 @@ export default function Preferences() {
96106
</form>
97107
</div>
98108
</div>
109+
</div>
99110
);
100111
}

‎src/pages/Signup.tsx‎

Lines changed: 161 additions & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -112,178 +112,190 @@ export default function Signup() {
112112
}
113113

114114
return (
115-
<div style={{ width: '100%', maxWidth: '600px', padding: '20px', boxSizing: 'border-box' }}>
116-
<div className="glass-panel" style={{ padding: '40px' }}>
117-
<h1 style={{ textAlign: 'center', marginBottom: '24px', color: 'var(--color-secondary)' }}>Welcome to SSTRUK</h1>
118-
<p style={{ textAlign: 'center', marginBottom: '32px', color: 'rgba(234, 222, 218, 0.8)', fontWeight: 'bold', fontSize: '1.1rem' }}>
119-
Enter your details
120-
</p>
121-
122-
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
115+
<div style={{
116+
width: '100%',
117+
height: '100%',
118+
display: 'flex',
119+
justifyContent: 'center',
120+
alignItems: 'flex-start',
121+
overflowY: 'auto',
122+
padding: '40px 20px',
123+
boxSizing: 'border-box'
124+
}}>
125+
<div style={{ width: '100%', maxWidth: '600px', paddingTop: '40px' }}>
126+
<div className="glass-panel" style={{ padding: '40px' }}>
127+
<h1 style={{ textAlign: 'center', marginBottom: '24px', color: 'var(--color-secondary)' }}>Welcome to SSTRUK</h1>
128+
<p style={{ textAlign: 'center', marginBottom: '32px', color: 'rgba(234, 222, 218, 0.8)', fontWeight: 'bold', fontSize: '1.1rem' }}>
129+
Enter your details
130+
</p>
123131

124-
<div style={{ display: 'flex', justifyContent: 'center', marginBottom: '16px' }}>
125-
<div
126-
onClick={handlePhotoClick}
127-
onMouseEnter={() => setIsHoveringPhoto(true)}
128-
onMouseLeave={() => setIsHoveringPhoto(false)}
129-
style={{
130-
width: '100px',
131-
height: '100px',
132-
borderRadius: '50%',
133-
backgroundColor: 'rgba(255,255,255,0.1)',
134-
display: 'flex',
135-
alignItems: 'center',
136-
justifyContent: 'center',
137-
cursor: 'pointer',
138-
border: formData.profilePic ? 'none' : '2px dashed rgba(255,255,255,0.3)',
139-
overflow: 'hidden',
140-
position: 'relative'
141-
}}
142-
>
143-
<input
144-
type="file"
145-
ref={fileInputRef}
146-
style={{ display: 'none' }}
147-
accept="image/*"
148-
onChange={handlePhotoChange}
149-
/>
150-
{formData.profilePic ? (
151-
<>
152-
<img src={formData.profilePic} alt="Profile" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
153-
{isHoveringPhoto && (
154-
<div
155-
style={{
156-
position: 'absolute',
157-
top: 0, left: 0, right: 0, bottom: 0,
158-
backgroundColor: 'rgba(0,0,0,0.5)',
159-
display: 'flex',
160-
alignItems: 'center',
161-
justifyContent: 'center'
162-
}}
163-
>
164-
<button
165-
onClick={handleDeletePhoto}
166-
type="button"
132+
<form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
133+
134+
<div style={{ display: 'flex', justifyContent: 'center', marginBottom: '16px' }}>
135+
<div
136+
onClick={handlePhotoClick}
137+
onMouseEnter={() => setIsHoveringPhoto(true)}
138+
onMouseLeave={() => setIsHoveringPhoto(false)}
139+
style={{
140+
width: '100px',
141+
height: '100px',
142+
borderRadius: '50%',
143+
backgroundColor: 'rgba(255,255,255,0.1)',
144+
display: 'flex',
145+
alignItems: 'center',
146+
justifyContent: 'center',
147+
cursor: 'pointer',
148+
border: formData.profilePic ? 'none' : '2px dashed rgba(255,255,255,0.3)',
149+
overflow: 'hidden',
150+
position: 'relative'
151+
}}
152+
>
153+
<input
154+
type="file"
155+
ref={fileInputRef}
156+
style={{ display: 'none' }}
157+
accept="image/*"
158+
onChange={handlePhotoChange}
159+
/>
160+
{formData.profilePic ? (
161+
<>
162+
<img src={formData.profilePic} alt="Profile" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
163+
{isHoveringPhoto && (
164+
<div
167165
style={{
168-
background: 'none',
169-
border: 'none',
170-
color: '#ff4d4d',
171-
cursor: 'pointer',
172-
padding: '8px'
166+
position: 'absolute',
167+
top: 0, left: 0, right: 0, bottom: 0,
168+
backgroundColor: 'rgba(0,0,0,0.5)',
169+
display: 'flex',
170+
alignItems: 'center',
171+
justifyContent: 'center'
173172
}}
174173
>
175-
<Trash2 size={24} />
176-
</button>
177-
</div>
178-
)}
179-
</>
180-
) : (
181-
<span style={{ fontSize: '0.8rem', textAlign: 'center', color: 'rgba(255,255,255,0.6)' }}>
182-
Add profile photo
183-
</span>
184-
)}
174+
<button
175+
onClick={handleDeletePhoto}
176+
type="button"
177+
style={{
178+
background: 'none',
179+
border: 'none',
180+
color: '#ff4d4d',
181+
cursor: 'pointer',
182+
padding: '8px'
183+
}}
184+
>
185+
<Trash2 size={24} />
186+
</button>
187+
</div>
188+
)}
189+
</>
190+
) : (
191+
<span style={{ fontSize: '0.8rem', textAlign: 'center', color: 'rgba(255,255,255,0.6)' }}>
192+
Add profile photo
193+
</span>
194+
)}
195+
</div>
185196
</div>
186-
</div>
187197

188-
<div>
189-
<label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9rem' }}>Your Name:</label>
190-
<input required type="text" name="name" value={formData.name} onChange={handleChange} placeholder="Name" />
191-
</div>
192-
193-
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
194198
<div>
195-
<label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9rem' }}>Age (Earth Years):</label>
196-
<input type="number" min="0" name="age" value={formData.age} onChange={handleChange} placeholder="e.g. 24" />
199+
<label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9rem' }}>Your Name:</label>
200+
<input required type="text" name="name" value={formData.name} onChange={handleChange} placeholder="Name" />
197201
</div>
198-
<div>
199-
<label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9rem' }}>Species:</label>
200-
<input type="text" name="species" value={formData.species} onChange={handleChange} placeholder="Type your species" />
202+
203+
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
204+
<div>
205+
<label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9rem' }}>Age (Earth Years):</label>
206+
<input type="number" min="0" name="age" value={formData.age} onChange={handleChange} placeholder="e.g. 24" />
207+
</div>
208+
<div>
209+
<label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9rem' }}>Species:</label>
210+
<input type="text" name="species" value={formData.species} onChange={handleChange} placeholder="Type your species" />
211+
</div>
201212
</div>
202-
</div>
203-
204-
<div>
205-
<label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9rem' }}>Planet:</label>
206-
<input type="text" name="planet" value={formData.planet} onChange={handleChange} placeholder="e.g. Earth" />
207-
</div>
208-
209-
<div>
210-
<label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9rem' }}>Bio:</label>
211-
<textarea
212-
name="bio"
213-
value={formData.bio}
214-
onChange={handleChange}
215-
placeholder="What do you want the solar system to know about you?"
216-
style={{
217-
width: '100%',
218-
padding: '12px',
219-
borderRadius: '8px',
220-
backgroundColor: 'rgba(255, 255, 255, 0.05)',
221-
border: '1px solid rgba(255, 255, 255, 0.1)',
222-
color: 'white',
223-
minHeight: '80px',
224-
fontFamily: 'inherit'
225-
}}
226-
/>
227-
</div>
228213

229-
<div>
230-
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }}>
231-
<label style={{ fontSize: '0.9rem' }}>Interests:</label>
232-
<span style={{ fontSize: '0.8rem', color: 'rgba(234, 222, 218, 0.7)' }}>Up to 3</span>
214+
<div>
215+
<label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9rem' }}>Planet:</label>
216+
<input type="text" name="planet" value={formData.planet} onChange={handleChange} placeholder="e.g. Earth" />
233217
</div>
234-
<input
235-
type="text"
236-
value={interestInput}
237-
onChange={e => setInterestInput(e.target.value)}
238-
onKeyDown={handleInterestKeyDown}
239-
placeholder="Type an interest and press Enter"
240-
/>
241-
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', margin: '12px 0' }}>
242-
{formData.interests.map(interest => (
243-
<button
244-
type="button"
245-
key={interest}
246-
onClick={() => removeInterest(interest)}
247-
style={{
248-
padding: '8px 12px',
249-
borderRadius: '999px',
250-
border: '1px solid rgba(255,255,255,0.2)',
251-
background: 'rgba(255,255,255,0.08)',
252-
color: 'white',
253-
cursor: 'pointer'
254-
}}
255-
>
256-
{interest} ×
257-
</button>
258-
))}
218+
219+
<div>
220+
<label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9rem' }}>Bio:</label>
221+
<textarea
222+
name="bio"
223+
value={formData.bio}
224+
onChange={handleChange}
225+
placeholder="What do you want the solar system to know about you?"
226+
style={{
227+
width: '100%',
228+
padding: '12px',
229+
borderRadius: '8px',
230+
backgroundColor: 'rgba(255, 255, 255, 0.05)',
231+
border: '1px solid rgba(255, 255, 255, 0.1)',
232+
color: 'white',
233+
minHeight: '80px',
234+
fontFamily: 'inherit',
235+
resize: 'none'
236+
}}
237+
/>
259238
</div>
260-
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
261-
{interestSuggestions
262-
.filter(suggestion => !formData.interests.includes(suggestion))
263-
.map(suggestion => (
239+
240+
<div>
241+
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }}>
242+
<label style={{ fontSize: '0.9rem' }}>Interests:</label>
243+
<span style={{ fontSize: '0.8rem', color: 'rgba(234, 222, 218, 0.7)' }}>Up to 3</span>
244+
</div>
245+
<input
246+
type="text"
247+
value={interestInput}
248+
onChange={e => setInterestInput(e.target.value)}
249+
onKeyDown={handleInterestKeyDown}
250+
placeholder="Type an interest and press Enter"
251+
/>
252+
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', margin: '12px 0' }}>
253+
{formData.interests.map(interest => (
264254
<button
265255
type="button"
266-
key={suggestion}
267-
onClick={() => addInterest(suggestion)}
256+
key={interest}
257+
onClick={() => removeInterest(interest)}
268258
style={{
269259
padding: '8px 12px',
270260
borderRadius: '999px',
271261
border: '1px solid rgba(255,255,255,0.2)',
272-
background: 'rgba(255,255,255,0.05)',
273-
color: 'rgba(234, 222, 218, 0.9)',
262+
background: 'rgba(255,255,255,0.08)',
263+
color: 'white',
274264
cursor: 'pointer'
275265
}}
276266
>
277-
{suggestion}
267+
{interest} ×
278268
</button>
279-
))}
269+
))}
270+
</div>
271+
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
272+
{interestSuggestions
273+
.filter(suggestion => !formData.interests.includes(suggestion))
274+
.map(suggestion => (
275+
<button
276+
type="button"
277+
key={suggestion}
278+
onClick={() => addInterest(suggestion)}
279+
style={{
280+
padding: '8px 12px',
281+
borderRadius: '999px',
282+
border: '1px solid rgba(255,255,255,0.2)',
283+
background: 'rgba(255,255,255,0.05)',
284+
color: 'rgba(234, 222, 218, 0.9)',
285+
cursor: 'pointer'
286+
}}
287+
>
288+
{suggestion}
289+
</button>
290+
))}
291+
</div>
280292
</div>
281-
</div>
282-
283-
<div style={{ marginTop: '16px' }}>
284-
<button type="submit" className="btn-primary" style={{ width: '100%' }}>Next</button>
285-
</div>
286-
</form>
293+
294+
<div style={{ marginTop: '16px' }}>
295+
<button type="submit" className="btn-primary" style={{ width: '100%' }}>Next</button>
296+
</div>
297+
</form>
298+
</div>
287299
</div>
288300
</div>
289301
);

0 commit comments

Comments
 (0)