From 2e43e0615f1681edc0a9f3108f137884c931624d Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 27 May 2025 16:47:00 +0100
Subject: [PATCH] Update tell us more

---
 .../UserPersona/UpdatePersonaModal.tsx         |  5 +++--
 src/components/UserPersona/UserPersonaForm.tsx | 18 +++++++++---------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/UserPersona/UpdatePersonaModal.tsx b/src/components/UserPersona/UpdatePersonaModal.tsx
index 7c2444603..26b0a6b81 100644
--- a/src/components/UserPersona/UpdatePersonaModal.tsx
+++ b/src/components/UserPersona/UpdatePersonaModal.tsx
@@ -57,9 +57,10 @@ export function UpdatePersonaModal(props: UpdatePersonaModalProps) {
       bodyClassName="p-4"
     >
       <div className="mb-8 text-left">
-        <h2 className="text-lg font-semibold">Update your persona</h2>
+        <h2 className="text-lg font-semibold">Tell us more about yourself</h2>
         <p className="mt-1 text-sm text-balance text-gray-500">
-          Update your persona to get the best out of the AI Tutor.
+          We'll use this information to help you get the best out of the AI
+          Tutor.
         </p>
       </div>
 
diff --git a/src/components/UserPersona/UserPersonaForm.tsx b/src/components/UserPersona/UserPersonaForm.tsx
index e2b055259..97f6f0eb0 100644
--- a/src/components/UserPersona/UserPersonaForm.tsx
+++ b/src/components/UserPersona/UserPersonaForm.tsx
@@ -1,6 +1,6 @@
 import { useId, useRef, useState } from 'react';
 import { SelectNative } from '../SelectNative';
-import { Loader2Icon, MessageCircle, PlayIcon } from 'lucide-react';
+import { Loader2Icon, MessageCircle } from 'lucide-react';
 import { cn } from '../../lib/classname';
 
 export type UserPersonaFormData = {
@@ -53,7 +53,7 @@ export function UserPersonaForm(props: UserPersonaFormProps) {
           id={expertiseFieldId}
           value={expertise}
           onChange={(e) => setExpertise(e.target.value)}
-          className="border-gray-300 focus:border-gray-500 focus:ring-1 focus:ring-gray-500"
+          className="border-gray-300 text-sm h-[40px] focus:border-gray-500 focus:ring-1 focus:ring-gray-500"
         >
           <option value="" selected hidden>
             Select your expertise
@@ -77,7 +77,7 @@ export function UserPersonaForm(props: UserPersonaFormProps) {
           htmlFor={goalFieldId}
         >
           What is your goal?{' '}
-          {hasInitialGoal && !defaultValues?.goal && `Tell us more (optional)`}
+          {hasInitialGoal && !defaultValues?.goal && `Tell us more`}
         </label>
 
         {!hasInitialGoal && (
@@ -93,7 +93,7 @@ export function UserPersonaForm(props: UserPersonaFormProps) {
             ].map((goalTemplate) => (
               <button
                 key={goalTemplate}
-                className="rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm text-gray-600 shadow-sm transition-all hover:border-gray-300 hover:bg-gray-100 hover:shadow"
+                className="rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm text-gray-600 transition-all hover:border-gray-300 hover:bg-gray-100 hover:border-gray-400"
                 onClick={() => {
                   if (goalTemplate !== 'Other (tell us more)') {
                     setGoal(goalTemplate);
@@ -116,7 +116,7 @@ export function UserPersonaForm(props: UserPersonaFormProps) {
           ref={goalRef}
           id={goalFieldId}
           className={cn(
-            'block min-h-24 w-full resize-none rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm shadow-sm outline-none placeholder:text-gray-400 focus:border-gray-500 focus:ring-1 focus:ring-gray-500',
+            'block min-h-24 w-full resize-none rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm outline-none placeholder:text-gray-400 focus:border-gray-500 focus:ring-1 focus:ring-gray-500',
             !hasInitialGoal && 'hidden',
           )}
           placeholder={`e.g. need to find a job as soon as possible`}
@@ -135,7 +135,7 @@ export function UserPersonaForm(props: UserPersonaFormProps) {
 
         <input
           id={commitFieldId}
-          className="block w-full resize-none rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm shadow-sm outline-none placeholder:text-gray-400 focus:border-gray-500 focus:ring-1 focus:ring-gray-500"
+          className="block w-full resize-none rounded-lg border border-gray-300 bg-white px-4 h-[40px] text-sm outline-none placeholder:text-gray-400 focus:border-gray-500 focus:ring-1 focus:ring-gray-500"
           placeholder="e.g. 10 hours per week"
           value={commit}
           onChange={(e) => setCommit(e.target.value)}
@@ -145,7 +145,7 @@ export function UserPersonaForm(props: UserPersonaFormProps) {
       <button
         disabled={isLoading || !hasFormCompleted}
         type="submit"
-        className="mt-6 flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-black px-6 py-2 text-sm text-white shadow-sm transition-all hover:bg-gray-900 disabled:pointer-events-none disabled:opacity-50"
+        className="mt-6 flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-black px-6 py-2 text-sm text-white transition-all hover:bg-gray-900 disabled:pointer-events-none disabled:opacity-50"
       >
         {isLoading ? (
           <Loader2Icon className="size-4 animate-spin stroke-[2.5]" />
@@ -153,8 +153,8 @@ export function UserPersonaForm(props: UserPersonaFormProps) {
           <>
             {defaultValues ? (
               <>
-                <PlayIcon className="size-4" />
-                Update Persona
+                <MessageCircle className="size-4" />
+                Update Information
               </>
             ) : (
               <>