style: 🎨 UI adjustments (#536)

* style: 🎨 align badge with group card

* chore: 🔧 remove calendar gradient

* chore: 🔧 actually realign

* chore: increase padding on mobile groups card

* chore: 🔧 hide action required in the mobile all section

* style: 🎨 divider should reach end to end for mobile notifs

* chore: 🔧 add deselect all option to mobile notifs

* fix: 🐛 badge alignment on notif button

* style: 🎨 add extra gap btwn notif and create meeting button

* style: 🎨 change join group to contained button

* fix: 🐛 match drop shadow on contained to button color

* style: change to 8px per valerie

---------

Co-authored-by: Arshia Aravinthan <aravinta@uci.edu>

Author: Windslash123

src/components/creation/calendar/calendar.tsx

@@ -102,7 +102,7 @@ export function Calendar({
 		: `${monthName} ${currentYear}`;
 
 	return (
-		<div className="rounded-lg bg-gradient-to-l from-[#00A96E0D] to-[#377CFB0D] py-6 md:border">
+		<div className="rounded-lg py-6 md:border">
 			<div className="flex flex-col items-center justify-between px-4 pb-3 md:items-center md:px-8">
 				<Tabs
 					value={meetingType}

src/components/groups/group-card.tsx

@@ -77,7 +77,7 @@ export function GroupCard({
 					<Box
 						sx={(theme) => ({
 							position: "absolute",
-							top: -4,
+							top: 0,
 							right: 24,
 							display: { xs: "none", sm: "flex" },
 							alignItems: "center",
@@ -108,7 +108,7 @@ export function GroupCard({
 					<Box
 						sx={(theme) => ({
 							position: "absolute",
-							top: -4,
+							top: 0,
 							right: 24,
 							display: { xs: "none", sm: "flex" },
 							alignItems: "center",

src/components/groups/groups-page.tsx

@@ -102,16 +102,18 @@ export function GroupsPage({ groups, notifications }: GroupsPageProps) {
 				}}
 			>
 				<Typography variant="h3">Groups</Typography>
-				<Box sx={{ ml: "auto", display: "flex", alignItems: "center", gap: 1 }}>
-					<Button
-						size="square"
-						variant="outlined"
-						onClick={() => setNotificationsOpen(true)}
-					>
-						<Badge badgeContent={unreadCount} color="primary">
+				<Box
+					sx={{ ml: "auto", display: "flex", alignItems: "center", gap: 1.5 }}
+				>
+					<Badge badgeContent={unreadCount} color="primary">
+						<Button
+							size="square"
+							variant="outlined"
+							onClick={() => setNotificationsOpen(true)}
+						>
 							<Notifications sx={{ color: "text.primary", fontSize: 24 }} />
-						</Badge>
-					</Button>
+						</Button>
+					</Badge>
 					<Button
 						size="square"
 						variant="contained"
@@ -162,9 +164,9 @@ export function GroupsPage({ groups, notifications }: GroupsPageProps) {
 				>
 					<Button
 						type="button"
-						variant="outlined"
+						variant="contained"
 						color="secondary"
-						startIcon={<People sx={{ color: "secondary.contrastText" }} />}
+						startIcon={<People />}
 						onClick={() => setShowJoinGroup(true)}
 					>
 						Join Group
@@ -269,7 +271,7 @@ export function GroupsPage({ groups, notifications }: GroupsPageProps) {
 						sx={{
 							display: "grid",
 							gridTemplateColumns: { xs: "1fr", sm: "repeat(3, 1fr)" },
-							gap: { xs: 0.5, sm: 4 },
+							gap: { xs: 1, sm: 4 },
 						}}
 					>
 						{filteredGroups
@@ -280,20 +282,29 @@ export function GroupsPage({ groups, notifications }: GroupsPageProps) {
 								return priority(a) - priority(b);
 							})
 							.map((group) => (
-								<GroupCard
+								<Box
 									key={group.id}
-									id={group.id}
-									name={group.name}
-									description={group.description}
-									members={group.members}
-									totalMeetings={group.totalMeetings}
-									totalMembers={group.memberCount}
-									creatorName={group.creatorName}
-									creatorAvatar={group.creatorAvatar}
-									actionRequired={group.needsAvailability}
-									upcomingMeetingName={group.upcomingMeetingName}
-									icon={group.icon}
-								/>
+									sx={{
+										display: {
+											xs: group.needsAvailability ? "none" : "block",
+											sm: "block",
+										},
+									}}
+								>
+									<GroupCard
+										id={group.id}
+										name={group.name}
+										description={group.description}
+										members={group.members}
+										totalMeetings={group.totalMeetings}
+										totalMembers={group.memberCount}
+										creatorName={group.creatorName}
+										creatorAvatar={group.creatorAvatar}
+										actionRequired={group.needsAvailability}
+										upcomingMeetingName={group.upcomingMeetingName}
+										icon={group.icon}
+									/>
+								</Box>
 							))}
 					</Box>
 				) : (

src/components/groups/mobile-notifications-drawer.tsx

@@ -117,6 +117,12 @@ export function MobileNotificationsDrawer({
 		setSelectedIds(new Set(unread.map((n) => n.id)));
 	}
 
+	function deselectAll() {
+		setSelectedIds(new Set());
+	}
+
+	const allSelected = unread.length > 0 && selectedIds.size === unread.length;
+
 	async function markSelectedAsRead() {
 		const ids =
 			selectedIds.size > 0 ? [...selectedIds] : unread.map((n) => n.id);
@@ -153,17 +159,17 @@ export function MobileNotificationsDrawer({
 					</UnreadCount>
 				</HeaderBox>
 
-				<Divider />
+				<Divider sx={{ mx: -2 }} />
 
 				{unread.length > 0 && (
 					<ActionBar>
 						<Button
 							size="small"
 							color="info"
-							onClick={selectAll}
+							onClick={allSelected ? deselectAll : selectAll}
 							sx={{ textTransform: "capitalize" }}
 						>
-							Select All
+							{allSelected ? "Deselect All" : "Select All"}
 						</Button>
 						{selectedIds.size > 0 && (
 							<Button

src/components/summary/meetings.tsx

@@ -297,7 +297,7 @@ export const Meetings = ({
 				}}
 			>
 				<Typography variant="h3">Meetings</Typography>
-				<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+				<Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
 					<Badge badgeContent={unreadCount} color="primary">
 						<Button
 							variant="outlined"

src/theme.ts

@@ -217,18 +217,24 @@ export const getTheme = (mode: "light" | "dark") =>
 					root: {
 						textTransform: "none",
 					},
-					contained: ({ theme }) => ({
-						boxShadow: `0 4px 0 0 rgba(0,0,0,0.15), 0 4px 0 0 ${theme.palette.primary.main}`,
-						"& .MuiSvgIcon-root": { color: "inherit" },
-						"&:hover": {
-							boxShadow: `0 2px 0 0 rgba(0,0,0,0.15), 0 2px 0 0 ${theme.palette.primary.main}`,
-							transform: "translateY(2px)",
-						},
-						"&:active": {
-							boxShadow: "none",
-							transform: "translateY(4px)",
-						},
-					}),
+					contained: ({ theme, ownerState }) => {
+						const paletteColor =
+							ownerState.color && ownerState.color !== "inherit"
+								? theme.palette[ownerState.color]?.main
+								: theme.palette.primary.main;
+						return {
+							boxShadow: `0 4px 0 0 rgba(0,0,0,0.15), 0 4px 0 0 ${paletteColor}`,
+							"& .MuiSvgIcon-root": { color: "inherit" },
+							"&:hover": {
+								boxShadow: `0 2px 0 0 rgba(0,0,0,0.15), 0 2px 0 0 ${paletteColor}`,
+								transform: "translateY(2px)",
+							},
+							"&:active": {
+								boxShadow: "none",
+								transform: "translateY(4px)",
+							},
+						};
+					},
 					containedPrimary: ({ theme }) => ({
 						"&:hover": {
 							backgroundColor: theme.palette.primary.main,