darkhelm/conference-room-booking-system
Public Access
1
0
Fork 0
mirror of https://github.com/xlorepdarkhelm/numinar-coding-project.git synced 2026-09-11 02:23:22 -04:00
Code Issues Packages Projects Releases Wiki Activity

Cleaning up the CSS.

Browse Source 
Signed-off-by: Cliff Hill <xlorep@darkhelm.org>
This commit is contained in:
darkhelm
2025-08-28 12:26:20 -04:00
parent c3d2c420eb
commit bf869c69cc
4 changed files with 107 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/BookingList.tsx
+43 -5
View File
@@ -99,16 +99,54 @@ const BookingList: FC<BookingListProps> = ({
}, [roomId, date, enableSSE]);
return (
<Card sx={{ height: "100%", display: "flex", flexDirection: "column" }}>
<CardContent sx={{ flex: "0 0 auto" }}>
<Typography variant="h6" gutterBottom>
<EventIcon sx={{ verticalAlign: "middle", mr: 1 }} />
<Card
sx={{
height: "100%",
display: "flex",
flexDirection: "column",
border: "1px solid #1976d2",
borderRadius: 6,
}}
>
<CardContent
sx={{
flex: "0 0 auto",
borderBottom: "1px solid #e0e0e0",
backgroundColor: "#1976d2",
mb: 0,
borderTopLeftRadius: 6,
borderTopRightRadius: 6,
}}
>
<Typography
variant="h6"
gutterBottom
sx={{
display: "flex",
alignItems: "center",
fontWeight: 600,
color: "#f5f6fa",
}}
>
<EventIcon
sx={{ verticalAlign: "middle", mr: 1, color: "#f5f6fa" }}
/>
Today's Bookings
</Typography>
</CardContent>
<List
aria-label="Today's bookings"
sx={{ flex: "1 1 auto", overflowY: "auto", minHeight: 0, px: 2, pb: 2 }}
sx={{
flex: "1 1 auto",
overflowY: "auto",
minHeight: 0,
px: 2,
pb: 2,
backgroundColor: "#f7f8fa",
color: "#23272f",
borderBottomLeftRadius: 6,
borderBottomRightRadius: 6,
}}
>
{liveBookings.length > 0 ? (
liveBookings.map((booking) => (
frontend/src/components/RoomList.tsx
+52 -5
View File
@@ -65,16 +65,52 @@ const RoomList: FC<RoomListProps> = ({
onSelectRoom,
}) => {
return (
<Card sx={{ height: "100%", display: "flex", flexDirection: "column" }}>
<CardContent sx={{ flex: "0 0 auto" }}>
<Typography variant="h6" gutterBottom>
<MeetingRoomIcon sx={{ verticalAlign: "middle", mr: 1 }} />
<Card
sx={{
height: "100%",
display: "flex",
flexDirection: "column",
border: "1px solid #1976d2",
borderRadius: 6,
}}
>
<CardContent
sx={{
flex: "0 0 auto",
borderBottom: "1px solid #e0e0e0",
backgroundColor: "#1976d2",
mb: 0,
borderTopLeftRadius: 6,
borderTopRightRadius: 6,
}}
>
<Typography
variant="h6"
gutterBottom
sx={{
display: "flex",
alignItems: "center",
fontWeight: 600,
color: "#f5f6fa",
}}
>
<MeetingRoomIcon
sx={{ verticalAlign: "middle", mr: 1, color: "#f5f6fa" }}
/>
Available Rooms
</Typography>
</CardContent>
<List
aria-label="Available conference rooms"
sx={{ flex: "1 1 auto", overflowY: "auto", minHeight: 0 }}
sx={{
flex: "1 1 auto",
overflowY: "auto",
minHeight: 0,
backgroundColor: "#f7f8fa",
color: "#23272f",
borderBottomLeftRadius: 6,
borderBottomRightRadius: 6,
}}
>
{rooms.length > 0 ? (
rooms.map((room) =>
@@ -85,6 +121,17 @@ const RoomList: FC<RoomListProps> = ({
onClick={() => onSelectRoom(room.id)}
aria-label={`Select room ${room.name}`}
data-testid={`room-item-${room.id}`}
sx={
room.id === selectedRoomId
? {
backgroundColor: "#eaf3fb !important",
fontWeight: 700,
color: "#23272f",
border: "1px solid #23272f",
borderRadius: 4,
}
: { color: "#23272f" }
}
>
<ListItemText
primary={room.name}
frontend/src/index.css
+5
View File
@@ -1,3 +1,7 @@
/*
* Global Styles
*/
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
@@ -5,6 +9,7 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* background-color removed for transparent window */
}
code {
frontend/src/pages/LandingPage.css
+7 -46
View File
@@ -1,4 +1,6 @@
/* Responsive layout for LandingPage */
/*
* Landing Page Styles
*/
.landing-root {
min-height: 100vh;
@@ -22,15 +24,6 @@
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.landing-main {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 0;
}
.landing-main {
flex: 1 1 auto;
display: flex;
@@ -69,29 +62,13 @@
min-width: 420px;
max-width: 540px;
}
.landing-card {
background: #fff;
border-radius: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
border: 1px solid #e0e0e0;
padding: 2rem 1.5rem 1.5rem 1.5rem;
margin-bottom: 0;
transition: box-shadow 0.2s;
}
.landing-card:focus-within,
.landing-card:hover {
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.13);
}
.landing-card {
background: #23272f;
border-radius: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.13);
border: 1px solid #22242a;
border: none;
padding: 2rem 1.5rem 1.5rem 1.5rem;
margin-bottom: 0;
transition: box-shadow 0.2s;
transition: none;
color: #f5f6fa;
flex: 1 1 0;
height: 60vh;
@@ -100,15 +77,6 @@
overflow-y: auto;
overflow-x: hidden;
}
.landing-card:focus-within,
.landing-card:hover {
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}
.landing-card-dark {
background: #23272f;
border: 1px solid #22242a;
color: #f5f6fa;
}
.landing-book-btn-desktop-wide {
width: 100vw;
@@ -191,6 +159,7 @@
border: none;
background: #fff;
padding: 1.2rem 0.5rem 1.5rem 0.5rem;
color: #23272f;
}
.landing-book-btn-desktop {
display: none;
@@ -230,15 +199,7 @@
height: auto;
overflow: visible;
}
.landing-card,
.landing-card-dark {
border-radius: 0;
box-shadow: none;
border: none;
background: #fff;
color: #23272f;
padding: 1.2rem 0.5rem 1.5rem 0.5rem;
}
.landing-book-btn-desktop-wide {
display: none;
}