From afba69c8bc291d1f56f14994ca162531dbf30314 Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Fri, 8 May 2026 19:44:43 +0200
Subject: [PATCH] "Refactor buttons, grids, and layout components: replace
 custom Button components with `<button>` elements for consistency, update
 dimensions, spacing, and styling for improved UI cohesion across the
 application."

---
 web/components/bio/editable-bio.tsx           |  2 +-
 web/components/filters/search.tsx             |  4 ++-
 web/components/optional-profile-form.tsx      |  2 +-
 web/components/profile-grid.tsx               | 31 +++++++++++--------
 web/components/searches/button.tsx            | 18 ++++++-----
 .../widgets/hide-profile-button.tsx           |  4 +--
 web/components/widgets/show-more.tsx          |  2 +-
 7 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/web/components/bio/editable-bio.tsx b/web/components/bio/editable-bio.tsx
index 133b18b1..a145e584 100644
--- a/web/components/bio/editable-bio.tsx
+++ b/web/components/bio/editable-bio.tsx
@@ -139,7 +139,7 @@ export function SignupBio(props: {
   }, [profile?.bio, editor])
 
   return (
-    <Col className="relative w-full">
+    <Col className="relative w-full -mt-4">
       <BaseBio
         defaultValue={profile?.bio}
         onBlur={(editor) => {
diff --git a/web/components/filters/search.tsx b/web/components/filters/search.tsx
index a33560ad..d4f51c74 100644
--- a/web/components/filters/search.tsx
+++ b/web/components/filters/search.tsx
@@ -234,7 +234,9 @@ export const Search = forwardRef<
             }}
             // size={'xs'}
             color={'none'}
-            className={'text-white bg-primary-500 hover:bg-primary-400 rounded-xl text-xs'}
+            className={
+              'text-white bg-primary-500 hover:bg-primary-400 rounded-xl text-xs transition-colors'
+            }
           >
             <Bell className="h-4 w-4 mr-1 hidden sm:flex" />{' '}
             {bookmarked
diff --git a/web/components/optional-profile-form.tsx b/web/components/optional-profile-form.tsx
index 4bb5a7dd..998b1f77 100644
--- a/web/components/optional-profile-form.tsx
+++ b/web/components/optional-profile-form.tsx
@@ -906,7 +906,7 @@ export const OptionalProfileUserForm = (props: {
             </CustomLink>
             {t(
               'profile.big5_guidance_suffix',
-              '). You can take a well-cited public-domain approximate test ',
+              '). You can take a free well-cited public-domain approximate test ',
             )}
             <CustomLink href={'https://emilywilloughby.com/research/bfas'}>
               {t('profile.big5_test_link', 'here')}
diff --git a/web/components/profile-grid.tsx b/web/components/profile-grid.tsx
index 1229664d..aa5a20d6 100644
--- a/web/components/profile-grid.tsx
+++ b/web/components/profile-grid.tsx
@@ -234,7 +234,7 @@ function ProfilePreview(props: {
   // If this profile was just hidden, render a compact placeholder with Undo action.
   if (isHidden) {
     return (
-      <div className="block rounded-lg border border-canvas-300 bg-canvas-50 dark:bg-gray-800/50 p-3 text-sm">
+      <div className="block rounded-xl border border-canvas-300 bg-canvas-50 dark:bg-gray-800/50 p-3 text-sm">
         <Row className="items-center justify-between gap-2">
           <span className="text-ink-700 dark:text-ink-300">
             {t(
@@ -300,9 +300,9 @@ function ProfilePreview(props: {
   }[cardSize ?? 'medium']
 
   const photoSizeClass = {
-    small: 'w-24 h-auto min-h-24 mt-12',
-    medium: 'w-20 lg:w-28 h-24 self-end lg:h-auto min-h-20 mt-12',
-    large: 'w-48 lg:w-48 h-60 lg:h-auto min-h-48 lg:mt-12',
+    small: 'w-40 h-auto min-h-24',
+    medium: 'w-40 lg:w-40 h-auto lg:h-auto min-h-20',
+    large: 'w-60 lg:w-60 h-60 lg:h-auto min-h-48',
   }[cardSize ?? 'medium']
 
   const cardClass = {
@@ -314,7 +314,7 @@ function ProfilePreview(props: {
   return (
     <div
       className={clsx(
-        'relative overflow-hidden rounded-lg bg-canvas-50',
+        'relative overflow-hidden rounded-xl bg-canvas-50',
         isLoading && 'scale-[0.94] transition-transform duration-[80ms] ease-out',
         !isLoading && 'transition-transform duration-[120ms] ease-in',
       )}
@@ -325,7 +325,7 @@ function ProfilePreview(props: {
         onPointerUp={handlePointerUp}
         onClick={handleClick}
         className={clsx(
-          'relative overflow-hidden rounded-lg bg-canvas-50 person-card',
+          'relative overflow-hidden rounded-xl bg-canvas-50 person-card',
           'border-[1.5px] border-[#E4DDD4]',
           'transition-all duration-[120ms] ease-in',
           'before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[4px]',
@@ -334,17 +334,22 @@ function ProfilePreview(props: {
           'hover:before:opacity-100',
           // 'hover:bg-canvas-100',
           'hover:border-primary-300 hover:shadow-lg',
-          'relative z-10 cursor-pointer group block rounded-lg overflow-hidden bg-transparent h-full border border-canvas-300',
+          'relative z-10 cursor-pointer group block rounded-xl overflow-hidden bg-transparent h-full border border-canvas-300',
           'text-ink-600',
           // hover,
         )}
       >
         {/* Phase 1: Dim overlay */}
         {isLoading && (
-          <div className="absolute inset-0 bg-canvas-100/[0.32] rounded-lg z-20 pointer-events-none" />
+          <div className="absolute inset-0 bg-canvas-100/[0.32] rounded-xl z-20 pointer-events-none" />
         )}
-        <Col className={clsx('relative w-full rounded transition-all')}>
-          <Row className={clsx('absolute top-2 right-2 items-start justify-end px-2 pb-3 z-10')}>
+        <Col className={clsx('relative w-full rounded-xl transition-all text-sm')}>
+          <Row
+            className={clsx(
+              'absolute top-2 right-2 items-start justify-end px-2 pb-3 z-10',
+              isPhotoRendered && (cardSize === 'large' ? 'mr-0 sm:mr-60' : 'mr-40'),
+            )}
+          >
             {compatibilityScore && (
               <CompatibleBadge compatibility={compatibilityScore} className={'pt-1'} />
             )}
@@ -488,7 +493,7 @@ function ProfilePreview(props: {
               </Row>
               {showBio !== false && bio && (
                 <div className="border-l-2 border-gray-200 dark:border-gray-600 pl-3 mt-1">
-                  <Content className="w-full italic" content={bio} />
+                  <Content className="w-full italic text-sm" content={bio} />
                 </div>
               )}
               {isOverflowing && (
@@ -503,7 +508,7 @@ function ProfilePreview(props: {
             {isPhotoRendered && (
               <div
                 className={clsx(
-                  'relative shrink-0 rounded-xl lg:self-stretch overflow-hidden z-1 mx-auto',
+                  'relative shrink-0 rounded-r-xl lg:self-stretch overflow-hidden z-1 mx-auto',
                   photoSizeClass,
                 )}
               >
@@ -524,7 +529,7 @@ function ProfilePreview(props: {
       {/* Phase 2: Animated ring - appears after 200ms */}
       {isLoading && showRing && (
         <div
-          className="absolute inset-0 z-20 pointer-events-none rounded-lg overflow-hidden"
+          className="absolute inset-0 z-20 pointer-events-none rounded-xl overflow-hidden"
           style={{
             padding: '4px',
             WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
diff --git a/web/components/searches/button.tsx b/web/components/searches/button.tsx
index f69ee39f..8a66f7b3 100644
--- a/web/components/searches/button.tsx
+++ b/web/components/searches/button.tsx
@@ -34,15 +34,17 @@ export function BookmarkSearchButton(props: {
   if (!user) return null
   return (
     <>
-      <Button
+      <button
         onClick={() => setOpen(true)}
-        color="gray-outline"
+        // color="gray-outline"
         // size={'xs'}
-        className={'rounded-xl bg-canvas-50  text-xs'}
+        className={
+          'rounded-xl bg-canvas-50 text-xs border-canvas-300 flex items-center gap-1.5 border px-3 py-2 text-ink-500 transition-colors hover:border-primary-400 hover:bg-primary-50'
+        }
       >
         <Star className="h-4 w-4 mr-1 hidden sm:flex" />{' '}
         {t('saved_searches.button', 'Saved Searches')}
-      </Button>
+      </button>
       <ButtonModal
         open={open}
         setOpen={setOpen}
@@ -163,14 +165,16 @@ export function BookmarkStarButton(props: {
   if (!user) return null
   return (
     <>
-      <Button
+      <button
         onClick={() => setOpen(true)}
         color="gray-outline"
         // size={'xs'}
-        className={'rounded-xl bg-canvas-50 text-xs'}
+        className={
+          'rounded-xl bg-canvas-50 text-xs border-canvas-300 flex items-center gap-1.5 border px-3 py-2 text-ink-500 transition-colors hover:border-primary-400 hover:bg-primary-50'
+        }
       >
         <Users className="h-4 w-4 mr-1 hidden sm:flex" /> {t('saved_people.button', 'Saved People')}
-      </Button>
+      </button>
       <StarModal
         open={open}
         setOpen={setOpen}
diff --git a/web/components/widgets/hide-profile-button.tsx b/web/components/widgets/hide-profile-button.tsx
index 0f769681..06435d45 100644
--- a/web/components/widgets/hide-profile-button.tsx
+++ b/web/components/widgets/hide-profile-button.tsx
@@ -91,9 +91,9 @@ export function HideProfileButton(props: HideProfileButtonProps) {
         }
       >
         {hidden || eyeOff ? (
-          <EyeSlashIcon className={clsx('h-5 w-5 guidance', iconClassName)} />
+          <EyeSlashIcon className={clsx('h-4 w-4 guidance', iconClassName)} />
         ) : (
-          <EyeIcon className={clsx('h-5 w-5 guidance', iconClassName)} />
+          <EyeIcon className={clsx('h-4 w-4 guidance', iconClassName)} />
         )}
       </button>
     </Tooltip>
diff --git a/web/components/widgets/show-more.tsx b/web/components/widgets/show-more.tsx
index d84363c6..fdc996c9 100644
--- a/web/components/widgets/show-more.tsx
+++ b/web/components/widgets/show-more.tsx
@@ -12,7 +12,7 @@ export function ShowMore(props: ShowMoreProps) {
   const [showMoreInfo, setShowMoreInfo] = useState(false)
 
   return (
-    <div className={`mt-2 mb-4 ${className ?? ''}`}>
+    <div className={`mt-0 mb-4 ${className ?? ''}`}>
       <button
         type="button"
         onClick={() => setShowMoreInfo(!showMoreInfo)}