Merge pull request #697 from othrayte/more-button-more-button

website: Make the more text button clearer

website/src/components/CollapsableText.tsx

@@ -6,6 +6,7 @@ import {
   ModalContent,
   ModalHeader,
   ModalOverlay,
+  useColorModeValue,
   useDisclosure,
 } from "@chakra-ui/react";
 import React, { ReactNode } from "react";
@@ -21,15 +22,27 @@ export const CollapsableText = ({
 }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
+  const moreButtonColor = useColorModeValue("gray.600", "gray.400");
+
   if (typeof text !== "string" || text.length <= maxLength) {
     return <>{text}</>;
   } else {
     return (
       <>
-        {text.substring(0, maxLength - 3)}
-        <Button style={{ display: "contents" }} isDisabled={isDisabled} onClick={onOpen}>
-          ...
-        </Button>
+        <span>
+          {text.substring(0, maxLength - 3)}&nbsp;
+          <Button
+            style={{ display: "inline" }}
+            size={"xs"}
+            variant={"solid"}
+            bg={moreButtonColor}
+            color={"white"}
+            isDisabled={isDisabled}
+            onClick={onOpen}
+          >
+            ...
+          </Button>
+        </span>
         <Modal isOpen={isOpen} onClose={onClose} size="xl" scrollBehavior={"inside"}>
           <ModalOverlay style={{ width: "100%", height: "100%" }}>
             <ModalContent maxH="400">