update Announcements

uwblueprint · Sep 28, 2024 · cb556f2 · cb556f2
1 parent e8ca96d
commit cb556f2
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 46 deletions.
diff --git a/frontend/src/components/pages/home/AnnouncementNotification.tsx b/frontend/src/components/pages/home/AnnouncementNotification.tsx
@@ -3,6 +3,7 @@ import moment from "moment";
 import { Box, Text, Flex, Icon, IconButton } from "@chakra-ui/react";
 import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 
 import { Announcement } from "../../../types/NotificationTypes";
@@ -16,52 +17,59 @@ const AnnouncementNotification = ({
 
   return (
     <Box w="100%" p={3}>
-      <Flex alignItems="center">
-        <Box
-          borderRadius="full"
-          border="2px solid"
-          borderColor="#C5C8D8"
-          p={1}
-          mr={3}
-        >
-          <Icon
-            as={PersonOutlineOutlinedIcon}
-            boxSize={10}
-            color="purple.main"
-          />
-        </Box>
-        <Flex flexDir="column" w="80%">
-          <Flex alignItems="baseline" w="100%">
-            <Text as="b" mr={4}>
-              {"Admin to Room ".concat(room)}
-            </Text>
-            <Text color="gray.500" fontSize="sm">
-              posted at {moment(createdAt).format("h:mm a")}
-            </Text>
-          </Flex>
-          <Box w="80%">
-            {showFullMessage ? (
-              <Text mt={1}>{message}</Text>
-            ) : (
-              <Text
-                mt={1}
-                overflow="hidden"
-                textOverflow="ellipsis"
-                whiteSpace="nowrap"
-              >
-                {message}
-              </Text>
-            )}
+      <Flex justifyContent="space-betwee" maxW="100%" position="relative">
+        <Flex alignItems="flex-start" w="100%" overflow="hidden">
+          <Box
+            borderRadius="full"
+            border="2px solid"
+            borderColor="#C5C8D8"
+            p={1}
+            mr={3}
+          >
+            <Icon
+              as={PersonOutlineOutlinedIcon}
+              boxSize={10}
+              color="purple.main"
+            />
           </Box>
+          <Flex flexDir="column" maxW="80%">
+            <Flex alignItems="baseline" w="100%">
+              <Text as="b" mr={4}>
+                {"Admin to Room ".concat(room)}
+              </Text>
+              <Text color="gray.500" fontSize="sm" margin="0">
+                posted at {moment(createdAt).format("h:mm a")}
+              </Text>
+            </Flex>
+            <Box w="100%">
+              {showFullMessage ? (
+                <Text mt={1} mb={1}>
+                  {message}
+                </Text>
+              ) : (
+                <Text
+                  mt={1}
+                  mb={1}
+                  overflow="hidden"
+                  textOverflow="ellipsis"
+                  whiteSpace="nowrap"
+                >
+                  {message}
+                </Text>
+              )}
+            </Box>
+          </Flex>
+        </Flex>
+        <Flex ml="auto">
+          <IconButton
+            aria-label="expand"
+            bg="white"
+            _hover={{ bg: "white" }}
+            onClick={() => setShowFullMessage(!showFullMessage)}
+            icon={showFullMessage ? <ExpandMoreIcon /> : <ChevronRightIcon />}
+            size="md"
+          />
         </Flex>
-        <IconButton
-          aria-label="expand"
-          bg="white"
-          _hover={{ bg: "white" }}
-          onClick={() => setShowFullMessage(!showFullMessage)}
-          icon={showFullMessage ? <ChevronRightIcon /> : <ExpandLessIcon />}
-          size="md"
-        />
       </Flex>
     </Box>
   );

diff --git a/frontend/src/components/pages/home/HomePage.tsx b/frontend/src/components/pages/home/HomePage.tsx
@@ -125,8 +125,8 @@ const HomePage = (): React.ReactElement => {
               </Text>
             </Flex>
 
-            <Text onClick={() => setViewAll(!viewAll)} cursor="pointer">
-              {viewAll ? "View less" : "View all"}
+            <Text onClick={() => setViewAll(!viewAll)} cursor="pointer" textDecoration="underline">
+              {viewAll ? "Collapse All" : "View all"}
             </Text>
           </Flex>
           {(viewAll ? announcements : recentAnnouncements).map(