wip

website/src/components/Explain.tsx

@@ -8,7 +8,7 @@ import {
   PopoverTrigger,
   Text,
 } from "@chakra-ui/react";
-import { InformationCircleIcon } from "@heroicons/react/20/solid";
+import { Info } from "lucide-react";
 
 interface ExplainProps {
   explanation: string[];
@@ -18,12 +18,7 @@ export const Explain = ({ explanation }: ExplainProps) => {
   return (
     <Popover>
       <PopoverTrigger>
-        <IconButton
-          aria-label="explanation"
-          variant="link"
-          size="xs"
-          icon={<InformationCircleIcon className="h-4 w-4" />}
-        ></IconButton>
+        <IconButton aria-label="explanation" variant="link" size="xs" icon={<Info size="16" />}></IconButton>
       </PopoverTrigger>
       <PopoverContent>
         <PopoverArrow />

website/src/components/Survey/LabelLikertGroup.tsx

@@ -211,7 +211,7 @@ export const LabelLikertGroup = ({ labelIDs, onChange, isEditable = true }: Labe
               }}
               alignItems="center"
             >
-              <Text as="div">
+              <Text as="div" display="flex" alignItems="center">
                 {textA}
                 {descriptionA.length > 0 ? <Explain explanation={descriptionA} /> : null}
               </Text>
@@ -229,7 +229,7 @@ export const LabelLikertGroup = ({ labelIDs, onChange, isEditable = true }: Labe
                 />
               </GridItem>
               <GridItem>
-                <Text textAlign="right" as="div">
+                <Text as="div" display="flex" alignItems="center" justifyContent="end">
                   {textB}
                   {descriptionB.length > 0 ? <Explain explanation={descriptionB} /> : null}
                 </Text>