chore: Display "reset password" tooltip (#138)

namesakefyi · Oct 20, 2024 · 103e0d9 · 103e0d9
1 parent 5f1387a
commit 103e0d9
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 15 deletions.
diff --git a/.changeset/sour-pumas-shave.md b/.changeset/sour-pumas-shave.md
@@ -0,0 +1,5 @@
+---
+"namesake": patch
+---
+
+Display tooltip on reset password button
diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
@@ -30,16 +30,16 @@ const inputStyles = tv({
 export interface TextFieldProps extends AriaTextFieldProps {
   label?: string;
   description?: string | React.ReactNode;
-  icon?: React.ReactNode;
-  rightIcon?: React.ReactNode;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
   errorMessage?: string | ((validation: ValidationResult) => string);
 }
 
 export function TextField({
   label,
   description,
-  icon,
-  rightIcon,
+  prefix,
+  suffix,
   errorMessage,
   ...props
 }: TextFieldProps) {
@@ -58,9 +58,9 @@ export function TextField({
     >
       {label && <Label>{label}</Label>}
       <FieldGroup className={inputStyles}>
-        {icon}
+        {prefix}
         <Input />
-        {rightIcon}
+        {suffix}
         {props.type === "password" && (
           <TooltipTrigger>
             <Button

diff --git a/src/routes/_authenticated/settings/overview.tsx b/src/routes/_authenticated/settings/overview.tsx
@@ -107,7 +107,7 @@ function SettingsOverviewRoute() {
             value={name}
             onChange={handleUpdateName}
             description="How do you want to be addressed?"
-            rightIcon={textFieldIcon}
+            suffix={textFieldIcon}
           />
           <Switch
             name="isMinor"

diff --git a/src/routes/_unauthenticated/signin.tsx b/src/routes/_unauthenticated/signin.tsx
@@ -10,6 +10,8 @@ import {
   TabPanel,
   Tabs,
   TextField,
+  Tooltip,
+  TooltipTrigger,
 } from "@/components";
 import { useAuthActions } from "@convex-dev/auth/react";
 import { RiArrowLeftSLine } from "@remixicon/react";
@@ -100,14 +102,17 @@ const SignIn = () => {
               name="password"
               type="password"
               isRequired
-              rightIcon={
-                <Button
-                  variant="ghost"
-                  size="small"
-                  onPress={() => setFlow("reset")}
-                >
-                  Forgot?
-                </Button>
+              suffix={
+                <TooltipTrigger>
+                  <Button
+                    variant="ghost"
+                    size="small"
+                    onPress={() => setFlow("reset")}
+                  >
+                    Forgot?
+                  </Button>
+                  <Tooltip>Reset password</Tooltip>
+                </TooltipTrigger>
               }
               value={password}
               onChange={setPassword}