Message Styling For Mobile

Decreased padding for mobile and changed some styling to give better contrast

website/src/components/FlaggableElement.tsx

@@ -1,4 +1,5 @@
 import {
+  Box,
   Button,
   Checkbox,
   Flex,
@@ -21,8 +22,9 @@ import {
   useColorModeValue,
   useId,
 } from "@chakra-ui/react";
-import { FlagIcon, QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
+import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
 import { useEffect, useReducer } from "react";
+import { FiAlertCircle } from "react-icons/fi";
 import { get, post } from "src/lib/api";
 import { Message } from "src/types/Conversation";
 import { colors } from "styles/Theme/colors";
@@ -98,7 +100,6 @@ export const FlaggableElement = (props: FlaggableElementProps) => {
     { label_values: [], submittable: false }
   );
   const [isEditing, setIsEditing] = useBoolean();
-  const backgroundColor = useColorModeValue("gray.200", "gray.700");
 
   const { data, isLoading } = useSWR("/api/valid_labels", get);
   useEffect(() => {
@@ -145,20 +146,26 @@ export const FlaggableElement = (props: FlaggableElementProps) => {
       isLazy
       lazyBehavior="keepMounted"
     >
-      <Grid templateColumns="1fr min-content" gap={2}>
+      <Grid display="flex" alignItems="center" gap="1">
         <PopoverAnchor>{props.children}</PopoverAnchor>
         <Tooltip label="Report" bg="red.500">
-          <div>
-            <PopoverTrigger>
-              <Button h="full" bg={backgroundColor}>
-                <FlagIcon className="w-4 text-gray-400 group-hover:text-gray-500" aria-hidden="true" />
-              </Button>
-            </PopoverTrigger>
-          </div>
+          <PopoverTrigger>
+            <Box
+              as="button"
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+              borderRadius="full"
+              p="1"
+              _hover={{ bg: `${useColorModeValue("red.100", "#481A23")}` }}
+            >
+              <FiAlertCircle size="20" className="text-red-400" aria-hidden="true" />
+            </Box>
+          </PopoverTrigger>
         </Tooltip>
       </Grid>
 
-      <PopoverContent width="fit-content">
+      <PopoverContent width="fit-content" p="3">
         <PopoverArrow />
         <div className="relative h-4">
           <PopoverCloseButton />
@@ -224,7 +231,7 @@ export function FlagCheckbox(props: FlagCheckboxProps): JSX.Element {
       : `text-${colors.dark.text} hover:text-blue-400 float-left`;
 
   return (
-    <Flex gap={1}>
+    <Flex gap="2">
       <Checkbox
         id={id}
         isChecked={props.checked}

website/src/components/Messages/MessageTable.tsx

@@ -1,4 +1,4 @@
-import { Stack, StackDivider } from "@chakra-ui/react";
+import { Stack } from "@chakra-ui/react";
 import { MessageTableEntry } from "src/components/Messages/MessageTableEntry";
 import { Message } from "src/types/Conversation";
 
@@ -9,7 +9,7 @@ interface MessageTableProps {
 
 export function MessageTable({ messages, enableLink }: MessageTableProps) {
   return (
-    <Stack divider={<StackDivider />} spacing="4">
+    <Stack spacing="3">
       {messages.map((item) => (
         <MessageTableEntry enabled={enableLink} item={item} key={item.id || item.frontend_message_id} />
       ))}

website/src/components/Messages/MessageTableEntry.tsx

@@ -11,30 +11,44 @@ interface MessageTableEntryProps {
 
 export function MessageTableEntry(props: MessageTableEntryProps) {
   const { item } = props;
-  const backgroundColor = useColorModeValue("gray.50", "gray.800");
+  const backgroundColor = useColorModeValue("gray.100", "gray.700");
+  const backgroundColor2 = useColorModeValue("#DFE8F1", "#42536B");
+
+  const avatarColor = useColorModeValue("white", "black");
+  const borderColor = useColorModeValue("blackAlpha.200", "whiteAlpha.200");
+
   return (
-    <div>
-      <FlaggableElement message={item} key={`flag_${item.id || item.frontend_message_id}`}>
-        <HStack>
+    <FlaggableElement message={item} key={`flag_${item.id || item.frontend_message_id}`}>
+      <HStack>
+        <Box borderRadius="full" border="solid" borderWidth="1px" borderColor={borderColor} bg={avatarColor}>
           <Avatar
             size="sm"
             name={`${boolean(item.is_assistant) ? "Assistant" : "User"}`}
             src={`${boolean(item.is_assistant) ? "/images/logos/logo.png" : "/images/temp-avatars/av1.jpg"}`}
           />
-
-          {props.enabled ? (
+        </Box>
+        {props.enabled ? (
+          <Box maxWidth="xl">
             <Link href={`/messages/${item.id}`}>
-              <LinkBox bg={backgroundColor} className={`p-4 rounded-md whitespace-pre-wrap w-full`}>
+              <LinkBox
+                bg={item.is_assistant ? `${backgroundColor}` : `${backgroundColor2}`}
+                className={`p-4 rounded-md whitespace-pre-wrap w-full`}
+              >
                 {item.text}
               </LinkBox>
             </Link>
-          ) : (
-            <Box bg={backgroundColor} className={`p-4 rounded-md whitespace-pre-wrap w-full`}>
+          </Box>
+        ) : (
+          <Box maxWidth="xl">
+            <Box
+              bg={item.is_assistant ? `${backgroundColor}` : `${backgroundColor2}`}
+              className={`p-4 rounded-md whitespace-pre-wrap w-full`}
+            >
               {item.text}
             </Box>
-          )}
-        </HStack>
-      </FlaggableElement>
-    </div>
+          </Box>
+        )}
+      </HStack>
+    </FlaggableElement>
   );
 }

website/src/components/Messages/MessageWithChildren.tsx

@@ -26,8 +26,8 @@ interface MessageWithChildrenProps {
 }
 
 export function MessageWithChildren(props: MessageWithChildrenProps) {
-  const backgroundColor = useColorModeValue("white", "gray.700");
-  const childBackgroundColor = useColorModeValue("gray.200", "gray.800");
+  const backgroundColor = useColorModeValue("white", "gray.800");
+  const childBackgroundColor = useColorModeValue("gray.200", "gray.700");
 
   const { id, depth, maxDepth, isOnlyChild = true } = props;
 
@@ -93,11 +93,21 @@ export function MessageWithChildren(props: MessageWithChildrenProps) {
           <>
             <Text {...MessageHeaderProps}>{isFirstOrOnly ? "Children" : "Ancestor"}</Text>
             <Stack {...MessageStackProps}>
-              {children.map((item, idx) => (
-                <Box flex="1" key={`recursiveMessageWChildren_${idx}`}>
-                  <MessageTableEntry enabled item={item} />
-                </Box>
-              ))}
+              <Box
+                bg={backgroundColor}
+                padding="4"
+                borderRadius="xl"
+                display="flex"
+                flexDirection="column"
+                gap="4"
+                shadow="base"
+              >
+                {children.map((item, idx) => (
+                  <Box flex="1" key={`recursiveMessageWChildren_${idx}`}>
+                    <MessageTableEntry enabled item={item} />
+                  </Box>
+                ))}
+              </Box>
             </Stack>
           </>
         )

website/src/components/SideMenuLayout.tsx

@@ -12,11 +12,11 @@ export const SideMenuLayout = (props: SideMenuLayoutProps) => {
 
   return (
     <Box backgroundColor={colorMode === "light" ? colors.light.bg : colors.dark.bg} className="sm:overflow-hidden">
-      <Box className="sm:flex h-full gap-6">
-        <Box className="p-6 sm:pr-0">
+      <Box className="sm:flex h-full lg:gap-6">
+        <Box className="p-3 lg:p-6 lg:pr-0">
           <SideMenu buttonOptions={props.menuButtonOptions} />
         </Box>
-        <Box className="flex flex-col overflow-y-auto p-6 sm:pl-0 gap-14 w-full">{props.children}</Box>
+        <Box className="flex flex-col overflow-y-auto p-3 lg:p-6 lg:pl-0 gap-14 w-full">{props.children}</Box>
       </Box>
     </Box>
   );

website/src/components/Survey/SurveyCard.tsx

@@ -6,13 +6,13 @@ interface SurveyCardProps {
 }
 
 export const SurveyCard = (props: SurveyCardProps) => {
-  const backgroundColor = useColorModeValue("white", "gray.800");
+  const backgroundColor = useColorModeValue("white", "gray.700");
 
   const BoxClasses: BoxProps = {
-    p: "6",
     gap: "2",
     borderRadius: "xl",
     shadow: "base",
+    className: "p-4 sm:p-6",
   };
 
   return (

website/src/components/Tasks/CreateTask.tsx

@@ -12,7 +12,7 @@ export const CreateTask = ({
   isDisabled,
   onReplyChanged,
 }: TaskSurveyProps<{ text: string }>) => {
-  const cardColor = useColorModeValue("gray.100", "gray.700");
+  const cardColor = useColorModeValue("gray.50", "gray.900");
   const titleColor = useColorModeValue("gray.800", "gray.300");
   const labelColor = useColorModeValue("gray.600", "gray.400");
 
@@ -42,7 +42,7 @@ export const CreateTask = ({
             </Text>
           </Stack>
           {task.conversation ? (
-            <Box mt="4" p="6" borderRadius="lg" bg={cardColor}>
+            <Box mt="4" borderRadius="lg" bg={cardColor} className="p-3 sm:p-6">
               <MessageTable messages={task.conversation.messages} />
             </Box>
           ) : null}

website/src/components/Tasks/LabelTask.tsx

@@ -3,11 +3,11 @@ import { Text, useColorModeValue } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { MessageView } from "src/components/Messages";
 import { MessageTable } from "src/components/Messages/MessageTable";
+import { LabelRadioGroup } from "src/components/Survey/LabelRadioGroup";
+import { LabelSliderGroup } from "src/components/Survey/LabelSliderGroup";
 import { TwoColumnsWithCards } from "src/components/Survey/TwoColumnsWithCards";
 import { TaskSurveyProps } from "src/components/Tasks/Task";
 import { TaskType } from "src/types/Task";
-import { LabelSliderGroup } from "src/components/Survey/LabelSliderGroup";
-import { LabelRadioGroup } from "src/components/Survey/LabelRadioGroup";
 
 export const LabelTask = ({
   task,

website/src/pages/messages/[id]/index.tsx

@@ -9,7 +9,7 @@ import { get } from "src/lib/api";
 import useSWR from "swr";
 
 const MessageDetail = ({ id }) => {
-  const backgroundColor = useColorModeValue("white", "gray.700");
+  const backgroundColor = useColorModeValue("white", "gray.800");
   const [parent, setParent] = useState(null);
 
   const { isLoading: isLoadingParent } = useSWR(id ? `/api/messages/${id}/parent` : null, get, {
@@ -38,11 +38,10 @@ const MessageDetail = ({ id }) => {
           {parent && (
             <>
               <Box pb="4">
-                <Text fontFamily="Inter" fontWeight="bold" fontSize="xl" pb="2">
+                <Text fontWeight="bold" fontSize="xl" pb="2">
                   Parent
                 </Text>
                 <Box bg={backgroundColor} padding="4" borderRadius="xl" boxShadow="base" width="fit-content">
-                  {" "}
                   <MessageTableEntry enabled item={parent} />
                 </Box>
               </Box>

website/src/pages/messages/index.tsx

@@ -8,7 +8,7 @@ import { Message } from "src/types/Conversation";
 import useSWRImmutable from "swr/immutable";
 
 const MessagesDashboard = () => {
-  const boxBgColor = useColorModeValue("white", "gray.700");
+  const boxBgColor = useColorModeValue("white", "gray.800");
   const boxAccentColor = useColorModeValue("gray.200", "gray.900");
 
   const [messages, setMessages] = useState<Message[]>(null);
@@ -40,24 +40,24 @@ const MessagesDashboard = () => {
         <title>Messages - Open Assistant</title>
         <meta name="description" content="Chat with Open Assistant and provide feedback." />
       </Head>
-      <SimpleGrid fontFamily="Inter" columns={[1, 1, 1, 2]} gap={4}>
+      <SimpleGrid columns={[1, 1, 1, 1, 1, 2]} gap={4}>
         <Box>
           <Text className="text-2xl font-bold" pb="4">
-            Recent messages
+            Recent Messages
           </Text>
           <Box
             backgroundColor={boxBgColor}
             boxShadow="base"
             dropShadow={boxAccentColor}
             borderRadius="xl"
-            className="p-6 shadow-sm"
+            className="p-3 sm:p-4 shadow-sm"
           >
             {receivedMessages ? <MessageTable enableLink messages={messages} /> : <CircularProgress isIndeterminate />}
           </Box>
         </Box>
         <Box>
           <Text className="text-2xl font-bold" pb="4">
-            Your recent messages
+            Your Recent Messages
           </Text>
           <Box
             backgroundColor={boxBgColor}