From f92dc79e6d9e43854e0c9832c1ea24591094299a Mon Sep 17 00:00:00 2001
From: Adrian Cowan <othrayte@gmail.com>
Date: Sat, 14 Jan 2023 15:36:22 +1100
Subject: [PATCH] website: Make the more text button clearer

---
 website/src/components/CollapsableText.tsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/website/src/components/CollapsableText.tsx b/website/src/components/CollapsableText.tsx
index ca0177f9..8d2dff56 100644
--- a/website/src/components/CollapsableText.tsx
+++ b/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">