feat: improve meeting selection UI for better readability

- Limit page content to max 800px width for better 4K display readability
- Remove LIVE tag badge for cleaner interface
- Remove shadow from main live meeting box
- Remove blue border and hover effects for minimal design
- Change background to neutral gray for less visual noise
This commit is contained in:
2025-09-10 18:31:27 -06:00
parent 1a9de3a085
commit 25f2358612

View File

@@ -189,7 +189,8 @@ export default function MeetingSelection({
<Flex <Flex
flexDir="column" flexDir="column"
w={{ base: "full", md: "container.xl" }} w="full"
maxW="800px"
mx="auto" mx="auto"
px={6} px={6}
py={8} py={8}
@@ -206,14 +207,9 @@ export default function MeetingSelection({
<Box <Box
key={meeting.id} key={meeting.id}
width="100%" width="100%"
bg="blue.50" bg="gray.50"
border="3px solid"
borderColor="blue.300"
borderRadius="xl" borderRadius="xl"
p={8} p={8}
_hover={{ borderColor: "blue.400", bg: "blue.100" }}
transition="all 0.2s"
shadow="lg"
> >
<HStack justify="space-between" align="start"> <HStack justify="space-between" align="start">
<VStack align="start" gap={4} flex={1}> <VStack align="start" gap={4} flex={1}>
@@ -227,9 +223,6 @@ export default function MeetingSelection({
{(meeting.calendar_metadata as any)?.title || {(meeting.calendar_metadata as any)?.title ||
"Live Meeting"} "Live Meeting"}
</Text> </Text>
<Badge colorScheme="blue" fontSize="lg" px={4} py={2}>
LIVE
</Badge>
</HStack> </HStack>
{isOwner && {isOwner &&