update colors on each widget entry

client/src/components/Widgets/IvansAlerts.jsx

@@ -161,14 +161,14 @@ export default function IvansAlerts({ settings, widgetID }) {
                           gap={2}
                           borderTopRadius="lg"
                           borderBottomRadius={collapsible.open ? "0" : "lg"}
-                          bg="gray.700"
+                          bg="gray.600"
                     >
                       <Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
                         <Text truncate>{item.volcano_name}</Text>
                         <Text truncate fontSize="xs" color="gray.300/90">{item.send_time}</Text>
                       </Flex>
                       <Flex w="100%" minW={0} justify="right">
-                        <Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100">{item.report_num}</Text>
+                        <Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontWeight="semibold">{item.report_num}</Text>
                       </Flex>
                     </Flex>
                   </Collapsible.Trigger>
@@ -205,13 +205,6 @@ export default function IvansAlerts({ settings, widgetID }) {
                                 </a>
                               </Flex>
                             </object>
-                            {/*<Flex w="100%" h="100%" justify="center" pt={4} color="gray.400">*/}
-                            {/*  <Button variant="subtle" asChild>*/}
-                            {/*    <a href={`${file?.url}#view=FitV&toolbar=1`} target="_blank" rel="noopener noreferrer">*/}
-                            {/*      View in New Page*/}
-                            {/*    </a>*/}
-                            {/*  </Button>*/}
-                            {/*</Flex>*/}
                           </Box>
                         )})}
                     </Box>

client/src/components/Widgets/RemoteSensing.jsx

@@ -171,14 +171,22 @@ export default function RemoteSensing({ settings, widgetID }) {
                       p={1} pl={3} pr={3}
                       borderTopRadius="lg"
                       borderBottomRadius={collapsible.open ? "0" : "lg"}
-                      bg="gray.700"
+                      bg="gray.600"
                     >
                       <Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
                         <Text truncate>{item?.volcano_name}</Text>
                         <Text truncate fontSize="xs" color="gray.300/90">{item?.country}</Text>
                       </Flex>
                       <Flex w="100%" minW={0} justify="right">
-                        <Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontSize="sm">{item?.report_time}</Text>
+                        <Text
+                          truncate
+                          pl={2} pr={2}
+                          borderRadius="lg"
+                          bg="gray.800/50" color="gray.100"
+                          fontSize="sm" fontWeight="semibold"
+                        >
+                          {item?.report_time}
+                        </Text>
                       </Flex>
                     </Flex>
                   </Collapsible.Trigger>