From c6d0e931570983504dcb901804614e21b1e6a1d3 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sun, 16 Jul 2023 06:44:05 -0600
Subject: [PATCH] Allow customization of tooltip capitalization (#7172)

---
 web/src/components/Button.jsx  | 3 ++-
 web/src/components/Card.jsx    | 2 +-
 web/src/components/Tooltip.jsx | 8 ++++----
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/web/src/components/Button.jsx b/web/src/components/Button.jsx
index a47f93265..abaf81548 100644
--- a/web/src/components/Button.jsx
+++ b/web/src/components/Button.jsx
@@ -65,6 +65,7 @@ export default function Button({
   className = '',
   color = 'blue',
   disabled = false,
+  ariaCapitalize = false,
   href,
   type = 'contained',
   ...attrs
@@ -107,7 +108,7 @@ export default function Button({
       >
         {children}
       </Element>
-      {hovered && attrs['aria-label'] ? <Tooltip text={attrs['aria-label']} relativeTo={ref} /> : null}
+      {hovered && attrs['aria-label'] ? <Tooltip text={attrs['aria-label']} relativeTo={ref} capitalize={ariaCapitalize} /> : null}
     </Fragment>
   );
 }
diff --git a/web/src/components/Card.jsx b/web/src/components/Card.jsx
index 7b366d98b..43f334d1d 100644
--- a/web/src/components/Card.jsx
+++ b/web/src/components/Card.jsx
@@ -39,7 +39,7 @@ export default function Box({
               ))}
               <div class="flex-grow" />
               {icons.map(({ name, icon: Icon, ...props }) => (
-                <Button aria-label={name} className="rounded-full" key={name} type="text" {...props}>
+                <Button aria-label={name} ariaCapitalize={true} className="rounded-full" key={name} type="text" {...props}>
                   <Icon className="w-6" />
                 </Button>
               ))}
diff --git a/web/src/components/Tooltip.jsx b/web/src/components/Tooltip.jsx
index 58f723ac5..a7da1d29f 100644
--- a/web/src/components/Tooltip.jsx
+++ b/web/src/components/Tooltip.jsx
@@ -4,7 +4,7 @@ import { useLayoutEffect, useRef, useState } from 'preact/hooks';
 
 const TIP_SPACE = 20;
 
-export default function Tooltip({ relativeTo, text }) {
+export default function Tooltip({ relativeTo, text, capitalize }) {
   const [position, setPosition] = useState({ top: -9999, left: -9999 });
   const portalRoot = document.getElementById('tooltips');
   const ref = useRef();
@@ -49,9 +49,9 @@ export default function Tooltip({ relativeTo, text }) {
   const tooltip = (
     <div
       role="tooltip"
-      className={`shadow max-w-lg absolute pointer-events-none bg-gray-900 dark:bg-gray-200 bg-opacity-80 rounded px-2 py-1 transition-transform transition-opacity duration-75 transform scale-90 opacity-0 text-gray-100 dark:text-gray-900 text-sm capitalize ${
-        position.top >= 0 ? 'opacity-100 scale-100' : ''
-      }`}
+      className={`shadow max-w-lg absolute pointer-events-none bg-gray-900 dark:bg-gray-200 bg-opacity-80 rounded px-2 py-1 transition-transform transition-opacity duration-75 transform scale-90 opacity-0 text-gray-100 dark:text-gray-900 text-sm ${
+        capitalize ? 'capitalize' : ''
+      } ${position.top >= 0 ? 'opacity-100 scale-100' : ''}`}
       ref={ref}
       style={position}
     >