Skip to content

UI Fixes / App Cohesiveness #104

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

Merged
ssarahhooper merged 3 commits into from
May 4, 2026
Merged

UI Fixes / App Cohesiveness #104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d71a9a0
all ui fixes
m-marcarelli May 4, 2026
6cd42a8
lint issue
m-marcarelli May 4, 2026
7215371
lint issue again
m-marcarelli May 4, 2026
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
23 changes: 18 additions & 5 deletions packages/frontend/src/pages/AddEvent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,9 +205,20 @@ export default function AddEvent() {
{/* Header */}
<div className="relative flex items-center justify-center px-6 pt-8 pb-4">
<button
className="absolute left-6 w-9 h-9 bg-white rounded-xl shadow flex items-center justify-center text-lg text-[#222b45]"
onClick={() => navigate(`/modules/${moduleId}/calendar`)}
>‹</button>
style={{
position: 'absolute', left: '24px',
width: '42px', height: '42px',
background: '#F5F6FA', border: '1px solid #D9DEEA',
borderRadius: '14px', cursor: 'pointer',
display: 'flex', alignItems: 'center', justifyContent: 'center',
boxShadow: '0 6px 16px rgba(34, 43, 69, 0.05)',
}}
>
<svg width="10" height="16" viewBox="0 0 10 16" fill="none">
<path d="M8.5 1L1.5 8L8.5 15" stroke="#222B45" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</button>
<h1 className="text-4xl font-normal text-black">Add Event</h1>
</div>

Expand Down Expand Up @@ -410,15 +421,16 @@ export default function AddEvent() {
<div className="flex justify-center gap-4 pt-2 pb-8">
<button
onClick={() => navigate(`/modules/${moduleId}/calendar`)}
className="w-[116px] h-[45px] bg-white rounded-[20px] shadow flex items-center justify-center text-[#222b45] text-xl"
className="w-[116px] h-[45px] bg-white rounded-[999px] flex items-center justify-center text-[#222b45] text-sm"
style={{ border: '1px solid #DFE5F0' }}
>
Cancel
</button>
<button
onClick={() => {
if (!validateDate(date)) return;
if (!allDay && !validateTime(startHours, startMinutes, startAmpm, endHours, endMinutes, endAmpm)) return;

api('/events', {
method: 'POST',
token: token ?? undefined,
Expand All @@ -435,7 +447,8 @@ export default function AddEvent() {
.then(() => navigate(`/modules/${moduleId}/calendar`))
.catch(() => {});
}}
className="w-[116px] h-[45px] bg-[#b8e366] rounded-[20px] flex items-center justify-center text-white text-xl"
className="w-[116px] h-[45px] bg-[#B8E466] rounded-[999px] flex items-center justify-center text-white text-sm"
style={{ boxShadow: '0 6px 14px rgba(183,222,88,0.28)' }}
>
Post
</button>
Expand Down
12 changes: 6 additions & 6 deletions packages/frontend/src/pages/AgendaDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,11 +103,11 @@ export default function AgendaDetail() {
onClick={() => navigate(`/modules/${moduleId}`)}
style={{
position: 'absolute', left: '28px', top: '74px',
width: '38px', height: '42px',
background: 'transparent', border: '1px solid #CED3DE',
borderRadius: '12px', cursor: 'pointer',
width: '42px', height: '42px',
background: '#F5F6FA', border: '1px solid #D9DEEA',
borderRadius: '14px', cursor: 'pointer',
display: 'flex', alignItems: 'center', justifyContent: 'center',
opacity: 0.5,
boxShadow: '0 6px 16px rgba(34, 43, 69, 0.05)',
}}
>
<svg width="10" height="16" viewBox="0 0 10 16" fill="none">
Expand Down Expand Up @@ -174,7 +174,7 @@ export default function AgendaDetail() {
<button
onClick={() => navigate(`/modules/${moduleId}/agendas/${agendaId}/edit`)}
style={{
height: '36px', padding: '0 18px', borderRadius: '20px',
height: '36px', padding: '0 18px', borderRadius: '999px',
background: '#B8E466', border: 'none', cursor: 'pointer',
fontFamily: 'Amiko', fontSize: '14px', color: '#FFFFFF',
boxShadow: '0px 2px 4px rgba(0,0,0,0.15)',
Expand All @@ -186,7 +186,7 @@ export default function AgendaDetail() {
onClick={handleDelete}
disabled={deleting}
style={{
height: '36px', padding: '0 18px', borderRadius: '20px',
height: '36px', padding: '0 18px', borderRadius: '999px',
background: '#E53935', border: 'none', cursor: 'pointer',
fontFamily: 'Amiko', fontSize: '14px', color: '#FFFFFF',
boxShadow: '0px 2px 4px rgba(0,0,0,0.15)',
Expand Down
12 changes: 6 additions & 6 deletions packages/frontend/src/pages/AnnouncementDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,11 +103,11 @@ export default function AnnouncementDetail() {
onClick={() => navigate(`/modules/${moduleId}`)}
style={{
position: 'absolute', left: '28px', top: '74px',
width: '38px', height: '42px',
background: 'transparent', border: '1px solid #CED3DE',
borderRadius: '12px', cursor: 'pointer',
width: '42px', height: '42px',
background: '#F5F6FA', border: '1px solid #D9DEEA',
borderRadius: '14px', cursor: 'pointer',
display: 'flex', alignItems: 'center', justifyContent: 'center',
opacity: 0.5,
boxShadow: '0 6px 16px rgba(34, 43, 69, 0.05)',
}}
>
<svg width="10" height="16" viewBox="0 0 10 16" fill="none">
Expand Down Expand Up @@ -174,7 +174,7 @@ export default function AnnouncementDetail() {
<button
onClick={() => navigate(`/modules/${moduleId}/announcements/${announcementId}/edit`)}
style={{
height: '36px', padding: '0 18px', borderRadius: '20px',
height: '36px', padding: '0 18px', borderRadius: '999px',
background: '#B8E466', border: 'none', cursor: 'pointer',
fontFamily: 'Amiko', fontSize: '14px', color: '#FFFFFF',
boxShadow: '0px 2px 4px rgba(0,0,0,0.15)',
Expand All @@ -186,7 +186,7 @@ export default function AnnouncementDetail() {
onClick={handleDelete}
disabled={deleting}
style={{
height: '36px', padding: '0 18px', borderRadius: '20px',
height: '36px', padding: '0 18px', borderRadius: '999px',
background: '#E53935', border: 'none', cursor: 'pointer',
fontFamily: 'Amiko', fontSize: '14px', color: '#FFFFFF',
boxShadow: '0px 2px 4px rgba(0,0,0,0.15)',
Expand Down
17 changes: 13 additions & 4 deletions packages/frontend/src/pages/CalendarScreenCoach.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ export default function CalendarScreenCoach() {
<path d="M8.5 1L1.5 8L8.5 15" stroke="#222B45" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</motion.button>
<h1 className="text-4xl font-bold text-[#222b45]">Calendar</h1>
<h1 className="text-4xl font-normal text-[#222b45]">Calendar</h1>
</div>

{/* Month Navigation */}
Expand Down Expand Up @@ -226,7 +226,7 @@ export default function CalendarScreenCoach() {
<span className="text-[#735bf2] text-[10px] mt-1">●</span>
<div>
<div className="text-xs text-[#8f9bb3] mb-0.5 tracking-wide">{ev.startTime}-{ev.endTime}</div>
<div className="text-[#222b45] font-semibold text-base tracking-wide">{ev.title}</div>
<div className="text-[#222b45] text-base tracking-wide">{ev.title}</div>
</div>
</div>
<button
Expand All @@ -242,9 +242,18 @@ export default function CalendarScreenCoach() {
<div className="w-full max-w-[440px] mx-auto relative">
<button
onClick={() => navigate(`/modules/${moduleId}/calendar/add-event`)}
className="absolute bottom-28 right-6 w-14 h-14 bg-[#b8e366] rounded-full text-white text-3xl shadow-lg flex items-center justify-center"
style={{
position: 'absolute', bottom: '112px', right: '24px',
width: '54px', height: '54px', borderRadius: '50%',
background: '#B8E466', border: 'none', cursor: 'pointer',
boxShadow: '0px 4px 4px rgba(0,0,0,0.25)',
display: 'flex', alignItems: 'center', justifyContent: 'center',
}}
>
+
<div style={{ position: 'relative', width: '16px', height: '16px' }}>
<div style={{ position: 'absolute', left: '7px', top: 0, width: '2px', height: '16px', background: '#FFFFFF' }} />
<div style={{ position: 'absolute', top: '7px', left: 0, width: '16px', height: '2px', background: '#FFFFFF' }} />
</div>
</button>
</div>
)}
Expand Down
4 changes: 2 additions & 2 deletions packages/frontend/src/pages/CalendarScreenUser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ export default function CalendarScreenUser() {
<path d="M8.5 1L1.5 8L8.5 15" stroke="#222B45" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</motion.button>
<h1 className="text-4xl font-bold text-[#222b45]">Calendar</h1>
<h1 className="text-4xl font-normal text-[#222b45]">Calendar</h1>
</div>

{/* Month Navigation */}
Expand Down Expand Up @@ -226,7 +226,7 @@ export default function CalendarScreenUser() {
<div className="text-xs text-[#8f9bb3] mb-0.5 tracking-wide">
{ev.allDay ? "All Day" : `${ev.startTime ?? ""} - ${ev.endTime ?? ""}`}
</div>
<div className="text-[#222b45] font-semibold text-base tracking-wide">{ev.title}</div>
<div className="text-[#222b45] text-base tracking-wide">{ev.title}</div>
</div>
</div>
<div className="flex gap-0.5">
Expand Down
19 changes: 10 additions & 9 deletions packages/frontend/src/pages/CreateAgenda.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,11 +43,11 @@ export default function CreateAgenda() {
onClick={() => navigate(`/modules/${moduleId}`)}
style={{
position: 'absolute', left: '28px', top: '74px',
width: '38px', height: '42px',
background: 'transparent', border: '1px solid #CED3DE',
borderRadius: '12px', cursor: 'pointer',
width: '42px', height: '42px',
background: '#F5F6FA', border: '1px solid #D9DEEA',
borderRadius: '14px', cursor: 'pointer',
display: 'flex', alignItems: 'center', justifyContent: 'center',
opacity: 0.5,
boxShadow: '0 6px 16px rgba(34, 43, 69, 0.05)',
}}
>
<svg width="10" height="16" viewBox="0 0 10 16" fill="none">
Expand Down Expand Up @@ -169,9 +169,9 @@ export default function CreateAgenda() {
position: 'absolute', left: '156px', top: '788px',
width: '116px', height: '45px',
background: '#FFFFFF',
boxShadow: '0px 1px 4px rgba(0,0,0,0.25)',
borderRadius: '20px', border: 'none', cursor: 'pointer',
fontFamily: 'Amiko', fontSize: '20px', color: '#222B45',
border: '1px solid #DFE5F0',
borderRadius: '999px', cursor: 'pointer',
fontFamily: 'Amiko', fontSize: '14px', color: '#222B45',
}}
>
Cancel
Expand All @@ -185,8 +185,9 @@ export default function CreateAgenda() {
position: 'absolute', left: '284px', top: '789px',
width: '116px', height: '45px',
background: '#B8E466',
borderRadius: '20px', border: 'none', cursor: 'pointer',
fontFamily: 'Amiko', fontSize: '20px', color: '#FFFFFF',
borderRadius: '999px', border: 'none', cursor: 'pointer',
fontFamily: 'Amiko', fontSize: '14px', color: '#FFFFFF',
boxShadow: '0 6px 14px rgba(183,222,88,0.28)',
opacity: submitting || !title.trim() || !description.trim() || !date ? 0.5 : 1,
}}
>
Expand Down
19 changes: 10 additions & 9 deletions packages/frontend/src/pages/CreateAnnouncement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,11 @@ export default function CreateAnnouncement() {
onClick={() => navigate(`/modules/${moduleId}`)}
style={{
position: 'absolute', left: '28px', top: '74px',
width: '38px', height: '42px',
background: 'transparent', border: '1px solid #CED3DE',
borderRadius: '12px', cursor: 'pointer',
width: '42px', height: '42px',
background: '#F5F6FA', border: '1px solid #D9DEEA',
borderRadius: '14px', cursor: 'pointer',
display: 'flex', alignItems: 'center', justifyContent: 'center',
opacity: 0.5,
boxShadow: '0 6px 16px rgba(34, 43, 69, 0.05)',
}}
>
<svg width="10" height="16" viewBox="0 0 10 16" fill="none">
Expand Down Expand Up @@ -139,9 +139,9 @@ export default function CreateAnnouncement() {
position: 'absolute', left: '156px', top: '788px',
width: '116px', height: '45px',
background: '#FFFFFF',
boxShadow: '0px 1px 4px rgba(0,0,0,0.25)',
borderRadius: '20px', border: 'none', cursor: 'pointer',
fontFamily: 'Amiko', fontSize: '20px', color: '#222B45',
border: '1px solid #DFE5F0',
borderRadius: '999px', cursor: 'pointer',
fontFamily: 'Amiko', fontSize: '14px', color: '#222B45',
}}
>
Cancel
Expand All @@ -155,8 +155,9 @@ export default function CreateAnnouncement() {
position: 'absolute', left: '284px', top: '789px',
width: '116px', height: '45px',
background: '#B8E466',
borderRadius: '20px', border: 'none', cursor: 'pointer',
fontFamily: 'Amiko', fontSize: '20px', color: '#FFFFFF',
borderRadius: '999px', border: 'none', cursor: 'pointer',
fontFamily: 'Amiko', fontSize: '14px', color: '#FFFFFF',
boxShadow: '0 6px 14px rgba(183,222,88,0.28)',
opacity: submitting || !title.trim() || !body.trim() ? 0.5 : 1,
}}
>
Expand Down
54 changes: 28 additions & 26 deletions packages/frontend/src/pages/CreateModule.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,12 +72,12 @@ export default function CreateModule() {
transition={{ ...spring, delay: 0 }}
onClick={() => navigate('/module-homepage')}
style={{
position: 'absolute', left: '38px', top: '71px',
width: '38px', height: '42px',
background: 'white', border: '1px solid #CED3DE',
borderRadius: '10px', cursor: 'pointer',
position: 'absolute', left: '28px', top: '74px',
width: '42px', height: '42px',
background: '#F5F6FA', border: '1px solid #D9DEEA',
borderRadius: '14px', cursor: 'pointer',
display: 'flex', alignItems: 'center', justifyContent: 'center',
opacity: 0.8,
boxShadow: '0 6px 16px rgba(34, 43, 69, 0.05)',
}}>
<svg width="15" height="15" viewBox="0 0 15 15" fill="none">
<path d="M9 2L4 7.5L9 13" stroke="#222B45" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
Expand All @@ -88,7 +88,7 @@ export default function CreateModule() {
<motion.p
initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }}
transition={{ ...spring, delay: 0.05 }}
style={{ position: 'absolute', left: '72px', top: '119px', fontFamily: 'Amiko', fontWeight: 700, fontSize: '40px', lineHeight: '53px', color: '#000000', margin: 0 }}>
style={{ position: 'absolute', left: '72px', top: '119px', fontFamily: 'Amiko', fontWeight: 400, fontSize: '40px', lineHeight: '53px', color: '#000000', margin: 0 }}>
Create Module
</motion.p>

Expand Down Expand Up @@ -166,38 +166,40 @@ export default function CreateModule() {
</p>
)}

{/* Create button */}
{/* Cancel button */}
<motion.button
type="submit"
disabled={loading}
type="button"
initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}
transition={{ ...spring, delay: 0.2 }}
onClick={() => navigate('/module-homepage')}
style={{
position: 'absolute', left: '56px', top: '740px',
width: '317px', height: '41px',
background: '#B8E466', boxShadow: '0px 8px 20px rgba(0,0,0,0.1)',
borderRadius: '40px', border: 'none',
fontFamily: 'Amiko', fontWeight: 600, fontSize: '24px',
color: '#FFFFFF', cursor: 'pointer',
position: 'absolute', left: '60px', top: '760px',
width: '150px', height: '52px',
background: '#FF6B6B', border: 'none',
borderRadius: '999px', cursor: 'pointer',
fontFamily: 'Amiko', fontWeight: 400, fontSize: '16px',
color: '#FFFFFF',
boxShadow: '0 6px 14px rgba(255,107,107,0.28)',
}}>
{loading ? 'Creating...' : 'Create'}
Cancel
</motion.button>

{/* Cancel button */}
{/* Create button */}
<motion.button
type="button"
type="submit"
disabled={loading}
initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}
transition={{ ...spring, delay: 0.25 }}
onClick={() => navigate('/module-homepage')}
style={{
position: 'absolute', left: '63px', top: '795px',
width: '304px', height: '41px',
background: '#FFFFFF', boxShadow: '0px 8px 20px rgba(0,0,0,0.1)',
borderRadius: '40px', border: 'none',
fontFamily: 'Amiko', fontWeight: 600, fontSize: '24px',
color: '#C8C8C8', cursor: 'pointer',
position: 'absolute', left: '230px', top: '760px',
width: '150px', height: '52px',
background: '#B8E466', border: 'none',
borderRadius: '999px', cursor: 'pointer',
fontFamily: 'Amiko', fontWeight: 400, fontSize: '16px',
color: '#FFFFFF',
boxShadow: '0 6px 14px rgba(183,222,88,0.28)',
}}>
Cancel
{loading ? 'Creating...' : 'Create'}
</motion.button>

</form>
Expand Down
19 changes: 10 additions & 9 deletions packages/frontend/src/pages/EditAgenda.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,11 +65,11 @@ export default function EditAgenda() {
onClick={() => navigate(`/modules/${moduleId}/agendas/${agendaId}`)}
style={{
position: 'absolute', left: '28px', top: '74px',
width: '38px', height: '42px',
background: 'transparent', border: '1px solid #CED3DE',
borderRadius: '12px', cursor: 'pointer',
width: '42px', height: '42px',
background: '#F5F6FA', border: '1px solid #D9DEEA',
borderRadius: '14px', cursor: 'pointer',
display: 'flex', alignItems: 'center', justifyContent: 'center',
opacity: 0.5,
boxShadow: '0 6px 16px rgba(34, 43, 69, 0.05)',
}}
>
<svg width="10" height="16" viewBox="0 0 10 16" fill="none">
Expand Down Expand Up @@ -189,9 +189,9 @@ export default function EditAgenda() {
position: 'absolute', left: '156px', top: '788px',
width: '116px', height: '45px',
background: '#FFFFFF',
boxShadow: '0px 1px 4px rgba(0,0,0,0.25)',
borderRadius: '20px', border: 'none', cursor: 'pointer',
fontFamily: 'Amiko', fontSize: '20px', color: '#222B45',
border: '1px solid #DFE5F0',
borderRadius: '999px', cursor: 'pointer',
fontFamily: 'Amiko', fontSize: '14px', color: '#222B45',
}}
>
Cancel
Expand All @@ -205,8 +205,9 @@ export default function EditAgenda() {
position: 'absolute', left: '284px', top: '789px',
width: '116px', height: '45px',
background: '#B8E466',
borderRadius: '20px', border: 'none', cursor: 'pointer',
fontFamily: 'Amiko', fontSize: '20px', color: '#FFFFFF',
borderRadius: '999px', border: 'none', cursor: 'pointer',
fontFamily: 'Amiko', fontSize: '14px', color: '#FFFFFF',
boxShadow: '0 6px 14px rgba(183,222,88,0.28)',
opacity: submitting || !title.trim() || !description.trim() || !date ? 0.5 : 1,
}}
>
Expand Down
Loading
Loading